s33

src/lib/InvoicePDF.jsx

@@ -1,12 +1,24 @@
 import React from 'react';
-import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
-
+import { Page, Text, View, Document, StyleSheet, Image, Font } from '@react-pdf/renderer';
+import {localizeTime} from "../lib/localizeTime";
+import { IndianRupee } from "lucide-react";
+import NotoSans from "../lib/fonts/static/NotoSans_Condensed-Bold.ttf";
+Font.register({
+  family: "NotoSans",
+  src: NotoSans,
+});
+// console.log('Fonts', Font)
 // Create styles
-const styles = StyleSheet.create({
+const styles = StyleSheet.create({ 
   page: {
+    display: "flex",
     flexDirection: 'column',
     backgroundColor: '#FFFFFF',
-    padding: 40
+    padding: 40,
+  },
+  currencyValue: {
+    fontSize: 12,
+    fontWeight: 'bold'
   },
   header: {
     flexDirection: 'row',
@@ -14,7 +26,18 @@ const styles = StyleSheet.create({
     marginBottom: 20,
     borderBottomWidth: 2,
     borderBottomColor: '#6d9e37',
-    paddingBottom: 10
+    paddingBottom: 10,
+    alignItems: 'center'
+  },
+  logoContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    marginBottom: 5
+  },
+  logoImage: {
+    width: 30,
+    height: 30
   },
   title: {
     fontSize: 24,
@@ -54,15 +77,18 @@ const styles = StyleSheet.create({
     borderBottomColor: '#EEEEEE'
   },
   col1: {
-    width: '40%'
+    width: '40%',
+    fontSize: '12px'
   },
   col2: {
     width: '30%',
-    textAlign: 'right'
+    textAlign: 'right',
+    fontSize: '12px'
   },
   col3: {
     width: '30%',
-    textAlign: 'right'
+    textAlign: 'right',
+    fontSize: '12px'
   },
   total: {
     flexDirection: 'row',
@@ -90,35 +116,41 @@ const styles = StyleSheet.create({
   }
 });
 
+
+// Base64 encoded SVG logo (replace with your actual logo)
+const SILICONPIN_LOGO = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABgElEQVR4nO3bsW0UURRA0TfYLThEDreatUSGC7BdBi4D0QAiWiQ3g0OTQgvsONiICv4J7pF+PE//jmaiN/vMDpzHWWyfedhnzqvv4sPqi8j/CoIpCKYgmIJgCoIpCKYgmIJgCoIpCKYgmIJgCoIpCKYgmIJgCoIpCKYgmIJgCoIpCKYgmIJgCoIpCKYgmIJgCoIpCKYgmE1Ylvn0eT7+PMzNyhmOv+bv6cf8vlo5xMxsi59/8WW+zjZPi6f4Ns/LZ+iTpSkIpiCYgmAKgikIpiCYgmAKgikIpiCYgmAKgikIpiCYgmAKgikIpiCYgmAKgikIpiCYgmAKgikIpiCYgmAKgikIpiCYbWZ/WD3E3N/dzuFl6cLOvB7/zPfT28zqlZ3Zz8BZvsV1eTH3f6vv4nqULSrDNovvo38IpiCYgmAKgikIpiCYgmAKgikIpiCYgmAKgikIpiCYgmAKgikIpiCYgmAKgikIpiCYgmAKgikIpiCYgmAKgikIpiCYgmDeAd5vHuV+dwDGAAAAAElFTkSuQmCC';
+
 const InvoicePDF = ({ data }) => {
   const statusColor = data.status === 'completed' ? '#10B981' : '#EF4444';
-  
+
   return (
     <Document>
       <Page size="A4" style={styles.page}>
         {/* Header */}
         <View style={styles.header}>
-          <View>
             <Text style={styles.title}>INVOICE</Text>
             <Text style={styles.label}>Invoice #: {data.billing_id}</Text>
-            <Text style={styles.label}>Date: {new Date(data.created_at).toLocaleDateString()}</Text>
-          </View>
-          <View>
-            <Text style={styles.label}>Your Company</Text>
-            <Text style={styles.value}>123 Business Street</Text>
-            <Text style={styles.value}>City, Country</Text>
-            <Text style={styles.value}>contact@yourcompany.com</Text>
-          </View>
+            <Text style={styles.label}>Date: {localizeTime(data.created_at)}</Text>
         </View>
 
         {/* Bill To */}
         <View style={styles.section}>
           <View style={styles.row}>
-            <View>
+            <View style={{display: 'flex', flexDirection: 'row', gap: '10px'}}>
               <Text style={styles.label}>BILL TO:</Text>
-              <Text style={styles.value}>{data.user}</Text>
+              <Text style={styles.value}>{data.name}</Text>
             </View>
-            <View>
+            {
+              data.status === 'completed' && (
+                <View style={{display: 'flex', flexDirection: 'row', gap: '10px'}}>
+                  <Text style={styles.label}>PAID ON:</Text>
+                  <Text style={styles.value}>
+                    {data.payment_date}
+                  </Text>
+                </View>
+              )
+            }
+            <View style={{display: 'flex', flexDirection: 'row', gap: '10px'}}>
               <Text style={styles.label}>STATUS:</Text>
               <Text style={[styles.value, { color: statusColor }]}>
                 {data.status.toUpperCase()}
@@ -133,16 +165,16 @@ const InvoicePDF = ({ data }) => {
         <View style={styles.section}>
           <View style={styles.tableHeader}>
             <Text style={styles.col1}>DESCRIPTION</Text>
-            <Text style={styles.col2}>TENURE</Text>
+            <Text style={styles.col2}>CYCLE</Text>
             <Text style={styles.col3}>AMOUNT</Text>
           </View>
           <View style={styles.tableRow}>
             <Text style={styles.col1}>{data.service}</Text>
-            <Text style={styles.col2}>{data.tenure}</Text>
-            <Text style={styles.col3}>
-              {new Intl.NumberFormat('en-US', {
+            <Text style={styles.col2}>{data.cycle}</Text>
+            <Text style={{fontFamily: 'NotoSans', ...styles.col3}}>
+              {new Intl.NumberFormat('en-IN', {
                 style: 'currency',
-                currency: 'USD'
+                currency: 'INR',
               }).format(parseFloat(data.amount))}
             </Text>
           </View>
@@ -155,30 +187,43 @@ const InvoicePDF = ({ data }) => {
           <View style={{width: '30%'}}>
             <View style={styles.row}>
               <Text style={styles.label}>SUBTOTAL:</Text>
-              <Text style={styles.value}>
-                {new Intl.NumberFormat('en-US', {
+              <Text style={{fontFamily: 'NotoSans', ...styles.value}}>
+                {new Intl.NumberFormat('en-IN', {
                   style: 'currency',
-                  currency: 'USD'
+                  currency: 'INR',
                 }).format(parseFloat(data.amount))}
               </Text>
             </View>
             <View style={styles.row}>
               <Text style={styles.label}>TOTAL:</Text>
-              <Text style={styles.totalText}>
-                {new Intl.NumberFormat('en-US', {
+              <Text style={{fontFamily: 'NotoSans', ...styles.totalText}}>
+                {new Intl.NumberFormat('en-IN', {
                   style: 'currency',
-                  currency: 'USD'
+                  currency: 'INR',
                 }).format(parseFloat(data.amount))}
               </Text>
             </View>
           </View>
         </View>
+        <View style={styles.header} />
+        <View style={{}}>
+            <View style={styles.logoContainer}>
+              <Image 
+                style={styles.logoImage}
+                src={SILICONPIN_LOGO}
+              />
+              <Text style={{fontSize: '12px', fontWeight: 'bold', color: '#6d9e37'}}>SiliconPin, Habra, W.B. 743271, India, contact@siliconpin.com</Text>
+            </View>
+            {/* <Text style={styles.value}></Text>
+            <Text style={styles.value}></Text>
+            <Text style={styles.value}></Text> */}
+          </View>
 
         {/* Footer */}
-        <View style={styles.footer}>
+        {/* <View style={styles.footer}>
           <Text>Thank you for your business!</Text>
-          <Text>Please make payments payable to Your Company</Text>
-        </View>
+          <Text>Please make payments payable to SiliconPin</Text>
+        </View> */}
       </Page>
     </Document>
   );

src/lib/InvoicePDF_V1.jsx

@@ -0,0 +1,219 @@
+import React from 'react';
+import { Page, Text, View, Document, StyleSheet, Image, Font } from '@react-pdf/renderer';
+import {localizeTime} from "../lib/localizeTime";
+import { IndianRupee } from "lucide-react";
+import NotoSans from "../lib/fonts/static/NotoSans_Condensed-Bold.ttf";
+Font.register({
+  family: "NotoSans",
+  src: NotoSans,
+});
+// console.log('Fonts', Font)
+// Create styles
+const styles = StyleSheet.create({ 
+  page: {
+    display: "flex",
+    flexDirection: 'column',
+    backgroundColor: '#FFFFFF',
+    padding: 40,
+  },
+  currencyValue: {
+    fontSize: 12,
+    fontWeight: 'bold'
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 20,
+    borderBottomWidth: 2,
+    borderBottomColor: '#6d9e37',
+    paddingBottom: 10
+  },
+  logoContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    marginBottom: 5
+  },
+  logoImage: {
+    width: 30,
+    height: 30
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#6d9e37'
+  },
+  section: {
+    marginBottom: 20
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 5
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: 'bold'
+  },
+  value: {
+    fontSize: 12
+  },
+  divider: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#EEEEEE',
+    marginVertical: 10
+  },
+  tableHeader: {
+    flexDirection: 'row',
+    backgroundColor: '#F5F5F5',
+    padding: 5,
+    marginBottom: 5
+  },
+  tableRow: {
+    flexDirection: 'row',
+    padding: 5,
+    borderBottomWidth: 1,
+    borderBottomColor: '#EEEEEE'
+  },
+  col1: {
+    width: '40%'
+  },
+  col2: {
+    width: '30%',
+    textAlign: 'right'
+  },
+  col3: {
+    width: '30%',
+    textAlign: 'right'
+  },
+  total: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginTop: 10
+  },
+  totalText: {
+    fontSize: 14,
+    fontWeight: 'bold'
+  },
+  footer: {
+    position: 'absolute',
+    bottom: 30,
+    left: 40,
+    right: 40,
+    textAlign: 'center',
+    fontSize: 10,
+    color: '#999999'
+  },
+  status: {
+    padding: 3,
+    borderRadius: 3,
+    fontSize: 10,
+    fontWeight: 'bold'
+  }
+});
+
+
+// Base64 encoded SVG logo (replace with your actual logo)
+const SILICONPIN_LOGO = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABgElEQVR4nO3bsW0UURRA0TfYLThEDreatUSGC7BdBi4D0QAiWiQ3g0OTQgvsONiICv4J7pF+PE//jmaiN/vMDpzHWWyfedhnzqvv4sPqi8j/CoIpCKYgmIJgCoIpCKYgmIJgCoIpCKYgmIJgCoIpCKYgmIJgCoIpCKYgmIJgCoIpCKYgmIJgCoIpCKYgmIJgCoIpCKYgmE1Ylvn0eT7+PMzNyhmOv+bv6cf8vlo5xMxsi59/8WW+zjZPi6f4Ns/LZ+iTpSkIpiCYgmAKgikIpiCYgmAKgikIpiCYgmAKgikIpiCYgmAKgikIpiCYgmAKgikIpiCYgmAKgikIpiCYgmAKgikIpiCYbWZ/WD3E3N/dzuFl6cLOvB7/zPfT28zqlZ3Zz8BZvsV1eTH3f6vv4nqULSrDNovvo38IpiCYgmAKgikIpiCYgmAKgikIpiCYgmAKgikIpiCYgmAKgikIpiCYgmAKgikIpiCYgmAKgikIpiCYgmAKgikIpiCYgmDeAd5vHuV+dwDGAAAAAElFTkSuQmCC';
+
+const InvoicePDF = ({ data }) => {
+  const statusColor = data.status === 'completed' ? '#10B981' : '#EF4444';
+
+  return (
+    <Document>
+      <Page size="A4" style={styles.page}>
+        {/* Header */}
+        <View style={styles.header}>
+          <View>
+            <Text style={styles.title}>INVOICE</Text>
+            <Text style={styles.label}>Invoice #: {data.billing_id}</Text>
+            <Text style={styles.label}>Date: {localizeTime(data.created_at)}</Text>
+          </View>
+          <View>
+            <View style={styles.logoContainer}>
+              <Image 
+                style={styles.logoImage}
+                src={SILICONPIN_LOGO}
+              />
+              <Text style={styles.title}>SiliconPin</Text>
+            </View>
+            <Text style={styles.value}>121 Lalbari, GourBongo Road</Text>
+            <Text style={styles.value}>Habra, W.B. 743271, India</Text>
+            <Text style={styles.value}>contact@siliconpin.com</Text>
+          </View>
+        </View>
+
+        {/* Bill To */}
+        <View style={styles.section}>
+          <View style={styles.row}>
+            <View>
+              <Text style={styles.label}>BILL TO:</Text>
+              <Text style={styles.value}>{data.name}</Text>
+            </View>
+            <View>
+              <Text style={styles.label}>STATUS:</Text>
+              <Text style={[styles.value, { color: statusColor }]}>
+                {data.status.toUpperCase()}
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        <View style={styles.divider} />
+
+        {/* Items Table */}
+        <View style={styles.section}>
+          <View style={styles.tableHeader}>
+            <Text style={styles.col1}>DESCRIPTION</Text>
+            <Text style={styles.col2}>cycle</Text>
+            <Text style={styles.col3}>AMOUNT</Text>
+          </View>
+          <View style={styles.tableRow}>
+            <Text style={styles.col1}>{data.service}</Text>
+            <Text style={styles.col2}>{data.cycle}</Text>
+            <Text style={{fontFamily: 'NotoSans', ...styles.col3}}>
+              {new Intl.NumberFormat('en-IN', {
+                style: 'currency',
+                currency: 'INR',
+              }).format(parseFloat(data.amount))}
+            </Text>
+          </View>
+        </View>
+
+        <View style={styles.divider} />
+
+        {/* Total */}
+        <View style={styles.total}>
+          <View style={{width: '30%'}}>
+            <View style={styles.row}>
+              <Text style={styles.label}>SUBTOTAL:</Text>
+              <Text style={{fontFamily: 'NotoSans', ...styles.value}}>
+                {new Intl.NumberFormat('en-IN', {
+                  style: 'currency',
+                  currency: 'INR',
+                }).format(parseFloat(data.amount))}
+              </Text>
+            </View>
+            <View style={styles.row}>
+              <Text style={styles.label}>TOTAL:</Text>
+              <Text style={{fontFamily: 'NotoSans', ...styles.totalText}}>
+                {new Intl.NumberFormat('en-IN', {
+                  style: 'currency',
+                  currency: 'INR',
+                }).format(parseFloat(data.amount))}
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        {/* Footer */}
+        <View style={styles.footer}>
+          <Text>Thank you for your business!</Text>
+          <Text>Please make payments payable to SiliconPin</Text>
+        </View>
+      </Page>
+    </Document>
+  );
+};
+
+export default InvoicePDF;

src/lib/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2022 The Noto Project Authors (https://github.com/notofonts/latin-greek-cyrillic)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

src/lib/fonts/README.txt

@@ -0,0 +1,136 @@
+Noto Sans Variable Font
+=======================
+
+This download contains Noto Sans as both variable fonts and static fonts.
+
+Noto Sans is a variable font with these axes:
+  wdth
+  wght
+
+This means all the styles are contained in these files:
+  NotoSans-VariableFont_wdth,wght.ttf
+  NotoSans-Italic-VariableFont_wdth,wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Noto Sans:
+  static/NotoSans_ExtraCondensed-Thin.ttf
+  static/NotoSans_ExtraCondensed-ExtraLight.ttf
+  static/NotoSans_ExtraCondensed-Light.ttf
+  static/NotoSans_ExtraCondensed-Regular.ttf
+  static/NotoSans_ExtraCondensed-Medium.ttf
+  static/NotoSans_ExtraCondensed-SemiBold.ttf
+  static/NotoSans_ExtraCondensed-Bold.ttf
+  static/NotoSans_ExtraCondensed-ExtraBold.ttf
+  static/NotoSans_ExtraCondensed-Black.ttf
+  static/NotoSans_Condensed-Thin.ttf
+  static/NotoSans_Condensed-ExtraLight.ttf
+  static/NotoSans_Condensed-Light.ttf
+  static/NotoSans_Condensed-Regular.ttf
+  static/NotoSans_Condensed-Medium.ttf
+  static/NotoSans_Condensed-SemiBold.ttf
+  static/NotoSans_Condensed-Bold.ttf
+  static/NotoSans_Condensed-ExtraBold.ttf
+  static/NotoSans_Condensed-Black.ttf
+  static/NotoSans_SemiCondensed-Thin.ttf
+  static/NotoSans_SemiCondensed-ExtraLight.ttf
+  static/NotoSans_SemiCondensed-Light.ttf
+  static/NotoSans_SemiCondensed-Regular.ttf
+  static/NotoSans_SemiCondensed-Medium.ttf
+  static/NotoSans_SemiCondensed-SemiBold.ttf
+  static/NotoSans_SemiCondensed-Bold.ttf
+  static/NotoSans_SemiCondensed-ExtraBold.ttf
+  static/NotoSans_SemiCondensed-Black.ttf
+  static/NotoSans-Thin.ttf
+  static/NotoSans-ExtraLight.ttf
+  static/NotoSans-Light.ttf
+  static/NotoSans-Regular.ttf
+  static/NotoSans-Medium.ttf
+  static/NotoSans-SemiBold.ttf
+  static/NotoSans-Bold.ttf
+  static/NotoSans-ExtraBold.ttf
+  static/NotoSans-Black.ttf
+  static/NotoSans_ExtraCondensed-ThinItalic.ttf
+  static/NotoSans_ExtraCondensed-ExtraLightItalic.ttf
+  static/NotoSans_ExtraCondensed-LightItalic.ttf
+  static/NotoSans_ExtraCondensed-Italic.ttf
+  static/NotoSans_ExtraCondensed-MediumItalic.ttf
+  static/NotoSans_ExtraCondensed-SemiBoldItalic.ttf
+  static/NotoSans_ExtraCondensed-BoldItalic.ttf
+  static/NotoSans_ExtraCondensed-ExtraBoldItalic.ttf
+  static/NotoSans_ExtraCondensed-BlackItalic.ttf
+  static/NotoSans_Condensed-ThinItalic.ttf
+  static/NotoSans_Condensed-ExtraLightItalic.ttf
+  static/NotoSans_Condensed-LightItalic.ttf
+  static/NotoSans_Condensed-Italic.ttf
+  static/NotoSans_Condensed-MediumItalic.ttf
+  static/NotoSans_Condensed-SemiBoldItalic.ttf
+  static/NotoSans_Condensed-BoldItalic.ttf
+  static/NotoSans_Condensed-ExtraBoldItalic.ttf
+  static/NotoSans_Condensed-BlackItalic.ttf
+  static/NotoSans_SemiCondensed-ThinItalic.ttf
+  static/NotoSans_SemiCondensed-ExtraLightItalic.ttf
+  static/NotoSans_SemiCondensed-LightItalic.ttf
+  static/NotoSans_SemiCondensed-Italic.ttf
+  static/NotoSans_SemiCondensed-MediumItalic.ttf
+  static/NotoSans_SemiCondensed-SemiBoldItalic.ttf
+  static/NotoSans_SemiCondensed-BoldItalic.ttf
+  static/NotoSans_SemiCondensed-ExtraBoldItalic.ttf
+  static/NotoSans_SemiCondensed-BlackItalic.ttf
+  static/NotoSans-ThinItalic.ttf
+  static/NotoSans-ExtraLightItalic.ttf
+  static/NotoSans-LightItalic.ttf
+  static/NotoSans-Italic.ttf
+  static/NotoSans-MediumItalic.ttf
+  static/NotoSans-SemiBoldItalic.ttf
+  static/NotoSans-BoldItalic.ttf
+  static/NotoSans-ExtraBoldItalic.ttf
+  static/NotoSans-BlackItalic.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

src/lib/localizeTime.tsx

@@ -1,11 +1,11 @@
-export function localizeTime(timeValue: string, targetTimeZone?: string): string {
-    // 1. Auto-detect user's timezone if none provided
+export function localizeTime(timeValue?: string, targetTimeZone?: string): string {
+    if (!timeValue) return 'Invalid date';
+
     if (!targetTimeZone) {
         targetTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     }
 
-    // 2. Format the date in the target timezone
-    const date = new Date(timeValue.replace(' ', 'T') + 'Z'); // Ensure UTC
+    const date = new Date(timeValue.replace(' ', 'T') + 'Z');
     const formatter = new Intl.DateTimeFormat('en-US', {
         timeZone: targetTimeZone,
         year: 'numeric',
@@ -28,10 +28,3 @@ export function localizeTime(timeValue: string, targetTimeZone?: string): string
 
     return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
 }
-
-// Usage:
-// const localTime = localizeTime(ticket.created_at); // Auto-detects timezone
-// console.log(localTime); // "2025-04-03 20:14:50" (in user's local time)
-
-// const timeInTokyo = localizeTime(ticket.created_at, "Asia/Tokyo");
-// console.log(timeInTokyo); // "2025-04-04 05:14:50" (Tokyo time)