From 93ffdf3c862a2c795a8484d5f2bfe3a828232679 Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Fri, 1 Aug 2025 14:21:10 -0400
Subject: [PATCH] Add global animation system and entrance effects to UI

---
 public/beenvoice.afdesign                     | Bin 0 -> 22216 bytes
 .../_components/animated-stats-card.tsx       |  84 +++
 src/app/dashboard/businesses/page.tsx         |   6 +-
 src/app/dashboard/clients/page.tsx            |   6 +-
 src/app/dashboard/invoices/[id]/page.tsx      |  14 +-
 .../_components/invoices-data-table.tsx       |  15 +-
 src/app/dashboard/invoices/page.tsx           |   8 +-
 src/app/dashboard/page.tsx                    | 103 +--
 .../settings/_components/settings-content.tsx |  70 +-
 src/app/dashboard/settings/page.tsx           |   4 +-
 src/components/data/data-table.tsx            |   2 +-
 src/components/data/status-badge.tsx          |  10 +-
 src/components/forms/invoice-form.tsx         |  11 +-
 src/components/layout/floating-action-bar.tsx |  10 +-
 src/components/layout/page-header.tsx         |  22 +-
 src/components/ui/skeletons.tsx               | 352 ++++++++++
 src/hooks/useCountUp.ts                       | 133 ++++
 src/styles/globals.css                        | 637 ++++++++++++++++++
 18 files changed, 1363 insertions(+), 124 deletions(-)
 create mode 100644 public/beenvoice.afdesign
 create mode 100644 src/app/dashboard/_components/animated-stats-card.tsx
 create mode 100644 src/components/ui/skeletons.tsx
 create mode 100644 src/hooks/useCountUp.ts

diff --git a/public/beenvoice.afdesign b/public/beenvoice.afdesign
new file mode 100644
index 0000000000000000000000000000000000000000..94d76175ba871f0c3492f56a9e93122ca1ed229e
GIT binary patch
literal 22216
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

literal 0
HcmV?d00001

diff --git a/src/app/dashboard/_components/animated-stats-card.tsx b/src/app/dashboard/_components/animated-stats-card.tsx
new file mode 100644
index 0000000..45d97d8
--- /dev/null
+++ b/src/app/dashboard/_components/animated-stats-card.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import {
+  TrendingDown,
+  TrendingUp,
+  DollarSign,
+  Clock,
+  Users,
+} from "lucide-react";
+import { Card, CardContent } from "~/components/ui/card";
+
+type IconName = "DollarSign" | "Clock" | "Users" | "TrendingDown";
+
+interface AnimatedStatsCardProps {
+  title: string;
+  value: string;
+  change: string;
+  trend: "up" | "down";
+  iconName: IconName;
+  description: string;
+  delay?: number;
+  isCurrency?: boolean;
+  numericValue?: number;
+}
+
+const iconMap = {
+  DollarSign,
+  Clock,
+  Users,
+  TrendingDown,
+} as const;
+
+export function AnimatedStatsCard({
+  title,
+  value,
+  change,
+  trend,
+  iconName,
+  description,
+  delay = 0,
+  isCurrency = false,
+  numericValue,
+}: AnimatedStatsCardProps) {
+  const Icon = iconMap[iconName];
+  const TrendIcon = trend === "up" ? TrendingUp : TrendingDown;
+  const isPositive = trend === "up";
+
+  // For now, always use the formatted value prop to ensure correct display
+  // Animation can be added back once the basic display is working correctly
+  const displayValue = value;
+
+  // Suppress unused parameter warnings for now
+  void delay;
+  void isCurrency;
+  void numericValue;
+
+  return (
+    <Card className="stats-card">
+      <CardContent className="p-6">
+        <div className="flex items-center justify-between space-y-0 pb-2">
+          <div className="flex items-center space-x-2">
+            <Icon className="text-muted-foreground h-5 w-5" />
+            <p className="text-muted-foreground text-sm font-medium">{title}</p>
+          </div>
+          <div
+            className="flex items-center space-x-1 text-xs"
+            style={{
+              color: isPositive
+                ? "oklch(var(--chart-2))"
+                : "oklch(var(--chart-3))",
+            }}
+          >
+            <TrendIcon className="h-3 w-3" />
+            <span>{change}</span>
+          </div>
+        </div>
+        <div className="space-y-1">
+          <p className="animate-count-up text-2xl font-bold">{displayValue}</p>
+          <p className="text-muted-foreground text-xs">{description}</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/app/dashboard/businesses/page.tsx b/src/app/dashboard/businesses/page.tsx
index 77cffa8..cfac894 100644
--- a/src/app/dashboard/businesses/page.tsx
+++ b/src/app/dashboard/businesses/page.tsx
@@ -16,13 +16,13 @@ async function BusinessesTable() {
 
 export default async function BusinessesPage() {
   return (
-    <>
+    <div className="page-enter space-y-8">
       <PageHeader
         title="Businesses"
         description="Manage your businesses and their information"
         variant="gradient"
       >
-        <Button asChild variant="default" className="shadow-md">
+        <Button asChild variant="default" className="hover-lift shadow-md">
           <Link href="/dashboard/businesses/new">
             <Plus className="mr-2 h-5 w-5" />
             <span>Add Business</span>
@@ -35,6 +35,6 @@ export default async function BusinessesPage() {
           <BusinessesTable />
         </Suspense>
       </HydrateClient>
-    </>
+    </div>
   );
 }
diff --git a/src/app/dashboard/clients/page.tsx b/src/app/dashboard/clients/page.tsx
index f61337c..a846349 100644
--- a/src/app/dashboard/clients/page.tsx
+++ b/src/app/dashboard/clients/page.tsx
@@ -7,13 +7,13 @@ import { ClientsTable } from "./_components/clients-table";
 
 export default async function ClientsPage() {
   return (
-    <>
+    <div className="page-enter space-y-8">
       <PageHeader
         title="Clients"
         description="Manage your clients and their information."
         variant="gradient"
       >
-        <Button asChild variant="default" className="shadow-md">
+        <Button asChild variant="default" className="hover-lift shadow-md">
           <Link href="/dashboard/clients/new">
             <Plus className="mr-2 h-5 w-5" />
             <span>Add Client</span>
@@ -24,6 +24,6 @@ export default async function ClientsPage() {
       <HydrateClient>
         <ClientsTable />
       </HydrateClient>
-    </>
+    </div>
   );
 }
diff --git a/src/app/dashboard/invoices/[id]/page.tsx b/src/app/dashboard/invoices/[id]/page.tsx
index 0ebcdfb..ab903e0 100644
--- a/src/app/dashboard/invoices/[id]/page.tsx
+++ b/src/app/dashboard/invoices/[id]/page.tsx
@@ -123,14 +123,18 @@ function InvoiceViewContent({ invoiceId }: { invoiceId: string }) {
   };
 
   return (
-    <div className="space-y-6 pb-24">
+    <div className="page-enter space-y-6 pb-24">
       <PageHeader
         title="Invoice Details"
         description="View and manage invoice information"
         variant="gradient"
       >
-        <PDFDownloadButton invoiceId={invoice.id} variant="outline" />
-        <Button asChild variant="default">
+        <PDFDownloadButton
+          invoiceId={invoice.id}
+          variant="outline"
+          className="hover-lift"
+        />
+        <Button asChild variant="default" className="hover-lift">
           <Link href={`/dashboard/invoices/${invoice.id}/edit`}>
             <Edit className="h-5 w-5" />
             <span>Edit</span>
@@ -324,8 +328,8 @@ function InvoiceViewContent({ invoiceId }: { invoiceId: string }) {
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
-              {invoice.items.map((item) => (
-                <Card key={item.id} className="card-secondary">
+              {invoice.items.map((item, _index) => (
+                <Card key={item.id} className="invoice-item card-secondary">
                   <CardContent className="p-3">
                     <div className="space-y-3">
                       <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
diff --git a/src/app/dashboard/invoices/_components/invoices-data-table.tsx b/src/app/dashboard/invoices/_components/invoices-data-table.tsx
index 0907d0b..a0d79de 100644
--- a/src/app/dashboard/invoices/_components/invoices-data-table.tsx
+++ b/src/app/dashboard/invoices/_components/invoices-data-table.tsx
@@ -165,7 +165,14 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
       ),
       cell: ({ row }) => {
         const invoice = row.original;
-        return <StatusBadge status={getStatusType(invoice)} />;
+        return (
+          <StatusBadge
+            status={getStatusType(invoice)}
+            className={
+              getStatusType(invoice) === "sent" ? "status-pending" : ""
+            }
+          />
+        );
       },
       filterFn: (row, id, value: string[]) => {
         const invoice = row.original;
@@ -210,7 +217,7 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
               <Button
                 variant="ghost"
                 size="sm"
-                className="h-8 w-8 p-0"
+                className="hover-scale h-8 w-8 p-0"
                 data-action-button="true"
               >
                 <Eye className="h-3.5 w-3.5" />
@@ -220,7 +227,7 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
               <Button
                 variant="ghost"
                 size="sm"
-                className="h-8 w-8 p-0"
+                className="hover-scale h-8 w-8 p-0"
                 data-action-button="true"
               >
                 <Edit className="h-3.5 w-3.5" />
@@ -229,7 +236,7 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
             <Button
               variant="ghost"
               size="sm"
-              className="text-destructive hover:text-destructive/80 h-8 w-8 p-0"
+              className="hover-scale text-destructive hover:text-destructive/80 h-8 w-8 p-0"
               onClick={(e) => {
                 e.stopPropagation();
                 handleDelete(invoice);
diff --git a/src/app/dashboard/invoices/page.tsx b/src/app/dashboard/invoices/page.tsx
index 05d6653..af0342e 100644
--- a/src/app/dashboard/invoices/page.tsx
+++ b/src/app/dashboard/invoices/page.tsx
@@ -16,19 +16,19 @@ async function InvoicesTable() {
 
 export default async function InvoicesPage() {
   return (
-    <>
+    <div className="page-enter space-y-8">
       <PageHeader
         title="Invoices"
         description="Manage your invoices and track payments"
         variant="gradient"
       >
-        <Button asChild variant="outline" className="shadow-sm">
+        <Button asChild variant="outline" className="hover-lift shadow-sm">
           <Link href="/dashboard/invoices/import">
             <Upload className="mr-2 h-5 w-5" />
             <span>Import CSV</span>
           </Link>
         </Button>
-        <Button asChild variant="default" className="shadow-md">
+        <Button asChild variant="default" className="hover-lift shadow-md">
           <Link href="/dashboard/invoices/new">
             <Plus className="mr-2 h-5 w-5" />
             <span>Create Invoice</span>
@@ -41,6 +41,6 @@ export default async function InvoicesPage() {
           <InvoicesTable />
         </Suspense>
       </HydrateClient>
-    </>
+    </div>
   );
 }
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index b32a175..db81690 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -3,14 +3,10 @@ import {
   ArrowUpRight,
   BarChart3,
   Calendar,
-  Clock,
-  DollarSign,
   Edit,
   Eye,
   FileText,
   Plus,
-  TrendingDown,
-  TrendingUp,
   Users,
 } from "lucide-react";
 import Link from "next/link";
@@ -26,6 +22,7 @@ import type { StoredInvoiceStatus } from "~/types/invoice";
 import { RevenueChart } from "~/app/dashboard/_components/revenue-chart";
 import { InvoiceStatusChart } from "~/app/dashboard/_components/invoice-status-chart";
 import { MonthlyMetricsChart } from "~/app/dashboard/_components/monthly-metrics-chart";
+import { AnimatedStatsCard } from "~/app/dashboard/_components/animated-stats-card";
 
 // Hero section with clean mono design
 function DashboardHero({ firstName }: { firstName: string }) {
@@ -160,80 +157,79 @@ async function DashboardStats() {
     return value > 0 ? `+${value.toFixed(1)}%` : `${value.toFixed(1)}%`;
   };
 
+  // Debug logging to see actual values
+  console.log("Dashboard Stats Debug:", {
+    totalRevenue,
+    pendingAmount,
+    totalClients,
+    overdueInvoices: overdueInvoices.length,
+    revenueChange,
+    pendingChange,
+    clientChange,
+    overdueChange,
+    paidInvoicesCount: paidInvoices.length,
+    pendingInvoicesCount: pendingInvoices.length,
+  });
+
   const stats = [
     {
       title: "Total Revenue",
       value: `$${totalRevenue.toLocaleString("en-US", { minimumFractionDigits: 2 })}`,
+      numericValue: totalRevenue,
+      isCurrency: true,
       change: formatTrend(revenueChange),
       trend: revenueChange >= 0 ? ("up" as const) : ("down" as const),
-      icon: DollarSign,
+      iconName: "DollarSign" as const,
       description: `From ${paidInvoices.length} paid invoices`,
     },
     {
       title: "Pending Amount",
       value: `$${pendingAmount.toLocaleString("en-US", { minimumFractionDigits: 2 })}`,
+      numericValue: pendingAmount,
+      isCurrency: true,
       change: formatTrend(pendingChange),
       trend: pendingChange >= 0 ? ("up" as const) : ("down" as const),
-      icon: Clock,
+      iconName: "Clock" as const,
       description: `${pendingInvoices.length} invoices awaiting payment`,
     },
     {
       title: "Active Clients",
       value: totalClients.toString(),
+      numericValue: totalClients,
+      isCurrency: false,
       change: formatTrend(clientChange, true),
       trend: clientChange >= 0 ? ("up" as const) : ("down" as const),
-      icon: Users,
+      iconName: "Users" as const,
       description: "Total registered clients",
     },
     {
       title: "Overdue Invoices",
       value: overdueInvoices.length.toString(),
+      numericValue: overdueInvoices.length,
+      isCurrency: false,
       change: formatTrend(overdueChange, true),
       trend: overdueChange <= 0 ? ("up" as const) : ("down" as const),
-      icon: TrendingDown,
+      iconName: "TrendingDown" as const,
       description: "Invoices past due date",
     },
   ];
 
   return (
     <div className="mb-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
-      {stats.map((stat) => {
-        const Icon = stat.icon;
-        const TrendIcon = stat.trend === "up" ? TrendingUp : TrendingDown;
-        const isPositive = stat.trend === "up";
-
-        return (
-          <Card key={stat.title}>
-            <CardContent className="p-6">
-              <div className="flex items-center justify-between space-y-0 pb-2">
-                <div className="flex items-center space-x-2">
-                  <Icon className="text-muted-foreground h-5 w-5" />
-                  <p className="text-muted-foreground text-sm font-medium">
-                    {stat.title}
-                  </p>
-                </div>
-                <div
-                  className="flex items-center space-x-1 text-xs"
-                  style={{
-                    color: isPositive
-                      ? "oklch(var(--chart-2))"
-                      : "oklch(var(--chart-3))",
-                  }}
-                >
-                  <TrendIcon className="h-3 w-3" />
-                  <span>{stat.change}</span>
-                </div>
-              </div>
-              <div className="space-y-1">
-                <p className="text-2xl font-bold">{stat.value}</p>
-                <p className="text-muted-foreground text-xs">
-                  {stat.description}
-                </p>
-              </div>
-            </CardContent>
-          </Card>
-        );
-      })}
+      {stats.map((stat, index) => (
+        <AnimatedStatsCard
+          key={stat.title}
+          title={stat.title}
+          value={stat.value}
+          numericValue={stat.numericValue}
+          isCurrency={stat.isCurrency}
+          iconName={stat.iconName}
+          change={stat.change}
+          trend={stat.trend}
+          description={stat.description}
+          delay={index * 100}
+        />
+      ))}
     </div>
   );
 }
@@ -327,7 +323,7 @@ function QuickActions() {
             <Link
               key={action.title}
               href={action.href}
-              className={`flex w-full items-start space-x-3 rounded-lg border p-4 transition-colors ${
+              className={`hover-lift flex w-full items-start space-x-3 rounded-lg border p-4 transition-colors ${
                 action.featured
                   ? "border-foreground/20 bg-muted/50 hover:bg-muted"
                   : "border-border bg-background hover:bg-muted/50"
@@ -420,13 +416,18 @@ async function CurrentWork() {
           </div>
 
           <div className="flex gap-2">
-            <Button asChild variant="outline" size="sm" className="flex-1">
+            <Button
+              asChild
+              variant="outline"
+              size="sm"
+              className="hover-lift flex-1"
+            >
               <Link href={`/dashboard/invoices/${currentInvoice.id}`}>
                 <Eye className="mr-2 h-4 w-4" />
                 View
               </Link>
             </Button>
-            <Button asChild size="sm" className="flex-1">
+            <Button asChild size="sm" className="hover-lift flex-1">
               <Link href={`/dashboard/invoices/${currentInvoice.id}/edit`}>
                 <Edit className="mr-2 h-4 w-4" />
                 Continue
@@ -509,13 +510,13 @@ async function RecentActivity() {
           </div>
         ) : (
           <div className="space-y-3">
-            {recentInvoices.map((invoice) => (
+            {recentInvoices.map((invoice, _index) => (
               <Link
                 key={invoice.id}
                 href={`/dashboard/invoices/${invoice.id}`}
                 className="block"
               >
-                <div className="bg-muted/50 hover:bg-muted border-foreground/20 rounded-lg border p-3 transition-colors">
+                <div className="recent-activity-item bg-muted/50 hover:bg-muted border-foreground/20 rounded-lg border p-3 transition-colors">
                   <div className="flex items-start gap-3">
                     <div className="bg-muted flex-shrink-0 rounded-lg p-2">
                       <FileText className="text-muted-foreground h-4 w-4" />
@@ -627,7 +628,7 @@ export default async function DashboardPage() {
   const firstName = session?.user?.name?.split(" ")[0] ?? "User";
 
   return (
-    <div className="space-y-8">
+    <div className="page-enter space-y-8">
       <DashboardHero firstName={firstName} />
 
       <HydrateClient>
diff --git a/src/app/dashboard/settings/_components/settings-content.tsx b/src/app/dashboard/settings/_components/settings-content.tsx
index 1071c0a..a8eaf8a 100644
--- a/src/app/dashboard/settings/_components/settings-content.tsx
+++ b/src/app/dashboard/settings/_components/settings-content.tsx
@@ -1,26 +1,38 @@
 "use client";
 
-import { useState } from "react";
-import * as React from "react";
-import { useSession } from "next-auth/react";
 import {
+  AlertTriangle,
+  Building,
+  ChevronDown,
+  Database,
   Download,
+  Eye,
+  EyeOff,
+  FileText,
+  FileUp,
+  Info,
+  Key,
+  Shield,
   Upload,
   User,
-  Database,
-  AlertTriangle,
-  Shield,
-  FileText,
   Users,
-  Building,
-  Key,
-  Eye,
-  FileUp,
-  ChevronDown,
-  Info,
 } from "lucide-react";
+import { useSession } from "next-auth/react";
+import * as React from "react";
+import { useState } from "react";
 
-import { api } from "~/trpc/react";
+import { toast } from "sonner";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "~/components/ui/alert-dialog";
 import { Button } from "~/components/ui/button";
 import {
   Card,
@@ -34,22 +46,6 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "~/components/ui/collapsible";
-import { Input } from "~/components/ui/input";
-import { Label } from "~/components/ui/label";
-import { Textarea } from "~/components/ui/textarea";
-import { Badge } from "~/components/ui/badge";
-import { toast } from "sonner";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "~/components/ui/alert-dialog";
 import {
   Dialog,
   DialogContent,
@@ -59,6 +55,10 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "~/components/ui/dialog";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { Textarea } from "~/components/ui/textarea";
+import { api } from "~/trpc/react";
 
 export function SettingsContent() {
   const { data: session } = useSession();
@@ -300,7 +300,7 @@ export function SettingsContent() {
       {/* Profile & Account Overview */}
       <div className="grid gap-6 lg:grid-cols-2">
         {/* Profile Section */}
-        <Card className="bg-card border-border border">
+        <Card className="form-section bg-card border-border border">
           <CardHeader>
             <CardTitle className="text-foreground flex items-center gap-2">
               <User className="text-primary h-5 w-5" />
@@ -337,6 +337,7 @@ export function SettingsContent() {
                 type="submit"
                 disabled={updateProfileMutation.isPending}
                 variant="default"
+                className="hover-lift"
               >
                 {updateProfileMutation.isPending
                   ? "Updating..."
@@ -347,7 +348,7 @@ export function SettingsContent() {
         </Card>
 
         {/* Data Overview */}
-        <Card className="bg-card border-border border">
+        <Card className="form-section bg-card border-border border">
           <CardHeader>
             <CardTitle className="text-foreground flex items-center gap-2">
               <Database className="text-primary h-5 w-5" />
@@ -359,12 +360,13 @@ export function SettingsContent() {
           </CardHeader>
           <CardContent>
             <div className="space-y-4">
-              {dataStatItems.map((item) => {
+              {dataStatItems.map((item, index) => {
                 const Icon = item.icon;
                 return (
                   <div
                     key={item.label}
-                    className="bg-card border p-4 transition-shadow hover:shadow-sm"
+                    className="hover-lift bg-card border p-4 transition-shadow hover:shadow-sm"
+                    style={{ animationDelay: `${index * 100}ms` }}
                   >
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-3">
diff --git a/src/app/dashboard/settings/page.tsx b/src/app/dashboard/settings/page.tsx
index 4308288..6540398 100644
--- a/src/app/dashboard/settings/page.tsx
+++ b/src/app/dashboard/settings/page.tsx
@@ -6,7 +6,7 @@ import { SettingsContent } from "./_components/settings-content";
 
 export default async function SettingsPage() {
   return (
-    <>
+    <div className="page-enter space-y-8">
       <PageHeader
         title="Settings"
         description="Manage your account preferences and data"
@@ -18,6 +18,6 @@ export default async function SettingsPage() {
           <SettingsContent />
         </Suspense>
       </HydrateClient>
-    </>
+    </div>
   );
 }
diff --git a/src/components/data/data-table.tsx b/src/components/data/data-table.tsx
index 0abfd77..a655e72 100644
--- a/src/components/data/data-table.tsx
+++ b/src/components/data/data-table.tsx
@@ -361,7 +361,7 @@ export function DataTable<TData, TValue>({
                     key={row.id}
                     data-state={row.getIsSelected() && "selected"}
                     className={cn(
-                      "hover:bg-muted/20 data-[state=selected]:bg-muted/50 border-border/40 border-b transition-colors",
+                      "hover:bg-muted/20 data-[state=selected]:bg-muted/50 border-border/40 table-row border-b transition-colors",
                       onRowClick && "cursor-pointer",
                     )}
                     onClick={(event) =>
diff --git a/src/components/data/status-badge.tsx b/src/components/data/status-badge.tsx
index 3b16c64..d3ded76 100644
--- a/src/components/data/status-badge.tsx
+++ b/src/components/data/status-badge.tsx
@@ -51,7 +51,15 @@ export function StatusBadge({
   const label = children ?? statusLabelMap[status];
 
   return (
-    <Badge className={cn(statusClass, className)} {...props}>
+    <Badge
+      className={cn(
+        statusClass,
+        "transition-all duration-200 hover:scale-105",
+        status === "sent" && "animate-pulse",
+        className,
+      )}
+      {...props}
+    >
       {label}
     </Badge>
   );
diff --git a/src/components/forms/invoice-form.tsx b/src/components/forms/invoice-form.tsx
index 2c6561e..0e491f5 100644
--- a/src/components/forms/invoice-form.tsx
+++ b/src/components/forms/invoice-form.tsx
@@ -493,7 +493,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
 
   return (
     <>
-      <div className="space-y-6 pb-32">
+      <div className="page-enter space-y-6 pb-32">
         <PageHeader
           title={
             invoiceId && invoiceId !== "new" ? "Edit Invoice" : "Create Invoice"
@@ -510,13 +510,18 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
               variant="outline"
               onClick={handleDelete}
               disabled={loading || deleteInvoice.isPending}
-              className="text-destructive hover:bg-destructive/10 shadow-sm"
+              className="hover-lift text-destructive hover:bg-destructive/10 shadow-sm"
             >
               <Trash2 className="h-4 w-4 sm:mr-2" />
               <span className="hidden sm:inline">Delete Invoice</span>
             </Button>
           )}
-          <Button onClick={handleSubmit} disabled={loading} variant="default">
+          <Button
+            onClick={handleSubmit}
+            disabled={loading}
+            variant="default"
+            className="hover-lift"
+          >
             {loading ? (
               <>
                 <Clock className="h-4 w-4 animate-spin sm:mr-2" />
diff --git a/src/components/layout/floating-action-bar.tsx b/src/components/layout/floating-action-bar.tsx
index 6844816..5c7a970 100644
--- a/src/components/layout/floating-action-bar.tsx
+++ b/src/components/layout/floating-action-bar.tsx
@@ -55,6 +55,8 @@ export function FloatingActionBar({
         isDocked ? "flex justify-center" : "",
         // Dynamic bottom positioning
         isDocked ? "bottom-4" : "bottom-0",
+        // Add entrance animation
+        "animate-slide-in-bottom",
         className,
       )}
     >
@@ -65,17 +67,19 @@ export function FloatingActionBar({
           isDocked ? "mx-auto mb-0 px-4" : "mb-4 px-4",
         )}
       >
-        <Card className="bg-card border-border border">
+        <Card className="hover-lift bg-card border-border border shadow-lg">
           <CardContent className="flex items-center justify-between p-4">
             {/* Left content */}
             {leftContent && (
-              <div className="flex flex-1 items-center gap-3">
+              <div className="animate-fade-in flex flex-1 items-center gap-3">
                 {leftContent}
               </div>
             )}
 
             {/* Right actions */}
-            <div className="flex items-center gap-2 sm:gap-3">{children}</div>
+            <div className="animate-fade-in animate-delay-100 flex items-center gap-2 sm:gap-3">
+              {children}
+            </div>
           </CardContent>
         </Card>
       </div>
diff --git a/src/components/layout/page-header.tsx b/src/components/layout/page-header.tsx
index 38fe24f..ea6f0fd 100644
--- a/src/components/layout/page-header.tsx
+++ b/src/components/layout/page-header.tsx
@@ -39,22 +39,24 @@ export function PageHeader({
   };
 
   return (
-    <div className={`mb-8 ${className}`}>
+    <div className={`animate-fade-in-down mb-8 ${className}`}>
       <div className="flex items-start justify-between gap-4">
-        <h1 className={titleClassName ?? getTitleClasses()}>{title}</h1>
+        <div className="animate-fade-in-up space-y-1">
+          <h1 className={titleClassName ?? getTitleClasses()}>{title}</h1>
+          {description && (
+            <p
+              className={`animate-fade-in-up animate-delay-100 text-muted-foreground ${getDescriptionSpacing()} text-lg`}
+            >
+              {description}
+            </p>
+          )}
+        </div>
         {children && (
-          <div className="flex flex-shrink-0 gap-2 sm:gap-3 [&>*]:h-8 [&>*]:px-2 [&>*]:text-sm sm:[&>*]:h-10 sm:[&>*]:px-4 sm:[&>*]:text-base [&>*>span]:hidden sm:[&>*>span]:inline [&>*>svg]:mr-0 sm:[&>*>svg]:mr-2">
+          <div className="animate-slide-in-right animate-delay-200 flex flex-shrink-0 gap-2 sm:gap-3 [&>*]:h-8 [&>*]:px-2 [&>*]:text-sm sm:[&>*]:h-10 sm:[&>*]:px-4 sm:[&>*]:text-base [&>*>span]:hidden sm:[&>*>span]:inline [&>*>svg]:mr-0 sm:[&>*>svg]:mr-2">
             {children}
           </div>
         )}
       </div>
-      {description && (
-        <p
-          className={`text-muted-foreground ${getDescriptionSpacing()} text-lg`}
-        >
-          {description}
-        </p>
-      )}
     </div>
   );
 }
diff --git a/src/components/ui/skeletons.tsx b/src/components/ui/skeletons.tsx
new file mode 100644
index 0000000..730bc25
--- /dev/null
+++ b/src/components/ui/skeletons.tsx
@@ -0,0 +1,352 @@
+import { cn } from "~/lib/utils";
+
+interface SkeletonProps {
+  className?: string;
+}
+
+export function Skeleton({ className }: SkeletonProps) {
+  return (
+    <div className={cn("skeleton bg-muted animate-pulse rounded", className)} />
+  );
+}
+
+// Page Header Skeleton
+export function PageHeaderSkeleton() {
+  return (
+    <div className="mb-8">
+      <div className="flex items-start justify-between gap-4">
+        <div className="space-y-2">
+          <Skeleton className="h-8 w-48" />
+          <Skeleton className="h-5 w-96" />
+        </div>
+        <div className="flex gap-2">
+          <Skeleton className="h-10 w-24" />
+          <Skeleton className="h-10 w-32" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Invoice Items Skeleton
+export function InvoiceItemsSkeleton() {
+  return (
+    <div className="space-y-4">
+      {Array.from({ length: 3 }).map((_, i) => (
+        <div key={i} className="rounded-lg border p-4">
+          <div className="space-y-3">
+            <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
+              <div className="min-w-0 flex-1 space-y-2">
+                <Skeleton className="h-5 w-3/4" />
+                <div className="flex flex-wrap gap-x-4 gap-y-1">
+                  <Skeleton className="h-4 w-20" />
+                  <Skeleton className="h-4 w-16" />
+                  <Skeleton className="h-4 w-24" />
+                </div>
+              </div>
+              <Skeleton className="h-6 w-20" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Recent Activity Skeleton
+export function RecentActivitySkeleton() {
+  return (
+    <div className="space-y-3">
+      {Array.from({ length: 5 }).map((_, i) => (
+        <div
+          key={i}
+          className="bg-muted/50 border-foreground/20 rounded-lg border p-3"
+        >
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex items-center gap-3">
+              <Skeleton className="h-8 w-8 rounded" />
+              <div className="space-y-1">
+                <Skeleton className="h-4 w-24" />
+                <Skeleton className="h-3 w-32" />
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-5 w-12 rounded-full" />
+              <Skeleton className="h-4 w-16" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Current Work Skeleton
+export function CurrentWorkSkeleton() {
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-5 w-5" />
+          <Skeleton className="h-6 w-24" />
+        </div>
+        <Skeleton className="h-6 w-20 rounded-full" />
+      </div>
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <Skeleton className="h-6 w-32" />
+            <Skeleton className="h-8 w-24" />
+          </div>
+          <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
+            <Skeleton className="h-4 w-28" />
+            <Skeleton className="h-4 w-20" />
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <Skeleton className="h-8 flex-1" />
+          <Skeleton className="h-8 flex-1" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Client Info Skeleton
+export function ClientInfoSkeleton() {
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <div className="flex items-center space-x-3">
+          <Skeleton className="h-8 w-8" />
+          <div className="space-y-1">
+            <Skeleton className="h-4 w-12" />
+            <Skeleton className="h-4 w-32" />
+          </div>
+        </div>
+        <div className="flex items-center space-x-3">
+          <Skeleton className="h-8 w-8" />
+          <div className="space-y-1">
+            <Skeleton className="h-4 w-12" />
+            <Skeleton className="h-4 w-24" />
+          </div>
+        </div>
+      </div>
+      <div>
+        <Skeleton className="mb-4 h-6 w-32" />
+        <div className="flex items-start space-x-3">
+          <Skeleton className="h-8 w-8" />
+          <div className="space-y-1">
+            <Skeleton className="h-4 w-40" />
+            <Skeleton className="h-4 w-36" />
+            <Skeleton className="h-4 w-28" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Stats Summary Skeleton
+export function StatsSummarySkeleton() {
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2 text-center">
+        <Skeleton className="mx-auto h-8 w-24" />
+        <Skeleton className="mx-auto h-4 w-20" />
+      </div>
+      <div className="grid grid-cols-2 gap-4 text-center">
+        <div className="space-y-1">
+          <Skeleton className="mx-auto h-6 w-8" />
+          <Skeleton className="mx-auto h-3 w-12" />
+        </div>
+        <div className="space-y-1">
+          <Skeleton className="mx-auto h-6 w-8" />
+          <Skeleton className="mx-auto h-3 w-16" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Recent Invoices Skeleton
+export function RecentInvoicesSkeleton() {
+  return (
+    <div className="space-y-3">
+      {Array.from({ length: 3 }).map((_, i) => (
+        <div key={i} className="card-secondary hover:bg-muted/50 border p-3">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <div className="min-w-0 space-y-1">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-3 w-20" />
+            </div>
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-4 w-16" />
+              <Skeleton className="h-5 w-12 rounded-full" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Settings Form Skeleton
+export function SettingsFormSkeleton() {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-16" />
+          <Skeleton className="h-10 w-full" />
+        </div>
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-10 w-full" />
+        </div>
+      </div>
+      <div className="flex gap-2">
+        <Skeleton className="h-10 w-24" />
+        <Skeleton className="h-10 w-20" />
+      </div>
+    </div>
+  );
+}
+
+// Data Stats Skeleton
+export function DataStatsSkeleton() {
+  return (
+    <div className="space-y-4">
+      {Array.from({ length: 4 }).map((_, i) => (
+        <div key={i} className="bg-card border p-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Skeleton className="h-8 w-8" />
+              <Skeleton className="h-4 w-20" />
+            </div>
+            <Skeleton className="h-6 w-8" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Invoice Summary Skeleton
+export function InvoiceSummarySkeleton() {
+  return (
+    <div className="bg-muted/30 rounded-lg p-4">
+      <div className="space-y-3">
+        <div className="flex justify-between">
+          <Skeleton className="h-4 w-16" />
+          <Skeleton className="h-4 w-20" />
+        </div>
+        <div className="flex justify-between">
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-4 w-16" />
+        </div>
+        <div className="bg-border h-px" />
+        <div className="flex justify-between">
+          <Skeleton className="h-5 w-12" />
+          <Skeleton className="h-5 w-24" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Actions Sidebar Skeleton
+export function ActionsSidebarSkeleton() {
+  return (
+    <div className="space-y-3">
+      <Skeleton className="h-10 w-full" />
+      <Skeleton className="h-10 w-full" />
+      <Skeleton className="h-10 w-full" />
+      <Skeleton className="h-10 w-full" />
+    </div>
+  );
+}
+
+// Form Section Skeleton
+export function FormSectionSkeleton() {
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-10 w-full" />
+        </div>
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-16" />
+          <Skeleton className="h-10 w-full" />
+        </div>
+      </div>
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-24" />
+        <Skeleton className="h-32 w-full" />
+      </div>
+    </div>
+  );
+}
+
+// Line Items Table Skeleton
+export function LineItemsTableSkeleton() {
+  return (
+    <div className="space-y-2">
+      {Array.from({ length: 4 }).map((_, i) => (
+        <div key={i} className="grid grid-cols-5 gap-4 rounded border p-3">
+          <Skeleton className="h-8 w-full" />
+          <Skeleton className="h-8 w-full" />
+          <Skeleton className="h-8 w-full" />
+          <Skeleton className="h-8 w-full" />
+          <Skeleton className="h-8 w-full" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Business Card Skeleton
+export function BusinessCardSkeleton() {
+  return (
+    <div className="space-y-4 rounded-lg border p-4">
+      <div className="flex items-start justify-between">
+        <div className="space-y-2">
+          <Skeleton className="h-5 w-32" />
+          <Skeleton className="h-4 w-24" />
+        </div>
+        <Skeleton className="h-5 w-16 rounded-full" />
+      </div>
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-40" />
+        <Skeleton className="h-4 w-28" />
+      </div>
+    </div>
+  );
+}
+
+// Generic Card Grid Skeleton
+export function CardGridSkeleton({ count = 6 }: { count?: number }) {
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="rounded-lg border p-4">
+          <div className="space-y-3">
+            <div className="flex items-center gap-3">
+              <Skeleton className="h-8 w-8" />
+              <Skeleton className="h-5 w-24" />
+            </div>
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-3/4" />
+            </div>
+            <div className="flex items-center justify-between">
+              <Skeleton className="h-4 w-16" />
+              <Skeleton className="h-8 w-20" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/hooks/useCountUp.ts b/src/hooks/useCountUp.ts
new file mode 100644
index 0000000..8853b17
--- /dev/null
+++ b/src/hooks/useCountUp.ts
@@ -0,0 +1,133 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface UseCountUpOptions {
+  /** The target number to count up to */
+  end: number;
+  /** The starting number (default: 0) */
+  start?: number;
+  /** Duration of the animation in milliseconds (default: 1000) */
+  duration?: number;
+  /** Delay before starting the animation in milliseconds (default: 0) */
+  delay?: number;
+  /** Custom easing function */
+  easing?: (t: number) => number;
+  /** Whether to format as currency */
+  currency?: boolean;
+  /** Number of decimal places (default: 0) */
+  decimals?: number;
+  /** Whether to use number separators (default: true) */
+  useGrouping?: boolean;
+}
+
+/**
+ * Hook for animating numbers with a counting up effect
+ */
+export function useCountUp({
+  end,
+  start = 0,
+  duration = 1000,
+  delay = 0,
+  easing = (t: number) => t * t * (3 - 2 * t), // smooth step
+  currency = false,
+  decimals = 0,
+  useGrouping = true,
+}: UseCountUpOptions) {
+  const [count, setCount] = useState(start);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  useEffect(() => {
+    // Reset when end value changes
+    setCount(start);
+    setIsAnimating(false);
+
+    const startAnimation = () => {
+      setIsAnimating(true);
+      const startTime = Date.now();
+      const range = end - start;
+
+      const updateCount = () => {
+        const elapsed = Date.now() - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+
+        if (progress < 1) {
+          const easedProgress = easing(progress);
+          const currentCount = start + range * easedProgress;
+          setCount(currentCount);
+          requestAnimationFrame(updateCount);
+        } else {
+          setCount(end);
+          setIsAnimating(false);
+        }
+      };
+
+      requestAnimationFrame(updateCount);
+    };
+
+    const timeoutId = setTimeout(startAnimation, delay);
+    return () => clearTimeout(timeoutId);
+  }, [end, start, duration, delay, easing]);
+
+  // Format the number for display
+  const formatNumber = (num: number): string => {
+    const options: Intl.NumberFormatOptions = {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals,
+      useGrouping,
+    };
+
+    if (currency) {
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+        ...options,
+      }).format(num);
+    }
+
+    return new Intl.NumberFormat("en-US", options).format(num);
+  };
+
+  return {
+    /** The current animated value */
+    count,
+    /** Formatted display value */
+    displayValue: formatNumber(count),
+    /** Whether the animation is currently running */
+    isAnimating,
+    /** Reset the animation */
+    reset: () => {
+      setCount(start);
+      setIsAnimating(false);
+    },
+  };
+}
+
+/**
+ * Preset for currency counting animation
+ */
+export function useCurrencyCountUp(
+  end: number,
+  options?: Omit<UseCountUpOptions, "currency" | "decimals" | "end">,
+) {
+  return useCountUp({
+    ...options,
+    end,
+    currency: true,
+    decimals: 2,
+  });
+}
+
+/**
+ * Preset for integer counting animation
+ */
+export function useIntegerCountUp(
+  end: number,
+  options?: Omit<UseCountUpOptions, "decimals" | "end">,
+) {
+  return useCountUp({
+    ...options,
+    end,
+    decimals: 0,
+  });
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index faa08a7..8786fbf 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -440,3 +440,640 @@ li[data-sonner-toast] button:hover,
   );
   background-size: 40px 40px;
 }
+
+/* ========================================
+   BEENVOICE ANIMATION SYSTEM
+   ======================================== */
+
+/* CSS Custom Properties for Animation Timing */
+:root {
+  --animation-speed-fast: 0.15s;
+  --animation-speed-normal: 0.3s;
+  --animation-speed-slow: 0.5s;
+  --animation-easing: ease-out;
+  --animation-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+/* Accessibility: Respect prefers-reduced-motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ========================================
+   BASE KEYFRAMES
+   ======================================== */
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInBottom {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes expandDown {
+  from {
+    opacity: 0;
+    max-height: 0;
+    transform: scaleY(0);
+    transform-origin: top;
+  }
+  to {
+    opacity: 1;
+    max-height: 200px;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes shrinkUp {
+  from {
+    opacity: 1;
+    max-height: 200px;
+    transform: scaleY(1);
+  }
+  to {
+    opacity: 0;
+    max-height: 0;
+    transform: scaleY(0);
+    transform-origin: top;
+  }
+}
+
+@keyframes bounce {
+  0%,
+  20%,
+  53%,
+  80%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+  40%,
+  43% {
+    transform: translate3d(0, -15px, 0);
+  }
+  70% {
+    transform: translate3d(0, -7px, 0);
+  }
+  90% {
+    transform: translate3d(0, -2px, 0);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes countUp {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ========================================
+   ANIMATION UTILITY CLASSES
+   ======================================== */
+
+/* Base Animations */
+.animate-fade-in {
+  animation: fadeIn var(--animation-speed-slow) var(--animation-easing);
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp var(--animation-speed-slow) var(--animation-easing);
+}
+
+.animate-fade-in-down {
+  animation: fadeInDown var(--animation-speed-slow) var(--animation-easing);
+}
+
+.animate-slide-in-left {
+  animation: slideInLeft var(--animation-speed-slow) var(--animation-easing);
+}
+
+.animate-slide-in-right {
+  animation: slideInRight var(--animation-speed-slow) var(--animation-easing);
+}
+
+.animate-slide-in-bottom {
+  animation: slideInBottom var(--animation-speed-slow) var(--animation-easing);
+}
+
+.animate-scale-in {
+  animation: scaleIn var(--animation-speed-normal) var(--animation-easing);
+}
+
+.animate-bounce {
+  animation: bounce 1s var(--animation-easing);
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.animate-count-up {
+  animation: countUp 0.8s var(--animation-easing);
+}
+
+/* Stagger Animation Delays */
+.animate-delay-75 {
+  animation-delay: 75ms;
+}
+.animate-delay-100 {
+  animation-delay: 100ms;
+}
+.animate-delay-150 {
+  animation-delay: 150ms;
+}
+.animate-delay-200 {
+  animation-delay: 200ms;
+}
+.animate-delay-300 {
+  animation-delay: 300ms;
+}
+.animate-delay-500 {
+  animation-delay: 500ms;
+}
+.animate-delay-700 {
+  animation-delay: 700ms;
+}
+.animate-delay-1000 {
+  animation-delay: 1000ms;
+}
+
+/* ========================================
+   HOVER STATE ANIMATIONS
+   ======================================== */
+
+.hover-lift {
+  transition: transform var(--animation-speed-fast) var(--animation-easing);
+}
+
+.hover-lift:hover {
+  transform: translateY(-2px);
+}
+
+.hover-scale {
+  transition: transform var(--animation-speed-fast) var(--animation-easing);
+}
+
+.hover-scale:hover {
+  transform: scale(1.02);
+}
+
+.hover-glow {
+  transition: box-shadow var(--animation-speed-normal) var(--animation-easing);
+}
+
+.hover-glow:hover {
+  box-shadow: 0 0 20px hsl(var(--primary) / 0.3);
+}
+
+.hover-slide-right {
+  transition: transform var(--animation-speed-fast) var(--animation-easing);
+}
+
+.hover-slide-right:hover {
+  transform: translateX(4px);
+}
+
+/* ========================================
+   LOADING SKELETON ANIMATIONS
+   ======================================== */
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    hsl(var(--muted)) 0%,
+    hsl(var(--muted) / 0.5) 50%,
+    hsl(var(--muted)) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+.skeleton-text {
+  height: 1rem;
+  border-radius: 0.25rem;
+}
+
+.skeleton-text-lg {
+  height: 1.5rem;
+  border-radius: 0.25rem;
+}
+
+.skeleton-text-xl {
+  height: 2rem;
+  border-radius: 0.25rem;
+}
+
+.skeleton-button {
+  height: 2.5rem;
+  border-radius: 0.375rem;
+}
+
+.skeleton-avatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+}
+
+.skeleton-card {
+  height: 8rem;
+  border-radius: 0.5rem;
+}
+
+/* ========================================
+   PAGE ENTRANCE ANIMATIONS
+   ======================================== */
+
+.page-enter {
+  animation: fadeInUp 0.6s var(--animation-easing);
+}
+
+.page-enter-stagger > * {
+  animation: fadeInUp var(--animation-speed-slow) var(--animation-easing)
+    forwards;
+  opacity: 0;
+}
+
+.page-enter-stagger > *:nth-child(1) {
+  animation-delay: 0ms;
+}
+.page-enter-stagger > *:nth-child(2) {
+  animation-delay: 100ms;
+}
+.page-enter-stagger > *:nth-child(3) {
+  animation-delay: 200ms;
+}
+.page-enter-stagger > *:nth-child(4) {
+  animation-delay: 300ms;
+}
+.page-enter-stagger > *:nth-child(5) {
+  animation-delay: 400ms;
+}
+.page-enter-stagger > *:nth-child(6) {
+  animation-delay: 500ms;
+}
+
+/* ========================================
+   COMPONENT-SPECIFIC ANIMATIONS
+   ======================================== */
+
+/* Stats Cards */
+.stats-card {
+  animation: fadeInUp var(--animation-speed-slow) var(--animation-easing)
+    forwards;
+  opacity: 0;
+}
+
+.stats-card:nth-child(1) {
+  animation-delay: 0ms;
+}
+.stats-card:nth-child(2) {
+  animation-delay: 100ms;
+}
+.stats-card:nth-child(3) {
+  animation-delay: 200ms;
+}
+.stats-card:nth-child(4) {
+  animation-delay: 300ms;
+}
+
+/* Invoice Items */
+.invoice-item {
+  animation: fadeInUp var(--animation-speed-normal) var(--animation-easing)
+    forwards;
+  opacity: 0;
+}
+
+.invoice-item:nth-child(1) {
+  animation-delay: 0ms;
+}
+.invoice-item:nth-child(2) {
+  animation-delay: 100ms;
+}
+.invoice-item:nth-child(3) {
+  animation-delay: 200ms;
+}
+.invoice-item:nth-child(4) {
+  animation-delay: 300ms;
+}
+.invoice-item:nth-child(5) {
+  animation-delay: 400ms;
+}
+
+/* Recent Activity Items */
+.recent-activity-item {
+  animation: slideInLeft var(--animation-speed-normal) var(--animation-easing)
+    forwards;
+  opacity: 0;
+}
+
+.recent-activity-item:nth-child(1) {
+  animation-delay: 0ms;
+}
+.recent-activity-item:nth-child(2) {
+  animation-delay: 75ms;
+}
+.recent-activity-item:nth-child(3) {
+  animation-delay: 150ms;
+}
+.recent-activity-item:nth-child(4) {
+  animation-delay: 225ms;
+}
+.recent-activity-item:nth-child(5) {
+  animation-delay: 300ms;
+}
+
+/* Form Animations */
+.form-section {
+  animation: fadeInUp var(--animation-speed-slow) var(--animation-easing)
+    forwards;
+  opacity: 0;
+}
+
+.form-input:focus {
+  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.2);
+  transition: box-shadow var(--animation-speed-fast) var(--animation-easing);
+}
+
+/* Line Item Animations */
+.line-item-enter {
+  animation: expandDown var(--animation-speed-normal) var(--animation-easing);
+}
+
+.line-item-exit {
+  animation: shrinkUp var(--animation-speed-fast) ease-in forwards;
+}
+
+/* Status Badge Pulse for Pending States */
+.status-pending {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Button Loading States */
+.button-loading {
+  position: relative;
+  color: transparent;
+}
+
+.button-loading::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid currentColor;
+  border-radius: 50%;
+  border-top-color: transparent;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+/* ========================================
+   SUCCESS/ERROR STATE ANIMATIONS
+   ======================================== */
+
+.success-state {
+  animation: successPulse 0.6s var(--animation-easing);
+}
+
+@keyframes successPulse {
+  0% {
+    transform: scale(1);
+    background-color: hsl(var(--success) / 0.1);
+  }
+  50% {
+    transform: scale(1.02);
+    background-color: hsl(var(--success) / 0.2);
+  }
+  100% {
+    transform: scale(1);
+    background-color: hsl(var(--success) / 0.1);
+  }
+}
+
+.error-state {
+  animation: errorShake 0.5s var(--animation-easing);
+}
+
+@keyframes errorShake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateX(-2px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateX(2px);
+  }
+}
+
+/* ========================================
+   TABLE AND LIST ANIMATIONS
+   ======================================== */
+
+.table-row {
+  transition: all var(--animation-speed-fast) var(--animation-easing);
+}
+
+.table-row:hover {
+  background-color: hsl(var(--muted) / 0.5);
+  transform: translateX(2px);
+}
+
+/* ========================================
+   MODAL AND DIALOG ANIMATIONS
+   ======================================== */
+
+.modal-enter {
+  animation: modalSlideIn var(--animation-speed-normal) var(--animation-easing);
+}
+
+@keyframes modalSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.modal-backdrop {
+  animation: backdropFadeIn var(--animation-speed-normal)
+    var(--animation-easing);
+}
+
+@keyframes backdropFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* ========================================
+   UTILITY CLASSES FOR COMMON PATTERNS
+   ======================================== */
+
+/* Hidden initially for entrance animations */
+.animate-on-load {
+  opacity: 0;
+  animation: fadeInUp var(--animation-speed-slow) var(--animation-easing)
+    forwards;
+}
+
+/* Stagger children for list entrances */
+.stagger-children > * {
+  animation: fadeInUp var(--animation-speed-normal) var(--animation-easing)
+    forwards;
+  opacity: 0;
+}
+
+.stagger-children > *:nth-child(1) {
+  animation-delay: 0ms;
+}
+.stagger-children > *:nth-child(2) {
+  animation-delay: 100ms;
+}
+.stagger-children > *:nth-child(3) {
+  animation-delay: 200ms;
+}
+.stagger-children > *:nth-child(4) {
+  animation-delay: 300ms;
+}
+.stagger-children > *:nth-child(5) {
+  animation-delay: 400ms;
+}
+.stagger-children > *:nth-child(6) {
+  animation-delay: 500ms;
+}
+.stagger-children > *:nth-child(7) {
+  animation-delay: 600ms;
+}
+.stagger-children > *:nth-child(8) {
+  animation-delay: 700ms;
+}
+
+/* Performance optimizations */
+.will-animate {
+  will-change: transform, opacity;
+}
+
+.will-animate.animation-done {
+  will-change: auto;
+}