Add global animation system and entrance effects to UI

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">

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);

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>
   );
 }