Add new asset and client management dialogs, update font dependencies, and enhance CSS styles

- Introduced AddAssetDialog, AddClientDialog, AddExpenseDialog, AddIncomeDialog, AddLiabilityDialog, and AddTransactionDialog components for improved asset and client management.
- Added support for new font sources: 'Funnel Sans' and 'Inter'.
- Updated CSS variables for better theming and adjusted font settings for improved readability.
- Refactored main entry point to include new font imports and ensure consistent styling across the application.

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

@@ -0,0 +1,69 @@
+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, addLiability} from '@/store';
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const liabilityTypes = ['credit_card', 'loan', 'mortgage', 'other'] as const;
+
+export default function AddLiabilityDialog({open, onOpenChange}: Props) {
+  const dispatch = useAppDispatch();
+  const [form, setForm] = useState({name: '', type: '', balance: ''});
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    dispatch(addLiability({
+      id: crypto.randomUUID(),
+      name: form.name,
+      type: form.type as typeof liabilityTypes[number],
+      balance: parseFloat(form.balance) || 0,
+      updatedAt: new Date().toISOString(),
+    }));
+    onOpenChange(false);
+    setForm({name: '', type: '', balance: ''});
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="card-elevated sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Add Liability</DialogTitle>
+          <DialogDescription>Add a new liability to track</DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit}>
+          <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 />
+            </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>
+                <SelectContent>
+                  {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 />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>Cancel</Button>
+            <Button type="submit" disabled={!form.name || !form.type || !form.balance}>Add Liability</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+