Enhance dashboard UI and add order timeline

Refactored dashboard pages for improved layout and visual consistency using Card components, motion animations, and updated color schemes. Added an OrderTimeline component to the order details page to visualize order lifecycle. Improved customer management page with better sorting, searching, and a detailed customer dialog. Updated storefront settings page with a modernized layout and clearer sectioning.

components/dashboard/quick-actions.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import Link from "next/link"
+import { motion } from "framer-motion"
+import {
+    PlusCircle,
+    Package,
+    BarChart3,
+    Settings,
+    MessageSquare,
+    Truck,
+    Tag,
+    Users
+} from "lucide-react"
+import { Card, CardContent } from "@/components/ui/card"
+
+const actions = [
+    {
+        title: "Add Product",
+        icon: PlusCircle,
+        href: "/dashboard/products/new",
+        color: "bg-blue-500/10 text-blue-500",
+        description: "Create a new listing"
+    },
+    {
+        title: "Process Orders",
+        icon: Truck,
+        href: "/dashboard/orders?status=paid",
+        color: "bg-emerald-500/10 text-emerald-500",
+        description: "Ship pending orders"
+    },
+    {
+        title: "Analytics",
+        icon: BarChart3,
+        href: "/dashboard/analytics",
+        color: "bg-purple-500/10 text-purple-500",
+        description: "View sales performance"
+    },
+    {
+        title: "Messages",
+        icon: MessageSquare,
+        href: "/dashboard/chats",
+        color: "bg-amber-500/10 text-amber-500",
+        description: "Chat with customers"
+    }
+]
+
+export default function QuickActions() {
+    return (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            {actions.map((action, index) => (
+                <motion.div
+                    key={action.title}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.1 }}
+                    whileHover={{ scale: 1.02 }}
+                    whileTap={{ scale: 0.98 }}
+                >
+                    <Link href={action.href}>
+                        <Card className="hover:border-primary/50 transition-colors cursor-pointer group h-full">
+                            <CardContent className="p-6 flex flex-col items-center text-center">
+                                <div className={`p-3 rounded-xl ${action.color} mb-4 group-hover:scale-110 transition-transform`}>
+                                    <action.icon className="h-6 w-6" />
+                                </div>
+                                <h3 className="font-semibold text-lg">{action.title}</h3>
+                                <p className="text-sm text-muted-foreground mt-1">{action.description}</p>
+                            </CardContent>
+                        </Card>
+                    </Link>
+                </motion.div>
+            ))}
+        </div>
+    )
+}