soconnor/beenvoice
1
0
Fork 0
mirror of https://github.com/soconnor0919/beenvoice.git synced 2025-12-13 09:34:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add dark mode styles to dashboard and UI components

Browse Source
This commit is contained in:
Sean O'Connor
2025-07-12 21:50:43 -04:00
parent fa4bd886b3
commit 89de059501
4 changed files with 152 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/dashboard/businesses/page.tsx
View File

@@ -10,10 +10,10 @@ export default async function BusinessesPage() {
<div> <div>
<div className="mb-8 flex flex-col gap-4 md:flex-row md:items-center md:justify-between"> <div className="mb-8 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div> <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 Businesses
</h1> </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. Manage your businesses and their information.
</p> </p>
</div> </div>

112
src/app/dashboard/settings/page.tsx
View File

@@ -232,28 +232,32 @@ export default function SettingsPage() {
<div className="space-y-8"> <div className="space-y-8">
{/* Header */} {/* Header */}
<div> <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 Settings
</h1> </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 Manage your account and data preferences
</p> </p>
</div> </div>
<div className="grid gap-8 lg:grid-cols-2"> <div className="grid gap-8 lg:grid-cols-2">
{/* Profile Section */} {/* Profile Section */}
<Card> <Card className="dark:border-gray-700 dark:bg-gray-800/80">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2 dark:text-white">
<User className="h-5 w-5" /> <User className="h-5 w-5 dark:text-emerald-400" />
Profile Profile
</CardTitle> </CardTitle>
<CardDescription>Update your personal information</CardDescription> <CardDescription className="dark:text-gray-300">
Update your personal information
</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<form onSubmit={handleUpdateProfile} className="space-y-4"> <form onSubmit={handleUpdateProfile} className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="name">Name</Label> <Label htmlFor="name" className="dark:text-gray-300">
Name
</Label>
<Input <Input
id="name" id="name"
value={name} value={name}
@@ -262,14 +266,18 @@ export default function SettingsPage() {
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="email">Email</Label> <Label htmlFor="email" className="dark:text-gray-300">
Email
</Label>
<Input <Input
id="email" id="email"
value={session?.user?.email ?? ""} value={session?.user?.email ?? ""}
disabled 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> </div>
<Button <Button
type="submit" type="submit"
@@ -285,33 +293,41 @@ export default function SettingsPage() {
</Card> </Card>
{/* Data Statistics */} {/* Data Statistics */}
<Card> <Card className="dark:border-gray-700 dark:bg-gray-800/80">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2 dark:text-white">
<Database className="h-5 w-5" /> <Database className="h-5 w-5 dark:text-emerald-400" />
Your Data Your Data
</CardTitle> </CardTitle>
<CardDescription>Overview of your account data</CardDescription> <CardDescription className="dark:text-gray-300">
Overview of your account data
</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="grid grid-cols-3 gap-4 text-center"> <div className="grid grid-cols-3 gap-4 text-center">
<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?.clients ?? 0} {dataStats?.clients ?? 0}
</div> </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> <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} {dataStats?.businesses ?? 0}
</div> </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> <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} {dataStats?.invoices ?? 0}
</div> </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>
</div> </div>
</CardContent> </CardContent>
@@ -319,13 +335,13 @@ export default function SettingsPage() {
</div> </div>
{/* Backup & Restore Section */} {/* Backup & Restore Section */}
<Card> <Card className="dark:border-gray-700 dark:bg-gray-800/80">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2 dark:text-white">
<Shield className="h-5 w-5" /> <Shield className="h-5 w-5 dark:text-emerald-400" />
Backup & Restore Backup & Restore
</CardTitle> </CardTitle>
<CardDescription> <CardDescription className="dark:text-gray-300">
Export your data for backup or import from a previous backup Export your data for backup or import from a previous backup
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
@@ -333,8 +349,8 @@ export default function SettingsPage() {
<div className="grid gap-4 md:grid-cols-2"> <div className="grid gap-4 md:grid-cols-2">
{/* Export Data */} {/* Export Data */}
<div className="space-y-3"> <div className="space-y-3">
<h3 className="font-semibold">Export Data</h3> <h3 className="font-semibold dark:text-white">Export Data</h3>
<p className="text-sm text-gray-600"> <p className="text-sm text-gray-600 dark:text-gray-300">
Download all your clients, businesses, and invoices as a JSON Download all your clients, businesses, and invoices as a JSON
backup file. backup file.
</p> </p>
@@ -351,8 +367,8 @@ export default function SettingsPage() {
{/* Import Data */} {/* Import Data */}
<div className="space-y-3"> <div className="space-y-3">
<h3 className="font-semibold">Import Data</h3> <h3 className="font-semibold dark:text-white">Import Data</h3>
<p className="text-sm text-gray-600"> <p className="text-sm text-gray-600 dark:text-gray-300">
Restore your data from a previous backup file. Restore your data from a previous backup file.
</p> </p>
<Dialog <Dialog
@@ -365,10 +381,12 @@ export default function SettingsPage() {
Import Data Import Data
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-w-2xl"> <DialogContent className="max-w-2xl dark:border-gray-700 dark:bg-gray-800">
<DialogHeader> <DialogHeader>
<DialogTitle>Import Backup Data</DialogTitle> <DialogTitle className="dark:text-white">
<DialogDescription> Import Backup Data
</DialogTitle>
<DialogDescription className="dark:text-gray-300">
Paste the contents of your backup JSON file below. This Paste the contents of your backup JSON file below. This
will add the data to your existing account. will add the data to your existing account.
</DialogDescription> </DialogDescription>
@@ -406,9 +424,11 @@ export default function SettingsPage() {
</div> </div>
</div> </div>
<div className="rounded-lg bg-blue-50 p-4"> <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">Backup Tips</h4> <h4 className="font-medium text-blue-900 dark:text-blue-300">
<ul className="mt-2 space-y-1 text-sm text-blue-800"> 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>• Regular backups help protect your data</li>
<li> <li>
• Backup files contain all your business data in JSON format • Backup files contain all your business data in JSON format
@@ -423,21 +443,23 @@ export default function SettingsPage() {
</Card> </Card>
{/* Danger Zone */} {/* Danger Zone */}
<Card className="border-red-200"> <Card className="border-red-200 dark:border-red-800/50 dark:bg-gray-800/80">
<CardHeader> <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" /> <AlertTriangle className="h-5 w-5" />
Danger Zone Danger Zone
</CardTitle> </CardTitle>
<CardDescription> <CardDescription className="dark:text-gray-300">
Irreversible actions for your account data Irreversible actions for your account data
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-4"> <div className="space-y-4">
<div className="rounded-lg bg-red-50 p-4"> <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">Delete All Data</h4> <h4 className="font-medium text-red-900 dark:text-red-300">
<p className="mt-1 text-sm text-red-800"> 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, This will permanently delete all your clients, businesses,
invoices, and related data. This action cannot be undone. invoices, and related data. This action cannot be undone.
</p> </p>
@@ -447,10 +469,12 @@ export default function SettingsPage() {
<AlertDialogTrigger asChild> <AlertDialogTrigger asChild>
<Button variant="destructive">Delete All Data</Button> <Button variant="destructive">Delete All Data</Button>
</AlertDialogTrigger> </AlertDialogTrigger>
<AlertDialogContent> <AlertDialogContent className="dark:border-gray-700 dark:bg-gray-800">
<AlertDialogHeader> <AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> <AlertDialogTitle className="dark:text-white">
<AlertDialogDescription className="space-y-2"> Are you absolutely sure?
</AlertDialogTitle>
<AlertDialogDescription className="space-y-2 dark:text-gray-300">
<p> <p>
This action cannot be undone. This will permanently delete This action cannot be undone. This will permanently delete
all your: all your:
@@ -463,7 +487,7 @@ export default function SettingsPage() {
</ul> </ul>
<p className="font-medium"> <p className="font-medium">
Type{" "} 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 DELETE ALL DATA
</span>{" "} </span>{" "}
to confirm: to confirm:

137
src/components/ui/skeleton.tsx
View File

@@ -4,7 +4,10 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="skeleton" 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} {...props}
/> />
); );
@@ -17,14 +20,14 @@ export function DashboardStatsSkeleton() {
{Array.from({ length: 4 }).map((_, i) => ( {Array.from({ length: 4 }).map((_, i) => (
<div <div
key={i} 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"> <div className="mb-4 flex items-center justify-between">
<Skeleton className="h-4 w-24" /> <Skeleton className="h-4 w-24 dark:bg-gray-600" />
<Skeleton className="h-8 w-8 rounded-lg" /> <Skeleton className="h-8 w-8 rounded-lg dark:bg-gray-600" />
</div> </div>
<Skeleton className="mb-2 h-8 w-16" /> <Skeleton className="mb-2 h-8 w-16 dark:bg-gray-600" />
<Skeleton className="h-3 w-32" /> <Skeleton className="h-3 w-32 dark:bg-gray-600" />
</div> </div>
))} ))}
</div> </div>
@@ -37,16 +40,16 @@ export function DashboardCardsSkeleton() {
{Array.from({ length: 2 }).map((_, i) => ( {Array.from({ length: 2 }).map((_, i) => (
<div <div
key={i} 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"> <div className="mb-4 flex items-center gap-2">
<Skeleton className="h-8 w-8 rounded-lg" /> <Skeleton className="h-8 w-8 rounded-lg dark:bg-gray-600" />
<Skeleton className="h-6 w-32" /> <Skeleton className="h-6 w-32 dark:bg-gray-600" />
</div> </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"> <div className="flex gap-3">
<Skeleton className="h-10 w-24" /> <Skeleton className="h-10 w-24 dark:bg-gray-600" />
<Skeleton className="h-10 w-32" /> <Skeleton className="h-10 w-32 dark:bg-gray-600" />
</div> </div>
</div> </div>
))} ))}
@@ -56,12 +59,12 @@ export function DashboardCardsSkeleton() {
export function DashboardActivitySkeleton() { export function DashboardActivitySkeleton() {
return ( return (
<div className="rounded-xl border-0 bg-white/80 p-6 shadow-xl backdrop-blur-sm dark:bg-gray-800/80"> <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" /> <Skeleton className="mb-6 h-6 w-32 dark:bg-gray-600" />
<div className="py-12 text-center"> <div className="py-12 text-center">
<Skeleton className="mx-auto mb-4 h-20 w-20 rounded-full" /> <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" /> <Skeleton className="mx-auto mb-2 h-6 w-48 dark:bg-gray-600" />
<Skeleton className="mx-auto h-4 w-64" /> <Skeleton className="mx-auto h-4 w-64 dark:bg-gray-600" />
</div> </div>
</div> </div>
); );
@@ -73,21 +76,21 @@ export function TableSkeleton({ rows = 5 }: { rows?: number }) {
<div className="space-y-4"> <div className="space-y-4">
{/* Search and filters */} {/* Search and filters */}
<div className="flex flex-col gap-4 sm:flex-row"> <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"> <div className="flex gap-2">
<Skeleton className="h-10 w-24" /> <Skeleton className="h-10 w-24 dark:bg-gray-600" />
<Skeleton className="h-10 w-24" /> <Skeleton className="h-10 w-24 dark:bg-gray-600" />
</div> </div>
</div> </div>
{/* Table */} {/* Table */}
<div className="rounded-lg border"> <div className="rounded-lg border dark:border-gray-700 dark:bg-gray-800/90">
<div className="border-b p-4"> <div className="border-b p-4 dark:border-gray-700">
<div className="flex items-center justify-between"> <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"> <div className="flex gap-2">
<Skeleton className="h-8 w-8" /> <Skeleton className="h-8 w-8 dark:bg-gray-600" />
<Skeleton className="h-8 w-8" /> <Skeleton className="h-8 w-8 dark:bg-gray-600" />
</div> </div>
</div> </div>
</div> </div>
@@ -96,12 +99,12 @@ export function TableSkeleton({ rows = 5 }: { rows?: number }) {
<div className="space-y-3"> <div className="space-y-3">
{Array.from({ length: rows }).map((_, i) => ( {Array.from({ length: rows }).map((_, i) => (
<div key={i} className="flex items-center gap-4"> <div key={i} className="flex items-center gap-4">
<Skeleton className="h-4 w-4" /> <Skeleton className="h-4 w-4 dark:bg-gray-600" />
<Skeleton className="h-4 flex-1" /> <Skeleton className="h-4 flex-1 dark:bg-gray-600" />
<Skeleton className="h-4 w-24" /> <Skeleton className="h-4 w-24 dark:bg-gray-600" />
<Skeleton className="h-4 w-24" /> <Skeleton className="h-4 w-24 dark:bg-gray-600" />
<Skeleton className="h-4 w-20" /> <Skeleton className="h-4 w-20 dark:bg-gray-600" />
<Skeleton className="h-8 w-16" /> <Skeleton className="h-8 w-16 dark:bg-gray-600" />
</div> </div>
))} ))}
</div> </div>
@@ -110,11 +113,11 @@ export function TableSkeleton({ rows = 5 }: { rows?: number }) {
{/* Pagination */} {/* Pagination */}
<div className="flex items-center justify-between"> <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"> <div className="flex gap-2">
<Skeleton className="h-8 w-8" /> <Skeleton className="h-8 w-8 dark:bg-gray-600" />
<Skeleton className="h-8 w-8" /> <Skeleton className="h-8 w-8 dark:bg-gray-600" />
<Skeleton className="h-8 w-8" /> <Skeleton className="h-8 w-8 dark:bg-gray-600" />
</div> </div>
</div> </div>
</div> </div>
@@ -127,33 +130,33 @@ export function FormSkeleton() {
<div className="space-y-6"> <div className="space-y-6">
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<Skeleton className="mb-2 h-4 w-20" /> <Skeleton className="mb-2 h-4 w-20 dark:bg-gray-600" />
<Skeleton className="h-10 w-full" /> <Skeleton className="h-10 w-full dark:bg-gray-600" />
</div> </div>
<div> <div>
<Skeleton className="mb-2 h-4 w-24" /> <Skeleton className="mb-2 h-4 w-24 dark:bg-gray-600" />
<Skeleton className="h-10 w-full" /> <Skeleton className="h-10 w-full dark:bg-gray-600" />
</div> </div>
<div> <div>
<Skeleton className="mb-2 h-4 w-16" /> <Skeleton className="mb-2 h-4 w-16 dark:bg-gray-600" />
<Skeleton className="h-10 w-full" /> <Skeleton className="h-10 w-full dark:bg-gray-600" />
</div> </div>
</div> </div>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2"> <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div> <div>
<Skeleton className="mb-2 h-4 w-20" /> <Skeleton className="mb-2 h-4 w-20 dark:bg-gray-600" />
<Skeleton className="h-10 w-full" /> <Skeleton className="h-10 w-full dark:bg-gray-600" />
</div> </div>
<div> <div>
<Skeleton className="mb-2 h-4 w-16" /> <Skeleton className="mb-2 h-4 w-16 dark:bg-gray-600" />
<Skeleton className="h-10 w-full" /> <Skeleton className="h-10 w-full dark:bg-gray-600" />
</div> </div>
</div> </div>
<div className="flex gap-3"> <div className="flex gap-3">
<Skeleton className="h-10 w-24" /> <Skeleton className="h-10 w-24 dark:bg-gray-600" />
<Skeleton className="h-10 w-24" /> <Skeleton className="h-10 w-24 dark:bg-gray-600" />
</div> </div>
</div> </div>
); );
@@ -166,41 +169,41 @@ export function InvoiceViewSkeleton() {
{/* Header */} {/* Header */}
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="space-y-2"> <div className="space-y-2">
<Skeleton className="h-8 w-48" /> <Skeleton className="h-8 w-48 dark:bg-gray-600" />
<Skeleton className="h-4 w-64" /> <Skeleton className="h-4 w-64 dark:bg-gray-600" />
</div> </div>
<Skeleton className="h-10 w-32" /> <Skeleton className="h-10 w-32 dark:bg-gray-600" />
</div> </div>
{/* Client info */} {/* Client info */}
<div className="grid grid-cols-1 gap-6 md:grid-cols-2"> <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
<div className="space-y-3"> <div className="space-y-3">
<Skeleton className="h-5 w-24" /> <Skeleton className="h-5 w-24 dark:bg-gray-600" />
<Skeleton className="h-4 w-full" /> <Skeleton className="h-4 w-full dark:bg-gray-600" />
<Skeleton className="h-4 w-3/4" /> <Skeleton className="h-4 w-3/4 dark:bg-gray-600" />
<Skeleton className="h-4 w-1/2" /> <Skeleton className="h-4 w-1/2 dark:bg-gray-600" />
</div> </div>
<div className="space-y-3"> <div className="space-y-3">
<Skeleton className="h-5 w-24" /> <Skeleton className="h-5 w-24 dark:bg-gray-600" />
<Skeleton className="h-4 w-full" /> <Skeleton className="h-4 w-full dark:bg-gray-600" />
<Skeleton className="h-4 w-3/4" /> <Skeleton className="h-4 w-3/4 dark:bg-gray-600" />
</div> </div>
</div> </div>
{/* Items table */} {/* Items table */}
<div className="rounded-lg border"> <div className="rounded-lg border dark:border-gray-700 dark:bg-gray-800/90">
<div className="border-b p-4"> <div className="border-b p-4 dark:border-gray-700">
<Skeleton className="h-5 w-32" /> <Skeleton className="h-5 w-32 dark:bg-gray-600" />
</div> </div>
<div className="p-4"> <div className="p-4">
<div className="space-y-3"> <div className="space-y-3">
{Array.from({ length: 3 }).map((_, i) => ( {Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="flex items-center gap-4"> <div key={i} className="flex items-center gap-4">
<Skeleton className="h-4 w-20" /> <Skeleton className="h-4 w-20 dark:bg-gray-600" />
<Skeleton className="h-4 flex-1" /> <Skeleton className="h-4 flex-1 dark:bg-gray-600" />
<Skeleton className="h-4 w-16" /> <Skeleton className="h-4 w-16 dark:bg-gray-600" />
<Skeleton className="h-4 w-20" /> <Skeleton className="h-4 w-20 dark:bg-gray-600" />
<Skeleton className="h-4 w-24" /> <Skeleton className="h-4 w-24 dark:bg-gray-600" />
</div> </div>
))} ))}
</div> </div>
@@ -210,8 +213,8 @@ export function InvoiceViewSkeleton() {
{/* Total */} {/* Total */}
<div className="flex justify-end"> <div className="flex justify-end">
<div className="space-y-2"> <div className="space-y-2">
<Skeleton className="h-6 w-32" /> <Skeleton className="h-6 w-32 dark:bg-gray-600" />
<Skeleton className="h-8 w-40" /> <Skeleton className="h-8 w-40 dark:bg-gray-600" />
</div> </div>
</div> </div>
</div> </div>

24
src/components/ui/universal-table.tsx
View File

@@ -646,39 +646,39 @@ export function UniversalTable({ resource }: UniversalTableProps) {
return Array.from({ length: skeletonCount }).map((_, index) => ( return Array.from({ length: skeletonCount }).map((_, index) => (
<TableRow key={`skeleton-${index}`}> <TableRow key={`skeleton-${index}`}>
<TableCell className="px-4 py-4"> <TableCell className="px-4 py-4">
<Skeleton className="h-4 w-4" /> <Skeleton className="h-4 w-4 dark:bg-gray-600" />
</TableCell> </TableCell>
<TableCell className="px-4 py-4"> <TableCell className="px-4 py-4">
<Skeleton className="h-4 w-32" /> <Skeleton className="h-4 w-32 dark:bg-gray-600" />
</TableCell> </TableCell>
<TableCell className="px-4 py-4"> <TableCell className="px-4 py-4">
<Skeleton className="h-4 w-40" /> <Skeleton className="h-4 w-40 dark:bg-gray-600" />
</TableCell> </TableCell>
<TableCell className="px-4 py-4"> <TableCell className="px-4 py-4">
<Skeleton className="h-4 w-28" /> <Skeleton className="h-4 w-28 dark:bg-gray-600" />
</TableCell> </TableCell>
{resource === "invoices" && ( {resource === "invoices" && (
<> <>
<TableCell className="px-4 py-4"> <TableCell className="px-4 py-4">
<Skeleton className="h-4 w-20" /> <Skeleton className="h-4 w-20 dark:bg-gray-600" />
</TableCell> </TableCell>
<TableCell className="px-4 py-4"> <TableCell className="px-4 py-4">
<Skeleton className="h-4 w-24" /> <Skeleton className="h-4 w-24 dark:bg-gray-600" />
</TableCell> </TableCell>
</> </>
)} )}
{resource === "businesses" && ( {resource === "businesses" && (
<> <>
<TableCell className="px-4 py-4"> <TableCell className="px-4 py-4">
<Skeleton className="h-4 w-28" /> <Skeleton className="h-4 w-28 dark:bg-gray-600" />
</TableCell> </TableCell>
<TableCell className="px-4 py-4"> <TableCell className="px-4 py-4">
<Skeleton className="h-4 w-16" /> <Skeleton className="h-4 w-16 dark:bg-gray-600" />
</TableCell> </TableCell>
</> </>
)} )}
<TableCell className="px-4 py-4"> <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> </TableCell>
</TableRow> </TableRow>
)); ));
@@ -1258,9 +1258,9 @@ export function UniversalTable({ resource }: UniversalTableProps) {
key={`skeleton-card-${index}`} 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" 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-6 w-32 dark:bg-gray-600" />
<Skeleton className="h-4 w-40" /> <Skeleton className="h-4 w-40 dark:bg-gray-600" />
<Skeleton className="h-4 w-28" /> <Skeleton className="h-4 w-28 dark:bg-gray-600" />
</div> </div>
)) ))
) : filteredAndSortedData.length === 0 ? ( ) : filteredAndSortedData.length === 0 ? (