Ran prettier

frontend-web/README.md

@@ -5,24 +5,28 @@ A modern personal finance management application for tracking net worth, managin
 ## Features
 
 ### Net Worth Tracking
+
 - Track assets (cash, investments, property, vehicles)
 - Track liabilities (mortgages, loans, credit cards)
 - Visualize net worth over time with charts
 - View asset allocation breakdown
 
 ### Debt Management
+
 - Organize debts by custom categories
 - Track multiple accounts per category
 - Monitor paydown progress with visual indicators
 - View by category or individual account
 
 ### Invoicing
+
 - Create and manage invoices
 - Track invoice status (draft, sent, paid, overdue)
 - Manage client database
 - View outstanding and paid totals
 
 ### Cashflow
+
 - Track income sources with various frequencies
 - Categorize expenses (essential vs discretionary)
 - Monitor savings rate

frontend-web/src/components/AddAccountDialog.tsx

@@ -1,19 +1,6 @@
 import {useState} from 'react';
-import {
+import {Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle} from '@/components/ui/dialog';
-  Dialog,
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select';
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import {Button} from '@/components/ui/button';
 import {Input} from '@/components/ui/input';
 import {Label} from '@/components/ui/label';
@@ -38,7 +25,7 @@ export default function AddAccountDialog({open, onOpenChange}: AddAccountDialogP
     interestRate: '',
     minimumPayment: '',
     dueDay: '',
-    notes: '',
+    notes: ''
   });
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -58,7 +45,7 @@ export default function AddAccountDialog({open, onOpenChange}: AddAccountDialogP
       dueDay: parseInt(formData.dueDay) || 1,
       notes: formData.notes || undefined,
       createdAt: now,
-      updatedAt: now,
+      updatedAt: now
     };
 
     dispatch(addAccount(account));
@@ -73,7 +60,7 @@ export default function AddAccountDialog({open, onOpenChange}: AddAccountDialogP
       interestRate: '',
       minimumPayment: '',
       dueDay: '',
-      notes: '',
+      notes: ''
     });
   };
 
@@ -86,9 +73,7 @@ export default function AddAccountDialog({open, onOpenChange}: AddAccountDialogP
       <DialogContent className="card-elevated max-h-[90vh] overflow-y-auto sm:max-w-lg">
         <DialogHeader>
           <DialogTitle>Add Debt Account</DialogTitle>
-          <DialogDescription>
+          <DialogDescription>Add a new debt account to track your payoff progress</DialogDescription>
-            Add a new debt account to track your payoff progress
-          </DialogDescription>
         </DialogHeader>
         <form onSubmit={handleSubmit}>
           <div className="grid gap-4 py-4">
@@ -106,11 +91,7 @@ export default function AddAccountDialog({open, onOpenChange}: AddAccountDialogP
 
             <div className="grid gap-2">
               <Label htmlFor="category">Category</Label>
-              <Select
+              <Select value={formData.categoryId} onValueChange={value => updateField('categoryId', value)} required>
-                value={formData.categoryId}
-                onValueChange={value => updateField('categoryId', value)}
-                required
-              >
                 <SelectTrigger className="input-depth">
                   <SelectValue placeholder="Select a category" />
                 </SelectTrigger>
@@ -236,4 +217,3 @@ export default function AddAccountDialog({open, onOpenChange}: AddAccountDialogP
     </Dialog>
   );
 }
-

frontend-web/src/components/ErrorBoundary.tsx

@@ -47,14 +47,10 @@ export class ErrorBoundary extends Component<Props, State> {
               <CardTitle className="text-red-400">Something went wrong</CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
-              <p className="text-sm text-muted-foreground">
+              <p className="text-sm text-muted-foreground">An unexpected error occurred. Please try refreshing the page.</p>
-                An unexpected error occurred. Please try refreshing the page.
-              </p>
               {import.meta.env.DEV && this.state.error && (
                 <div className="p-3 bg-destructive/10 rounded-md">
-                  <p className="text-xs font-mono text-destructive break-all">
+                  <p className="text-xs font-mono text-destructive break-all">{this.state.error.message}</p>
-                    {this.state.error.message}
-                  </p>
                 </div>
               )}
               <div className="flex gap-2">

frontend-web/src/components/Layout.tsx

@@ -6,7 +6,7 @@ const navItems = [
   {to: '/cashflow', label: 'Cashflow', icon: ArrowLeftRight},
   {to: '/debts', label: 'Debts', icon: CreditCard},
   {to: '/invoices', label: 'Invoices', icon: FileText},
-  {to: '/clients', label: 'Clients', icon: Users},
+  {to: '/clients', label: 'Clients', icon: Users}
 ];
 
 export default function Layout() {
@@ -27,16 +27,11 @@ export default function Layout() {
               to={item.to}
               className={({isActive}) =>
                 `flex h-9 items-center gap-3 rounded-lg px-2.5 transition-colors ${
-                  isActive
+                  isActive ? 'bg-accent text-foreground' : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
-                    ? 'bg-accent text-foreground'
-                    : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
                 }`
-              }
+              }>
-            >
               <item.icon className="h-[18px] w-[18px] shrink-0" />
-              <span className="text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
+              <span className="text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">{item.label}</span>
-                {item.label}
-              </span>
             </NavLink>
           ))}
         </nav>

frontend-web/src/components/dialogs/AddAssetDialog.tsx

@@ -45,13 +45,15 @@ export default function AddAssetDialog({open, onOpenChange}: Props) {
     const valueNum = validatePositiveNumber(form.value);
     if (valueNum === null) return;
 
-    dispatch(addAsset({
+    dispatch(
+      addAsset({
         id: crypto.randomUUID(),
         name: sanitizeString(form.name),
-      type: form.type as typeof assetTypes[number],
+        type: form.type as (typeof assetTypes)[number],
         value: valueNum,
-      updatedAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString()
-    }));
+      })
+    );
     onOpenChange(false);
     setForm({name: '', type: '', value: ''});
     setErrors({name: '', value: ''});
@@ -68,31 +70,57 @@ export default function AddAssetDialog({open, onOpenChange}: Props) {
           <div className="grid gap-4 py-4">
             <div className="grid gap-2">
               <Label htmlFor="name">Name</Label>
-              <Input id="name" placeholder="e.g., Chase Savings" value={form.name} onChange={e => setForm({...form, name: e.target.value})} className="input-depth" required />
+              <Input
+                id="name"
+                placeholder="e.g., Chase Savings"
+                value={form.name}
+                onChange={e => setForm({...form, name: e.target.value})}
+                className="input-depth"
+                required
+              />
               {errors.name && <p className="text-xs text-red-400">{errors.name}</p>}
             </div>
             <div className="grid gap-2">
               <Label>Type</Label>
               <Select value={form.type} onValueChange={v => setForm({...form, type: v})} required>
-                <SelectTrigger className="input-depth"><SelectValue placeholder="Select type" /></SelectTrigger>
+                <SelectTrigger className="input-depth">
+                  <SelectValue placeholder="Select type" />
+                </SelectTrigger>
                 <SelectContent>
-                  {assetTypes.map(t => <SelectItem key={t} value={t} className="capitalize">{t}</SelectItem>)}
+                  {assetTypes.map(t => (
+                    <SelectItem key={t} value={t} className="capitalize">
+                      {t}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </div>
             <div className="grid gap-2">
               <Label htmlFor="value">Value</Label>
-              <Input id="value" type="number" step="0.01" min="0" placeholder="0.00" value={form.value} onChange={e => setForm({...form, value: e.target.value})} className="input-depth" required />
+              <Input
+                id="value"
+                type="number"
+                step="0.01"
+                min="0"
+                placeholder="0.00"
+                value={form.value}
+                onChange={e => setForm({...form, value: e.target.value})}
+                className="input-depth"
+                required
+              />
               {errors.value && <p className="text-xs text-red-400">{errors.value}</p>}
             </div>
           </div>
           <DialogFooter>
-            <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
+            <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-            <Button type="submit" disabled={!form.name || !form.type || !form.value}>Add Asset</Button>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!form.name || !form.type || !form.value}>
+              Add Asset
+            </Button>
           </DialogFooter>
         </form>
       </DialogContent>
     </Dialog>
   );
 }
-

frontend-web/src/components/dialogs/AddClientDialog.tsx

@@ -16,15 +16,17 @@ export default function AddClientDialog({open, onOpenChange}: Props) {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    dispatch(addClient({
+    dispatch(
+      addClient({
         id: crypto.randomUUID(),
         name: form.name,
         email: form.email,
         phone: form.phone || undefined,
         company: form.company || undefined,
         address: form.address || undefined,
-      createdAt: new Date().toISOString(),
+        createdAt: new Date().toISOString()
-    }));
+      })
+    );
     onOpenChange(false);
     setForm({name: '', email: '', phone: '', company: '', address: ''});
   };
@@ -40,15 +42,36 @@ export default function AddClientDialog({open, onOpenChange}: Props) {
           <div className="grid gap-4 py-4">
             <div className="grid gap-2">
               <Label htmlFor="name">Name *</Label>
-              <Input id="name" placeholder="John Doe" value={form.name} onChange={e => setForm({...form, name: e.target.value})} className="input-depth" required />
+              <Input
+                id="name"
+                placeholder="John Doe"
+                value={form.name}
+                onChange={e => setForm({...form, name: e.target.value})}
+                className="input-depth"
+                required
+              />
             </div>
             <div className="grid gap-2">
               <Label htmlFor="email">Email *</Label>
-              <Input id="email" type="email" placeholder="john@example.com" value={form.email} onChange={e => setForm({...form, email: e.target.value})} className="input-depth" required />
+              <Input
+                id="email"
+                type="email"
+                placeholder="john@example.com"
+                value={form.email}
+                onChange={e => setForm({...form, email: e.target.value})}
+                className="input-depth"
+                required
+              />
             </div>
             <div className="grid gap-2">
               <Label htmlFor="company">Company</Label>
-              <Input id="company" placeholder="Acme Inc" value={form.company} onChange={e => setForm({...form, company: e.target.value})} className="input-depth" />
+              <Input
+                id="company"
+                placeholder="Acme Inc"
+                value={form.company}
+                onChange={e => setForm({...form, company: e.target.value})}
+                className="input-depth"
+              />
             </div>
             <div className="grid gap-2">
               <Label htmlFor="phone">Phone</Label>
@@ -56,16 +79,25 @@ export default function AddClientDialog({open, onOpenChange}: Props) {
             </div>
             <div className="grid gap-2">
               <Label htmlFor="address">Address</Label>
-              <Input id="address" placeholder="123 Main St" value={form.address} onChange={e => setForm({...form, address: e.target.value})} className="input-depth" />
+              <Input
+                id="address"
+                placeholder="123 Main St"
+                value={form.address}
+                onChange={e => setForm({...form, address: e.target.value})}
+                className="input-depth"
+              />
             </div>
           </div>
           <DialogFooter>
-            <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
+            <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-            <Button type="submit" disabled={!form.name || !form.email}>Add Client</Button>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!form.name || !form.email}>
+              Add Client
+            </Button>
           </DialogFooter>
         </form>
       </DialogContent>
     </Dialog>
   );
 }
-

frontend-web/src/components/dialogs/AddExpenseDialog.tsx

@@ -20,17 +20,19 @@ export default function AddExpenseDialog({open, onOpenChange}: Props) {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    dispatch(addExpense({
+    dispatch(
+      addExpense({
         id: crypto.randomUUID(),
         name: form.name,
         amount: parseFloat(form.amount) || 0,
-      frequency: form.frequency as typeof frequencies[number],
+        frequency: form.frequency as (typeof frequencies)[number],
         category: form.category,
         nextDate: new Date().toISOString().split('T')[0],
         isActive: true,
         isEssential: form.isEssential,
-      createdAt: new Date().toISOString(),
+        createdAt: new Date().toISOString()
-    }));
+      })
+    );
     onOpenChange(false);
     setForm({name: '', amount: '', frequency: '', category: '', isEssential: false});
   };
@@ -46,19 +48,42 @@ export default function AddExpenseDialog({open, onOpenChange}: Props) {
           <div className="grid gap-4 py-4">
             <div className="grid gap-2">
               <Label htmlFor="name">Name</Label>
-              <Input id="name" placeholder="e.g., Netflix" value={form.name} onChange={e => setForm({...form, name: e.target.value})} className="input-depth" required />
+              <Input
+                id="name"
+                placeholder="e.g., Netflix"
+                value={form.name}
+                onChange={e => setForm({...form, name: e.target.value})}
+                className="input-depth"
+                required
+              />
             </div>
             <div className="grid grid-cols-2 gap-4">
               <div className="grid gap-2">
                 <Label htmlFor="amount">Amount</Label>
-                <Input id="amount" type="number" step="0.01" min="0" placeholder="0.00" value={form.amount} onChange={e => setForm({...form, amount: e.target.value})} className="input-depth" required />
+                <Input
+                  id="amount"
+                  type="number"
+                  step="0.01"
+                  min="0"
+                  placeholder="0.00"
+                  value={form.amount}
+                  onChange={e => setForm({...form, amount: e.target.value})}
+                  className="input-depth"
+                  required
+                />
               </div>
               <div className="grid gap-2">
                 <Label>Frequency</Label>
                 <Select value={form.frequency} onValueChange={v => setForm({...form, frequency: v})} required>
-                  <SelectTrigger className="input-depth"><SelectValue placeholder="Select" /></SelectTrigger>
+                  <SelectTrigger className="input-depth">
+                    <SelectValue placeholder="Select" />
+                  </SelectTrigger>
                   <SelectContent>
-                    {frequencies.map(f => <SelectItem key={f} value={f} className="capitalize">{f}</SelectItem>)}
+                    {frequencies.map(f => (
+                      <SelectItem key={f} value={f} className="capitalize">
+                        {f}
+                      </SelectItem>
+                    ))}
                   </SelectContent>
                 </Select>
               </div>
@@ -66,24 +91,38 @@ export default function AddExpenseDialog({open, onOpenChange}: Props) {
             <div className="grid gap-2">
               <Label>Category</Label>
               <Select value={form.category} onValueChange={v => setForm({...form, category: v})} required>
-                <SelectTrigger className="input-depth"><SelectValue placeholder="Select category" /></SelectTrigger>
+                <SelectTrigger className="input-depth">
+                  <SelectValue placeholder="Select category" />
+                </SelectTrigger>
                 <SelectContent>
-                  {categories.expense.map(c => <SelectItem key={c} value={c}>{c}</SelectItem>)}
+                  {categories.expense.map(c => (
+                    <SelectItem key={c} value={c}>
+                      {c}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </div>
             <label className="flex items-center gap-2 cursor-pointer">
-              <input type="checkbox" checked={form.isEssential} onChange={e => setForm({...form, isEssential: e.target.checked})} className="rounded border-border" />
+              <input
+                type="checkbox"
+                checked={form.isEssential}
+                onChange={e => setForm({...form, isEssential: e.target.checked})}
+                className="rounded border-border"
+              />
               <span className="text-sm">Essential expense (rent, utilities, etc.)</span>
             </label>
           </div>
           <DialogFooter>
-            <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
+            <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-            <Button type="submit" disabled={!form.name || !form.amount || !form.frequency || !form.category}>Add Expense</Button>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!form.name || !form.amount || !form.frequency || !form.category}>
+              Add Expense
+            </Button>
           </DialogFooter>
         </form>
       </DialogContent>
     </Dialog>
   );
 }
-

frontend-web/src/components/dialogs/AddIncomeDialog.tsx

@@ -20,16 +20,18 @@ export default function AddIncomeDialog({open, onOpenChange}: Props) {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    dispatch(addIncomeSource({
+    dispatch(
+      addIncomeSource({
         id: crypto.randomUUID(),
         name: form.name,
         amount: parseFloat(form.amount) || 0,
-      frequency: form.frequency as typeof frequencies[number],
+        frequency: form.frequency as (typeof frequencies)[number],
         category: form.category,
         nextDate: new Date().toISOString().split('T')[0],
         isActive: true,
-      createdAt: new Date().toISOString(),
+        createdAt: new Date().toISOString()
-    }));
+      })
+    );
     onOpenChange(false);
     setForm({name: '', amount: '', frequency: '', category: ''});
   };
@@ -45,19 +47,42 @@ export default function AddIncomeDialog({open, onOpenChange}: Props) {
           <div className="grid gap-4 py-4">
             <div className="grid gap-2">
               <Label htmlFor="name">Name</Label>
-              <Input id="name" placeholder="e.g., Salary" value={form.name} onChange={e => setForm({...form, name: e.target.value})} className="input-depth" required />
+              <Input
+                id="name"
+                placeholder="e.g., Salary"
+                value={form.name}
+                onChange={e => setForm({...form, name: e.target.value})}
+                className="input-depth"
+                required
+              />
             </div>
             <div className="grid grid-cols-2 gap-4">
               <div className="grid gap-2">
                 <Label htmlFor="amount">Amount</Label>
-                <Input id="amount" type="number" step="0.01" min="0" placeholder="0.00" value={form.amount} onChange={e => setForm({...form, amount: e.target.value})} className="input-depth" required />
+                <Input
+                  id="amount"
+                  type="number"
+                  step="0.01"
+                  min="0"
+                  placeholder="0.00"
+                  value={form.amount}
+                  onChange={e => setForm({...form, amount: e.target.value})}
+                  className="input-depth"
+                  required
+                />
               </div>
               <div className="grid gap-2">
                 <Label>Frequency</Label>
                 <Select value={form.frequency} onValueChange={v => setForm({...form, frequency: v})} required>
-                  <SelectTrigger className="input-depth"><SelectValue placeholder="Select" /></SelectTrigger>
+                  <SelectTrigger className="input-depth">
+                    <SelectValue placeholder="Select" />
+                  </SelectTrigger>
                   <SelectContent>
-                    {frequencies.map(f => <SelectItem key={f} value={f} className="capitalize">{f}</SelectItem>)}
+                    {frequencies.map(f => (
+                      <SelectItem key={f} value={f} className="capitalize">
+                        {f}
+                      </SelectItem>
+                    ))}
                   </SelectContent>
                 </Select>
               </div>
@@ -65,20 +90,29 @@ export default function AddIncomeDialog({open, onOpenChange}: Props) {
             <div className="grid gap-2">
               <Label>Category</Label>
               <Select value={form.category} onValueChange={v => setForm({...form, category: v})} required>
-                <SelectTrigger className="input-depth"><SelectValue placeholder="Select category" /></SelectTrigger>
+                <SelectTrigger className="input-depth">
+                  <SelectValue placeholder="Select category" />
+                </SelectTrigger>
                 <SelectContent>
-                  {categories.income.map(c => <SelectItem key={c} value={c}>{c}</SelectItem>)}
+                  {categories.income.map(c => (
+                    <SelectItem key={c} value={c}>
+                      {c}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </div>
           </div>
           <DialogFooter>
-            <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
+            <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-            <Button type="submit" disabled={!form.name || !form.amount || !form.frequency || !form.category}>Add Income</Button>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!form.name || !form.amount || !form.frequency || !form.category}>
+              Add Income
+            </Button>
           </DialogFooter>
         </form>
       </DialogContent>
     </Dialog>
   );
 }
-

frontend-web/src/components/dialogs/AddInvoiceDialog.tsx

@@ -18,7 +18,7 @@ export default function AddInvoiceDialog({open, onOpenChange}: Props) {
     clientId: '',
     description: '',
     amount: '',
-    dueDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
+    dueDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
   });
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -27,26 +27,30 @@ export default function AddInvoiceDialog({open, onOpenChange}: Props) {
     const invoiceNumber = `INV-${new Date().getFullYear()}-${String(Math.floor(Math.random() * 1000)).padStart(3, '0')}`;
     const amount = parseFloat(form.amount) || 0;
 
-    dispatch(addInvoice({
+    dispatch(
+      addInvoice({
         id: crypto.randomUUID(),
         invoiceNumber,
         clientId: form.clientId,
         status: 'draft',
         issueDate: now.split('T')[0],
         dueDate: form.dueDate,
-      lineItems: [{
+        lineItems: [
+          {
             id: crypto.randomUUID(),
             description: form.description,
             quantity: 1,
             unitPrice: amount,
-        total: amount,
+            total: amount
-      }],
+          }
+        ],
         subtotal: amount,
         tax: 0,
         total: amount,
         createdAt: now,
-      updatedAt: now,
+        updatedAt: now
-    }));
+      })
+    );
     onOpenChange(false);
     setForm({clientId: '', description: '', amount: '', dueDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]});
   };
@@ -63,34 +67,67 @@ export default function AddInvoiceDialog({open, onOpenChange}: Props) {
             <div className="grid gap-2">
               <Label>Client</Label>
               <Select value={form.clientId} onValueChange={v => setForm({...form, clientId: v})} required>
-                <SelectTrigger className="input-depth"><SelectValue placeholder="Select client" /></SelectTrigger>
+                <SelectTrigger className="input-depth">
+                  <SelectValue placeholder="Select client" />
+                </SelectTrigger>
                 <SelectContent>
-                  {clients.map(c => <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>)}
+                  {clients.map(c => (
+                    <SelectItem key={c.id} value={c.id}>
+                      {c.name}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </div>
             <div className="grid gap-2">
               <Label htmlFor="description">Description</Label>
-              <Input id="description" placeholder="e.g., Web Development Services" value={form.description} onChange={e => setForm({...form, description: e.target.value})} className="input-depth" required />
+              <Input
+                id="description"
+                placeholder="e.g., Web Development Services"
+                value={form.description}
+                onChange={e => setForm({...form, description: e.target.value})}
+                className="input-depth"
+                required
+              />
             </div>
             <div className="grid grid-cols-2 gap-4">
               <div className="grid gap-2">
                 <Label htmlFor="amount">Amount</Label>
-                <Input id="amount" type="number" step="0.01" min="0" placeholder="0.00" value={form.amount} onChange={e => setForm({...form, amount: e.target.value})} className="input-depth" required />
+                <Input
+                  id="amount"
+                  type="number"
+                  step="0.01"
+                  min="0"
+                  placeholder="0.00"
+                  value={form.amount}
+                  onChange={e => setForm({...form, amount: e.target.value})}
+                  className="input-depth"
+                  required
+                />
               </div>
               <div className="grid gap-2">
                 <Label htmlFor="dueDate">Due Date</Label>
-                <Input id="dueDate" type="date" value={form.dueDate} onChange={e => setForm({...form, dueDate: e.target.value})} className="input-depth" required />
+                <Input
+                  id="dueDate"
+                  type="date"
+                  value={form.dueDate}
+                  onChange={e => setForm({...form, dueDate: e.target.value})}
+                  className="input-depth"
+                  required
+                />
               </div>
             </div>
           </div>
           <DialogFooter>
-            <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
+            <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-            <Button type="submit" disabled={!form.clientId || !form.description || !form.amount}>Create Invoice</Button>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!form.clientId || !form.description || !form.amount}>
+              Create Invoice
+            </Button>
           </DialogFooter>
         </form>
       </DialogContent>
     </Dialog>
   );
 }
-

frontend-web/src/components/dialogs/AddLiabilityDialog.tsx

@@ -19,13 +19,15 @@ export default function AddLiabilityDialog({open, onOpenChange}: Props) {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    dispatch(addLiability({
+    dispatch(
+      addLiability({
         id: crypto.randomUUID(),
         name: form.name,
-      type: form.type as typeof liabilityTypes[number],
+        type: form.type as (typeof liabilityTypes)[number],
         balance: parseFloat(form.balance) || 0,
-      updatedAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString()
-    }));
+      })
+    );
     onOpenChange(false);
     setForm({name: '', type: '', balance: ''});
   };
@@ -41,29 +43,55 @@ export default function AddLiabilityDialog({open, onOpenChange}: Props) {
           <div className="grid gap-4 py-4">
             <div className="grid gap-2">
               <Label htmlFor="name">Name</Label>
-              <Input id="name" placeholder="e.g., Car Loan" value={form.name} onChange={e => setForm({...form, name: e.target.value})} className="input-depth" required />
+              <Input
+                id="name"
+                placeholder="e.g., Car Loan"
+                value={form.name}
+                onChange={e => setForm({...form, name: e.target.value})}
+                className="input-depth"
+                required
+              />
             </div>
             <div className="grid gap-2">
               <Label>Type</Label>
               <Select value={form.type} onValueChange={v => setForm({...form, type: v})} required>
-                <SelectTrigger className="input-depth"><SelectValue placeholder="Select type" /></SelectTrigger>
+                <SelectTrigger className="input-depth">
+                  <SelectValue placeholder="Select type" />
+                </SelectTrigger>
                 <SelectContent>
-                  {liabilityTypes.map(t => <SelectItem key={t} value={t} className="capitalize">{t.replace('_', ' ')}</SelectItem>)}
+                  {liabilityTypes.map(t => (
+                    <SelectItem key={t} value={t} className="capitalize">
+                      {t.replace('_', ' ')}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </div>
             <div className="grid gap-2">
               <Label htmlFor="balance">Balance</Label>
-              <Input id="balance" type="number" step="0.01" min="0" placeholder="0.00" value={form.balance} onChange={e => setForm({...form, balance: e.target.value})} className="input-depth" required />
+              <Input
+                id="balance"
+                type="number"
+                step="0.01"
+                min="0"
+                placeholder="0.00"
+                value={form.balance}
+                onChange={e => setForm({...form, balance: e.target.value})}
+                className="input-depth"
+                required
+              />
             </div>
           </div>
           <DialogFooter>
-            <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
+            <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-            <Button type="submit" disabled={!form.name || !form.type || !form.balance}>Add Liability</Button>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!form.name || !form.type || !form.balance}>
+              Add Liability
+            </Button>
           </DialogFooter>
         </form>
       </DialogContent>
     </Dialog>
   );
 }
-

frontend-web/src/components/dialogs/AddTransactionDialog.tsx

@@ -18,14 +18,16 @@ export default function AddTransactionDialog({open, onOpenChange}: Props) {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    dispatch(addTransaction({
+    dispatch(
+      addTransaction({
         id: crypto.randomUUID(),
         type: form.type,
         name: form.name,
         amount: parseFloat(form.amount) || 0,
         category: form.category,
-      date: form.date,
+        date: form.date
-    }));
+      })
+    );
     onOpenChange(false);
     setForm({type: 'expense', name: '', amount: '', category: '', date: new Date().toISOString().split('T')[0]});
   };
@@ -44,7 +46,9 @@ export default function AddTransactionDialog({open, onOpenChange}: Props) {
             <div className="grid gap-2">
               <Label>Type</Label>
               <Select value={form.type} onValueChange={v => setForm({...form, type: v as 'income' | 'expense', category: ''})}>
-                <SelectTrigger className="input-depth"><SelectValue /></SelectTrigger>
+                <SelectTrigger className="input-depth">
+                  <SelectValue />
+                </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="income">Income</SelectItem>
                   <SelectItem value="expense">Expense</SelectItem>
@@ -53,12 +57,29 @@ export default function AddTransactionDialog({open, onOpenChange}: Props) {
             </div>
             <div className="grid gap-2">
               <Label htmlFor="name">Description</Label>
-              <Input id="name" placeholder="e.g., Groceries" value={form.name} onChange={e => setForm({...form, name: e.target.value})} className="input-depth" required />
+              <Input
+                id="name"
+                placeholder="e.g., Groceries"
+                value={form.name}
+                onChange={e => setForm({...form, name: e.target.value})}
+                className="input-depth"
+                required
+              />
             </div>
             <div className="grid grid-cols-2 gap-4">
               <div className="grid gap-2">
                 <Label htmlFor="amount">Amount</Label>
-                <Input id="amount" type="number" step="0.01" min="0" placeholder="0.00" value={form.amount} onChange={e => setForm({...form, amount: e.target.value})} className="input-depth" required />
+                <Input
+                  id="amount"
+                  type="number"
+                  step="0.01"
+                  min="0"
+                  placeholder="0.00"
+                  value={form.amount}
+                  onChange={e => setForm({...form, amount: e.target.value})}
+                  className="input-depth"
+                  required
+                />
               </div>
               <div className="grid gap-2">
                 <Label htmlFor="date">Date</Label>
@@ -68,20 +89,29 @@ export default function AddTransactionDialog({open, onOpenChange}: Props) {
             <div className="grid gap-2">
               <Label>Category</Label>
               <Select value={form.category} onValueChange={v => setForm({...form, category: v})} required>
-                <SelectTrigger className="input-depth"><SelectValue placeholder="Select category" /></SelectTrigger>
+                <SelectTrigger className="input-depth">
+                  <SelectValue placeholder="Select category" />
+                </SelectTrigger>
                 <SelectContent>
-                  {categoryList.map(c => <SelectItem key={c} value={c}>{c}</SelectItem>)}
+                  {categoryList.map(c => (
+                    <SelectItem key={c} value={c}>
+                      {c}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </div>
           </div>
           <DialogFooter>
-            <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
+            <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-            <Button type="submit" disabled={!form.name || !form.amount || !form.category}>Add Transaction</Button>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!form.name || !form.amount || !form.category}>
+              Add Transaction
+            </Button>
           </DialogFooter>
         </form>
       </DialogContent>
     </Dialog>
   );
 }
-

frontend-web/src/components/dialogs/EditAssetDialog.tsx

@@ -25,7 +25,7 @@ export default function EditAssetDialog({open, onOpenChange, asset}: Props) {
       setForm({
         name: asset.name,
         type: asset.type,
-        value: asset.value.toString(),
+        value: asset.value.toString()
       });
       setErrors({name: '', value: ''});
     }
@@ -57,13 +57,15 @@ export default function EditAssetDialog({open, onOpenChange, asset}: Props) {
     const valueNum = validatePositiveNumber(form.value);
     if (valueNum === null) return;
 
-    dispatch(updateAsset({
+    dispatch(
+      updateAsset({
         id: asset.id,
         name: form.name.trim(),
-      type: form.type as typeof assetTypes[number],
+        type: form.type as (typeof assetTypes)[number],
         value: valueNum,
-      updatedAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString()
-    }));
+      })
+    );
     onOpenChange(false);
   };
 
@@ -101,9 +103,15 @@ export default function EditAssetDialog({open, onOpenChange, asset}: Props) {
             <div className="grid gap-2">
               <Label>Type</Label>
               <Select value={form.type} onValueChange={v => setForm({...form, type: v})} required>
-                <SelectTrigger className="input-depth"><SelectValue placeholder="Select type" /></SelectTrigger>
+                <SelectTrigger className="input-depth">
+                  <SelectValue placeholder="Select type" />
+                </SelectTrigger>
                 <SelectContent>
-                  {assetTypes.map(t => <SelectItem key={t} value={t} className="capitalize">{t}</SelectItem>)}
+                  {assetTypes.map(t => (
+                    <SelectItem key={t} value={t} className="capitalize">
+                      {t}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </div>
@@ -128,7 +136,9 @@ export default function EditAssetDialog({open, onOpenChange, asset}: Props) {
               Delete
             </Button>
             <div className="flex gap-2">
-              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
+              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
               <Button type="submit">Save Changes</Button>
             </div>
           </DialogFooter>

frontend-web/src/components/dialogs/EditClientDialog.tsx

@@ -20,7 +20,7 @@ export default function EditClientDialog({open, onOpenChange, client}: Props) {
     phone: '',
     company: '',
     address: '',
-    notes: '',
+    notes: ''
   });
   const [errors, setErrors] = useState({name: '', email: '', phone: ''});
 
@@ -32,7 +32,7 @@ export default function EditClientDialog({open, onOpenChange, client}: Props) {
         phone: client.phone || '',
         company: client.company || '',
         address: client.address || '',
-        notes: client.notes || '',
+        notes: client.notes || ''
       });
       setErrors({name: '', email: '', phone: ''});
     }
@@ -65,7 +65,8 @@ export default function EditClientDialog({open, onOpenChange, client}: Props) {
     e.preventDefault();
     if (!client || !validate()) return;
 
-    dispatch(updateClient({
+    dispatch(
+      updateClient({
         id: client.id,
         name: sanitizeString(form.name),
         email: sanitizeString(form.email),
@@ -73,8 +74,9 @@ export default function EditClientDialog({open, onOpenChange, client}: Props) {
         company: form.company ? sanitizeString(form.company) : undefined,
         address: form.address ? sanitizeString(form.address) : undefined,
         notes: form.notes ? sanitizeString(form.notes) : undefined,
-      createdAt: client.createdAt,
+        createdAt: client.createdAt
-    }));
+      })
+    );
     onOpenChange(false);
   };
 
@@ -99,13 +101,7 @@ export default function EditClientDialog({open, onOpenChange, client}: Props) {
           <div className="grid gap-4 py-4 max-h-[60vh] overflow-y-auto">
             <div className="grid gap-2">
               <Label htmlFor="edit-name">Name *</Label>
-              <Input
+              <Input id="edit-name" value={form.name} onChange={e => setForm({...form, name: e.target.value})} className="input-depth" required />
-                id="edit-name"
-                value={form.name}
-                onChange={e => setForm({...form, name: e.target.value})}
-                className="input-depth"
-                required
-              />
               {errors.name && <p className="text-xs text-red-400">{errors.name}</p>}
             </div>
             <div className="grid gap-2">
@@ -122,41 +118,20 @@ export default function EditClientDialog({open, onOpenChange, client}: Props) {
             </div>
             <div className="grid gap-2">
               <Label htmlFor="edit-phone">Phone</Label>
-              <Input
+              <Input id="edit-phone" type="tel" value={form.phone} onChange={e => setForm({...form, phone: e.target.value})} className="input-depth" />
-                id="edit-phone"
-                type="tel"
-                value={form.phone}
-                onChange={e => setForm({...form, phone: e.target.value})}
-                className="input-depth"
-              />
               {errors.phone && <p className="text-xs text-red-400">{errors.phone}</p>}
             </div>
             <div className="grid gap-2">
               <Label htmlFor="edit-company">Company</Label>
-              <Input
+              <Input id="edit-company" value={form.company} onChange={e => setForm({...form, company: e.target.value})} className="input-depth" />
-                id="edit-company"
-                value={form.company}
-                onChange={e => setForm({...form, company: e.target.value})}
-                className="input-depth"
-              />
             </div>
             <div className="grid gap-2">
               <Label htmlFor="edit-address">Address</Label>
-              <Input
+              <Input id="edit-address" value={form.address} onChange={e => setForm({...form, address: e.target.value})} className="input-depth" />
-                id="edit-address"
-                value={form.address}
-                onChange={e => setForm({...form, address: e.target.value})}
-                className="input-depth"
-              />
             </div>
             <div className="grid gap-2">
               <Label htmlFor="edit-notes">Notes</Label>
-              <Input
+              <Input id="edit-notes" value={form.notes} onChange={e => setForm({...form, notes: e.target.value})} className="input-depth" />
-                id="edit-notes"
-                value={form.notes}
-                onChange={e => setForm({...form, notes: e.target.value})}
-                className="input-depth"
-              />
             </div>
           </div>
           <DialogFooter className="flex justify-between sm:justify-between">
@@ -164,7 +139,9 @@ export default function EditClientDialog({open, onOpenChange, client}: Props) {
               Delete
             </Button>
             <div className="flex gap-2">
-              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
+              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
               <Button type="submit">Save Changes</Button>
             </div>
           </DialogFooter>

frontend-web/src/components/dialogs/EditLiabilityDialog.tsx

@@ -25,7 +25,7 @@ export default function EditLiabilityDialog({open, onOpenChange, liability}: Pro
       setForm({
         name: liability.name,
         type: liability.type,
-        balance: liability.balance.toString(),
+        balance: liability.balance.toString()
       });
       setErrors({name: '', balance: ''});
     }
@@ -57,13 +57,15 @@ export default function EditLiabilityDialog({open, onOpenChange, liability}: Pro
     const balanceNum = validatePositiveNumber(form.balance);
     if (balanceNum === null) return;
 
-    dispatch(updateLiability({
+    dispatch(
+      updateLiability({
         id: liability.id,
         name: form.name.trim(),
-      type: form.type as typeof liabilityTypes[number],
+        type: form.type as (typeof liabilityTypes)[number],
         balance: balanceNum,
-      updatedAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString()
-    }));
+      })
+    );
     onOpenChange(false);
   };
 
@@ -101,7 +103,9 @@ export default function EditLiabilityDialog({open, onOpenChange, liability}: Pro
             <div className="grid gap-2">
               <Label>Type</Label>
               <Select value={form.type} onValueChange={v => setForm({...form, type: v})} required>
-                <SelectTrigger className="input-depth"><SelectValue placeholder="Select type" /></SelectTrigger>
+                <SelectTrigger className="input-depth">
+                  <SelectValue placeholder="Select type" />
+                </SelectTrigger>
                 <SelectContent>
                   {liabilityTypes.map(t => (
                     <SelectItem key={t} value={t} className="capitalize">
@@ -132,7 +136,9 @@ export default function EditLiabilityDialog({open, onOpenChange, liability}: Pro
               Delete
             </Button>
             <div className="flex gap-2">
-              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
+              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
               <Button type="submit">Save Changes</Button>
             </div>
           </DialogFooter>

frontend-web/src/components/dialogs/InvoiceDetailsDialog.tsx

@@ -18,7 +18,7 @@ const statusColors: Record<Invoice['status'], string> = {
   sent: 'text-blue-400',
   paid: 'text-green-400',
   overdue: 'text-red-400',
-  cancelled: 'text-gray-500',
+  cancelled: 'text-gray-500'
 };
 
 export default function InvoiceDetailsDialog({open, onOpenChange, invoice, clients}: Props) {
@@ -57,9 +57,7 @@ export default function InvoiceDetailsDialog({open, onOpenChange, invoice, clien
         <DialogHeader>
           <DialogTitle className="flex items-center justify-between">
             <span>Invoice {invoice.invoiceNumber}</span>
-            <span className={`text-sm font-normal capitalize ${statusColors[invoice.status]}`}>
+            <span className={`text-sm font-normal capitalize ${statusColors[invoice.status]}`}>{invoice.status}</span>
-              {invoice.status}
-            </span>
           </DialogTitle>
           <DialogDescription>View invoice details and update status</DialogDescription>
         </DialogHeader>
@@ -124,7 +122,7 @@ export default function InvoiceDetailsDialog({open, onOpenChange, invoice, clien
           {/* Status Update */}
           <div>
             <p className="text-xs text-muted-foreground mb-2">Update Status</p>
-            <Select value={selectedStatus} onValueChange={(v) => setSelectedStatus(v as Invoice['status'])}>
+            <Select value={selectedStatus} onValueChange={v => setSelectedStatus(v as Invoice['status'])}>
               <SelectTrigger className="input-depth">
                 <SelectValue />
               </SelectTrigger>
@@ -147,11 +145,7 @@ export default function InvoiceDetailsDialog({open, onOpenChange, invoice, clien
             <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
               Close
             </Button>
-            <Button
+            <Button type="button" onClick={handleStatusChange} disabled={selectedStatus === invoice.status}>
-              type="button"
-              onClick={handleStatusChange}
-              disabled={selectedStatus === invoice.status}
-            >
               Update Status
             </Button>
           </div>

frontend-web/src/components/ui/button.tsx

@@ -1,40 +1,37 @@
-import * as React from "react"
+import * as React from 'react';
-import { Slot } from "@radix-ui/react-slot"
+import {Slot} from '@radix-ui/react-slot';
-import { cva, type VariantProps } from "class-variance-authority"
+import {cva, type VariantProps} from 'class-variance-authority';
 
-import { cn } from "@/lib/utils"
+import {cn} from '@/lib/utils';
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
+        outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        secondary:
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        link: 'text-primary underline-offset-4 hover:underline'
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: "size-9",
+        icon: 'size-9',
-        "icon-sm": "size-8",
+        'icon-sm': 'size-8',
-        "icon-lg": "size-10",
+        'icon-lg': 'size-10'
-      },
+      }
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
-      size: "default",
+      size: 'default'
-    },
     }
-)
+  }
+);
 
 function Button({
   className,
@@ -42,19 +39,13 @@ function Button({
   size,
   asChild = false,
   ...props
-}: React.ComponentProps<"button"> &
+}: React.ComponentProps<'button'> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
+    asChild?: boolean;
   }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : 'button';
 
-  return (
+  return <Comp data-slot="button" className={cn(buttonVariants({variant, size, className}))} {...props} />;
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
 }
 
-export { Button, buttonVariants }
+export {Button, buttonVariants};

frontend-web/src/components/ui/card.tsx

@@ -1,92 +1,42 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import {cn} from '@/lib/utils';
 
-function Card({ className, ...props }: React.ComponentProps<"div">) {
+function Card({className, ...props}: React.ComponentProps<'div'>) {
-  return (
+  return <div data-slot="card" className={cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', className)} {...props} />;
-    <div
-      data-slot="card"
-      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      )}
-      {...props}
-    />
-  )
 }
 
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+function CardHeader({className, ...props}: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-header"
       className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+function CardTitle({className, ...props}: React.ComponentProps<'div'>) {
-  return (
+  return <div data-slot="card-title" className={cn('leading-none font-semibold', className)} {...props} />;
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  )
 }
 
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+function CardDescription({className, ...props}: React.ComponentProps<'div'>) {
-  return (
+  return <div data-slot="card-description" className={cn('text-muted-foreground text-sm', className)} {...props} />;
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
 }
 
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+function CardAction({className, ...props}: React.ComponentProps<'div'>) {
-  return (
+  return <div data-slot="card-action" className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)} {...props} />;
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
 }
 
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+function CardContent({className, ...props}: React.ComponentProps<'div'>) {
-  return (
+  return <div data-slot="card-content" className={cn('px-6', className)} {...props} />;
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  )
 }
 
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+function CardFooter({className, ...props}: React.ComponentProps<'div'>) {
-  return (
+  return <div data-slot="card-footer" className={cn('flex items-center px-6 [.border-t]:pt-6', className)} {...props} />;
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  )
 }
 
-export {
+export {Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent};
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}

frontend-web/src/components/ui/dialog.tsx

@@ -1,47 +1,36 @@
-import * as React from "react"
+import * as React from 'react';
-import * as DialogPrimitive from "@radix-ui/react-dialog"
+import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { XIcon } from "lucide-react"
+import {XIcon} from 'lucide-react';
 
-import { cn } from "@/lib/utils"
+import {cn} from '@/lib/utils';
 
-function Dialog({
+function Dialog({...props}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  ...props
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
 }
 
-function DialogTrigger({
+function DialogTrigger({...props}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  ...props
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 }
 
-function DialogPortal({
+function DialogPortal({...props}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  ...props
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
 }
 
-function DialogClose({
+function DialogClose({...props}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  ...props
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
 }
 
-function DialogOverlay({
+function DialogOverlay({className, ...props}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
   return (
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogContent({
@@ -50,7 +39,7 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
+  showCloseButton?: boolean;
 }) {
   return (
     <DialogPortal data-slot="dialog-portal">
@@ -58,84 +47,38 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
           className
         )}
-        {...props}
+        {...props}>
-      >
         {children}
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
-          >
             <XIcon />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         )}
       </DialogPrimitive.Content>
     </DialogPortal>
-  )
+  );
 }
 
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+function DialogHeader({className, ...props}: React.ComponentProps<'div'>) {
-  return (
+  return <div data-slot="dialog-header" className={cn('flex flex-col gap-2 text-center sm:text-left', className)} {...props} />;
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
 }
 
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+function DialogFooter({className, ...props}: React.ComponentProps<'div'>) {
-  return (
+  return <div data-slot="dialog-footer" className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />;
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
 }
 
-function DialogTitle({
+function DialogTitle({className, ...props}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  className,
+  return <DialogPrimitive.Title data-slot="dialog-title" className={cn('text-lg leading-none font-semibold', className)} {...props} />;
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  )
 }
 
-function DialogDescription({
+function DialogDescription({className, ...props}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  className,
+  return <DialogPrimitive.Description data-slot="dialog-description" className={cn('text-muted-foreground text-sm', className)} {...props} />;
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
 }
 
-export {
+export {Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger};
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-}

frontend-web/src/components/ui/input.tsx

@@ -1,21 +1,21 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import {cn} from '@/lib/utils';
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+function Input({className, type, ...props}: React.ComponentProps<'input'>) {
   return (
     <input
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Input }
+export {Input};

frontend-web/src/components/ui/label.tsx

@@ -1,22 +1,19 @@
-import * as React from "react"
+import * as React from 'react';
-import * as LabelPrimitive from "@radix-ui/react-label"
+import * as LabelPrimitive from '@radix-ui/react-label';
 
-import { cn } from "@/lib/utils"
+import {cn} from '@/lib/utils';
 
-function Label({
+function Label({className, ...props}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
   return (
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Label }
+export {Label};

frontend-web/src/components/ui/select.tsx

@@ -1,36 +1,30 @@
-"use client"
+'use client';
 
-import * as React from "react"
+import * as React from 'react';
-import * as SelectPrimitive from "@radix-ui/react-select"
+import * as SelectPrimitive from '@radix-ui/react-select';
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import {CheckIcon, ChevronDownIcon, ChevronUpIcon} from 'lucide-react';
 
-import { cn } from "@/lib/utils"
+import {cn} from '@/lib/utils';
 
-function Select({
+function Select({...props}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  ...props
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
 }
 
-function SelectGroup({
+function SelectGroup({...props}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  ...props
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
 }
 
-function SelectValue({
+function SelectValue({...props}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  ...props
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
 }
 
 function SelectTrigger({
   className,
-  size = "default",
+  size = 'default',
   children,
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
+  size?: 'sm' | 'default';
 }) {
   return (
     <SelectPrimitive.Trigger
@@ -40,71 +34,45 @@ function SelectTrigger({
         "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
-      {...props}
+      {...props}>
-    >
       {children}
       <SelectPrimitive.Icon asChild>
         <ChevronDownIcon className="size-4 opacity-50" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
-  )
+  );
 }
 
-function SelectContent({
+function SelectContent({className, children, position = 'popper', align = 'center', ...props}: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  className,
-  children,
-  position = "popper",
-  align = "center",
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
   return (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
-          position === "popper" &&
+          position === 'popper' &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           className
         )}
         position={position}
         align={align}
-        {...props}
+        {...props}>
-      >
         <SelectScrollUpButton />
         <SelectPrimitive.Viewport
-          className={cn(
+          className={cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1')}>
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
-          )}
-        >
           {children}
         </SelectPrimitive.Viewport>
         <SelectScrollDownButton />
       </SelectPrimitive.Content>
     </SelectPrimitive.Portal>
-  )
+  );
 }
 
-function SelectLabel({
+function SelectLabel({className, ...props}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  className,
+  return <SelectPrimitive.Label data-slot="select-label" className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)} {...props} />;
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-      {...props}
-    />
-  )
 }
 
-function SelectItem({
+function SelectItem({className, children, ...props}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
   return (
     <SelectPrimitive.Item
       data-slot="select-item"
@@ -112,8 +80,7 @@ function SelectItem({
         "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
-      {...props}
+      {...props}>
-    >
       <span className="absolute right-2 flex size-3.5 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
           <CheckIcon className="size-4" />
@@ -121,67 +88,33 @@ function SelectItem({
       </span>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
     </SelectPrimitive.Item>
-  )
+  );
 }
 
-function SelectSeparator({
+function SelectSeparator({className, ...props}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  className,
+  return <SelectPrimitive.Separator data-slot="select-separator" className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)} {...props} />;
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
 }
 
-function SelectScrollUpButton({
+function SelectScrollUpButton({className, ...props}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
   return (
     <SelectPrimitive.ScrollUpButton
       data-slot="select-scroll-up-button"
-      className={cn(
+      className={cn('flex cursor-default items-center justify-center py-1', className)}
-        "flex cursor-default items-center justify-center py-1",
+      {...props}>
-        className
-      )}
-      {...props}
-    >
       <ChevronUpIcon className="size-4" />
     </SelectPrimitive.ScrollUpButton>
-  )
+  );
 }
 
-function SelectScrollDownButton({
+function SelectScrollDownButton({className, ...props}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
   return (
     <SelectPrimitive.ScrollDownButton
       data-slot="select-scroll-down-button"
-      className={cn(
+      className={cn('flex cursor-default items-center justify-center py-1', className)}
-        "flex cursor-default items-center justify-center py-1",
+      {...props}>
-        className
-      )}
-      {...props}
-    >
       <ChevronDownIcon className="size-4" />
     </SelectPrimitive.ScrollDownButton>
-  )
+  );
 }
 
-export {
+export {Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue};
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}

frontend-web/src/components/ui/separator.tsx

@@ -1,26 +1,21 @@
-import * as React from "react"
+import * as React from 'react';
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
-import { cn } from "@/lib/utils"
+import {cn} from '@/lib/utils';
 
-function Separator({
+function Separator({className, orientation = 'horizontal', decorative = true, ...props}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
   return (
     <SeparatorPrimitive.Root
       data-slot="separator"
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Separator }
+export {Separator};

frontend-web/src/components/ui/tooltip.tsx

@@ -1,61 +1,42 @@
-"use client"
+'use client';
 
-import * as React from "react"
+import * as React from 'react';
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
-import { cn } from "@/lib/utils"
+import {cn} from '@/lib/utils';
 
-function TooltipProvider({
+function TooltipProvider({delayDuration = 0, ...props}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  delayDuration = 0,
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  )
 }
 
-function Tooltip({
+function Tooltip({...props}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
   return (
     <TooltipProvider>
       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
     </TooltipProvider>
-  )
+  );
 }
 
-function TooltipTrigger({
+function TooltipTrigger({...props}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  ...props
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
 }
 
-function TooltipContent({
+function TooltipContent({className, sideOffset = 0, children, ...props}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
           className
         )}
-        {...props}
+        {...props}>
-      >
         {children}
         <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
-  )
+  );
 }
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export {Tooltip, TooltipTrigger, TooltipContent, TooltipProvider};

frontend-web/src/fonts.d.ts

@@ -2,4 +2,3 @@ declare module '@fontsource-variable/geist';
 declare module '@fontsource-variable/oxanium';
 declare module '@fontsource-variable/funnel-sans';
 declare module '@fontsource-variable/inter';
-

frontend-web/src/index.css

@@ -1,5 +1,5 @@
 @import 'tailwindcss';
-@import "tw-animate-css";
+@import 'tw-animate-css';
 
 @custom-variant dark (&:is(.dark *));
 
@@ -124,7 +124,12 @@
     -moz-osx-font-smoothing: grayscale;
     letter-spacing: -0.01em;
   }
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     font-family: 'Funnel Sans Variable', system-ui, sans-serif;
     letter-spacing: -0.02em;
   }

frontend-web/src/lib/formatters.ts

@@ -6,7 +6,7 @@ export const formatCurrency = (value: number, options?: {maximumFractionDigits?:
   return new Intl.NumberFormat('en-US', {
     style: 'currency',
     currency: 'USD',
-    maximumFractionDigits: options?.maximumFractionDigits ?? 0,
+    maximumFractionDigits: options?.maximumFractionDigits ?? 0
   }).format(value);
 };
 

frontend-web/src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
+import {clsx, type ClassValue} from 'clsx';
-import { twMerge } from "tailwind-merge"
+import {twMerge} from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }

frontend-web/src/pages/CashflowPage.tsx

@@ -14,12 +14,18 @@ export default function CashflowPage() {
 
   const getMonthlyAmount = (amount: number, frequency: string) => {
     switch (frequency) {
-      case 'weekly': return amount * 4.33;
+      case 'weekly':
-      case 'biweekly': return amount * 2.17;
+        return amount * 4.33;
-      case 'monthly': return amount;
+      case 'biweekly':
-      case 'quarterly': return amount / 3;
+        return amount * 2.17;
-      case 'yearly': return amount / 12;
+      case 'monthly':
-      default: return 0;
+        return amount;
+      case 'quarterly':
+        return amount / 3;
+      case 'yearly':
+        return amount / 12;
+      default:
+        return 0;
     }
   };
 
@@ -30,11 +36,16 @@ export default function CashflowPage() {
 
   const fmt = (value: number) => new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD', maximumFractionDigits: 0}).format(value);
 
-  const expensesByCategory = expenses.filter(e => e.isActive).reduce((acc, e) => {
+  const expensesByCategory = expenses
+    .filter(e => e.isActive)
+    .reduce(
+      (acc, e) => {
         const monthly = getMonthlyAmount(e.amount, e.frequency);
         acc[e.category] = (acc[e.category] || 0) + monthly;
         return acc;
-  }, {} as Record<string, number>);
+      },
+      {} as Record<string, number>
+    );
 
   const sortedCategories = Object.entries(expensesByCategory).sort((a, b) => b[1] - a[1]);
   const topExpenses = expenses.filter(e => e.isActive).sort((a, b) => getMonthlyAmount(b.amount, b.frequency) - getMonthlyAmount(a.amount, a.frequency));
@@ -46,15 +57,29 @@ export default function CashflowPage() {
         <div className="flex items-center gap-6">
           <h1 className="text-lg font-semibold">Cashflow</h1>
           <div className="flex gap-4 text-sm">
-            <div><span className="text-muted-foreground">Income</span> <span className="font-medium text-green-400">{fmt(monthlyIncome)}</span></div>
+            <div>
-            <div><span className="text-muted-foreground">Expenses</span> <span className="font-medium">{fmt(monthlyExpenses)}</span></div>
+              <span className="text-muted-foreground">Income</span> <span className="font-medium text-green-400">{fmt(monthlyIncome)}</span>
-            <div><span className="text-muted-foreground">Net</span> <span className={`font-semibold ${monthlySavings >= 0 ? 'text-green-400' : 'text-red-400'}`}>{fmt(monthlySavings)}</span></div>
+            </div>
-            <div><span className="text-muted-foreground">Savings</span> <span className={`font-medium ${savingsRate >= 20 ? 'text-green-400' : ''}`}>{savingsRate.toFixed(0)}%</span></div>
+            <div>
+              <span className="text-muted-foreground">Expenses</span> <span className="font-medium">{fmt(monthlyExpenses)}</span>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Net</span>{' '}
+              <span className={`font-semibold ${monthlySavings >= 0 ? 'text-green-400' : 'text-red-400'}`}>{fmt(monthlySavings)}</span>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Savings</span>{' '}
+              <span className={`font-medium ${savingsRate >= 20 ? 'text-green-400' : ''}`}>{savingsRate.toFixed(0)}%</span>
+            </div>
           </div>
         </div>
         <div className="flex gap-2">
-          <Button variant="secondary" size="sm" onClick={() => setIncomeDialogOpen(true)}>Add Income</Button>
+          <Button variant="secondary" size="sm" onClick={() => setIncomeDialogOpen(true)}>
-          <Button size="sm" onClick={() => setExpenseDialogOpen(true)}>Add Expense</Button>
+            Add Income
+          </Button>
+          <Button size="sm" onClick={() => setExpenseDialogOpen(true)}>
+            Add Expense
+          </Button>
         </div>
       </div>
 
@@ -66,7 +91,9 @@ export default function CashflowPage() {
           </CardHeader>
           <CardContent className="p-3 pt-0">
             <div className="space-y-3">
-              {incomeSources.filter(i => i.isActive).map(income => (
+              {incomeSources
+                .filter(i => i.isActive)
+                .map(income => (
                   <div key={income.id} className="flex justify-between items-baseline">
                     <div>
                       <p className="text-sm font-medium">{income.name}</p>
@@ -106,7 +133,9 @@ export default function CashflowPage() {
         <Card className="card-elevated col-span-4">
           <CardHeader className="flex flex-row items-center justify-between p-3 pb-2">
             <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Recent Activity</CardTitle>
-            <Button variant="ghost" size="sm" className="h-5 px-2 text-xs" onClick={() => setTransactionDialogOpen(true)}>+</Button>
+            <Button variant="ghost" size="sm" className="h-5 px-2 text-xs" onClick={() => setTransactionDialogOpen(true)}>
+              +
+            </Button>
           </CardHeader>
           <CardContent className="p-3 pt-0">
             <div className="space-y-2">
@@ -117,7 +146,8 @@ export default function CashflowPage() {
                     <p className="text-xs text-muted-foreground">{tx.date}</p>
                   </div>
                   <span className={`text-sm font-medium tabular-nums ${tx.type === 'income' ? 'text-green-400' : ''}`}>
-                    {tx.type === 'income' ? '+' : '−'}{fmt(tx.amount)}
+                    {tx.type === 'income' ? '+' : '−'}
+                    {fmt(tx.amount)}
                   </span>
                 </div>
               ))}
@@ -168,7 +198,10 @@ export default function CashflowPage() {
                 <span className={`font-medium ${savingsRate >= 20 ? 'text-green-400' : ''}`}>{savingsRate.toFixed(1)}%</span>
               </div>
               <div className="h-2 rounded-full bg-foreground/10 overflow-hidden">
-                <div className={`h-full rounded-full ${savingsRate >= 20 ? 'bg-green-400/50' : 'bg-foreground/30'}`} style={{width: `${Math.min(savingsRate, 100)}%`}} />
+                <div
+                  className={`h-full rounded-full ${savingsRate >= 20 ? 'bg-green-400/50' : 'bg-foreground/30'}`}
+                  style={{width: `${Math.min(savingsRate, 100)}%`}}
+                />
               </div>
             </div>
           </CardContent>

frontend-web/src/pages/ClientsPage.tsx

@@ -34,12 +34,20 @@ export default function ClientsPage() {
         <div className="flex items-center gap-6">
           <h1 className="text-lg font-semibold">Clients</h1>
           <div className="flex gap-4 text-sm">
-            <div><span className="text-muted-foreground">Total Clients</span> <span className="font-medium">{clients.length}</span></div>
+            <div>
-            <div><span className="text-muted-foreground">Total Billed</span> <span className="font-medium">{formatCurrency(totalBilled)}</span></div>
+              <span className="text-muted-foreground">Total Clients</span> <span className="font-medium">{clients.length}</span>
-            <div><span className="text-muted-foreground">Outstanding</span> <span className="font-medium">{formatCurrency(totalOutstanding)}</span></div>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Total Billed</span> <span className="font-medium">{formatCurrency(totalBilled)}</span>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Outstanding</span> <span className="font-medium">{formatCurrency(totalOutstanding)}</span>
             </div>
           </div>
-        <Button size="sm" onClick={() => setDialogOpen(true)}>Add Client</Button>
+        </div>
+        <Button size="sm" onClick={() => setDialogOpen(true)}>
+          Add Client
+        </Button>
       </div>
 
       {/* Clients Grid */}
@@ -47,20 +55,14 @@ export default function ClientsPage() {
         {clients.map(client => {
           const stats = getClientStats(client.id);
           return (
-            <Card
+            <Card key={client.id} className="card-elevated cursor-pointer hover:bg-accent/30 transition-colors" onClick={() => handleEditClient(client)}>
-              key={client.id}
-              className="card-elevated cursor-pointer hover:bg-accent/30 transition-colors"
-              onClick={() => handleEditClient(client)}
-            >
               <CardContent className="p-4">
                 <div className="flex justify-between items-start mb-2">
                   <div>
                     <p className="font-medium">{client.name}</p>
                     <p className="text-xs text-muted-foreground">{client.company || client.email}</p>
                   </div>
-                  {stats.outstanding > 0 && (
+                  {stats.outstanding > 0 && <span className="text-xs text-yellow-400">{formatCurrency(stats.outstanding)} due</span>}
-                    <span className="text-xs text-yellow-400">{formatCurrency(stats.outstanding)} due</span>
-                  )}
                 </div>
                 <div className="flex gap-4 text-sm">
                   <div>

frontend-web/src/pages/DebtsPage.tsx

@@ -22,7 +22,8 @@ export default function DebtsPage() {
   const getCategoryById = (id: string) => categories.find(c => c.id === id);
   const getAccountsByCategory = (categoryId: string) => accounts.filter(a => a.categoryId === categoryId);
   const getCategoryTotal = (categoryId: string) => getAccountsByCategory(categoryId).reduce((sum, a) => sum + a.currentBalance, 0);
-  const getProgress = (account: DebtAccount) => account.originalBalance > 0 ? ((account.originalBalance - account.currentBalance) / account.originalBalance) * 100 : 0;
+  const getProgress = (account: DebtAccount) =>
+    account.originalBalance > 0 ? ((account.originalBalance - account.currentBalance) / account.originalBalance) * 100 : 0;
 
   const categoriesWithDebt = categories.filter(c => getCategoryTotal(c.id) > 0);
 
@@ -33,9 +34,15 @@ export default function DebtsPage() {
         <div className="flex items-center gap-6">
           <h1 className="text-lg font-semibold">Debts</h1>
           <div className="flex gap-4 text-sm">
-            <div><span className="text-muted-foreground">Total</span> <span className="font-medium">{fmt(totalDebt)}</span></div>
+            <div>
-            <div><span className="text-muted-foreground">Paid</span> <span className="font-medium text-green-400">{fmt(totalPaidDown)}</span></div>
+              <span className="text-muted-foreground">Total</span> <span className="font-medium">{fmt(totalDebt)}</span>
-            <div><span className="text-muted-foreground">Monthly</span> <span className="font-medium">{fmt(totalMinPayment)}</span></div>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Paid</span> <span className="font-medium text-green-400">{fmt(totalPaidDown)}</span>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Monthly</span> <span className="font-medium">{fmt(totalMinPayment)}</span>
+            </div>
             <div className="flex items-center gap-1.5">
               <div className="h-1.5 w-16 rounded-full bg-secondary overflow-hidden">
                 <div className="h-full bg-green-400/60" style={{width: `${overallProgress}%`}} />
@@ -46,10 +53,16 @@ export default function DebtsPage() {
         </div>
         <div className="flex gap-2">
           <div className="flex gap-0.5 rounded bg-secondary p-0.5">
-            <button onClick={() => setViewMode('category')} className={`px-2 py-1 text-xs rounded ${viewMode === 'category' ? 'bg-background' : ''}`}>Category</button>
+            <button onClick={() => setViewMode('category')} className={`px-2 py-1 text-xs rounded ${viewMode === 'category' ? 'bg-background' : ''}`}>
-            <button onClick={() => setViewMode('account')} className={`px-2 py-1 text-xs rounded ${viewMode === 'account' ? 'bg-background' : ''}`}>Account</button>
+              Category
+            </button>
+            <button onClick={() => setViewMode('account')} className={`px-2 py-1 text-xs rounded ${viewMode === 'account' ? 'bg-background' : ''}`}>
+              Account
+            </button>
           </div>
-          <Button size="sm" onClick={() => setAddDialogOpen(true)}>Add Account</Button>
+          <Button size="sm" onClick={() => setAddDialogOpen(true)}>
+            Add Account
+          </Button>
         </div>
       </div>
 
@@ -107,7 +120,9 @@ export default function DebtsPage() {
                   <div className="flex justify-between items-start mb-2">
                     <div>
                       <p className="font-medium">{account.name}</p>
-                      <p className="text-xs text-muted-foreground">{account.institution} · {category?.name}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {account.institution} · {category?.name}
+                      </p>
                     </div>
                     <span className="text-xs text-muted-foreground">{account.interestRate}%</span>
                   </div>

frontend-web/src/pages/InvoicesPage.tsx

@@ -25,7 +25,7 @@ export default function InvoicesPage() {
     overdue: invoices.filter(i => i.status === 'overdue'),
     sent: invoices.filter(i => i.status === 'sent'),
     draft: invoices.filter(i => i.status === 'draft'),
-    paid: invoices.filter(i => i.status === 'paid').slice(0, 5),
+    paid: invoices.filter(i => i.status === 'paid').slice(0, 5)
   };
 
   const handleViewInvoice = (invoice: Invoice) => {
@@ -40,14 +40,26 @@ export default function InvoicesPage() {
         <div className="flex items-center gap-6">
           <h1 className="text-lg font-semibold">Invoices</h1>
           <div className="flex gap-4 text-sm">
-            <div><span className="text-muted-foreground">Outstanding</span> <span className="font-medium">{formatCurrency(totalOutstanding)}</span></div>
+            <div>
-            <div><span className="text-muted-foreground">Paid</span> <span className="font-medium text-green-400">{formatCurrency(totalPaid)}</span></div>
+              <span className="text-muted-foreground">Outstanding</span> <span className="font-medium">{formatCurrency(totalOutstanding)}</span>
-            {overdueCount > 0 && <div><span className="text-red-400 font-medium">{overdueCount} overdue</span></div>}
+            </div>
+            <div>
+              <span className="text-muted-foreground">Paid</span> <span className="font-medium text-green-400">{formatCurrency(totalPaid)}</span>
+            </div>
+            {overdueCount > 0 && (
+              <div>
+                <span className="text-red-400 font-medium">{overdueCount} overdue</span>
+              </div>
+            )}
           </div>
         </div>
         <div className="flex gap-2">
-          <Button variant="secondary" size="sm" onClick={() => setClientDialogOpen(true)}>Add Client</Button>
+          <Button variant="secondary" size="sm" onClick={() => setClientDialogOpen(true)}>
-          <Button size="sm" onClick={() => setInvoiceDialogOpen(true)}>New Invoice</Button>
+            Add Client
+          </Button>
+          <Button size="sm" onClick={() => setInvoiceDialogOpen(true)}>
+            New Invoice
+          </Button>
         </div>
       </div>
 
@@ -66,8 +78,7 @@ export default function InvoicesPage() {
                   <div
                     key={inv.id}
                     className="text-sm py-1 border-b border-border last:border-0 cursor-pointer hover:bg-accent/30 px-1 rounded transition-colors"
-                    onClick={() => handleViewInvoice(inv)}
+                    onClick={() => handleViewInvoice(inv)}>
-                  >
                     <div className="flex justify-between">
                       <span className="font-medium">{inv.invoiceNumber}</span>
                       <span className="font-medium">{formatCurrency(inv.total)}</span>
@@ -94,8 +105,7 @@ export default function InvoicesPage() {
                   <div
                     key={inv.id}
                     className="text-sm py-1 border-b border-border last:border-0 cursor-pointer hover:bg-accent/30 px-1 rounded transition-colors"
-                    onClick={() => handleViewInvoice(inv)}
+                    onClick={() => handleViewInvoice(inv)}>
-                  >
                     <div className="flex justify-between">
                       <span className="font-medium">{inv.invoiceNumber}</span>
                       <span className="font-medium">{formatCurrency(inv.total)}</span>
@@ -125,8 +135,7 @@ export default function InvoicesPage() {
                   <div
                     key={inv.id}
                     className="text-sm py-1 border-b border-border last:border-0 cursor-pointer hover:bg-accent/30 px-1 rounded transition-colors"
-                    onClick={() => handleViewInvoice(inv)}
+                    onClick={() => handleViewInvoice(inv)}>
-                  >
                     <div className="flex justify-between">
                       <span className="font-medium">{inv.invoiceNumber}</span>
                       <span className="font-medium">{formatCurrency(inv.total)}</span>
@@ -153,8 +162,7 @@ export default function InvoicesPage() {
                   <div
                     key={inv.id}
                     className="text-sm py-1 border-b border-border last:border-0 cursor-pointer hover:bg-accent/30 px-1 rounded transition-colors"
-                    onClick={() => handleViewInvoice(inv)}
+                    onClick={() => handleViewInvoice(inv)}>
-                  >
                     <div className="flex justify-between">
                       <span className="font-medium">{inv.invoiceNumber}</span>
                       <span className="font-medium">{formatCurrency(inv.total)}</span>
@@ -170,12 +178,7 @@ export default function InvoicesPage() {
 
       <AddClientDialog open={clientDialogOpen} onOpenChange={setClientDialogOpen} />
       <AddInvoiceDialog open={invoiceDialogOpen} onOpenChange={setInvoiceDialogOpen} />
-      <InvoiceDetailsDialog
+      <InvoiceDetailsDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen} invoice={selectedInvoice} clients={clients} />
-        open={detailsDialogOpen}
-        onOpenChange={setDetailsDialogOpen}
-        invoice={selectedInvoice}
-        clients={clients}
-      />
     </div>
   );
 }

frontend-web/src/pages/NetWorthPage.tsx

@@ -23,7 +23,7 @@ export default function NetWorthPage() {
 
   const chartData = snapshots.map(s => ({
     month: format(new Date(s.date), 'MMM'),
-    netWorth: s.netWorth,
+    netWorth: s.netWorth
   }));
 
   const totalAssets = assets.reduce((sum, a) => sum + a.value, 0);
@@ -39,7 +39,7 @@ export default function NetWorthPage() {
       date: new Date().toISOString().split('T')[0],
       totalAssets,
       totalLiabilities,
-      netWorth,
+      netWorth
     };
     dispatch(addSnapshot(snapshot));
   };
@@ -61,12 +61,20 @@ export default function NetWorthPage() {
         <div className="flex items-center gap-6">
           <h1 className="text-lg font-semibold">Net Worth</h1>
           <div className="flex gap-4 text-sm">
-            <div><span className="text-muted-foreground">Assets</span> <span className="font-medium">{formatCurrency(totalAssets)}</span></div>
+            <div>
-            <div><span className="text-muted-foreground">Liabilities</span> <span className="font-medium">{formatCurrency(totalLiabilities)}</span></div>
+              <span className="text-muted-foreground">Assets</span> <span className="font-medium">{formatCurrency(totalAssets)}</span>
-            <div><span className="text-muted-foreground">Net</span> <span className="font-semibold text-base">{formatCurrency(netWorth)}</span></div>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Liabilities</span> <span className="font-medium">{formatCurrency(totalLiabilities)}</span>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Net</span> <span className="font-semibold text-base">{formatCurrency(netWorth)}</span>
             </div>
           </div>
-        <Button size="sm" onClick={handleRecordSnapshot}>Record Snapshot</Button>
+        </div>
+        <Button size="sm" onClick={handleRecordSnapshot}>
+          Record Snapshot
+        </Button>
       </div>
 
       <div className="grid grid-cols-3 gap-4">
@@ -83,7 +91,14 @@ export default function NetWorthPage() {
                     </linearGradient>
                   </defs>
                   <XAxis dataKey="month" stroke="oklch(0.5 0 0)" tick={{fill: 'oklch(0.5 0 0)', fontSize: 10}} axisLine={false} tickLine={false} />
-                  <YAxis stroke="oklch(0.5 0 0)" tick={{fill: 'oklch(0.5 0 0)', fontSize: 10}} tickFormatter={v => `$${v / 1000}k`} axisLine={false} tickLine={false} width={45} />
+                  <YAxis
+                    stroke="oklch(0.5 0 0)"
+                    tick={{fill: 'oklch(0.5 0 0)', fontSize: 10}}
+                    tickFormatter={v => `$${v / 1000}k`}
+                    axisLine={false}
+                    tickLine={false}
+                    width={45}
+                  />
                   <Tooltip
                     contentStyle={{background: 'oklch(0.28 0.01 260)', border: '1px solid oklch(1 0 0 / 0.1)', borderRadius: '6px', fontSize: 12}}
                     labelStyle={{color: 'oklch(0.9 0 0)'}}
@@ -102,16 +117,15 @@ export default function NetWorthPage() {
             <CardContent className="p-3">
               <p className="text-xs text-muted-foreground mb-1">Monthly Change</p>
               <p className={`text-lg font-semibold ${monthlyChange >= 0 ? 'text-green-400' : 'text-red-400'}`}>
-                {monthlyChange >= 0 ? '+' : ''}{formatCurrency(monthlyChange)}
+                {monthlyChange >= 0 ? '+' : ''}
+                {formatCurrency(monthlyChange)}
               </p>
             </CardContent>
           </Card>
           <Card className="card-elevated">
             <CardContent className="p-3">
               <p className="text-xs text-muted-foreground mb-1">YTD Growth</p>
-              <p className={`text-lg font-semibold ${ytdGrowth >= 0 ? 'text-green-400' : 'text-red-400'}`}>
+              <p className={`text-lg font-semibold ${ytdGrowth >= 0 ? 'text-green-400' : 'text-red-400'}`}>{formatPercentage(ytdGrowth)}</p>
-                {formatPercentage(ytdGrowth)}
-              </p>
             </CardContent>
           </Card>
           <Card className="card-elevated">
@@ -126,7 +140,9 @@ export default function NetWorthPage() {
         <Card className="card-elevated">
           <CardHeader className="flex flex-row items-center justify-between p-3 pb-2">
             <CardTitle className="text-sm font-medium">Assets</CardTitle>
-            <Button variant="ghost" size="sm" className="h-6 px-2 text-xs" onClick={() => setAssetDialogOpen(true)}>+ Add</Button>
+            <Button variant="ghost" size="sm" className="h-6 px-2 text-xs" onClick={() => setAssetDialogOpen(true)}>
+              + Add
+            </Button>
           </CardHeader>
           <CardContent className="p-3 pt-0">
             <div className="space-y-1.5 max-h-[180px] overflow-y-auto">
@@ -134,8 +150,7 @@ export default function NetWorthPage() {
                 <div
                   key={asset.id}
                   className="flex justify-between text-sm py-1 border-b border-border last:border-0 cursor-pointer hover:bg-accent/30 px-1 rounded transition-colors"
-                  onClick={() => handleEditAsset(asset)}
+                  onClick={() => handleEditAsset(asset)}>
-                >
                   <div>
                     <span>{asset.name}</span>
                     <span className="ml-1.5 text-xs text-muted-foreground capitalize">{asset.type}</span>
@@ -151,7 +166,9 @@ export default function NetWorthPage() {
         <Card className="card-elevated">
           <CardHeader className="flex flex-row items-center justify-between p-3 pb-2">
             <CardTitle className="text-sm font-medium">Liabilities</CardTitle>
-            <Button variant="ghost" size="sm" className="h-6 px-2 text-xs" onClick={() => setLiabilityDialogOpen(true)}>+ Add</Button>
+            <Button variant="ghost" size="sm" className="h-6 px-2 text-xs" onClick={() => setLiabilityDialogOpen(true)}>
+              + Add
+            </Button>
           </CardHeader>
           <CardContent className="p-3 pt-0">
             <div className="space-y-1.5 max-h-[180px] overflow-y-auto">
@@ -159,8 +176,7 @@ export default function NetWorthPage() {
                 <div
                   key={liability.id}
                   className="flex justify-between text-sm py-1 border-b border-border last:border-0 cursor-pointer hover:bg-accent/30 px-1 rounded transition-colors"
-                  onClick={() => handleEditLiability(liability)}
+                  onClick={() => handleEditLiability(liability)}>
-                >
                   <div>
                     <span>{liability.name}</span>
                     <span className="ml-1.5 text-xs text-muted-foreground capitalize">{liability.type.replace('_', ' ')}</span>

frontend-web/src/store/index.ts

@@ -20,7 +20,7 @@ export {
   updateLiability,
   removeLiability,
   addSnapshot,
-  setSnapshots,
+  setSnapshots
 } from './slices/netWorthSlice';
 export type {Asset, Liability, NetWorthSnapshot, NetWorthState} from './slices/netWorthSlice';
 
@@ -38,7 +38,7 @@ export {
   setAccounts,
   addPayment,
   removePayment,
-  setPayments,
+  setPayments
 } from './slices/debtsSlice';
 export type {DebtCategory, DebtAccount, DebtPayment, DebtsState} from './slices/debtsSlice';
 
@@ -54,7 +54,7 @@ export {
   updateInvoice,
   removeInvoice,
   setInvoices,
-  updateInvoiceStatus,
+  updateInvoiceStatus
 } from './slices/invoicesSlice';
 export type {Client, Invoice, InvoiceLineItem, InvoicesState} from './slices/invoicesSlice';
 
@@ -69,6 +69,6 @@ export {
   updateExpense,
   removeExpense,
   addTransaction,
-  removeTransaction,
+  removeTransaction
 } from './slices/cashflowSlice';
 export type {IncomeSource, Expense, Transaction, CashflowState} from './slices/cashflowSlice';

frontend-web/src/store/slices/cashflowSlice.ts

@@ -44,27 +44,145 @@ export interface CashflowState {
 
 const defaultCategories = {
   income: ['Salary', 'Freelance', 'Investments', 'Rental', 'Side Business', 'Other'],
-  expense: ['Housing', 'Utilities', 'Transportation', 'Food', 'Insurance', 'Healthcare', 'Subscriptions', 'Entertainment', 'Shopping', 'Savings', 'Other'],
+  expense: ['Housing', 'Utilities', 'Transportation', 'Food', 'Insurance', 'Healthcare', 'Subscriptions', 'Entertainment', 'Shopping', 'Savings', 'Other']
 };
 
 // Mock data
 const mockIncomeSources: IncomeSource[] = [
-  {id: 'i1', name: 'Software Engineer Salary', amount: 8500, frequency: 'monthly', category: 'Salary', nextDate: '2024-12-15', isActive: true, createdAt: '2024-01-01'},
+  {
+    id: 'i1',
+    name: 'Software Engineer Salary',
+    amount: 8500,
+    frequency: 'monthly',
+    category: 'Salary',
+    nextDate: '2024-12-15',
+    isActive: true,
+    createdAt: '2024-01-01'
+  },
   {id: 'i2', name: 'Consulting', amount: 2000, frequency: 'monthly', category: 'Freelance', nextDate: '2024-12-20', isActive: true, createdAt: '2024-03-01'},
-  {id: 'i3', name: 'Dividend Income', amount: 450, frequency: 'quarterly', category: 'Investments', nextDate: '2024-12-31', isActive: true, createdAt: '2024-01-01'},
+  {
+    id: 'i3',
+    name: 'Dividend Income',
+    amount: 450,
+    frequency: 'quarterly',
+    category: 'Investments',
+    nextDate: '2024-12-31',
+    isActive: true,
+    createdAt: '2024-01-01'
+  }
 ];
 
 const mockExpenses: Expense[] = [
-  {id: 'e1', name: 'Mortgage', amount: 2200, frequency: 'monthly', category: 'Housing', nextDate: '2024-12-01', isActive: true, isEssential: true, createdAt: '2024-01-01'},
+  {
-  {id: 'e2', name: 'Car Payment', amount: 450, frequency: 'monthly', category: 'Transportation', nextDate: '2024-12-05', isActive: true, isEssential: true, createdAt: '2024-01-01'},
+    id: 'e1',
-  {id: 'e3', name: 'Car Insurance', amount: 180, frequency: 'monthly', category: 'Insurance', nextDate: '2024-12-10', isActive: true, isEssential: true, createdAt: '2024-01-01'},
+    name: 'Mortgage',
-  {id: 'e4', name: 'Utilities', amount: 250, frequency: 'monthly', category: 'Utilities', nextDate: '2024-12-15', isActive: true, isEssential: true, createdAt: '2024-01-01'},
+    amount: 2200,
-  {id: 'e5', name: 'Groceries', amount: 600, frequency: 'monthly', category: 'Food', nextDate: '2024-12-01', isActive: true, isEssential: true, createdAt: '2024-01-01'},
+    frequency: 'monthly',
-  {id: 'e6', name: 'Gym Membership', amount: 50, frequency: 'monthly', category: 'Healthcare', nextDate: '2024-12-01', isActive: true, isEssential: false, createdAt: '2024-01-01'},
+    category: 'Housing',
-  {id: 'e7', name: 'Netflix', amount: 15, frequency: 'monthly', category: 'Subscriptions', nextDate: '2024-12-08', isActive: true, isEssential: false, createdAt: '2024-01-01'},
+    nextDate: '2024-12-01',
-  {id: 'e8', name: 'Spotify', amount: 12, frequency: 'monthly', category: 'Subscriptions', nextDate: '2024-12-12', isActive: true, isEssential: false, createdAt: '2024-01-01'},
+    isActive: true,
-  {id: 'e9', name: 'Health Insurance', amount: 350, frequency: 'monthly', category: 'Insurance', nextDate: '2024-12-01', isActive: true, isEssential: true, createdAt: '2024-01-01'},
+    isEssential: true,
-  {id: 'e10', name: '401k Contribution', amount: 1500, frequency: 'monthly', category: 'Savings', nextDate: '2024-12-15', isActive: true, isEssential: true, createdAt: '2024-01-01'},
+    createdAt: '2024-01-01'
+  },
+  {
+    id: 'e2',
+    name: 'Car Payment',
+    amount: 450,
+    frequency: 'monthly',
+    category: 'Transportation',
+    nextDate: '2024-12-05',
+    isActive: true,
+    isEssential: true,
+    createdAt: '2024-01-01'
+  },
+  {
+    id: 'e3',
+    name: 'Car Insurance',
+    amount: 180,
+    frequency: 'monthly',
+    category: 'Insurance',
+    nextDate: '2024-12-10',
+    isActive: true,
+    isEssential: true,
+    createdAt: '2024-01-01'
+  },
+  {
+    id: 'e4',
+    name: 'Utilities',
+    amount: 250,
+    frequency: 'monthly',
+    category: 'Utilities',
+    nextDate: '2024-12-15',
+    isActive: true,
+    isEssential: true,
+    createdAt: '2024-01-01'
+  },
+  {
+    id: 'e5',
+    name: 'Groceries',
+    amount: 600,
+    frequency: 'monthly',
+    category: 'Food',
+    nextDate: '2024-12-01',
+    isActive: true,
+    isEssential: true,
+    createdAt: '2024-01-01'
+  },
+  {
+    id: 'e6',
+    name: 'Gym Membership',
+    amount: 50,
+    frequency: 'monthly',
+    category: 'Healthcare',
+    nextDate: '2024-12-01',
+    isActive: true,
+    isEssential: false,
+    createdAt: '2024-01-01'
+  },
+  {
+    id: 'e7',
+    name: 'Netflix',
+    amount: 15,
+    frequency: 'monthly',
+    category: 'Subscriptions',
+    nextDate: '2024-12-08',
+    isActive: true,
+    isEssential: false,
+    createdAt: '2024-01-01'
+  },
+  {
+    id: 'e8',
+    name: 'Spotify',
+    amount: 12,
+    frequency: 'monthly',
+    category: 'Subscriptions',
+    nextDate: '2024-12-12',
+    isActive: true,
+    isEssential: false,
+    createdAt: '2024-01-01'
+  },
+  {
+    id: 'e9',
+    name: 'Health Insurance',
+    amount: 350,
+    frequency: 'monthly',
+    category: 'Insurance',
+    nextDate: '2024-12-01',
+    isActive: true,
+    isEssential: true,
+    createdAt: '2024-01-01'
+  },
+  {
+    id: 'e10',
+    name: '401k Contribution',
+    amount: 1500,
+    frequency: 'monthly',
+    category: 'Savings',
+    nextDate: '2024-12-15',
+    isActive: true,
+    isEssential: true,
+    createdAt: '2024-01-01'
+  }
 ];
 
 const mockTransactions: Transaction[] = [
@@ -73,7 +191,7 @@ const mockTransactions: Transaction[] = [
   {id: 't3', type: 'expense', name: 'Groceries', amount: 145, category: 'Food', date: '2024-11-28'},
   {id: 't4', type: 'expense', name: 'Gas', amount: 55, category: 'Transportation', date: '2024-11-25'},
   {id: 't5', type: 'income', name: 'Consulting Payment', amount: 2000, category: 'Freelance', date: '2024-11-20'},
-  {id: 't6', type: 'expense', name: 'Restaurant', amount: 85, category: 'Food', date: '2024-11-22'},
+  {id: 't6', type: 'expense', name: 'Restaurant', amount: 85, category: 'Food', date: '2024-11-22'}
 ];
 
 const initialState: CashflowState = {
@@ -82,7 +200,7 @@ const initialState: CashflowState = {
   transactions: mockTransactions,
   categories: defaultCategories,
   isLoading: false,
-  error: null,
+  error: null
 };
 
 const cashflowSlice = createSlice({
@@ -123,8 +241,8 @@ const cashflowSlice = createSlice({
     },
     removeTransaction: (state, action: PayloadAction<string>) => {
       state.transactions = state.transactions.filter(t => t.id !== action.payload);
-    },
+    }
-  },
+  }
 });
 
 export const {
@@ -137,8 +255,7 @@ export const {
   updateExpense,
   removeExpense,
   addTransaction,
-  removeTransaction,
+  removeTransaction
 } = cashflowSlice.actions;
 
 export default cashflowSlice.reducer;
-

frontend-web/src/store/slices/debtsSlice.ts

@@ -47,7 +47,7 @@ const defaultCategories: DebtCategory[] = [
   {id: 'student-loans', name: 'Student Loans', color: '#6b7280', createdAt: new Date().toISOString()},
   {id: 'mortgage', name: 'Mortgage', color: '#6b7280', createdAt: new Date().toISOString()},
   {id: 'medical', name: 'Medical', color: '#6b7280', createdAt: new Date().toISOString()},
-  {id: 'other', name: 'Other', color: '#6b7280', createdAt: new Date().toISOString()},
+  {id: 'other', name: 'Other', color: '#6b7280', createdAt: new Date().toISOString()}
 ];
 
 // Mock data for development
@@ -64,7 +64,7 @@ const mockAccounts: DebtAccount[] = [
     minimumPayment: 95,
     dueDay: 15,
     createdAt: '2024-01-15',
-    updatedAt: '2024-12-01',
+    updatedAt: '2024-12-01'
   },
   {
     id: 'cc2',
@@ -78,7 +78,7 @@ const mockAccounts: DebtAccount[] = [
     minimumPayment: 55,
     dueDay: 22,
     createdAt: '2024-02-10',
-    updatedAt: '2024-12-01',
+    updatedAt: '2024-12-01'
   },
   {
     id: 'cc3',
@@ -92,7 +92,7 @@ const mockAccounts: DebtAccount[] = [
     minimumPayment: 35,
     dueDay: 8,
     createdAt: '2024-03-05',
-    updatedAt: '2024-12-01',
+    updatedAt: '2024-12-01'
   },
   {
     id: 'al1',
@@ -106,7 +106,7 @@ const mockAccounts: DebtAccount[] = [
     minimumPayment: 650,
     dueDay: 1,
     createdAt: '2021-06-15',
-    updatedAt: '2024-12-01',
+    updatedAt: '2024-12-01'
   },
   {
     id: 'sl1',
@@ -119,7 +119,7 @@ const mockAccounts: DebtAccount[] = [
     minimumPayment: 320,
     dueDay: 25,
     createdAt: '2018-09-01',
-    updatedAt: '2024-12-01',
+    updatedAt: '2024-12-01'
   },
   {
     id: 'pl1',
@@ -133,15 +133,15 @@ const mockAccounts: DebtAccount[] = [
     minimumPayment: 285,
     dueDay: 12,
     createdAt: '2023-08-20',
-    updatedAt: '2024-12-01',
+    updatedAt: '2024-12-01'
-  },
+  }
 ];
 
 const mockPayments: DebtPayment[] = [
   {id: 'p1', accountId: 'cc1', amount: 500, date: '2024-11-15', note: 'Extra payment'},
   {id: 'p2', accountId: 'cc2', amount: 200, date: '2024-11-22'},
   {id: 'p3', accountId: 'al1', amount: 650, date: '2024-12-01'},
-  {id: 'p4', accountId: 'sl1', amount: 320, date: '2024-11-25'},
+  {id: 'p4', accountId: 'sl1', amount: 320, date: '2024-11-25'}
 ];
 
 const initialState: DebtsState = {
@@ -149,7 +149,7 @@ const initialState: DebtsState = {
   accounts: mockAccounts,
   payments: mockPayments,
   isLoading: false,
-  error: null,
+  error: null
 };
 
 const debtsSlice = createSlice({
@@ -219,8 +219,8 @@ const debtsSlice = createSlice({
     },
     setPayments: (state, action: PayloadAction<DebtPayment[]>) => {
       state.payments = action.payload;
-    },
+    }
-  },
+  }
 });
 
 export const {
@@ -236,7 +236,7 @@ export const {
   setAccounts,
   addPayment,
   removePayment,
-  setPayments,
+  setPayments
 } = debtsSlice.actions;
 
 export default debtsSlice.reducer;

frontend-web/src/store/slices/invoicesSlice.ts

@@ -51,7 +51,7 @@ const mockClients: Client[] = [
     phone: '555-0100',
     company: 'Acme Corporation',
     address: '123 Business Ave, Suite 400, San Francisco, CA 94102',
-    createdAt: '2024-01-10',
+    createdAt: '2024-01-10'
   },
   {
     id: 'c2',
@@ -60,14 +60,14 @@ const mockClients: Client[] = [
     phone: '555-0200',
     company: 'TechStart Inc',
     address: '456 Innovation Blvd, Austin, TX 78701',
-    createdAt: '2024-02-15',
+    createdAt: '2024-02-15'
   },
   {
     id: 'c3',
     name: 'Sarah Mitchell',
     email: 'sarah@mitchell.design',
     company: 'Mitchell Design Studio',
-    createdAt: '2024-03-22',
+    createdAt: '2024-03-22'
   },
   {
     id: 'c4',
@@ -76,8 +76,8 @@ const mockClients: Client[] = [
     phone: '555-0400',
     company: 'Global Media LLC',
     address: '789 Media Row, New York, NY 10001',
-    createdAt: '2024-04-08',
+    createdAt: '2024-04-08'
-  },
+  }
 ];
 
 const mockInvoices: Invoice[] = [
@@ -90,13 +90,13 @@ const mockInvoices: Invoice[] = [
     dueDate: '2024-10-31',
     lineItems: [
       {id: 'li1', description: 'Web Development - October', quantity: 80, unitPrice: 150, total: 12000},
-      {id: 'li2', description: 'Hosting & Maintenance', quantity: 1, unitPrice: 500, total: 500},
+      {id: 'li2', description: 'Hosting & Maintenance', quantity: 1, unitPrice: 500, total: 500}
     ],
     subtotal: 12500,
     tax: 0,
     total: 12500,
     createdAt: '2024-10-01',
-    updatedAt: '2024-10-15',
+    updatedAt: '2024-10-15'
   },
   {
     id: 'inv2',
@@ -105,14 +105,12 @@ const mockInvoices: Invoice[] = [
     status: 'paid',
     issueDate: '2024-10-15',
     dueDate: '2024-11-14',
-    lineItems: [
+    lineItems: [{id: 'li3', description: 'Mobile App Development', quantity: 120, unitPrice: 175, total: 21000}],
-      {id: 'li3', description: 'Mobile App Development', quantity: 120, unitPrice: 175, total: 21000},
-    ],
     subtotal: 21000,
     tax: 0,
     total: 21000,
     createdAt: '2024-10-15',
-    updatedAt: '2024-11-10',
+    updatedAt: '2024-11-10'
   },
   {
     id: 'inv3',
@@ -123,13 +121,13 @@ const mockInvoices: Invoice[] = [
     dueDate: '2024-12-01',
     lineItems: [
       {id: 'li4', description: 'Web Development - November', quantity: 60, unitPrice: 150, total: 9000},
-      {id: 'li5', description: 'API Integration', quantity: 20, unitPrice: 175, total: 3500},
+      {id: 'li5', description: 'API Integration', quantity: 20, unitPrice: 175, total: 3500}
     ],
     subtotal: 12500,
     tax: 0,
     total: 12500,
     createdAt: '2024-11-01',
-    updatedAt: '2024-11-01',
+    updatedAt: '2024-11-01'
   },
   {
     id: 'inv4',
@@ -138,14 +136,12 @@ const mockInvoices: Invoice[] = [
     status: 'overdue',
     issueDate: '2024-10-20',
     dueDate: '2024-11-20',
-    lineItems: [
+    lineItems: [{id: 'li6', description: 'Brand Identity Design', quantity: 1, unitPrice: 4500, total: 4500}],
-      {id: 'li6', description: 'Brand Identity Design', quantity: 1, unitPrice: 4500, total: 4500},
-    ],
     subtotal: 4500,
     tax: 0,
     total: 4500,
     createdAt: '2024-10-20',
-    updatedAt: '2024-10-20',
+    updatedAt: '2024-10-20'
   },
   {
     id: 'inv5',
@@ -156,21 +152,21 @@ const mockInvoices: Invoice[] = [
     dueDate: '2024-12-31',
     lineItems: [
       {id: 'li7', description: 'Video Production', quantity: 5, unitPrice: 2000, total: 10000},
-      {id: 'li8', description: 'Motion Graphics', quantity: 10, unitPrice: 500, total: 5000},
+      {id: 'li8', description: 'Motion Graphics', quantity: 10, unitPrice: 500, total: 5000}
     ],
     subtotal: 15000,
     tax: 0,
     total: 15000,
     createdAt: '2024-12-01',
-    updatedAt: '2024-12-01',
+    updatedAt: '2024-12-01'
-  },
+  }
 ];
 
 const initialState: InvoicesState = {
   clients: mockClients,
   invoices: mockInvoices,
   isLoading: false,
-  error: null,
+  error: null
 };
 
 const invoicesSlice = createSlice({
@@ -211,17 +207,14 @@ const invoicesSlice = createSlice({
     setInvoices: (state, action: PayloadAction<Invoice[]>) => {
       state.invoices = action.payload;
     },
-    updateInvoiceStatus: (
+    updateInvoiceStatus: (state, action: PayloadAction<{id: string; status: Invoice['status']}>) => {
-      state,
-      action: PayloadAction<{id: string; status: Invoice['status']}>
-    ) => {
       const invoice = state.invoices.find(i => i.id === action.payload.id);
       if (invoice) {
         invoice.status = action.payload.status;
         invoice.updatedAt = new Date().toISOString();
       }
-    },
+    }
-  },
+  }
 });
 
 export const {
@@ -235,8 +228,7 @@ export const {
   updateInvoice,
   removeInvoice,
   setInvoices,
-  updateInvoiceStatus,
+  updateInvoiceStatus
 } = invoicesSlice.actions;
 
 export default invoicesSlice.reducer;
-

frontend-web/src/store/slices/netWorthSlice.ts

@@ -39,13 +39,13 @@ const mockAssets: Asset[] = [
   {id: 'a3', name: 'Fidelity 401k', type: 'investment', value: 145000, updatedAt: '2024-12-01'},
   {id: 'a4', name: 'Vanguard Brokerage', type: 'investment', value: 52000, updatedAt: '2024-12-01'},
   {id: 'a5', name: 'Primary Residence', type: 'property', value: 425000, updatedAt: '2024-12-01'},
-  {id: 'a6', name: '2021 Tesla Model 3', type: 'vehicle', value: 28000, updatedAt: '2024-12-01'},
+  {id: 'a6', name: '2021 Tesla Model 3', type: 'vehicle', value: 28000, updatedAt: '2024-12-01'}
 ];
 
 const mockLiabilities: Liability[] = [
   {id: 'l1', name: 'Mortgage', type: 'mortgage', balance: 320000, updatedAt: '2024-12-01'},
   {id: 'l2', name: 'Auto Loan', type: 'loan', balance: 15000, updatedAt: '2024-12-01'},
-  {id: 'l3', name: 'Student Loans', type: 'loan', balance: 28000, updatedAt: '2024-12-01'},
+  {id: 'l3', name: 'Student Loans', type: 'loan', balance: 28000, updatedAt: '2024-12-01'}
 ];
 
 const mockSnapshots: NetWorthSnapshot[] = [
@@ -54,7 +54,7 @@ const mockSnapshots: NetWorthSnapshot[] = [
   {id: 's3', date: '2024-09-01', totalAssets: 680000, totalLiabilities: 370000, netWorth: 310000},
   {id: 's4', date: '2024-10-01', totalAssets: 685000, totalLiabilities: 368000, netWorth: 317000},
   {id: 's5', date: '2024-11-01', totalAssets: 692000, totalLiabilities: 365000, netWorth: 327000},
-  {id: 's6', date: '2024-12-01', totalAssets: 697500, totalLiabilities: 363000, netWorth: 334500},
+  {id: 's6', date: '2024-12-01', totalAssets: 697500, totalLiabilities: 363000, netWorth: 334500}
 ];
 
 const initialState: NetWorthState = {
@@ -62,7 +62,7 @@ const initialState: NetWorthState = {
   liabilities: mockLiabilities,
   snapshots: mockSnapshots,
   isLoading: false,
-  error: null,
+  error: null
 };
 
 const netWorthSlice = createSlice({
@@ -100,22 +100,11 @@ const netWorthSlice = createSlice({
     },
     setSnapshots: (state, action: PayloadAction<NetWorthSnapshot[]>) => {
       state.snapshots = action.payload;
-    },
+    }
-  },
+  }
 });
 
-export const {
+export const {setLoading, setError, addAsset, updateAsset, removeAsset, addLiability, updateLiability, removeLiability, addSnapshot, setSnapshots} =
-  setLoading,
+  netWorthSlice.actions;
-  setError,
-  addAsset,
-  updateAsset,
-  removeAsset,
-  addLiability,
-  updateLiability,
-  removeLiability,
-  addSnapshot,
-  setSnapshots,
-} = netWorthSlice.actions;
 
 export default netWorthSlice.reducer;
-

frontend-web/src/store/store.ts

@@ -11,8 +11,8 @@ export const store = configureStore({
     netWorth: netWorthReducer,
     debts: debtsReducer,
     invoices: invoicesReducer,
-    cashflow: cashflowReducer,
+    cashflow: cashflowReducer
-  },
+  }
 });
 
 export type RootState = ReturnType<typeof store.getState>;