Refactor import page and add password change feature

This commit overhauls the invoice import UI and adds password
management. The changes:

- Replace custom import UI with reusable CSVImportPage component
- Add password change functionality with validation
- Improve form styling and accessibility
- Update import instructions for simplified CSV format
- Add client selection and validation

src/app/dashboard/clients/[id]/page.tsx

@@ -208,7 +208,7 @@ export default async function ClientDetailPage({
 
           {/* Recent Invoices */}
           {client.invoices && client.invoices.length > 0 && (
-            <Card className="card-primary">
+            <Card className="">
               <CardHeader>
                 <CardTitle className="flex items-center gap-2">
                   <div className="bg-blue-subtle rounded-lg p-2">
@@ -222,7 +222,7 @@ export default async function ClientDetailPage({
                   {client.invoices.slice(0, 3).map((invoice) => (
                     <div
                       key={invoice.id}
-                      className="flex items-center justify-between rounded-lg border p-3"
+                      className="card-secondary transition-colors hover:bg-gray-200/70 dark:hover:bg-gray-700/60 flex items-center justify-between rounded-lg border p-3"
                     >
                       <div>
                         <p className="text-foreground font-medium">

src/app/dashboard/invoices/import/page.tsx

@@ -4,8 +4,8 @@ import { HydrateClient } from "~/trpc/server";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { Button } from "~/components/ui/button";
 import { Badge } from "~/components/ui/badge";
-import { Separator } from "~/components/ui/separator";
 import { PageHeader } from "~/components/layout/page-header";
+import { CSVImportPage } from "~/components/csv-import-page";
 import {
   ArrowLeft,
   Upload,
@@ -14,133 +14,10 @@ import {
   CheckCircle,
   AlertCircle,
   Info,
-  Zap,
   FileSpreadsheet,
-  Eye,
-  RefreshCw,
 } from "lucide-react";
 
-// Import Statistics Component
-function ImportStats() {
-  const stats = [
-    {
-      title: "Supported Formats",
-      value: "CSV",
-      icon: FileSpreadsheet,
-      color: "text-blue-600",
-      bgColor: "bg-blue-50 dark:bg-blue-900/20",
-      description: "Excel & Google Sheets exports",
-    },
-    {
-      title: "Max File Size",
-      value: "10MB",
-      icon: Upload,
-      color: "text-green-600",
-      bgColor: "bg-green-50 dark:bg-green-900/20",
-      description: "Up to 1000 invoices",
-    },
-    {
-      title: "Processing Time",
-      value: "< 1min",
-      icon: Zap,
-      color: "text-purple-600",
-      bgColor: "bg-purple-50 dark:bg-purple-900/20",
-      description: "Average processing speed",
-    },
-    {
-      title: "Success Rate",
-      value: "99.9%",
-      icon: CheckCircle,
-      color: "text-emerald-600",
-      bgColor: "bg-emerald-50 dark:bg-emerald-900/20",
-      description: "Import success rate",
-    },
-  ];
-
-  return (
-    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-      {stats.map((stat) => {
-        const Icon = stat.icon;
-        return (
-          <Card
-            key={stat.title}
-            className="card-primary transition-shadow hover:shadow-lg"
-          >
-            <CardContent className="p-6">
-              <div className="flex items-center justify-between">
-                <div className="space-y-2">
-                  <p className="text-muted-foreground text-sm font-medium">
-                    {stat.title}
-                  </p>
-                  <p className="text-2xl font-bold">{stat.value}</p>
-                  <p className="text-muted-foreground text-xs">
-                    {stat.description}
-                  </p>
-                </div>
-                <div className={`rounded-full p-3 ${stat.bgColor}`}>
-                  <Icon className={`h-6 w-6 ${stat.color}`} />
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        );
-      })}
-    </div>
-  );
-}
-
-// File Upload Component
-function FileUploadArea() {
-  return (
-    <Card className="card-primary">
-      <CardHeader className="border-b">
-        <CardTitle className="card-title-secondary">
-          <Upload className="text-icon-emerald h-5 w-5" />
-          Upload CSV File
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="p-8">
-        <div className="mx-auto max-w-xl">
-          {/* Drop Zone */}
-          <div className="bg-upload-zone">
-            <div className="bg-brand-muted mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full">
-              <Upload className="text-icon-emerald h-8 w-8" />
-            </div>
-            <h3 className="mb-2 text-lg font-semibold">
-              Drop your CSV file here
-            </h3>
-            <p className="text-muted-foreground mb-4">
-              or click to browse and select a file
-            </p>
-            <Button type="button" className="btn-brand-primary">
-              <Upload className="mr-2 h-4 w-4" />
-              Choose File
-            </Button>
-            <p className="text-muted-foreground mt-4 text-sm">
-              Maximum file size: 10MB • Supported format: CSV
-            </p>
-          </div>
-
-          {/* Upload Progress (hidden by default) */}
-          <div className="mt-6 hidden">
-            <div className="mb-2 flex items-center justify-between">
-              <span className="text-sm font-medium">Uploading...</span>
-              <span className="text-icon-emerald text-sm">75%</span>
-            </div>
-            <div className="bg-progress-track">
-              <div
-                className="bg-brand-gradient h-full transition-all duration-300"
-                style={{ width: "75%" }}
-              ></div>
-            </div>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-// CSV Format Instructions
+// File Upload Instructions Component
 function FormatInstructions() {
   return (
     <div className="grid gap-6 lg:grid-cols-2">
@@ -155,7 +32,7 @@ function FormatInstructions() {
         <CardContent className="space-y-4">
           <div className="bg-muted-subtle rounded-lg p-4">
             <p className="text-secondary font-mono text-sm">
-              client_name,client_email,invoice_number,issue_date,due_date,description,hours,rate,tax_rate
+              DATE,DESCRIPTION,HOURS,RATE,AMOUNT
             </p>
           </div>
 
@@ -163,14 +40,14 @@ function FormatInstructions() {
             <h4 className="font-semibold">Required Columns:</h4>
             <div className="grid gap-2">
               {[
-                { field: "client_name", desc: "Full name of the client" },
-                { field: "client_email", desc: "Client email address" },
-                { field: "invoice_number", desc: "Unique invoice identifier" },
-                { field: "issue_date", desc: "Date issued (YYYY-MM-DD)" },
-                { field: "due_date", desc: "Payment due date (YYYY-MM-DD)" },
-                { field: "description", desc: "Work description" },
-                { field: "hours", desc: "Number of hours worked" },
-                { field: "rate", desc: "Hourly rate (decimal)" },
+                { field: "DATE", desc: "Date of work (M/DD/YY format)" },
+                { field: "DESCRIPTION", desc: "Description of work performed" },
+                { field: "HOURS", desc: "Number of hours worked" },
+                { field: "RATE", desc: "Hourly rate (decimal)" },
+                {
+                  field: "AMOUNT",
+                  desc: "Total amount (calculated from hours × rate)",
+                },
               ].map((col) => (
                 <div key={col.field} className="flex items-start gap-3">
                   <Badge className="badge-outline text-xs">{col.field}</Badge>
@@ -183,12 +60,14 @@ function FormatInstructions() {
           </div>
 
           <div className="pt-2">
-            <h4 className="mb-2 font-semibold">Optional Columns:</h4>
-            <div className="flex flex-wrap gap-2">
-              <Badge className="badge-secondary text-xs">tax_rate</Badge>
-              <Badge className="badge-secondary text-xs">notes</Badge>
-              <Badge className="badge-secondary text-xs">client_phone</Badge>
-            </div>
+            <h4 className="mb-2 font-semibold">File Naming:</h4>
+            <p className="text-muted-foreground text-sm">
+              Name your CSV files in{" "}
+              <code className="bg-muted rounded px-1 text-xs">
+                YYYY-MM-DD.csv
+              </code>{" "}
+              format for automatic date detection.
+            </p>
           </div>
         </CardContent>
       </Card>
@@ -204,7 +83,7 @@ function FormatInstructions() {
         <CardContent className="space-y-4">
           <p className="text-muted-foreground">
             Download our sample CSV template to see the exact format required
-            for importing invoices.
+            for importing time entries.
           </p>
 
           <div className="bg-green-subtle rounded-lg p-4">
@@ -220,31 +99,21 @@ function FormatInstructions() {
             </div>
           </div>
 
-          <div className="space-y-3">
-            <Button variant="outline" className="w-full justify-start">
-              <Download className="mr-2 h-4 w-4" />
-              Download Sample CSV Template
-            </Button>
-
-            <Button variant="outline" className="w-full justify-start">
-              <Eye className="mr-2 h-4 w-4" />
-              View Template in Browser
-            </Button>
-          </div>
-
-          <Separator />
-
           <div className="space-y-2">
             <h4 className="text-sm font-semibold">Sample Row:</h4>
             <div className="bg-muted-subtle rounded-lg p-3">
               <p className="text-muted font-mono text-xs break-all">
-                &quot;Acme
-                Corp&quot;,&quot;john@acme.com&quot;,&quot;INV-001&quot;,&quot;2024-01-15&quot;,&quot;2024-02-14&quot;,&quot;Web
-                development
-                work&quot;,&quot;40&quot;,&quot;75.00&quot;,&quot;8.5&quot;
+                1/15/24,&quot;Web development work&quot;,8,75.00,600.00
               </p>
             </div>
           </div>
+
+          <div className="space-y-2">
+            <h4 className="text-sm font-semibold">Sample Filename:</h4>
+            <div className="bg-muted-subtle rounded-lg p-3">
+              <p className="text-muted font-mono text-xs">2024-01-15.csv</p>
+            </div>
+          </div>
         </CardContent>
       </Card>
     </div>
@@ -266,18 +135,18 @@ function ImportantNotes() {
           <div>
             <h4 className="mb-2 font-semibold">Before Importing:</h4>
             <ul className="text-muted-foreground space-y-1 text-sm">
-              <li>• Ensure all client emails are valid</li>
-              <li>• Use YYYY-MM-DD format for dates</li>
-              <li>• Invoice numbers must be unique</li>
-              <li>• Rates should be in decimal format (e.g., 75.50)</li>
+              <li>• Use M/DD/YY format for dates (e.g., 1/15/24)</li>
+              <li>• Ensure rates are in decimal format (e.g., 75.50)</li>
+              <li>• File names should follow YYYY-MM-DD.csv format</li>
+              <li>• Select a client before importing</li>
             </ul>
           </div>
           <div>
             <h4 className="mb-2 font-semibold">What Happens:</h4>
             <ul className="text-muted-foreground space-y-1 text-sm">
-              <li>• New clients will be created automatically</li>
-              <li>• Existing clients will be matched by email</li>
-              <li>• Invoices will be created in &quot;draft&quot; status</li>
+              <li>• Each CSV file creates one invoice</li>
+              <li>• Invoice dates are derived from filename</li>
+              <li>• Invoices are created in &quot;draft&quot; status</li>
               <li>• You can review and edit before sending</li>
             </ul>
           </div>
@@ -287,124 +156,47 @@ function ImportantNotes() {
   );
 }
 
-// Import History Component
-function ImportHistory() {
-  const mockHistory = [
-    {
-      id: "1",
-      filename: "january_invoices.csv",
-      date: "2024-01-15",
-      status: "completed",
-      imported: 25,
-      errors: 0,
-    },
-    {
-      id: "2",
-      filename: "december_invoices.csv",
-      date: "2024-01-01",
-      status: "completed",
-      imported: 18,
-      errors: 2,
-    },
-    {
-      id: "3",
-      filename: "november_invoices.csv",
-      date: "2023-12-01",
-      status: "completed",
-      imported: 32,
-      errors: 1,
-    },
-  ];
-
-  const getStatusBadge = (status: string) => {
-    if (status === "completed") {
-      return (
-        <Badge className="badge-success">
-          <CheckCircle className="mr-1 h-3 w-3" />
-          Completed
-        </Badge>
-      );
-    }
-    if (status === "processing") {
-      return (
-        <Badge className="badge-features">
-          <RefreshCw className="mr-1 h-3 w-3" />
-          Processing
-        </Badge>
-      );
-    }
-    return (
-      <Badge variant="outline">
-        <AlertCircle className="mr-1 h-3 w-3" />
-        Failed
-      </Badge>
-    );
-  };
-
+// File Format Help Section
+function FileFormatHelp() {
   return (
     <Card className="card-primary">
       <CardHeader>
-        <CardTitle className="card-title-purple">
-          <FileText className="text-icon-purple h-5 w-5" />
-          Recent Imports
+        <CardTitle className="card-title-info">
+          <FileSpreadsheet className="text-icon-blue h-5 w-5" />
+          Supported File Formats
         </CardTitle>
       </CardHeader>
-      <CardContent className="p-0">
-        <div className="overflow-x-auto">
-          <table className="w-full">
-            <thead className="bg-muted/50">
-              <tr className="border-b">
-                <th className="p-4 text-left text-sm font-medium">File</th>
-                <th className="p-4 text-left text-sm font-medium">Date</th>
-                <th className="p-4 text-left text-sm font-medium">Status</th>
-                <th className="p-4 text-right text-sm font-medium">Imported</th>
-                <th className="p-4 text-right text-sm font-medium">Errors</th>
-                <th className="p-4 text-center text-sm font-medium">Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              {mockHistory.map((item) => (
-                <tr
-                  key={item.id}
-                  className="hover:bg-muted/20 border-b transition-colors"
-                >
-                  <td className="p-4">
-                    <div className="flex items-center gap-3">
-                      <div className="icon-bg-purple-muted">
-                        <FileSpreadsheet className="text-icon-purple h-4 w-4" />
-                      </div>
-                      <span className="font-medium">{item.filename}</span>
-                    </div>
-                  </td>
-                  <td className="p-4 text-sm">
-                    {new Date(item.date).toLocaleDateString()}
-                  </td>
-                  <td className="p-4">{getStatusBadge(item.status)}</td>
-                  <td className="p-4 text-right font-medium">
-                    {item.imported}
-                  </td>
-                  <td className="p-4 text-right">
-                    {item.errors > 0 ? (
-                      <span className="status-text-error">{item.errors}</span>
-                    ) : (
-                      <span className="text-muted-foreground">0</span>
-                    )}
-                  </td>
-                  <td className="p-4 text-center">
-                    <Button variant="ghost" size="sm">
-                      <Eye className="h-4 w-4" />
-                    </Button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-        {mockHistory.length === 0 && (
-          <div className="py-8 text-center">
-            <p className="text-muted-foreground">No import history yet</p>
+      <CardContent className="space-y-4">
+        <div className="grid gap-4 md:grid-cols-3">
+          <div className="space-y-2 text-center">
+            <div className="mx-auto w-fit rounded-full bg-blue-50 p-3 dark:bg-blue-900/20">
+              <FileSpreadsheet className="h-6 w-6 text-blue-600" />
+            </div>
+            <h4 className="font-semibold">CSV Files</h4>
+            <p className="text-muted-foreground text-sm">
+              Comma-separated values from Excel, Google Sheets, or any CSV
+              editor
+            </p>
           </div>
-        )}
+          <div className="space-y-2 text-center">
+            <div className="mx-auto w-fit rounded-full bg-green-50 p-3 dark:bg-green-900/20">
+              <Upload className="h-6 w-6 text-green-600" />
+            </div>
+            <h4 className="font-semibold">Max Size</h4>
+            <p className="text-muted-foreground text-sm">
+              Up to 10MB per file with no limit on number of rows
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <div className="mx-auto w-fit rounded-full bg-purple-50 p-3 dark:bg-purple-900/20">
+              <CheckCircle className="h-6 w-6 text-purple-600" />
+            </div>
+            <h4 className="font-semibold">Validation</h4>
+            <p className="text-muted-foreground text-sm">
+              Real-time validation with clear error messages and feedback
+            </p>
+          </div>
+        </div>
       </CardContent>
     </Card>
   );
@@ -414,8 +206,8 @@ export default async function ImportPage() {
   return (
     <div className="space-y-8">
       <PageHeader
-        title="Import Invoices"
-        description="Upload CSV files to create invoices in batch"
+        title="Import Time Entries"
+        description="Upload CSV files to create invoices from your time tracking data"
         variant="gradient"
       >
         <Link href="/dashboard/invoices">
@@ -427,33 +219,17 @@ export default async function ImportPage() {
       </PageHeader>
 
       <HydrateClient>
-        <Suspense
-          fallback={
-            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-              {Array.from({ length: 4 }, (_, i) => (
-                <Card key={i} className="card-primary">
-                  <CardContent className="p-6">
-                    <div className="animate-pulse">
-                      <div className="bg-muted mb-2 h-4 w-1/2 rounded"></div>
-                      <div className="bg-muted mb-2 h-8 w-3/4 rounded"></div>
-                      <div className="bg-muted h-3 w-1/3 rounded"></div>
-                    </div>
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          }
-        >
-          <ImportStats />
-        </Suspense>
+        {/* Main CSV Import Component */}
+        <CSVImportPage />
 
-        <FileUploadArea />
+        {/* File Format Help */}
+        <FileFormatHelp />
 
+        {/* Format Instructions */}
         <FormatInstructions />
 
+        {/* Important Notes */}
         <ImportantNotes />
-
-        <ImportHistory />
       </HydrateClient>
     </div>
   );

src/app/dashboard/settings/_components/settings-content.tsx

@@ -10,10 +10,12 @@ import {
   Database,
   AlertTriangle,
   Shield,
-  Settings,
   FileText,
   Users,
   Building,
+  Key,
+  Eye,
+  EyeOff,
 } from "lucide-react";
 
 import { api } from "~/trpc/react";
@@ -58,6 +60,14 @@ export function SettingsContent() {
   const [importData, setImportData] = useState("");
   const [isImportDialogOpen, setIsImportDialogOpen] = useState(false);
 
+  // Password change state
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [showCurrentPassword, setShowCurrentPassword] = useState(false);
+  const [showNewPassword, setShowNewPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
   // Queries
   const { data: profile, refetch: refetchProfile } =
     api.settings.getProfile.useQuery();
@@ -74,6 +84,18 @@ export function SettingsContent() {
     },
   });
 
+  const changePasswordMutation = api.settings.changePassword.useMutation({
+    onSuccess: () => {
+      toast.success("Password changed successfully");
+      setCurrentPassword("");
+      setNewPassword("");
+      setConfirmPassword("");
+    },
+    onError: (error: { message: string }) => {
+      toast.error(`Failed to change password: ${error.message}`);
+    },
+  });
+
   const exportDataQuery = api.settings.exportData.useQuery(undefined, {
     enabled: false,
   });
@@ -134,6 +156,27 @@ export function SettingsContent() {
     updateProfileMutation.mutate({ name: name.trim() });
   };
 
+  const handleChangePassword = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!currentPassword || !newPassword || !confirmPassword) {
+      toast.error("Please fill in all password fields");
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      toast.error("New passwords don't match");
+      return;
+    }
+    if (newPassword.length < 8) {
+      toast.error("New password must be at least 8 characters");
+      return;
+    }
+    changePasswordMutation.mutate({
+      currentPassword,
+      newPassword,
+      confirmPassword,
+    });
+  };
+
   const handleExportData = () => {
     void exportDataQuery.refetch();
   };
@@ -239,21 +282,21 @@ export function SettingsContent() {
       value: dataStats?.clients ?? 0,
       icon: Users,
       color: "text-blue-600",
-      bgColor: "bg-blue-100",
+      bgColor: "bg-blue-50 dark:bg-blue-900/20",
     },
     {
       label: "Businesses",
       value: dataStats?.businesses ?? 0,
       icon: Building,
       color: "text-purple-600",
-      bgColor: "bg-purple-100",
+      bgColor: "bg-purple-50 dark:bg-purple-900/20",
     },
     {
       label: "Invoices",
       value: dataStats?.invoices ?? 0,
       icon: FileText,
       color: "text-emerald-600",
-      bgColor: "bg-emerald-100",
+      bgColor: "bg-emerald-50 dark:bg-emerald-900/20",
     },
   ];
 
@@ -264,10 +307,8 @@ export function SettingsContent() {
         {/* Profile Section */}
         <Card className="card-primary">
           <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <div className="icon-bg-emerald">
-                <User className="text-icon-emerald h-5 w-5" />
-              </div>
+            <CardTitle className="card-title-secondary">
+              <User className="text-icon-blue h-5 w-5" />
               Profile Information
             </CardTitle>
             <CardDescription>
@@ -283,7 +324,6 @@ export function SettingsContent() {
                   value={name}
                   onChange={(e) => setName(e.target.value)}
                   placeholder="Enter your full name"
-                  className="border-0 shadow-sm"
                 />
               </div>
               <div className="space-y-2">
@@ -292,7 +332,7 @@ export function SettingsContent() {
                   id="email"
                   value={session?.user?.email ?? ""}
                   disabled
-                  className="bg-muted border-0 shadow-sm"
+                  className="bg-muted"
                 />
                 <p className="text-muted-foreground text-sm">
                   Email address cannot be changed
@@ -314,10 +354,8 @@ export function SettingsContent() {
         {/* Data Overview */}
         <Card className="card-primary">
           <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <div className="icon-bg-info">
-                <Database className="text-icon-blue h-5 w-5" />
-              </div>
+            <CardTitle className="card-title-info">
+              <Database className="text-icon-blue h-5 w-5" />
               Account Data
             </CardTitle>
             <CardDescription>
@@ -329,24 +367,23 @@ export function SettingsContent() {
               {dataStatItems.map((item) => {
                 const Icon = item.icon;
                 return (
-                  <Card key={item.label} className="card-secondary">
-                    <CardContent className="py-2">
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-3">
-                          <div className={`rounded-lg p-2 ${item.bgColor}`}>
-                            <Icon className={`h-4 w-4 ${item.color}`} />
-                          </div>
-                          <span className="font-medium">{item.label}</span>
-                        </div>
-                        <Badge
-                          variant="secondary"
-                          className="text-lg font-semibold"
-                        >
-                          {item.value}
-                        </Badge>
+                  <div
+                    key={item.label}
+                    className="bg-card flex items-center justify-between rounded-lg border p-4 transition-shadow hover:shadow-sm"
+                  >
+                    <div className="flex items-center gap-3">
+                      <div className={`rounded-lg p-2 ${item.bgColor}`}>
+                        <Icon className={`h-4 w-4 ${item.color}`} />
                       </div>
-                    </CardContent>
-                  </Card>
+                      <span className="font-medium">{item.label}</span>
+                    </div>
+                    <Badge
+                      variant="secondary"
+                      className="text-lg font-semibold"
+                    >
+                      {item.value}
+                    </Badge>
+                  </div>
                 );
               })}
             </div>
@@ -354,13 +391,118 @@ export function SettingsContent() {
         </Card>
       </div>
 
+      {/* Security Settings */}
+      <Card className="card-primary">
+        <CardHeader>
+          <CardTitle className="card-title-secondary">
+            <Key className="text-icon-amber h-5 w-5" />
+            Security Settings
+          </CardTitle>
+          <CardDescription>
+            Change your password and manage account security
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleChangePassword} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="current-password">Current Password</Label>
+              <div className="relative">
+                <Input
+                  id="current-password"
+                  type={showCurrentPassword ? "text" : "password"}
+                  value={currentPassword}
+                  onChange={(e) => setCurrentPassword(e.target.value)}
+                  placeholder="Enter your current password"
+                />
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="absolute top-1/2 right-2 h-6 w-6 -translate-y-1/2 p-0"
+                  onClick={() => setShowCurrentPassword(!showCurrentPassword)}
+                >
+                  {showCurrentPassword ? (
+                    <EyeOff className="h-4 w-4" />
+                  ) : (
+                    <Eye className="h-4 w-4" />
+                  )}
+                </Button>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="new-password">New Password</Label>
+              <div className="relative">
+                <Input
+                  id="new-password"
+                  type={showNewPassword ? "text" : "password"}
+                  value={newPassword}
+                  onChange={(e) => setNewPassword(e.target.value)}
+                  placeholder="Enter your new password"
+                />
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="absolute top-1/2 right-2 h-6 w-6 -translate-y-1/2 p-0"
+                  onClick={() => setShowNewPassword(!showNewPassword)}
+                >
+                  {showNewPassword ? (
+                    <EyeOff className="h-4 w-4" />
+                  ) : (
+                    <Eye className="h-4 w-4" />
+                  )}
+                </Button>
+              </div>
+              <p className="text-muted-foreground text-sm">
+                Password must be at least 8 characters long
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="confirm-password">Confirm New Password</Label>
+              <div className="relative">
+                <Input
+                  id="confirm-password"
+                  type={showConfirmPassword ? "text" : "password"}
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  placeholder="Confirm your new password"
+                />
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="absolute top-1/2 right-2 h-6 w-6 -translate-y-1/2 p-0"
+                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                >
+                  {showConfirmPassword ? (
+                    <EyeOff className="h-4 w-4" />
+                  ) : (
+                    <Eye className="h-4 w-4" />
+                  )}
+                </Button>
+              </div>
+            </div>
+
+            <Button
+              type="submit"
+              disabled={changePasswordMutation.isPending}
+              className="btn-brand-primary"
+            >
+              {changePasswordMutation.isPending
+                ? "Changing Password..."
+                : "Change Password"}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
       {/* Data Management */}
       <Card className="card-primary">
         <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <div className="bg-indigo-subtle rounded-lg p-2">
-              <Shield className="text-icon-indigo h-5 w-5" />
-            </div>
+          <CardTitle className="card-title-secondary">
+            <Shield className="text-icon-indigo h-5 w-5" />
             Data Management
           </CardTitle>
           <CardDescription>
@@ -429,38 +571,38 @@ export function SettingsContent() {
                 </DialogContent>
               </Dialog>
             </div>
-          </div>
 
-          {/* Backup Information */}
-          <div className="mt-6 rounded-lg border p-4">
-            <h4 className="font-medium">Backup Information</h4>
-            <ul className="text-muted-foreground mt-2 space-y-1 text-sm">
-              <li>• Regular backups protect your important business data</li>
-              <li>• Backup files contain all data in secure JSON format</li>
-              <li>• Import adds to existing data without replacing anything</li>
-              <li>• Store backup files in a secure, accessible location</li>
-            </ul>
+            {/* Backup Information */}
+            <div className="border-border bg-muted/20 rounded-lg border p-4">
+              <h4 className="font-medium">Backup Information</h4>
+              <ul className="text-muted-foreground mt-2 space-y-1 text-sm">
+                <li>• Regular backups protect your important business data</li>
+                <li>• Backup files contain all data in secure JSON format</li>
+                <li>
+                  • Import adds to existing data without replacing anything
+                </li>
+                <li>• Store backup files in a secure, accessible location</li>
+              </ul>
+            </div>
           </div>
         </CardContent>
       </Card>
 
       {/* Danger Zone */}
-      <Card className="card-primary">
+      <Card className="card-primary border-l-4 border-l-red-500">
         <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <div className="icon-bg-error">
-              <AlertTriangle className="text-icon-red h-5 w-5" />
-            </div>
-            Data Management
+          <CardTitle className="card-title-warning">
+            <AlertTriangle className="text-icon-red h-5 w-5" />
+            Danger Zone
           </CardTitle>
           <CardDescription>
-            Manage your account data with caution
+            Irreversible actions that permanently affect your account
           </CardDescription>
         </CardHeader>
         <CardContent>
           <div className="space-y-4">
-            <div className="rounded-lg border p-4">
-              <h4 className="font-medium text-red-600">
+            <div className="rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/20">
+              <h4 className="font-medium text-red-600 dark:text-red-400">
                 Delete All Account Data
               </h4>
               <p className="text-muted-foreground mt-2 text-sm">
@@ -472,7 +614,7 @@ export function SettingsContent() {
 
             <AlertDialog>
               <AlertDialogTrigger asChild>
-                <Button variant="destructive" className="w-100">
+                <Button variant="destructive" className="w-full">
                   <AlertTriangle className="mr-2 h-4 w-4" />
                   Delete All Data
                 </Button>
@@ -485,7 +627,7 @@ export function SettingsContent() {
                       This action cannot be undone. This will permanently delete
                       all your:
                     </div>
-                    <ul className="list-inside list-disc space-y-1 rounded-lg border p-3 text-sm">
+                    <ul className="border-border bg-muted/50 list-inside list-disc space-y-1 rounded-lg border p-3 text-sm">
                       <li>Client information and contact details</li>
                       <li>Business profiles and settings</li>
                       <li>Invoices and invoice line items</li>
@@ -516,7 +658,7 @@ export function SettingsContent() {
                       deleteConfirmText !== "delete all my data" ||
                       deleteDataMutation.isPending
                     }
-                    className="btn-danger"
+                    className="bg-red-600 hover:bg-red-700"
                   >
                     {deleteDataMutation.isPending
                       ? "Deleting..."