Enhance admin dashboard UI and tables with new styles

Refactors admin dashboard, users, vendors, shipping, and stock pages to improve UI consistency and visual clarity. Adds new icons, animated transitions, and card styles for stats and tables. Updates table row rendering with framer-motion for smooth animations, improves badge and button styling, and enhances search/filter inputs. Refines loading skeletons and overall layout for a more modern, accessible admin experience.

app/dashboard/shipping/page.tsx

@@ -54,10 +54,10 @@ const ShippingTable = dynamic(() => import("@/components/tables/shipping-table")
 // Loading skeleton for shipping table
 function ShippingTableSkeleton() {
   return (
-    <Card className="animate-in fade-in duration-500 relative">
+    <Card className="animate-in fade-in duration-500 relative border-border/40 bg-background/50 backdrop-blur-sm shadow-sm">
       {/* Subtle loading indicator */}
       <div className="absolute top-0 left-0 right-0 h-1 bg-muted overflow-hidden rounded-t-lg">
-        <div className="h-full bg-primary w-1/3" 
+        <div className="h-full bg-primary w-1/3"
           style={{
             background: 'linear-gradient(90deg, transparent, hsl(var(--primary)), transparent)',
             backgroundSize: '200% 100%',
@@ -65,7 +65,7 @@ function ShippingTableSkeleton() {
           }}
         />
       </div>
-      
+
       <CardHeader>
         <div className="flex items-center justify-between">
           <Skeleton className="h-6 w-32" />
@@ -77,8 +77,8 @@ function ShippingTableSkeleton() {
           <div className="border-b p-4">
             <div className="flex items-center gap-4">
               {['Method Name', 'Price', 'Actions'].map((header, i) => (
-                <Skeleton 
-                  key={i} 
+                <Skeleton
+                  key={i}
                   className="h-4 w-20 flex-1 animate-in fade-in"
                   style={{
                     animationDelay: `${i * 50}ms`,
@@ -89,10 +89,10 @@ function ShippingTableSkeleton() {
               ))}
             </div>
           </div>
-          
+
           {[...Array(4)].map((_, i) => (
-            <div 
-              key={i} 
+            <div
+              key={i}
               className="border-b last:border-b-0 p-4 animate-in fade-in"
               style={{
                 animationDelay: `${200 + i * 50}ms`,
@@ -180,12 +180,12 @@ export default function ShippingPage() {
         .split("; ")
         .find((row) => row.startsWith("Authorization="))
         ?.split("=")[1];
-        
+
       if (!authToken) {
         console.error("No auth token found");
         return;
       }
-      
+
       console.log("Sending request to add shipping method:", newShipping);
       const response = await addShippingMethod(
         newShipping,
@@ -196,10 +196,10 @@ export default function ShippingPage() {
       // Close modal and reset form before refreshing to avoid UI delays
       setModalOpen(false);
       setNewShipping({ name: "", price: 0 });
-      
+
       // Refresh the list after adding
       refreshShippingMethods();
-      
+
       console.log("Shipping method added successfully");
     } catch (error) {
       console.error("Error adding shipping method:", error);
@@ -218,12 +218,12 @@ export default function ShippingPage() {
         .split("; ")
         .find((row) => row.startsWith("Authorization="))
         ?.split("=")[1];
-        
+
       if (!authToken) {
         console.error("No auth token found");
         return;
       }
-      
+
       await updateShippingMethod(
         newShipping._id,
         newShipping,
@@ -234,10 +234,10 @@ export default function ShippingPage() {
       setModalOpen(false);
       setNewShipping({ name: "", price: 0 });
       setEditing(false);
-      
+
       // Refresh the list after updating
       refreshShippingMethods();
-      
+
       console.log("Shipping method updated successfully");
     } catch (error) {
       console.error("Error updating shipping method:", error);