diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx index 27796d1..fa49550 100644 --- a/src/app/admin/page.tsx +++ b/src/app/admin/page.tsx @@ -1,92 +1,613 @@ "use client"; +import { useState } from "react"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline"; import FooterBaseCard from "@/components/sections/footer/FooterBaseCard"; -import { Users, FileText, Star, BarChart3, Settings, LogOut } from "lucide-react"; -import { useState } from "react"; +import { + Package, + Image, + Tag, + FolderOpen, + DollarSign, + Box, + ShoppingCart, + Users, + FileText, + Image as ImageIcon, + Star, + Menu, + X, + Plus, + Edit, + Trash2, + Search, + ChevronRight, +} from "lucide-react"; -export default function AdminPage() { - const [activeTab, setActiveTab] = useState("dashboard"); +type AdminTab = + | "products" + | "images" + | "brands" + | "categories" + | "prices" + | "stock" + | "orders" + | "customers" + | "content" + | "banners" + | "reviews"; + +interface Product { + id: string; + name: string; + brand: string; + price: number; + stock: number; + category: string; +} + +interface Order { + id: string; + customer: string; + total: number; + status: string; + date: string; +} + +interface Customer { + id: string; + name: string; + email: string; + orders: number; + spent: number; +} + +interface Review { + id: string; + product: string; + author: string; + rating: number; + text: string; +} + +export default function AdminDashboard() { + const [activeTab, setActiveTab] = useState("products"); + const [sidebarOpen, setSidebarOpen] = useState(true); + const [searchTerm, setSearchTerm] = useState(""); const navItems = [ + { name: "Dashboard", id: "dashboard" }, { name: "Home", id: "home" }, - { name: "Shop", id: "shop" }, - { name: "Brands", id: "brands" }, - { name: "New Arrivals", id: "new-arrivals" }, - { name: "Best Sellers", id: "best-sellers" }, - { name: "About", id: "about" }, - { name: "Contact", id: "contact" }, - { name: "Admin", id: "admin" }, ]; const footerColumns = [ { - title: "Shop", items: [ - { label: "All Products", href: "/shop" }, - { label: "New Arrivals", href: "/shop" }, - { label: "Best Sellers", href: "/shop" }, - { label: "Brands", href: "/shop" }, + title: "Admin", items: [ + { label: "Dashboard", href: "/admin" }, + { label: "Analytics", href: "/admin" }, ], }, + ]; + + // Sample data + const products: Product[] = [ + { + id: "1", name: "Air Max 90 Classic", brand: "Nike", price: 129.99, + stock: 45, + category: "Sneakers"}, + { + id: "2", name: "Box Logo Hoodie", brand: "Supreme", price: 345.0, + stock: 12, + category: "Hoodies"}, + { + id: "3", name: "Detroit Jacket", brand: "Carhartt WIP", price: 159.99, + stock: 28, + category: "Jackets"}, + ]; + + const orders: Order[] = [ + { + id: "ORD-001", customer: "John Doe", total: 299.99, + status: "Shipped", date: "2025-01-15"}, + { + id: "ORD-002", customer: "Jane Smith", total: 549.98, + status: "Processing", date: "2025-01-16"}, + { + id: "ORD-003", customer: "Bob Johnson", total: 189.99, + status: "Delivered", date: "2025-01-14"}, + ]; + + const customers: Customer[] = [ + { + id: "C-001", name: "John Doe", email: "john@example.com", orders: 5, + spent: 1299.95, + }, { - title: "Company", items: [ - { label: "About Us", href: "/" }, - { label: "Contact", href: "/" }, - { label: "Blog", href: "/" }, - { label: "Careers", href: "#" }, - ], + id: "C-002", name: "Jane Smith", email: "jane@example.com", orders: 3, + spent: 849.99, }, { - title: "Support", items: [ - { label: "Shipping & Returns", href: "/" }, - { label: "FAQ", href: "/" }, - { label: "Size Guide", href: "#" }, - { label: "Track Order", href: "#" }, - ], + id: "C-003", name: "Bob Johnson", email: "bob@example.com", orders: 2, + spent: 549.98, }, + ]; + + const reviews: Review[] = [ { - title: "Legal", items: [ - { label: "Privacy Policy", href: "#" }, - { label: "Terms & Conditions", href: "#" }, - { label: "Cookie Policy", href: "#" }, - { label: "Accessibility", href: "#" }, - ], - }, + id: "R-001", product: "Air Max 90 Classic", author: "John D.", rating: 5, + text: "Amazing quality and comfort. Highly recommend!"}, + { + id: "R-002", product: "Box Logo Hoodie", author: "Jane S.", rating: 4, + text: "Great piece, shipping was fast."}, + { + id: "R-003", product: "Detroit Jacket", author: "Bob J.", rating: 5, + text: "Perfect fit and authentic. Very satisfied."}, ]; - const adminTabs = [ - { id: "dashboard", label: "Analytics Dashboard", icon: BarChart3 }, - { id: "customers", label: "Customer Management", icon: Users }, - { id: "content", label: "Content & Banners", icon: FileText }, - { id: "reviews", label: "Review Management", icon: Star }, + const menuItems = [ + { id: "products" as AdminTab, label: "Products", icon: Package }, + { id: "images" as AdminTab, label: "Images", icon: ImageIcon }, + { id: "brands" as AdminTab, label: "Brands", icon: Tag }, + { id: "categories" as AdminTab, label: "Categories", icon: FolderOpen }, + { id: "prices" as AdminTab, label: "Prices", icon: DollarSign }, + { id: "stock" as AdminTab, label: "Stock", icon: Box }, + { id: "orders" as AdminTab, label: "Orders", icon: ShoppingCart }, + { id: "customers" as AdminTab, label: "Customers", icon: Users }, + { id: "content" as AdminTab, label: "Content", icon: FileText }, + { id: "banners" as AdminTab, label: "Banners", icon: ImageIcon }, + { id: "reviews" as AdminTab, label: "Reviews", icon: Star }, ]; - const sampleMetrics = [ - { label: "Total Revenue", value: "$45,230", change: "+12.5%" }, - { label: "Total Orders", value: "1,248", change: "+8.2%" }, - { label: "Active Customers", value: "523", change: "+5.3%" }, - { label: "Conversion Rate", value: "3.2%", change: "+0.8%" }, - ]; + const renderContent = () => { + switch (activeTab) { + case "products": + return ( +
+
+

Products Management

+ +
+
+ + + + + + + + + + + + + {products.map((product) => ( + + + + + + + + + ))} + +
NameBrandPriceStockCategoryActions
{product.name}{product.brand}${product.price.toFixed(2)}{product.stock} units{product.category} + + +
+
+
+ ); - const sampleCustomers = [ - { id: 1, name: "John Smith", email: "john@example.com", orders: 12, status: "Active" }, - { id: 2, name: "Sarah Johnson", email: "sarah@example.com", orders: 8, status: "Active" }, - { id: 3, name: "Mike Davis", email: "mike@example.com", orders: 5, status: "Inactive" }, - { id: 4, name: "Emma Wilson", email: "emma@example.com", orders: 15, status: "Active" }, - ]; + case "orders": + return ( +
+
+

Orders Management

+
+
+ + + + + + + + + + + + + {orders.map((order) => ( + + + + + + + + + ))} + +
Order IDCustomerTotalStatusDateActions
{order.id}{order.customer}${order.total.toFixed(2)} + + {order.status} + + {order.date} + +
+
+
+ ); - const sampleContent = [ - { id: 1, title: "Summer Collection Banner", type: "Banner", status: "Published", date: "2025-01-15" }, - { id: 2, title: "New Year Sale", type: "Banner", status: "Scheduled", date: "2025-02-01" }, - { id: 3, title: "Blog Post: Style Guide", type: "Content", status: "Draft", date: "2025-01-10" }, - ]; + case "customers": + return ( +
+
+

Customers Management

+
+
+ + + + + + + + + + + + {customers.map((customer) => ( + + + + + + + + ))} + +
NameEmailOrdersTotal SpentActions
{customer.name}{customer.email}{customer.orders}${customer.spent.toFixed(2)} + +
+
+
+ ); - const sampleReviews = [ - { id: 1, product: "Nike Air Max 90", rating: 5, author: "Alex Chen", status: "Approved", date: "2025-01-18" }, - { id: 2, product: "Supreme Box Logo Hoodie", rating: 4, author: "Taylor Brown", status: "Pending", date: "2025-01-17" }, - { id: 3, product: "Adidas Ultra Boost 22", rating: 5, author: "Jordan Lee", status: "Approved", date: "2025-01-16" }, - ]; + case "reviews": + return ( +
+
+

Reviews Management

+
+
+ {reviews.map((review) => ( +
+
+
+

{review.product}

+
+ {[...Array(review.rating)].map((_, i) => ( + + ))} +
+
+

By {review.author}

+

{review.text}

+
+
+ + +
+
+ ))} +
+
+ ); + + case "images": + return ( +
+
+

Images Management

+ +
+
+ {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => ( +
+
+ +
+
+

Image {i}

+
+ + +
+
+
+ ))} +
+
+ ); + + case "brands": + return ( +
+
+

Brands Management

+ +
+
+ {["Nike", "Adidas", "Supreme", "Carhartt WIP", "The North Face", "Stüssy"].map( + (brand, i) => ( +
+

{brand}

+
+ + +
+
+ ) + )} +
+
+ ); + + case "categories": + return ( +
+
+

Categories Management

+ +
+
+ {["Sneakers", "Hoodies", "Jackets", "T-Shirts", "Pants", "Accessories"].map( + (category, i) => ( +
+ {category} +
+ + +
+
+ ) + )} +
+
+ ); + + case "prices": + return ( +
+
+

Prices Management

+
+
+ + + + + + + + + + + + {products.map((product) => ( + + + + + + + + ))} + +
ProductCurrent PriceCostMarginActions
{product.name}${product.price.toFixed(2)}${(product.price * 0.6).toFixed(2)}40% + +
+
+
+ ); + + case "stock": + return ( +
+
+

Stock Management

+ +
+
+ + + + + + + + + + + + {products.map((product) => ( + + + + + + + + ))} + +
ProductCurrent StockReorder LevelStatusActions
{product.name}{product.stock} units10 units + + In Stock + + + +
+
+
+ ); + + case "content": + return ( +
+
+

Content Management

+ +
+
+ {[ + { id: 1, title: "Home Page Hero", type: "Hero Section", status: "Published" }, + { id: 2, title: "About Us", type: "Text Page", status: "Draft" }, + { id: 3, title: "FAQs", type: "FAQ Section", status: "Published" }, + ].map((content) => ( +
+
+

{content.title}

+

{content.type}

+
+
+ + {content.status} + + +
+
+ ))} +
+
+ ); + + case "banners": + return ( +
+
+

Banners Management

+ +
+
+ {[1, 2, 3, 4].map((i) => ( +
+
+ Banner {i} +
+
+

Banner Title {i}

+
+ + +
+
+
+ ))} +
+
+ ); + + default: + return ( +
+

Dashboard Overview

+
+
+

Total Products

+

1,247

+
+
+

Total Orders

+

356

+
+
+

Total Customers

+

892

+
+
+

Revenue

+

$45,230

+
+
+
+ ); + } + }; return ( -
-
- {/* Admin Header */} -
-

Admin Dashboard

-

Manage customers, content, reviews, and analytics

+
+ {/* Sidebar */} +
+
+

Admin Panel

+
- {/* Tab Navigation */} -
- {adminTabs.map((tab) => { - const Icon = tab.icon; +
+ +
- {/* Analytics Dashboard Tab */} - {activeTab === "dashboard" && ( -
-
- {sampleMetrics.map((metric, idx) => ( -
-

{metric.label}

-

{metric.value}

-

{metric.change}

-
- ))} -
- - {/* Analytics Charts Placeholder */} -
-
-
- -

Revenue Chart

-
-
-
-
- -

Orders Chart

-
-
-
-
- )} - - {/* Customer Management Tab */} - {activeTab === "customers" && ( -
-
- - - - - - - - - - - - {sampleCustomers.map((customer) => ( - - - - - - - - ))} - -
NameEmailOrdersStatusActions
{customer.name}{customer.email}{customer.orders} - - {customer.status} - - Edit
-
-
- )} - - {/* Content & Banner Management Tab */} - {activeTab === "content" && ( -
-
-

Content & Banners

- -
-
- {sampleContent.map((item) => ( -
-
-

{item.title}

-

{item.type} • {item.date}

-
-
- - {item.status} - - -
-
- ))} -
-
- )} - - {/* Review Management Tab */} - {activeTab === "reviews" && ( -
-
- {sampleReviews.map((review) => ( -
-
-
-

{review.product}

-

By {review.author}

-
- - {review.status} - -
-
-
- {[...Array(5)].map((_, i) => ( - - ))} -
-
- {review.status === "Pending" && ( - <> - - - - )} - -
-
-
- ))} -
-
- )} + {/* Main Content */} +
+
{renderContent()}
-