Add Icons

This commit is contained in:
NotII
2025-04-21 17:24:45 +01:00
parent 17e983fed1
commit 0fa841aaf6
4 changed files with 89 additions and 74 deletions

View File

@@ -4,7 +4,7 @@ import { useState, useEffect, useRef } from "react";
import Layout from "@/components/layout/layout"; import Layout from "@/components/layout/layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; 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 { toast } from "sonner";
import { import {
Select, Select,
@@ -340,77 +340,84 @@ export default function CategoriesPage() {
return ( return (
<Layout> <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"> <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> </div>
<Card> <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
<CardHeader> {/* Add Category Card - Takes up 2 columns */}
<CardTitle className="text-xl font-semibold">Add New Category</CardTitle> <Card className="lg:col-span-2">
</CardHeader> <CardHeader>
<CardContent> <CardTitle className="text-lg font-medium">Add New Category</CardTitle>
<div className="flex items-end gap-4"> </CardHeader>
<div className="flex-1 space-y-2"> <CardContent>
<label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"> <div className="space-y-4">
Category Name <div className="space-y-2">
</label> <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
<Input Category Name
value={newCategoryName} </label>
onChange={(e) => setNewCategoryName(e.target.value)} <Input
placeholder="Enter category name" value={newCategoryName}
className="h-9" 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>
<div className="flex-1 space-y-2"> </CardContent>
<label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"> </Card>
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>
<Card> {/* Category List Card - Takes up 3 columns */}
<CardHeader> <Card className="lg:col-span-3">
<CardTitle className="text-xl font-semibold">Category List</CardTitle> <CardHeader>
</CardHeader> <CardTitle className="text-lg font-medium">Category List</CardTitle>
<CardContent> </CardHeader>
<DndProvider backend={HTML5Backend}> <CardContent>
<div className="space-y-1"> <DndProvider backend={HTML5Backend}>
{rootCategories.length === 0 ? ( <div className="space-y-1">
<p className="text-sm text-muted-foreground text-center py-4"> {rootCategories.length === 0 ? (
No categories yet. Add your first category above. <p className="text-sm text-muted-foreground text-center py-4">
</p> No categories yet. Add your first category above.
) : ( </p>
rootCategories.map(category => ( ) : (
<CategoryItem key={category._id} category={category} /> rootCategories.map(category => (
)) <CategoryItem key={category._id} category={category} />
)} ))
</div> )}
</DndProvider> </div>
</CardContent> </DndProvider>
</Card> </CardContent>
</Card>
</div>
{/* Delete Confirmation Dialog */} {/* Delete Confirmation Dialog */}
{categoryToDelete && ( {categoryToDelete && (

View File

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

View File

@@ -3,6 +3,7 @@ import Dashboard from "@/components/dashboard/dashboard";
import { Metadata, Viewport } from "next"; import { Metadata, Viewport } from "next";
import PromotionsList from "@/components/dashboard/promotions/PromotionsList"; import PromotionsList from "@/components/dashboard/promotions/PromotionsList";
import PromotionsPageSkeleton from "@/components/dashboard/promotions/PromotionsPageSkeleton"; import PromotionsPageSkeleton from "@/components/dashboard/promotions/PromotionsPageSkeleton";
import { Ticket } from "lucide-react";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Promotions | Ember Market", title: "Promotions | Ember Market",
@@ -23,7 +24,10 @@ export default function PromotionsPage() {
<Dashboard> <Dashboard>
<div className="space-y-6"> <div className="space-y-6">
<div> <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"> <p className="mt-1 text-muted-foreground">
Create and manage promotional codes and discounts for your store Create and manage promotional codes and discounts for your store
</p> </p>

View File

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