Add invoice dialog and enhance Cashflow, Clients, Invoices, and Net Worth pages

- Introduced AddInvoiceDialog component for creating new invoices with client selection and form validation.
- Updated CashflowPage to include dialogs for adding income, expenses, and transactions, improving user interaction.
- Enhanced ClientsPage with a dialog for adding new clients, streamlining client management.
- Improved InvoicesPage with a dialog for creating new invoices, facilitating better invoice management.
- Updated NetWorthPage to include dialogs for adding assets and liabilities, enhancing financial tracking capabilities.

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

@@ -0,0 +1,96 @@
+import {useState} from 'react';
+import {Dialog, 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';
+import {useAppDispatch, useAppSelector, addInvoice} from '@/store';
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export default function AddInvoiceDialog({open, onOpenChange}: Props) {
+  const dispatch = useAppDispatch();
+  const {clients} = useAppSelector(state => state.invoices);
+  const [form, setForm] = useState({
+    clientId: '',
+    description: '',
+    amount: '',
+    dueDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const now = new Date().toISOString();
+    const invoiceNumber = `INV-${new Date().getFullYear()}-${String(Math.floor(Math.random() * 1000)).padStart(3, '0')}`;
+    const amount = parseFloat(form.amount) || 0;
+    
+    dispatch(addInvoice({
+      id: crypto.randomUUID(),
+      invoiceNumber,
+      clientId: form.clientId,
+      status: 'draft',
+      issueDate: now.split('T')[0],
+      dueDate: form.dueDate,
+      lineItems: [{
+        id: crypto.randomUUID(),
+        description: form.description,
+        quantity: 1,
+        unitPrice: amount,
+        total: amount,
+      }],
+      subtotal: amount,
+      tax: 0,
+      total: amount,
+      createdAt: now,
+      updatedAt: now,
+    }));
+    onOpenChange(false);
+    setForm({clientId: '', description: '', amount: '', dueDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]});
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="card-elevated sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>New Invoice</DialogTitle>
+          <DialogDescription>Create a new invoice</DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit}>
+          <div className="grid gap-4 py-4">
+            <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>
+                <SelectContent>
+                  {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 />
+            </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 />
+              </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 />
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
+            <Button type="submit" disabled={!form.clientId || !form.description || !form.amount}>Create Invoice</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+