feat: enhance dashboard layout and UI components for improved responsiveness

- Introduce new 'xs' screen size in Tailwind configuration for better mobile support
- Update dashboard layout to use a cosmic gradient background for a modern look
- Refactor Quick Actions component for improved styling and layout consistency
- Add Current Open Invoice Card for quick access to ongoing invoices
- Standardize button sizes across various components for a cohesive user experience
- Implement responsive design adjustments in invoice forms and data tables

This update enhances the overall user experience by improving responsiveness and visual appeal across the dashboard and related components.

src/components/data/current-open-invoice-card.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import Link from "next/link";
+import { api } from "~/trpc/react";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { Button } from "~/components/ui/button";
+import { Badge } from "~/components/ui/badge";
+import { Skeleton } from "~/components/ui/skeleton";
+import { 
+  FileText, 
+  Clock, 
+  Plus, 
+  Edit, 
+  Eye,
+  DollarSign,
+  User,
+  Calendar
+} from "lucide-react";
+
+export function CurrentOpenInvoiceCard() {
+  const { data: currentInvoice, isLoading } = api.invoices.getCurrentOpen.useQuery();
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+    }).format(amount);
+  };
+
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+    }).format(new Date(date));
+  };
+
+  if (isLoading) {
+    return (
+      <Card className="border-0 shadow-sm">
+        <CardHeader className="pb-3">
+          <CardTitle className="flex items-center gap-2 text-lg">
+            <FileText className="h-5 w-5 text-emerald-600" />
+            Current Open Invoice
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <Skeleton className="h-4 w-3/4" />
+          <Skeleton className="h-4 w-1/2" />
+          <div className="flex gap-2">
+            <Skeleton className="h-8 w-20" />
+            <Skeleton className="h-8 w-20" />
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!currentInvoice) {
+    return (
+      <Card className="border-0 shadow-sm">
+        <CardHeader className="pb-3">
+          <CardTitle className="flex items-center gap-2 text-lg">
+            <FileText className="h-5 w-5 text-emerald-600" />
+            Current Open Invoice
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="text-center py-6">
+            <FileText className="mx-auto mb-3 h-8 w-8 text-muted-foreground" />
+            <p className="text-muted-foreground text-sm mb-4">
+              No open invoice found. Create a new invoice to start tracking your time.
+            </p>
+            <Button asChild className="bg-gradient-to-r from-emerald-600 to-teal-600 text-white hover:from-emerald-700 hover:to-teal-700">
+              <Link href="/dashboard/invoices/new">
+                <Plus className="mr-2 h-4 w-4" />
+                Create New Invoice
+              </Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const totalHours = currentInvoice.items?.reduce((sum, item) => sum + item.hours, 0) ?? 0;
+  const totalAmount = currentInvoice.totalAmount;
+
+  return (
+    <Card className="border-0 shadow-sm">
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center gap-2 text-lg">
+          <FileText className="h-5 w-5 text-emerald-600" />
+          Current Open Invoice
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Badge variant="secondary" className="text-xs">
+                {currentInvoice.invoiceNumber}
+              </Badge>
+              <Badge variant="outline" className="text-xs">
+                Draft
+              </Badge>
+            </div>
+            <div className="text-right">
+              <p className="text-sm font-medium text-emerald-600">
+                {formatCurrency(totalAmount)}
+              </p>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 text-sm">
+              <User className="h-3 w-3 text-muted-foreground" />
+              <span className="text-muted-foreground">Client:</span>
+              <span className="font-medium">{currentInvoice.client?.name}</span>
+            </div>
+            
+            <div className="flex items-center gap-2 text-sm">
+              <Calendar className="h-3 w-3 text-muted-foreground" />
+              <span className="text-muted-foreground">Due:</span>
+              <span className="font-medium">{formatDate(currentInvoice.dueDate)}</span>
+            </div>
+
+            <div className="flex items-center gap-2 text-sm">
+              <Clock className="h-3 w-3 text-muted-foreground" />
+              <span className="text-muted-foreground">Hours:</span>
+              <span className="font-medium">{totalHours.toFixed(1)}h</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex gap-2 pt-2">
+          <Button asChild variant="outline" size="sm" className="flex-1">
+            <Link href={`/dashboard/invoices/${currentInvoice.id}`}>
+              <Eye className="mr-2 h-3 w-3" />
+              View
+            </Link>
+          </Button>
+          <Button asChild size="sm" className="flex-1 bg-gradient-to-r from-emerald-600 to-teal-600 text-white hover:from-emerald-700 hover:to-teal-700">
+            <Link href={`/dashboard/invoices/${currentInvoice.id}/edit`}>
+              <Edit className="mr-2 h-3 w-3" />
+              Continue
+            </Link>
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+} 

src/components/data/data-table.tsx

@@ -410,11 +410,11 @@ export function DataTable<TData, TValue>({
                 </Button>
                 <div className="flex items-center gap-1 px-2">
                   <span className="text-muted-foreground text-xs sm:text-sm">
-                    Page{" "}
+                    <span className="hidden sm:inline">Page </span>
                     <span className="text-foreground font-medium">
                       {table.getState().pagination.pageIndex + 1}
-                    </span>{" "}
-                    of{" "}
+                    </span>
+                    <span className="sm:inline"> of </span>
                     <span className="text-foreground font-medium">
                       {table.getPageCount() || 1}
                     </span>

src/components/data/status-badge.tsx

@@ -22,10 +22,10 @@ const statusVariantMap: Record<
   StatusType,
   VariantProps<typeof badgeVariants>["variant"]
 > = {
-  draft: "secondary",
-  sent: "info",
-  paid: "success",
-  overdue: "error",
+  draft: "outline-draft",
+  sent: "outline-sent",
+  paid: "outline-paid",
+  overdue: "outline-overdue",
   success: "success",
   warning: "warning",
   error: "error",

src/components/forms/business-form.tsx

@@ -517,24 +517,26 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
           onClick={handleCancel}
           disabled={isSubmitting}
           className="border-border/40 hover:bg-accent/50"
+          size="sm"
         >
-          <ArrowLeft className="mr-2 h-4 w-4" />
-          Cancel
+          <ArrowLeft className="h-4 w-4 sm:mr-2" />
+          <span className="hidden sm:inline">Cancel</span>
         </Button>
         <Button
           onClick={handleSubmit}
           disabled={isSubmitting || !isDirty}
           className="bg-gradient-to-r from-emerald-600 to-teal-600 shadow-md transition-all duration-200 hover:from-emerald-700 hover:to-teal-700 hover:shadow-lg"
+          size="sm"
         >
           {isSubmitting ? (
             <>
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              {mode === "create" ? "Creating..." : "Saving..."}
+              <Loader2 className="h-4 w-4 animate-spin sm:mr-2" />
+              <span className="hidden sm:inline">{mode === "create" ? "Creating..." : "Saving..."}</span>
             </>
           ) : (
             <>
-              <Save className="mr-2 h-4 w-4" />
-              {mode === "create" ? "Create Business" : "Save Changes"}
+              <Save className="h-4 w-4 sm:mr-2" />
+              <span className="hidden sm:inline">{mode === "create" ? "Create Business" : "Save Changes"}</span>
             </>
           )}
         </Button>

src/components/forms/client-form.tsx

@@ -397,24 +397,26 @@ export function ClientForm({ clientId, mode }: ClientFormProps) {
           onClick={handleCancel}
           disabled={isSubmitting}
           className="border-border/40 hover:bg-accent/50"
+          size="sm"
         >
-          <ArrowLeft className="mr-2 h-4 w-4" />
-          Cancel
+          <ArrowLeft className="h-4 w-4 sm:mr-2" />
+          <span className="hidden sm:inline">Cancel</span>
         </Button>
         <Button
           onClick={handleSubmit}
           disabled={isSubmitting || !isDirty}
           className="bg-gradient-to-r from-emerald-600 to-teal-600 shadow-md transition-all duration-200 hover:from-emerald-700 hover:to-teal-700 hover:shadow-lg"
+          size="sm"
         >
           {isSubmitting ? (
             <>
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              {mode === "create" ? "Creating..." : "Saving..."}
+              <Loader2 className="h-4 w-4 animate-spin sm:mr-2" />
+              <span className="hidden sm:inline">{mode === "create" ? "Creating..." : "Saving..."}</span>
             </>
           ) : (
             <>
-              <Save className="mr-2 h-4 w-4" />
-              {mode === "create" ? "Create Client" : "Save Changes"}
+              <Save className="h-4 w-4 sm:mr-2" />
+              <span className="hidden sm:inline">{mode === "create" ? "Create Client" : "Save Changes"}</span>
             </>
           )}
         </Button>

src/components/layout/floating-action-bar.tsx

@@ -99,7 +99,9 @@ export function FloatingActionBar({
       )}
     >
       <p className="text-muted-foreground text-sm">{title}</p>
-      <div className="flex items-center gap-3">{children}</div>
+      <div className="flex items-center gap-2 sm:gap-3">
+        {children}
+      </div>
     </div>
   );
 }

src/components/layout/navbar.tsx

@@ -6,10 +6,15 @@ import { Button } from "~/components/ui/button";
 import { Skeleton } from "~/components/ui/skeleton";
 import { Logo } from "~/components/branding/logo";
 import { SidebarTrigger } from "~/components/navigation/sidebar-trigger";
+import { api } from "~/trpc/react";
+import { FileText, Edit } from "lucide-react";
 
 export function Navbar() {
   const { data: session, status } = useSession();
   const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
+  
+  // Get current open invoice for quick access
+  const { data: currentInvoice } = api.invoices.getCurrentOpen.useQuery();
 
   return (
     <header className="fixed top-2 right-2 left-2 z-30 md:top-3 md:right-3 md:left-3">
@@ -25,6 +30,22 @@ export function Navbar() {
             </Link>
           </div>
           <div className="flex items-center gap-2 md:gap-4">
+            {/* Quick access to current open invoice */}
+            {session?.user && currentInvoice && (
+              <Button
+                asChild
+                size="sm"
+                variant="outline"
+                className="hidden border-border/40 hover:bg-accent/50 text-xs md:flex md:text-sm"
+              >
+                <Link href={`/dashboard/invoices/${currentInvoice.id}/edit`}>
+                  <FileText className="mr-1 h-3 w-3 md:mr-2 md:h-4 md:w-4" />
+                  <span className="hidden lg:inline">Continue Invoice</span>
+                  <span className="lg:hidden">Continue</span>
+                </Link>
+              </Button>
+            )}
+            
             {status === "loading" ? (
               <>
                 <Skeleton className="bg-muted/20 hidden h-5 w-20 sm:inline" />

src/components/ui/badge.tsx

@@ -21,6 +21,11 @@ const badgeVariants = cva(
         warning: "border-transparent bg-status-warning [a&]:hover:opacity-90",
         error: "border-transparent bg-status-error [a&]:hover:opacity-90",
         info: "border-transparent bg-status-info [a&]:hover:opacity-90",
+        // Outlined variants for status badges
+        "outline-draft": "border-gray-400 text-gray-600 dark:border-gray-500 dark:text-gray-300 bg-transparent",
+        "outline-sent": "border-blue-400 text-blue-600 dark:border-blue-500 dark:text-blue-300 bg-transparent",
+        "outline-paid": "border-green-400 text-green-600 dark:border-green-500 dark:text-green-300 bg-transparent",
+        "outline-overdue": "border-red-400 text-red-600 dark:border-red-500 dark:text-red-300 bg-transparent",
       },
     },
     defaultVariants: {