Refactor: clients → companies schema v2

2026-03-26 23:42:06 -04:00
commit 719209fa25
61 changed files with 8192 additions and 0 deletions
@@ -0,0 +1,95 @@
+import { useState, useEffect } from 'react';
+import Layout from '../../components/Layout';
+import { supabase } from '../../lib/supabase';
+import { generateInvoicePDF } from '../../lib/invoice';
+
+const statusColor = { draft: 'not_started', sent: 'in_progress', paid: 'client_approved' };
+
+export default function MyInvoices() {
+  const [invoices, setInvoices] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function load() {
+      const { data } = await supabase
+        .from('invoices')
+        .select('*, company:companies(name, email), items:invoice_items(*)')
+        .order('created_at', { ascending: false });
+      setInvoices((data || []).filter(inv => inv.status !== 'draft'));
+      setLoading(false);
+    }
+    load();
+  }, []);
+
+  const handleDownload = async (invoice) => {
+    await generateInvoicePDF(invoice, invoice.company, invoice.items || []);
+  };
+
+  const outstanding = invoices.filter(i => i.status === 'sent').reduce((s, i) => s + Number(i.total), 0);
+  const paid = invoices.filter(i => i.status === 'paid').reduce((s, i) => s + Number(i.total), 0);
+
+  return (
+    <Layout>
+      <div className="page-header">
+        <div>
+          <div className="page-title">Invoices</div>
+          <div className="page-subtitle">{invoices.length} invoice{invoices.length !== 1 ? 's' : ''}</div>
+        </div>
+      </div>
+
+      <div className="stats-grid" style={{ marginBottom: 24 }}>
+        <div className="stat-card">
+          <div className="stat-value" style={{ fontSize: 22 }}>${outstanding.toFixed(2)}</div>
+          <div className="stat-label">Outstanding</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value" style={{ fontSize: 22 }}>${paid.toFixed(2)}</div>
+          <div className="stat-label">Paid</div>
+        </div>
+      </div>
+
+      {loading ? (
+        <p style={{ color: 'var(--text-muted)' }}>Loading...</p>
+      ) : invoices.length === 0 ? (
+        <div className="empty-state">
+          <h3>No invoices yet</h3>
+          <p>Your invoices will appear here once they are sent.</p>
+        </div>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+          {invoices.map(inv => {
+            const isOverdue = inv.status !== 'paid' && new Date(inv.due_date) < new Date();
+            return (
+              <div key={inv.id} className="request-card">
+                <div className="request-card-header">
+                  <div>
+                    <div className="request-card-title">{inv.invoice_number}</div>
+                    <div className="request-card-meta">
+                      Issued {new Date(inv.invoice_date).toLocaleDateString()} · Due{' '}
+                      <span style={{ color: isOverdue ? 'var(--danger)' : 'inherit' }}>
+                        {new Date(inv.due_date).toLocaleDateString()}
+                      </span>
+                      {isOverdue && ' · Overdue'}
+                    </div>
+                  </div>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                    <span className={`badge badge-${statusColor[inv.status]}`} style={{ textTransform: 'capitalize' }}>{inv.status}</span>
+                    <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--accent)' }}>${Number(inv.total).toFixed(2)}</div>
+                  </div>
+                </div>
+                {inv.items && inv.items.length > 0 && (
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 10 }}>
+                    {inv.items.map(i => i.description).join(' · ')}
+                  </div>
+                )}
+                <button className="btn btn-outline btn-sm" onClick={() => handleDownload(inv)}>
+                  Download PDF
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </Layout>
+  );
+}