Add Icons

app/dashboard/categories/page.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useRef } from "react";
 import Layout from "@/components/layout/layout";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Plus, Pencil, Trash2, ChevronRight, ChevronDown, MoveVertical } from "lucide-react";
+import { Plus, Pencil, Trash2, ChevronRight, ChevronDown, MoveVertical, FolderTree } from "lucide-react";
 import { toast } from "sonner";
 import {
   Select,
@@ -340,77 +340,84 @@ export default function CategoriesPage() {
 
   return (
     <Layout>
-      <div className="max-w-4xl mx-auto space-y-6 p-6">
+      <div className="space-y-6">
         <div className="flex items-center justify-between">
-          <h1 className="text-3xl font-bold tracking-tight">Categories</h1>
+          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
+            <FolderTree className="mr-2 h-6 w-6" />
+            Categories
+          </h1>
         </div>
 
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-xl font-semibold">Add New Category</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex items-end gap-4">
-              <div className="flex-1 space-y-2">
-                <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-                  Category Name
-                </label>
-                <Input
-                  value={newCategoryName}
-                  onChange={(e) => setNewCategoryName(e.target.value)}
-                  placeholder="Enter category name"
-                  className="h-9"
-                />
+        <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
+          {/* Add Category Card - Takes up 2 columns */}
+          <Card className="lg:col-span-2">
+            <CardHeader>
+              <CardTitle className="text-lg font-medium">Add New Category</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                    Category Name
+                  </label>
+                  <Input
+                    value={newCategoryName}
+                    onChange={(e) => setNewCategoryName(e.target.value)}
+                    placeholder="Enter category name"
+                    className="h-9"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                    Parent Category
+                  </label>
+                  <Select
+                    value={selectedParentId || "none"}
+                    onValueChange={setSelectedParentId}
+                  >
+                    <SelectTrigger className="h-9">
+                      <SelectValue placeholder="Select parent category" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="none">No parent (root category)</SelectItem>
+                      {categories.map((cat) => (
+                        <SelectItem key={cat._id} value={cat._id}>
+                          {cat.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <Button onClick={handleAddCategory} className="w-full">
+                  <Plus className="h-4 w-4 mr-2" />
+                  Add Category
+                </Button>
               </div>
-              <div className="flex-1 space-y-2">
-                <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-                  Parent Category
-                </label>
-                <Select
-                  value={selectedParentId || "none"}
-                  onValueChange={setSelectedParentId}
-                >
-                  <SelectTrigger className="h-9">
-                    <SelectValue placeholder="Select parent category" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="none">No parent (root category)</SelectItem>
-                    {categories.map((cat) => (
-                      <SelectItem key={cat._id} value={cat._id}>
-                        {cat.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <Button onClick={handleAddCategory} className="h-9">
-                <Plus className="h-4 w-4 mr-2" />
-                Add Category
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
+            </CardContent>
+          </Card>
 
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-xl font-semibold">Category List</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <DndProvider backend={HTML5Backend}>
-              <div className="space-y-1">
-                {rootCategories.length === 0 ? (
-                  <p className="text-sm text-muted-foreground text-center py-4">
-                    No categories yet. Add your first category above.
-                  </p>
-                ) : (
-                  rootCategories.map(category => (
-                    <CategoryItem key={category._id} category={category} />
-                  ))
-                )}
-              </div>
-            </DndProvider>
-          </CardContent>
-        </Card>
+          {/* Category List Card - Takes up 3 columns */}
+          <Card className="lg:col-span-3">
+            <CardHeader>
+              <CardTitle className="text-lg font-medium">Category List</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <DndProvider backend={HTML5Backend}>
+                <div className="space-y-1">
+                  {rootCategories.length === 0 ? (
+                    <p className="text-sm text-muted-foreground text-center py-4">
+                      No categories yet. Add your first category above.
+                    </p>
+                  ) : (
+                    rootCategories.map(category => (
+                      <CategoryItem key={category._id} category={category} />
+                    ))
+                  )}
+                </div>
+              </DndProvider>
+            </CardContent>
+          </Card>
+        </div>
         
         {/* Delete Confirmation Dialog */}
         {categoryToDelete && (

app/dashboard/products/page.tsx

@@ -6,7 +6,7 @@ import Layout from "@/components/layout/layout";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Product } from "@/models/products";
-import { Plus, Upload, Search, RefreshCw } from "lucide-react";
+import { Plus, Upload, Search, RefreshCw, Package2 } from "lucide-react";
 import { clientFetch } from "@/lib/api";
 import { ProductModal } from "@/components/modals/product-modal";
 import ProductTable from "@/components/tables/product-table";
@@ -269,8 +269,11 @@ export default function ProductsPage() {
   return (
     <Layout>
       <div className="space-y-6">
-        <div className="flex items-center justify-between mb-6">
-          <h1 className="text-2xl font-semibold">Product Inventory</h1>
+        <div className="flex items-center justify-between">
+          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
+            <Package2 className="mr-2 h-6 w-6" />
+            Products
+          </h1>
           <div className="flex items-center gap-3">
             <div className="relative">
               <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />

app/dashboard/promotions/page.tsx

@@ -3,6 +3,7 @@ import Dashboard from "@/components/dashboard/dashboard";
 import { Metadata, Viewport } from "next";
 import PromotionsList from "@/components/dashboard/promotions/PromotionsList";
 import PromotionsPageSkeleton from "@/components/dashboard/promotions/PromotionsPageSkeleton";
+import { Ticket } from "lucide-react";
 
 export const metadata: Metadata = {
   title: "Promotions | Ember Market",
@@ -23,7 +24,10 @@ export default function PromotionsPage() {
     <Dashboard>
       <div className="space-y-6">
         <div>
-          <h1 className="text-3xl font-bold">Promotions</h1>
+          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
+            <Ticket className="mr-2 h-6 w-6" />
+            Promotions
+          </h1>
           <p className="mt-1 text-muted-foreground">
             Create and manage promotional codes and discounts for your store
           </p>

app/dashboard/shipping/page.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect, ChangeEvent } from "react";
 import { useRouter } from "next/navigation";
 import Layout from "@/components/layout/layout";
-import { Edit, Plus, Trash } from "lucide-react";
+import { Edit, Plus, Trash, Truck } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ShippingModal } from "@/components/modals/shipping-modal";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -174,8 +174,9 @@ export default function ShippingPage() {
     <Layout>
       <div className="space-y-6">
         <div className="flex items-center justify-between">
-          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
-            Manage Shipping Options
+          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
+            <Truck className="mr-2 h-6 w-6" />
+            Shipping Methods
           </h1>
           <Button onClick={() => {
             setNewShipping({ name: "", price: 0 });