Switch to version 1: remove src/app/admin/page.tsx
This commit is contained in:
@@ -1,406 +0,0 @@
|
||||
"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 { Plus, Trash2, Edit2, Package, BarChart3, AlertCircle } from "lucide-react";
|
||||
|
||||
interface Product {
|
||||
id: string;
|
||||
brand: string;
|
||||
name: string;
|
||||
price: string;
|
||||
stock: number;
|
||||
imageSrc: string;
|
||||
imageAlt: string;
|
||||
}
|
||||
|
||||
interface InventoryItem {
|
||||
id: string;
|
||||
productName: string;
|
||||
sku: string;
|
||||
quantity: number;
|
||||
lowStockThreshold: number;
|
||||
lastUpdated: string;
|
||||
}
|
||||
|
||||
export default function AdminDashboard() {
|
||||
const [products, setProducts] = useState<Product[]>([
|
||||
{
|
||||
id: "prod-001", brand: "Nike", name: "Air Max 90 Classic", price: "$129.99", stock: 45,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/athletic-girl-standing-stairs-tying-shoelaces_23-2148264960.jpg?_wi=2", imageAlt: "Nike Air Max 90 sneaker"},
|
||||
]);
|
||||
|
||||
const [inventory, setInventory] = useState<InventoryItem[]>([
|
||||
{
|
||||
id: "inv-001", productName: "Air Max 90 Classic", sku: "NIKE-AM90-001", quantity: 45,
|
||||
lowStockThreshold: 10,
|
||||
lastUpdated: "2025-01-17"},
|
||||
]);
|
||||
|
||||
const [showAddProduct, setShowAddProduct] = useState(false);
|
||||
const [editingProduct, setEditingProduct] = useState<string | null>(null);
|
||||
const [newProduct, setNewProduct] = useState<Partial<Product>>({
|
||||
brand: "", name: "", price: "", stock: 0,
|
||||
imageSrc: "", imageAlt: ""});
|
||||
|
||||
const navItems = [
|
||||
{ name: "Dashboard", id: "dashboard" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Inventory", id: "inventory" },
|
||||
{ name: "Orders", id: "orders" },
|
||||
{ name: "Analytics", id: "analytics" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Admin", items: [
|
||||
{ label: "Dashboard", href: "/admin" },
|
||||
{ label: "Products", href: "/admin" },
|
||||
{ label: "Settings", href: "/admin" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "Help Center", href: "#" },
|
||||
{ label: "Contact", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const handleAddProduct = () => {
|
||||
if (newProduct.brand && newProduct.name && newProduct.price && newProduct.stock !== undefined) {
|
||||
const product: Product = {
|
||||
id: `prod-${Date.now()}`,
|
||||
brand: newProduct.brand || "", name: newProduct.name || "", price: newProduct.price || "", stock: newProduct.stock || 0,
|
||||
imageSrc: newProduct.imageSrc || "", imageAlt: newProduct.imageAlt || ""};
|
||||
setProducts([...products, product]);
|
||||
setNewProduct({ brand: "", name: "", price: "", stock: 0, imageSrc: "", imageAlt: "" });
|
||||
setShowAddProduct(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteProduct = (id: string) => {
|
||||
setProducts(products.filter((p) => p.id !== id));
|
||||
};
|
||||
|
||||
const handleUpdateStock = (id: string, newStock: number) => {
|
||||
setProducts(products.map((p) => (p.id === id ? { ...p, stock: newStock } : p)));
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="aurora"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="Admin Dashboard"
|
||||
button={{
|
||||
text: "Logout", href: "/"}}
|
||||
animateOnLoad={true}
|
||||
className="bg-opacity-95"
|
||||
navItemClassName="text-sm font-medium"
|
||||
buttonClassName="bg-red-500 hover:bg-red-600"
|
||||
buttonTextClassName="text-white font-semibold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-12 px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Header Section */}
|
||||
<div className="mb-12">
|
||||
<h1 className="text-4xl font-bold text-slate-900 mb-4">Admin Dashboard</h1>
|
||||
<p className="text-lg text-slate-600">Manage products, inventory, and store operations</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-slate-600 text-sm font-medium">Total Products</p>
|
||||
<p className="text-3xl font-bold text-slate-900 mt-2">{products.length}</p>
|
||||
</div>
|
||||
<Package className="w-12 h-12 text-blue-500 opacity-20" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-slate-600 text-sm font-medium">Total Stock</p>
|
||||
<p className="text-3xl font-bold text-slate-900 mt-2">
|
||||
{products.reduce((sum, p) => sum + p.stock, 0)}
|
||||
</p>
|
||||
</div>
|
||||
<BarChart3 className="w-12 h-12 text-green-500 opacity-20" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-slate-600 text-sm font-medium">Low Stock Items</p>
|
||||
<p className="text-3xl font-bold text-slate-900 mt-2">
|
||||
{inventory.filter((item) => item.quantity < item.lowStockThreshold).length}
|
||||
</p>
|
||||
</div>
|
||||
<AlertCircle className="w-12 h-12 text-orange-500 opacity-20" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-slate-600 text-sm font-medium">Revenue Ready</p>
|
||||
<p className="text-3xl font-bold text-slate-900 mt-2">100%</p>
|
||||
</div>
|
||||
<BarChart3 className="w-12 h-12 text-purple-500 opacity-20" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Management Section */}
|
||||
<div id="product-management" data-section="product-management" className="bg-white rounded-lg shadow-lg p-8 mb-12">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-slate-900">Product Management</h2>
|
||||
<p className="text-slate-600 mt-1">Add, edit, and manage your product catalog</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowAddProduct(!showAddProduct)}
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg flex items-center gap-2 transition-colors"
|
||||
>
|
||||
<Plus className="w-5 h-5" />
|
||||
Add Product
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Add Product Form */}
|
||||
{showAddProduct && (
|
||||
<div className="bg-slate-50 border border-slate-200 rounded-lg p-6 mb-8">
|
||||
<h3 className="text-lg font-semibold text-slate-900 mb-4">New Product</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Brand"
|
||||
value={newProduct.brand || ""}
|
||||
onChange={(e) => setNewProduct({ ...newProduct, brand: e.target.value })}
|
||||
className="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Product Name"
|
||||
value={newProduct.name || ""}
|
||||
onChange={(e) => setNewProduct({ ...newProduct, name: e.target.value })}
|
||||
className="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Price"
|
||||
value={newProduct.price || ""}
|
||||
onChange={(e) => setNewProduct({ ...newProduct, price: e.target.value })}
|
||||
className="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Stock Quantity"
|
||||
value={newProduct.stock || 0}
|
||||
onChange={(e) => setNewProduct({ ...newProduct, stock: parseInt(e.target.value) || 0 })}
|
||||
className="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Image URL"
|
||||
value={newProduct.imageSrc || ""}
|
||||
onChange={(e) => setNewProduct({ ...newProduct, imageSrc: e.target.value })}
|
||||
className="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 md:col-span-2"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-3 mt-4">
|
||||
<button
|
||||
onClick={handleAddProduct}
|
||||
className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors"
|
||||
>
|
||||
Save Product
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowAddProduct(false)}
|
||||
className="bg-slate-300 hover:bg-slate-400 text-slate-900 px-4 py-2 rounded-lg transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Products Table */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200 bg-slate-50">
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Product</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Brand</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Price</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Stock</th>
|
||||
<th className="px-6 py-3 text-center text-sm font-semibold text-slate-900">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{products.map((product) => (
|
||||
<tr key={product.id} className="border-b border-slate-200 hover:bg-slate-50 transition-colors">
|
||||
<td className="px-6 py-4 text-sm text-slate-900 font-medium">{product.name}</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-600">{product.brand}</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-900 font-medium">{product.price}</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="number"
|
||||
value={product.stock}
|
||||
onChange={(e) => handleUpdateStock(product.id, parseInt(e.target.value) || 0)}
|
||||
className="w-16 px-2 py-1 border border-slate-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-xs text-slate-500">units</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex justify-center gap-2">
|
||||
<button
|
||||
onClick={() => setEditingProduct(product.id)}
|
||||
className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
|
||||
title="Edit product"
|
||||
>
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteProduct(product.id)}
|
||||
className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
||||
title="Delete product"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{products.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<Package className="w-16 h-16 mx-auto text-slate-300 mb-4" />
|
||||
<p className="text-slate-600 text-lg">No products yet. Add your first product to get started.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Inventory Management Section */}
|
||||
<div id="inventory-management" data-section="inventory-management" className="bg-white rounded-lg shadow-lg p-8 mb-12">
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900">Inventory Management</h2>
|
||||
<p className="text-slate-600 mt-1">Track stock levels and manage inventory alerts</p>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200 bg-slate-50">
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Product</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">SKU</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Quantity</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Low Stock Alert</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Status</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Last Updated</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{inventory.map((item) => {
|
||||
const isLowStock = item.quantity < item.lowStockThreshold;
|
||||
return (
|
||||
<tr key={item.id} className="border-b border-slate-200 hover:bg-slate-50 transition-colors">
|
||||
<td className="px-6 py-4 text-sm text-slate-900 font-medium">{item.productName}</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-600">{item.sku}</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-900 font-medium">{item.quantity}</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-600">{item.lowStockThreshold}</td>
|
||||
<td className="px-6 py-4">
|
||||
{isLowStock ? (
|
||||
<span className="inline-flex items-center gap-1 px-3 py-1 bg-red-100 text-red-800 rounded-full text-xs font-medium">
|
||||
<AlertCircle className="w-3 h-3" />
|
||||
Low Stock
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">
|
||||
In Stock
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-600">{item.lastUpdated}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{inventory.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<Package className="w-16 h-16 mx-auto text-slate-300 mb-4" />
|
||||
<p className="text-slate-600 text-lg">No inventory items yet.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content Sections Ready for Admin */}
|
||||
<div id="content-sections" data-section="content-sections" className="bg-white rounded-lg shadow-lg p-8 mb-12">
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-8">Content Management</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center hover:border-blue-400 hover:bg-blue-50 transition-colors cursor-pointer">
|
||||
<p className="text-slate-600 font-medium">Featured Products Section</p>
|
||||
<p className="text-sm text-slate-500 mt-2">Manage featured products display</p>
|
||||
</div>
|
||||
<div className="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center hover:border-blue-400 hover:bg-blue-50 transition-colors cursor-pointer">
|
||||
<p className="text-slate-600 font-medium">New Arrivals Section</p>
|
||||
<p className="text-sm text-slate-500 mt-2">Update new arrivals content</p>
|
||||
</div>
|
||||
<div className="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center hover:border-blue-400 hover:bg-blue-50 transition-colors cursor-pointer">
|
||||
<p className="text-slate-600 font-medium">Best Sellers Section</p>
|
||||
<p className="text-sm text-slate-500 mt-2">Configure best sellers display</p>
|
||||
</div>
|
||||
<div className="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center hover:border-blue-400 hover:bg-blue-50 transition-colors cursor-pointer">
|
||||
<p className="text-slate-600 font-medium">Brands Section</p>
|
||||
<p className="text-sm text-slate-500 mt-2">Manage brand partners</p>
|
||||
</div>
|
||||
<div className="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center hover:border-blue-400 hover:bg-blue-50 transition-colors cursor-pointer">
|
||||
<p className="text-slate-600 font-medium">Testimonials Section</p>
|
||||
<p className="text-sm text-slate-500 mt-2">Add customer testimonials</p>
|
||||
</div>
|
||||
<div className="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center hover:border-blue-400 hover:bg-blue-50 transition-colors cursor-pointer">
|
||||
<p className="text-slate-600 font-medium">FAQ Section</p>
|
||||
<p className="text-sm text-slate-500 mt-2">Update frequently asked questions</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Admin Panel"
|
||||
copyrightText="© 2025 Admin Dashboard. All rights reserved."
|
||||
columns={footerColumns}
|
||||
ariaLabel="Admin footer with navigation"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user