Hugging Face's logo

Spaces:
Thennarasu87
/
invoicegenius-ai
Running

App Files Community
Thennarasu87 commited on
Commit
8d57322
·
verified ·
1 Parent(s): 54677d9

Work all pages properly

Browse files
Files changed (5) hide show
  1. components/sidebar.js +2 -2
  2. create-invoice.html +109 -0
  3. index.html +6 -6
  4. invoice/INV-2023-001.html +112 -0
  5. script.js +24 -5
components/sidebar.js CHANGED
@@ -59,8 +59,8 @@ class CustomSidebar extends HTMLElement {
59
  </div>
60
 
61
  <div class="mt-3">
62
- <a href="/ai-processor" class="nav-item flex items-center px-4 py-3 text-gray-700 hover:text-gray-900">
63
- <i data-feather="cpu" class="w-5 h-5 mr-3 text-gray-500"></i>
64
  AI Processor
65
  </a>
66
 
 
59
  </div>
60
 
61
  <div class="mt-3">
62
+ <a href="/create-invoice" class="nav-item flex items-center px-4 py-3 text-gray-700 hover:text-gray-900">
63
+ <i data-feather="cpu" class="w-5 h-5 mr-3 text-gray-500"></i>
64
  AI Processor
65
  </a>
66
 
create-invoice.html ADDED
@@ -0,0 +1,109 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Create New Invoice | InvoiceGenius AI</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="components/navbar.js"></script>
11
+ <script src="components/sidebar.js"></script>
12
+ <script src="components/footer.js"></script>
13
+ </head>
14
+ <body class="bg-gray-50 min-h-screen">
15
+ <custom-navbar></custom-navbar>
16
+ <div class="flex">
17
+ <custom-sidebar></custom-sidebar>
18
+
19
+ <main class="flex-1 p-8">
20
+ <div class="max-w-4xl mx-auto">
21
+ <div class="flex justify-between items-center mb-8">
22
+ <h1 class="text-3xl font-bold text-gray-800">Create New Invoice</h1>
23
+ <div class="flex space-x-3">
24
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center">
25
+ <i data-feather="save" class="mr-2"></i> Save Draft
26
+ </button>
27
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
28
+ <i data-feather="send" class="mr-2"></i> Send Invoice
29
+ </button>
30
+ </div>
31
+ </div>
32
+
33
+ <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-8">
34
+ <div class="px-6 py-4 border-b border-gray-100">
35
+ <h2 class="text-lg font-semibold">Client Information</h2>
36
+ </div>
37
+ <div class="p-6">
38
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
39
+ <div>
40
+ <label class="block text-sm font-medium text-gray-700 mb-1">Client Name</label>
41
+ <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
42
+ </div>
43
+ <div>
44
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
45
+ <input type="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
46
+ </div>
47
+ <div>
48
+ <label class="block text-sm font-medium text-gray-700 mb-1">Invoice Date</label>
49
+ <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
50
+ </div>
51
+ <div>
52
+ <label class="block text-sm font-medium text-gray-700 mb-1">Due Date</label>
53
+ <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
54
+ </div>
55
+ </div>
56
+ </div>
57
+ </div>
58
+
59
+ <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
60
+ <div class="px-6 py-4 border-b border-gray-100">
61
+ <h2 class="text-lg font-semibold">Invoice Items</h2>
62
+ </div>
63
+ <div class="p-6">
64
+ <div class="overflow-x-auto">
65
+ <table class="min-w-full divide-y divide-gray-200">
66
+ <thead class="bg-gray-50">
67
+ <tr>
68
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
69
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quantity</th>
70
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rate</th>
71
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
72
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"></th>
73
+ </tr>
74
+ </thead>
75
+ <tbody class="bg-white divide-y divide-gray-200">
76
+ <tr>
77
+ <td class="px-6 py-4 whitespace-nowrap">
78
+ <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
79
+ </td>
80
+ <td class="px-6 py-4 whitespace-nowrap">
81
+ <input type="number" class="w-20 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" value="1">
82
+ </td>
83
+ <td class="px-6 py-4 whitespace-nowrap">
84
+ <input type="number" class="w-24 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" value="0.00">
85
+ </td>
86
+ <td class="px-6 py-4 whitespace-nowrap">$0.00</td>
87
+ <td class="px-6 py-4 whitespace-nowrap">
88
+ <button class="text-red-500 hover:text-red-700">
89
+ <i data-feather="trash-2"></i>
90
+ </button>
91
+ </td>
92
+ </tr>
93
+ </tbody>
94
+ </table>
95
+ </div>
96
+ <button class="mt-4 text-indigo-600 hover:text-indigo-800 flex items-center">
97
+ <i data-feather="plus" class="mr-2"></i> Add Item
98
+ </button>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </main>
103
+ </div>
104
+
105
+ <custom-footer></custom-footer>
106
+ <script>feather.replace();</script>
107
+ <script src="script.js"></script>
108
+ </body>
109
+ </html>
index.html CHANGED
@@ -21,10 +21,10 @@
21
  <div class="max-w-6xl mx-auto">
22
  <div class="flex justify-between items-center mb-8">
23
  <h1 class="text-3xl font-bold text-gray-800">Dashboard</h1>
24
- <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
25
  <i data-feather="plus" class="mr-2"></i> New Invoice
26
- </button>
27
- </div>
28
 
29
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
30
  <!-- Stats Cards -->
@@ -92,9 +92,9 @@
92
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Paid</span>
93
  </td>
94
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
95
- <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i data-feather="eye"></i></button>
96
- <button class="text-gray-600 hover:text-gray-900"><i data-feather="download"></i></button>
97
- </td>
98
  </tr>
99
  <!-- More rows would go here -->
100
  </tbody>
 
21
  <div class="max-w-6xl mx-auto">
22
  <div class="flex justify-between items-center mb-8">
23
  <h1 class="text-3xl font-bold text-gray-800">Dashboard</h1>
24
+ <a href="/create-invoice" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
25
  <i data-feather="plus" class="mr-2"></i> New Invoice
26
+ </a>
27
+ </div>
28
 
29
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
30
  <!-- Stats Cards -->
 
92
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Paid</span>
93
  </td>
94
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
95
+ <a href="/invoice/INV-2023-001" class="text-indigo-600 hover:text-indigo-900 mr-3"><i data-feather="eye"></i></a>
96
+ <a href="#" class="text-gray-600 hover:text-gray-900"><i data-feather="download"></i></a>
97
+ </td>
98
  </tr>
99
  <!-- More rows would go here -->
100
  </tbody>
invoice/INV-2023-001.html ADDED
@@ -0,0 +1,112 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Invoice INV-2023-001 | InvoiceGenius AI</title>
7
+ <link rel="stylesheet" href="/style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="/components/navbar.js"></script>
11
+ <script src="/components/sidebar.js"></script>
12
+ <script src="/components/footer.js"></script>
13
+ </head>
14
+ <body class="bg-gray-50 min-h-screen">
15
+ <custom-navbar></custom-navbar>
16
+ <div class="flex">
17
+ <custom-sidebar></custom-sidebar>
18
+
19
+ <main class="flex-1 p-8">
20
+ <div class="max-w-4xl mx-auto">
21
+ <div class="flex justify-between items-center mb-8">
22
+ <h1 class="text-3xl font-bold text-gray-800">Invoice #INV-2023-001</h1>
23
+ <div class="flex space-x-3">
24
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center">
25
+ <i data-feather="printer" class="mr-2"></i> Print
26
+ </button>
27
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
28
+ <i data-feather="download" class="mr-2"></i> Download PDF
29
+ </button>
30
+ </div>
31
+ </div>
32
+
33
+ <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-8 p-8">
34
+ <div class="flex justify-between mb-12">
35
+ <div>
36
+ <h2 class="text-2xl font-bold text-indigo-600 mb-1">InvoiceGenius AI</h2>
37
+ <p class="text-gray-500">123 Business Street<br>San Francisco, CA 94107</p>
38
+ </div>
39
+ <div class="text-right">
40
+ <h3 class="text-xl font-bold">Invoice #INV-2023-001</h3>
41
+ <p class="text-gray-500">Date: Oct 12, 2023</p>
42
+ <p class="text-gray-500">Due: Nov 12, 2023</p>
43
+ </div>
44
+ </div>
45
+
46
+ <div class="flex justify-between mb-8">
47
+ <div>
48
+ <h4 class="text-sm font-semibold text-gray-500 uppercase mb-2">Bill To</h4>
49
+ <p class="font-medium">Acme Corporation</p>
50
+ <p class="text-gray-500">123 Client Avenue<br>New York, NY 10001</p>
51
+ </div>
52
+ <div class="text-right">
53
+ <h4 class="text-sm font-semibold text-gray-500 uppercase mb-2">Status</h4>
54
+ <span class="px-3 py-1 rounded-full bg-green-100 text-green-800 font-medium">Paid</span>
55
+ </div>
56
+ </div>
57
+
58
+ <div class="border-t border-gray-200 pt-6 mb-8">
59
+ <table class="w-full">
60
+ <thead>
61
+ <tr class="text-left border-b border-gray-200">
62
+ <th class="pb-2 font-medium text-gray-500">Description</th>
63
+ <th class="pb-2 font-medium text-gray-500 text-right">Qty</th>
64
+ <th class="pb-2 font-medium text-gray-500 text-right">Rate</th>
65
+ <th class="pb-2 font-medium text-gray-500 text-right">Amount</th>
66
+ </tr>
67
+ </thead>
68
+ <tbody>
69
+ <tr class="border-b border-gray-100">
70
+ <td class="py-4">Website Design Services</td>
71
+ <td class="py-4 text-right">1</td>
72
+ <td class="py-4 text-right">$1,000.00</td>
73
+ <td class="py-4 text-right">$1,000.00</td>
74
+ </tr>
75
+ <tr class="border-b border-gray-100">
76
+ <td class="py-4">Website Development</td>
77
+ <td class="py-4 text-right">1</td>
78
+ <td class="py-4 text-right">$1,500.00</td>
79
+ <td class="py-4 text-right">$1,500.00</td>
80
+ </tr>
81
+ </tbody>
82
+ <tfoot>
83
+ <tr>
84
+ <td colspan="3" class="pt-4 text-right font-medium">Subtotal</td>
85
+ <td class="pt-4 text-right">$2,500.00</td>
86
+ </tr>
87
+ <tr>
88
+ <td colspan="3" class="py-1 text-right font-medium">Tax (10%)</td>
89
+ <td class="py-1 text-right">$250.00</td>
90
+ </tr>
91
+ <tr>
92
+ <td colspan="3" class="pt-1 text-right font-bold text-lg">Total</td>
93
+ <td class="pt-1 text-right font-bold text-lg">$2,750.00</td>
94
+ </tr>
95
+ </tfoot>
96
+ </table>
97
+ </div>
98
+
99
+ <div class="bg-gray-50 p-4 rounded-lg">
100
+ <h4 class="font-medium mb-2">Payment Information</h4>
101
+ <p class="text-sm text-gray-500">Payment received via credit card on Oct 15, 2023</p>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </main>
106
+ </div>
107
+
108
+ <custom-footer></custom-footer>
109
+ <script>feather.replace();</script>
110
+ <script src="/script.js"></script>
111
+ </body>
112
+ </html>
script.js CHANGED
@@ -28,14 +28,33 @@ document.addEventListener('DOMContentLoaded', function() {
28
  console.log('Generating invoice...');
29
  });
30
  }
31
-
32
  // Responsive sidebar toggle
33
- const sidebarToggle = document.getElementById('sidebarToggle');
34
- if (sidebarToggle) {
35
- sidebarToggle.addEventListener('click', function() {
36
  document.querySelector('custom-sidebar').classList.toggle('-translate-x-full');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37
  });
38
- }
39
  });
40
 
41
  // AI processing function
 
28
  console.log('Generating invoice...');
29
  });
30
  }
 
31
  // Responsive sidebar toggle
32
+ document.addEventListener('click', function(e) {
33
+ if (e.target.closest('#sidebarToggle')) {
 
34
  document.querySelector('custom-sidebar').classList.toggle('-translate-x-full');
35
+ }
36
+ });
37
+
38
+ // Handle form submissions
39
+ document.querySelectorAll('form').forEach(form => {
40
+ form.addEventListener('submit', function(e) {
41
+ e.preventDefault();
42
+ // Show loading state
43
+ const submitBtn = form.querySelector('button[type="submit"]');
44
+ if (submitBtn) {
45
+ const originalText = submitBtn.innerHTML;
46
+ submitBtn.innerHTML = '<div class="loading-spinner"></div> Processing...';
47
+ submitBtn.disabled = true;
48
+
49
+ // Simulate API call
50
+ setTimeout(() => {
51
+ submitBtn.innerHTML = originalText;
52
+ submitBtn.disabled = false;
53
+ alert('Form submitted successfully!');
54
+ }, 1500);
55
+ }
56
  });
57
+ });
58
  });
59
 
60
  // AI processing function