Migrate all components and pages to shadcn/ui with DataTable

Replace custom markup across all pages and components with shadcn/ui
primitives (Dialog, Sheet, Select, Card, Tabs, etc.). Add reusable
DataTable component powered by @tanstack/react-table with sortable
column headers and client-side pagination. Introduce TransactionList
with responsive mobile cards and desktop DataTable, dashboard section
customization (DashboardSection, SectionConfigDialog), and settings
API types.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/pages/Login.tsx

@@ -4,6 +4,10 @@ import { Wallet, ArrowRight, AlertCircle } from 'lucide-react';
 
 import { login } from '../api';
 import { useAuth } from '../AuthContext';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
 export default function Login() {
   const [username, setUsername] = useState('');
@@ -29,60 +33,61 @@ export default function Login() {
   };
 
   return (
-    <div className="min-h-screen bg-surface flex items-center justify-center px-4">
-      <div className="w-full max-w-sm animate-fade-in">
+    <div className="min-h-screen bg-background flex items-center justify-center px-4">
+      <div className="w-full max-w-sm">
         <div className="flex items-center justify-center gap-2.5 mb-8">
-          <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-[#606C38] to-[#DDA15E] flex items-center justify-center">
-            <Wallet className="w-6 h-6 text-[#FEFAE0]" strokeWidth={2.5} />
+          <div className="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
+            <Wallet className="w-6 h-6 text-primary-foreground" strokeWidth={2.5} />
           </div>
-          <span className="text-2xl font-bold tracking-tight">
-            Wealthy<span className="text-[#606C38] dark:text-[#7a8a4a]">Smart</span>
+          <span className="text-2xl font-bold tracking-tight font-heading">
+            Wealthy<span className="text-primary">Smart</span>
           </span>
         </div>
 
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label className="block text-xs font-medium text-text-muted mb-1.5 uppercase tracking-wider">
-              Username
-            </label>
-            <input
-              type="text"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              className="w-full bg-input-bg border border-border rounded-lg px-4 py-3 text-text-primary placeholder-text-faint focus:outline-none focus:border-[#606C38]/50 focus:ring-1 focus:ring-[#606C38]/20 transition-colors"
-              placeholder="Enter username"
-              autoFocus
-            />
-          </div>
-          <div>
-            <label className="block text-xs font-medium text-text-muted mb-1.5 uppercase tracking-wider">
-              Password
-            </label>
-            <input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              className="w-full bg-input-bg border border-border rounded-lg px-4 py-3 text-text-primary placeholder-text-faint focus:outline-none focus:border-[#606C38]/50 focus:ring-1 focus:ring-[#606C38]/20 transition-colors"
-              placeholder="Enter password"
-            />
-          </div>
+        <Card>
+          <CardHeader>
+            <CardTitle>Sign in</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="username">Username</Label>
+                <Input
+                  id="username"
+                  type="text"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  placeholder="Enter username"
+                  autoFocus
+                  className="h-10"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
+                <Input
+                  id="password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="Enter password"
+                  className="h-10"
+                />
+              </div>
 
-          {error && (
-            <div className="flex items-center gap-2 text-red-500 dark:text-red-400 text-sm">
-              <AlertCircle className="w-4 h-4" />
-              {error}
-            </div>
-          )}
+              {error && (
+                <div className="flex items-center gap-2 text-destructive text-sm">
+                  <AlertCircle className="w-4 h-4" />
+                  {error}
+                </div>
+              )}
 
-          <button
-            type="submit"
-            disabled={loading}
-            className="w-full flex items-center justify-center gap-2 bg-[#606C38] hover:bg-[#7a8a4a] disabled:opacity-50 text-white dark:text-[#FEFAE0] font-semibold px-6 py-3 rounded-lg transition-colors"
-          >
-            {loading ? 'Signing in...' : 'Sign in'}
-            {!loading && <ArrowRight className="w-4 h-4" />}
-          </button>
-        </form>
+              <Button type="submit" disabled={loading} className="w-full h-10">
+                {loading ? 'Signing in...' : 'Sign in'}
+                {!loading && <ArrowRight className="w-4 h-4" />}
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
       </div>
     </div>
   );