From 89de0595018b9080a3bcdcaa830a1abe73b5a4a4 Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Sat, 12 Jul 2025 21:50:43 -0400
Subject: [PATCH] Add dark mode styles to dashboard and UI components

---
 src/app/dashboard/businesses/page.tsx |   4 +-
 src/app/dashboard/settings/page.tsx   | 112 ++++++++++++---------
 src/components/ui/skeleton.tsx        | 137 +++++++++++++-------------
 src/components/ui/universal-table.tsx |  24 ++---
 4 files changed, 152 insertions(+), 125 deletions(-)

diff --git a/src/app/dashboard/businesses/page.tsx b/src/app/dashboard/businesses/page.tsx
index 95d04ce..2754c6a 100644
--- a/src/app/dashboard/businesses/page.tsx
+++ b/src/app/dashboard/businesses/page.tsx
@@ -10,10 +10,10 @@ export default async function BusinessesPage() {
     <div>
       <div className="mb-8 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
         <div>
-          <h1 className="bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-3xl font-bold text-transparent">
+          <h1 className="bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-3xl font-bold text-transparent dark:from-emerald-400 dark:to-teal-400">
             Businesses
           </h1>
-          <p className="mt-1 text-lg text-gray-600">
+          <p className="mt-1 text-lg text-gray-600 dark:text-gray-300">
             Manage your businesses and their information.
           </p>
         </div>
diff --git a/src/app/dashboard/settings/page.tsx b/src/app/dashboard/settings/page.tsx
index fcead50..3905aa1 100644
--- a/src/app/dashboard/settings/page.tsx
+++ b/src/app/dashboard/settings/page.tsx
@@ -232,28 +232,32 @@ export default function SettingsPage() {
     <div className="space-y-8">
       {/* Header */}
       <div>
-        <h1 className="bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-4xl font-bold text-transparent">
+        <h1 className="bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-4xl font-bold text-transparent dark:from-emerald-400 dark:to-teal-400">
           Settings
         </h1>
-        <p className="mt-2 text-lg text-gray-600">
+        <p className="mt-2 text-lg text-gray-600 dark:text-gray-300">
           Manage your account and data preferences
         </p>
       </div>
 
       <div className="grid gap-8 lg:grid-cols-2">
         {/* Profile Section */}
-        <Card>
+        <Card className="dark:border-gray-700 dark:bg-gray-800/80">
           <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <User className="h-5 w-5" />
+            <CardTitle className="flex items-center gap-2 dark:text-white">
+              <User className="h-5 w-5 dark:text-emerald-400" />
               Profile
             </CardTitle>
-            <CardDescription>Update your personal information</CardDescription>
+            <CardDescription className="dark:text-gray-300">
+              Update your personal information
+            </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
             <form onSubmit={handleUpdateProfile} className="space-y-4">
               <div className="space-y-2">
-                <Label htmlFor="name">Name</Label>
+                <Label htmlFor="name" className="dark:text-gray-300">
+                  Name
+                </Label>
                 <Input
                   id="name"
                   value={name}
@@ -262,14 +266,18 @@ export default function SettingsPage() {
                 />
               </div>
               <div className="space-y-2">
-                <Label htmlFor="email">Email</Label>
+                <Label htmlFor="email" className="dark:text-gray-300">
+                  Email
+                </Label>
                 <Input
                   id="email"
                   value={session?.user?.email ?? ""}
                   disabled
-                  className="bg-gray-50"
+                  className="bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
                 />
-                <p className="text-sm text-gray-500">Email cannot be changed</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Email cannot be changed
+                </p>
               </div>
               <Button
                 type="submit"
@@ -285,33 +293,41 @@ export default function SettingsPage() {
         </Card>
 
         {/* Data Statistics */}
-        <Card>
+        <Card className="dark:border-gray-700 dark:bg-gray-800/80">
           <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Database className="h-5 w-5" />
+            <CardTitle className="flex items-center gap-2 dark:text-white">
+              <Database className="h-5 w-5 dark:text-emerald-400" />
               Your Data
             </CardTitle>
-            <CardDescription>Overview of your account data</CardDescription>
+            <CardDescription className="dark:text-gray-300">
+              Overview of your account data
+            </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
             <div className="grid grid-cols-3 gap-4 text-center">
               <div>
-                <div className="text-2xl font-bold text-emerald-600">
+                <div className="text-2xl font-bold text-emerald-600 dark:text-emerald-400">
                   {dataStats?.clients ?? 0}
                 </div>
-                <div className="text-sm text-gray-500">Clients</div>
+                <div className="text-sm text-gray-500 dark:text-gray-400">
+                  Clients
+                </div>
               </div>
               <div>
-                <div className="text-2xl font-bold text-emerald-600">
+                <div className="text-2xl font-bold text-emerald-600 dark:text-emerald-400">
                   {dataStats?.businesses ?? 0}
                 </div>
-                <div className="text-sm text-gray-500">Businesses</div>
+                <div className="text-sm text-gray-500 dark:text-gray-400">
+                  Businesses
+                </div>
               </div>
               <div>
-                <div className="text-2xl font-bold text-emerald-600">
+                <div className="text-2xl font-bold text-emerald-600 dark:text-emerald-400">
                   {dataStats?.invoices ?? 0}
                 </div>
-                <div className="text-sm text-gray-500">Invoices</div>
+                <div className="text-sm text-gray-500 dark:text-gray-400">
+                  Invoices
+                </div>
               </div>
             </div>
           </CardContent>
@@ -319,13 +335,13 @@ export default function SettingsPage() {
       </div>
 
       {/* Backup & Restore Section */}
-      <Card>
+      <Card className="dark:border-gray-700 dark:bg-gray-800/80">
         <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Shield className="h-5 w-5" />
+          <CardTitle className="flex items-center gap-2 dark:text-white">
+            <Shield className="h-5 w-5 dark:text-emerald-400" />
             Backup & Restore
           </CardTitle>
-          <CardDescription>
+          <CardDescription className="dark:text-gray-300">
             Export your data for backup or import from a previous backup
           </CardDescription>
         </CardHeader>
@@ -333,8 +349,8 @@ export default function SettingsPage() {
           <div className="grid gap-4 md:grid-cols-2">
             {/* Export Data */}
             <div className="space-y-3">
-              <h3 className="font-semibold">Export Data</h3>
-              <p className="text-sm text-gray-600">
+              <h3 className="font-semibold dark:text-white">Export Data</h3>
+              <p className="text-sm text-gray-600 dark:text-gray-300">
                 Download all your clients, businesses, and invoices as a JSON
                 backup file.
               </p>
@@ -351,8 +367,8 @@ export default function SettingsPage() {
 
             {/* Import Data */}
             <div className="space-y-3">
-              <h3 className="font-semibold">Import Data</h3>
-              <p className="text-sm text-gray-600">
+              <h3 className="font-semibold dark:text-white">Import Data</h3>
+              <p className="text-sm text-gray-600 dark:text-gray-300">
                 Restore your data from a previous backup file.
               </p>
               <Dialog
@@ -365,10 +381,12 @@ export default function SettingsPage() {
                     Import Data
                   </Button>
                 </DialogTrigger>
-                <DialogContent className="max-w-2xl">
+                <DialogContent className="max-w-2xl dark:border-gray-700 dark:bg-gray-800">
                   <DialogHeader>
-                    <DialogTitle>Import Backup Data</DialogTitle>
-                    <DialogDescription>
+                    <DialogTitle className="dark:text-white">
+                      Import Backup Data
+                    </DialogTitle>
+                    <DialogDescription className="dark:text-gray-300">
                       Paste the contents of your backup JSON file below. This
                       will add the data to your existing account.
                     </DialogDescription>
@@ -406,9 +424,11 @@ export default function SettingsPage() {
             </div>
           </div>
 
-          <div className="rounded-lg bg-blue-50 p-4">
-            <h4 className="font-medium text-blue-900">Backup Tips</h4>
-            <ul className="mt-2 space-y-1 text-sm text-blue-800">
+          <div className="rounded-lg bg-blue-50 p-4 dark:border dark:border-blue-800/30 dark:bg-blue-900/20">
+            <h4 className="font-medium text-blue-900 dark:text-blue-300">
+              Backup Tips
+            </h4>
+            <ul className="mt-2 space-y-1 text-sm text-blue-800 dark:text-blue-200">
               <li>• Regular backups help protect your data</li>
               <li>
                 • Backup files contain all your business data in JSON format
@@ -423,21 +443,23 @@ export default function SettingsPage() {
       </Card>
 
       {/* Danger Zone */}
-      <Card className="border-red-200">
+      <Card className="border-red-200 dark:border-red-800/50 dark:bg-gray-800/80">
         <CardHeader>
-          <CardTitle className="flex items-center gap-2 text-red-600">
+          <CardTitle className="flex items-center gap-2 text-red-600 dark:text-red-400">
             <AlertTriangle className="h-5 w-5" />
             Danger Zone
           </CardTitle>
-          <CardDescription>
+          <CardDescription className="dark:text-gray-300">
             Irreversible actions for your account data
           </CardDescription>
         </CardHeader>
         <CardContent>
           <div className="space-y-4">
-            <div className="rounded-lg bg-red-50 p-4">
-              <h4 className="font-medium text-red-900">Delete All Data</h4>
-              <p className="mt-1 text-sm text-red-800">
+            <div className="rounded-lg bg-red-50 p-4 dark:border dark:border-red-800/30 dark:bg-red-900/20">
+              <h4 className="font-medium text-red-900 dark:text-red-300">
+                Delete All Data
+              </h4>
+              <p className="mt-1 text-sm text-red-800 dark:text-red-200">
                 This will permanently delete all your clients, businesses,
                 invoices, and related data. This action cannot be undone.
               </p>
@@ -447,10 +469,12 @@ export default function SettingsPage() {
               <AlertDialogTrigger asChild>
                 <Button variant="destructive">Delete All Data</Button>
               </AlertDialogTrigger>
-              <AlertDialogContent>
+              <AlertDialogContent className="dark:border-gray-700 dark:bg-gray-800">
                 <AlertDialogHeader>
-                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-                  <AlertDialogDescription className="space-y-2">
+                  <AlertDialogTitle className="dark:text-white">
+                    Are you absolutely sure?
+                  </AlertDialogTitle>
+                  <AlertDialogDescription className="space-y-2 dark:text-gray-300">
                     <p>
                       This action cannot be undone. This will permanently delete
                       all your:
@@ -463,7 +487,7 @@ export default function SettingsPage() {
                     </ul>
                     <p className="font-medium">
                       Type{" "}
-                      <span className="rounded bg-gray-100 px-1 font-mono">
+                      <span className="rounded bg-gray-100 px-1 font-mono dark:bg-gray-700 dark:text-gray-200">
                         DELETE ALL DATA
                       </span>{" "}
                       to confirm:
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
index 85b66b1..546d293 100644
--- a/src/components/ui/skeleton.tsx
+++ b/src/components/ui/skeleton.tsx
@@ -4,7 +4,10 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="skeleton"
-      className={cn("bg-muted animate-pulse rounded-md", className)}
+      className={cn(
+        "bg-muted animate-pulse rounded-md dark:bg-gray-700",
+        className,
+      )}
       {...props}
     />
   );
@@ -17,14 +20,14 @@ export function DashboardStatsSkeleton() {
       {Array.from({ length: 4 }).map((_, i) => (
         <div
           key={i}
-          className="rounded-xl border-0 bg-white/80 p-6 shadow-xl backdrop-blur-sm dark:bg-gray-800/80"
+          className="rounded-xl border-0 bg-white/80 p-6 shadow-xl backdrop-blur-sm dark:border-gray-700 dark:bg-gray-800/80"
         >
           <div className="mb-4 flex items-center justify-between">
-            <Skeleton className="h-4 w-24" />
-            <Skeleton className="h-8 w-8 rounded-lg" />
+            <Skeleton className="h-4 w-24 dark:bg-gray-600" />
+            <Skeleton className="h-8 w-8 rounded-lg dark:bg-gray-600" />
           </div>
-          <Skeleton className="mb-2 h-8 w-16" />
-          <Skeleton className="h-3 w-32" />
+          <Skeleton className="mb-2 h-8 w-16 dark:bg-gray-600" />
+          <Skeleton className="h-3 w-32 dark:bg-gray-600" />
         </div>
       ))}
     </div>
@@ -37,16 +40,16 @@ export function DashboardCardsSkeleton() {
       {Array.from({ length: 2 }).map((_, i) => (
         <div
           key={i}
-          className="rounded-xl border-0 bg-white/80 p-6 shadow-xl backdrop-blur-sm dark:bg-gray-800/80"
+          className="rounded-xl border-0 bg-white/80 p-6 shadow-xl backdrop-blur-sm dark:border-gray-700 dark:bg-gray-800/80"
         >
           <div className="mb-4 flex items-center gap-2">
-            <Skeleton className="h-8 w-8 rounded-lg" />
-            <Skeleton className="h-6 w-32" />
+            <Skeleton className="h-8 w-8 rounded-lg dark:bg-gray-600" />
+            <Skeleton className="h-6 w-32 dark:bg-gray-600" />
           </div>
-          <Skeleton className="mb-4 h-4 w-full" />
+          <Skeleton className="mb-4 h-4 w-full dark:bg-gray-600" />
           <div className="flex gap-3">
-            <Skeleton className="h-10 w-24" />
-            <Skeleton className="h-10 w-32" />
+            <Skeleton className="h-10 w-24 dark:bg-gray-600" />
+            <Skeleton className="h-10 w-32 dark:bg-gray-600" />
           </div>
         </div>
       ))}
@@ -56,12 +59,12 @@ export function DashboardCardsSkeleton() {
 
 export function DashboardActivitySkeleton() {
   return (
-    <div className="rounded-xl border-0 bg-white/80 p-6 shadow-xl backdrop-blur-sm dark:bg-gray-800/80">
-      <Skeleton className="mb-6 h-6 w-32" />
+    <div className="rounded-xl border-0 bg-white/80 p-6 shadow-xl backdrop-blur-sm dark:border-gray-700 dark:bg-gray-800/80">
+      <Skeleton className="mb-6 h-6 w-32 dark:bg-gray-600" />
       <div className="py-12 text-center">
-        <Skeleton className="mx-auto mb-4 h-20 w-20 rounded-full" />
-        <Skeleton className="mx-auto mb-2 h-6 w-48" />
-        <Skeleton className="mx-auto h-4 w-64" />
+        <Skeleton className="mx-auto mb-4 h-20 w-20 rounded-full dark:bg-gray-600" />
+        <Skeleton className="mx-auto mb-2 h-6 w-48 dark:bg-gray-600" />
+        <Skeleton className="mx-auto h-4 w-64 dark:bg-gray-600" />
       </div>
     </div>
   );
@@ -73,21 +76,21 @@ export function TableSkeleton({ rows = 5 }: { rows?: number }) {
     <div className="space-y-4">
       {/* Search and filters */}
       <div className="flex flex-col gap-4 sm:flex-row">
-        <Skeleton className="h-10 w-64" />
+        <Skeleton className="h-10 w-64 dark:bg-gray-600" />
         <div className="flex gap-2">
-          <Skeleton className="h-10 w-24" />
-          <Skeleton className="h-10 w-24" />
+          <Skeleton className="h-10 w-24 dark:bg-gray-600" />
+          <Skeleton className="h-10 w-24 dark:bg-gray-600" />
         </div>
       </div>
 
       {/* Table */}
-      <div className="rounded-lg border">
-        <div className="border-b p-4">
+      <div className="rounded-lg border dark:border-gray-700 dark:bg-gray-800/90">
+        <div className="border-b p-4 dark:border-gray-700">
           <div className="flex items-center justify-between">
-            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-4 w-32 dark:bg-gray-600" />
             <div className="flex gap-2">
-              <Skeleton className="h-8 w-8" />
-              <Skeleton className="h-8 w-8" />
+              <Skeleton className="h-8 w-8 dark:bg-gray-600" />
+              <Skeleton className="h-8 w-8 dark:bg-gray-600" />
             </div>
           </div>
         </div>
@@ -96,12 +99,12 @@ export function TableSkeleton({ rows = 5 }: { rows?: number }) {
           <div className="space-y-3">
             {Array.from({ length: rows }).map((_, i) => (
               <div key={i} className="flex items-center gap-4">
-                <Skeleton className="h-4 w-4" />
-                <Skeleton className="h-4 flex-1" />
-                <Skeleton className="h-4 w-24" />
-                <Skeleton className="h-4 w-24" />
-                <Skeleton className="h-4 w-20" />
-                <Skeleton className="h-8 w-16" />
+                <Skeleton className="h-4 w-4 dark:bg-gray-600" />
+                <Skeleton className="h-4 flex-1 dark:bg-gray-600" />
+                <Skeleton className="h-4 w-24 dark:bg-gray-600" />
+                <Skeleton className="h-4 w-24 dark:bg-gray-600" />
+                <Skeleton className="h-4 w-20 dark:bg-gray-600" />
+                <Skeleton className="h-8 w-16 dark:bg-gray-600" />
               </div>
             ))}
           </div>
@@ -110,11 +113,11 @@ export function TableSkeleton({ rows = 5 }: { rows?: number }) {
 
       {/* Pagination */}
       <div className="flex items-center justify-between">
-        <Skeleton className="h-4 w-32" />
+        <Skeleton className="h-4 w-32 dark:bg-gray-600" />
         <div className="flex gap-2">
-          <Skeleton className="h-8 w-8" />
-          <Skeleton className="h-8 w-8" />
-          <Skeleton className="h-8 w-8" />
+          <Skeleton className="h-8 w-8 dark:bg-gray-600" />
+          <Skeleton className="h-8 w-8 dark:bg-gray-600" />
+          <Skeleton className="h-8 w-8 dark:bg-gray-600" />
         </div>
       </div>
     </div>
@@ -127,33 +130,33 @@ export function FormSkeleton() {
     <div className="space-y-6">
       <div className="space-y-4">
         <div>
-          <Skeleton className="mb-2 h-4 w-20" />
-          <Skeleton className="h-10 w-full" />
+          <Skeleton className="mb-2 h-4 w-20 dark:bg-gray-600" />
+          <Skeleton className="h-10 w-full dark:bg-gray-600" />
         </div>
         <div>
-          <Skeleton className="mb-2 h-4 w-24" />
-          <Skeleton className="h-10 w-full" />
+          <Skeleton className="mb-2 h-4 w-24 dark:bg-gray-600" />
+          <Skeleton className="h-10 w-full dark:bg-gray-600" />
         </div>
         <div>
-          <Skeleton className="mb-2 h-4 w-16" />
-          <Skeleton className="h-10 w-full" />
+          <Skeleton className="mb-2 h-4 w-16 dark:bg-gray-600" />
+          <Skeleton className="h-10 w-full dark:bg-gray-600" />
         </div>
       </div>
 
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         <div>
-          <Skeleton className="mb-2 h-4 w-20" />
-          <Skeleton className="h-10 w-full" />
+          <Skeleton className="mb-2 h-4 w-20 dark:bg-gray-600" />
+          <Skeleton className="h-10 w-full dark:bg-gray-600" />
         </div>
         <div>
-          <Skeleton className="mb-2 h-4 w-16" />
-          <Skeleton className="h-10 w-full" />
+          <Skeleton className="mb-2 h-4 w-16 dark:bg-gray-600" />
+          <Skeleton className="h-10 w-full dark:bg-gray-600" />
         </div>
       </div>
 
       <div className="flex gap-3">
-        <Skeleton className="h-10 w-24" />
-        <Skeleton className="h-10 w-24" />
+        <Skeleton className="h-10 w-24 dark:bg-gray-600" />
+        <Skeleton className="h-10 w-24 dark:bg-gray-600" />
       </div>
     </div>
   );
@@ -166,41 +169,41 @@ export function InvoiceViewSkeleton() {
       {/* Header */}
       <div className="flex items-start justify-between">
         <div className="space-y-2">
-          <Skeleton className="h-8 w-48" />
-          <Skeleton className="h-4 w-64" />
+          <Skeleton className="h-8 w-48 dark:bg-gray-600" />
+          <Skeleton className="h-4 w-64 dark:bg-gray-600" />
         </div>
-        <Skeleton className="h-10 w-32" />
+        <Skeleton className="h-10 w-32 dark:bg-gray-600" />
       </div>
 
       {/* Client info */}
       <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
         <div className="space-y-3">
-          <Skeleton className="h-5 w-24" />
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-3/4" />
-          <Skeleton className="h-4 w-1/2" />
+          <Skeleton className="h-5 w-24 dark:bg-gray-600" />
+          <Skeleton className="h-4 w-full dark:bg-gray-600" />
+          <Skeleton className="h-4 w-3/4 dark:bg-gray-600" />
+          <Skeleton className="h-4 w-1/2 dark:bg-gray-600" />
         </div>
         <div className="space-y-3">
-          <Skeleton className="h-5 w-24" />
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-3/4" />
+          <Skeleton className="h-5 w-24 dark:bg-gray-600" />
+          <Skeleton className="h-4 w-full dark:bg-gray-600" />
+          <Skeleton className="h-4 w-3/4 dark:bg-gray-600" />
         </div>
       </div>
 
       {/* Items table */}
-      <div className="rounded-lg border">
-        <div className="border-b p-4">
-          <Skeleton className="h-5 w-32" />
+      <div className="rounded-lg border dark:border-gray-700 dark:bg-gray-800/90">
+        <div className="border-b p-4 dark:border-gray-700">
+          <Skeleton className="h-5 w-32 dark:bg-gray-600" />
         </div>
         <div className="p-4">
           <div className="space-y-3">
             {Array.from({ length: 3 }).map((_, i) => (
               <div key={i} className="flex items-center gap-4">
-                <Skeleton className="h-4 w-20" />
-                <Skeleton className="h-4 flex-1" />
-                <Skeleton className="h-4 w-16" />
-                <Skeleton className="h-4 w-20" />
-                <Skeleton className="h-4 w-24" />
+                <Skeleton className="h-4 w-20 dark:bg-gray-600" />
+                <Skeleton className="h-4 flex-1 dark:bg-gray-600" />
+                <Skeleton className="h-4 w-16 dark:bg-gray-600" />
+                <Skeleton className="h-4 w-20 dark:bg-gray-600" />
+                <Skeleton className="h-4 w-24 dark:bg-gray-600" />
               </div>
             ))}
           </div>
@@ -210,8 +213,8 @@ export function InvoiceViewSkeleton() {
       {/* Total */}
       <div className="flex justify-end">
         <div className="space-y-2">
-          <Skeleton className="h-6 w-32" />
-          <Skeleton className="h-8 w-40" />
+          <Skeleton className="h-6 w-32 dark:bg-gray-600" />
+          <Skeleton className="h-8 w-40 dark:bg-gray-600" />
         </div>
       </div>
     </div>
diff --git a/src/components/ui/universal-table.tsx b/src/components/ui/universal-table.tsx
index 4ab8427..b7203a8 100644
--- a/src/components/ui/universal-table.tsx
+++ b/src/components/ui/universal-table.tsx
@@ -646,39 +646,39 @@ export function UniversalTable({ resource }: UniversalTableProps) {
       return Array.from({ length: skeletonCount }).map((_, index) => (
         <TableRow key={`skeleton-${index}`}>
           <TableCell className="px-4 py-4">
-            <Skeleton className="h-4 w-4" />
+            <Skeleton className="h-4 w-4 dark:bg-gray-600" />
           </TableCell>
           <TableCell className="px-4 py-4">
-            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-4 w-32 dark:bg-gray-600" />
           </TableCell>
           <TableCell className="px-4 py-4">
-            <Skeleton className="h-4 w-40" />
+            <Skeleton className="h-4 w-40 dark:bg-gray-600" />
           </TableCell>
           <TableCell className="px-4 py-4">
-            <Skeleton className="h-4 w-28" />
+            <Skeleton className="h-4 w-28 dark:bg-gray-600" />
           </TableCell>
           {resource === "invoices" && (
             <>
               <TableCell className="px-4 py-4">
-                <Skeleton className="h-4 w-20" />
+                <Skeleton className="h-4 w-20 dark:bg-gray-600" />
               </TableCell>
               <TableCell className="px-4 py-4">
-                <Skeleton className="h-4 w-24" />
+                <Skeleton className="h-4 w-24 dark:bg-gray-600" />
               </TableCell>
             </>
           )}
           {resource === "businesses" && (
             <>
               <TableCell className="px-4 py-4">
-                <Skeleton className="h-4 w-28" />
+                <Skeleton className="h-4 w-28 dark:bg-gray-600" />
               </TableCell>
               <TableCell className="px-4 py-4">
-                <Skeleton className="h-4 w-16" />
+                <Skeleton className="h-4 w-16 dark:bg-gray-600" />
               </TableCell>
             </>
           )}
           <TableCell className="px-4 py-4">
-            <Skeleton className="h-8 w-8 rounded" />
+            <Skeleton className="h-8 w-8 rounded dark:bg-gray-600" />
           </TableCell>
         </TableRow>
       ));
@@ -1258,9 +1258,9 @@ export function UniversalTable({ resource }: UniversalTableProps) {
                 key={`skeleton-card-${index}`}
                 className="flex flex-col gap-2 rounded-2xl border border-gray-200 bg-white/90 p-4 shadow-xl dark:border-gray-700 dark:bg-gray-800/90"
               >
-                <Skeleton className="h-6 w-32" />
-                <Skeleton className="h-4 w-40" />
-                <Skeleton className="h-4 w-28" />
+                <Skeleton className="h-6 w-32 dark:bg-gray-600" />
+                <Skeleton className="h-4 w-40 dark:bg-gray-600" />
+                <Skeleton className="h-4 w-28 dark:bg-gray-600" />
               </div>
             ))
           ) : filteredAndSortedData.length === 0 ? (