Add src/app/admin/page.tsx

src/app/admin/page.tsx

@@ -0,0 +1,339 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import { Plus, Edit2, Trash2, X, Check } from 'lucide-react';
+
+interface Product {
+  id: string;
+  name: string;
+  price: string;
+  imageSrc: string;
+  imageAlt?: string;
+  size?: string;
+  color?: string;
+  stock?: number;
+}
+
+interface FormData {
+  name: string;
+  price: string;
+  imageSrc: string;
+  imageAlt: string;
+  size: string;
+  color: string;
+  stock: string;
+}
+
+export default function AdminPage() {
+  const [products, setProducts] = useState<Product[]>([
+    {
+      id: "1",      name: "Elegance Dress",      price: "$89.99",      imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2692.jpg",      imageAlt: "Stylish women's dress",      size: "M",      color: "Black",      stock: 15
+    },
+    {
+      id: "2",      name: "Classic Oxford Shirt",      price: "$64.99",      imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-man-suit_171337-19984.jpg",      imageAlt: "Men's button-up shirt",      size: "L",      color: "White",      stock: 22
+    },
+    {
+      id: "3",      name: "Premium Denim Jeans",      price: "$79.99",      imageSrc: "http://img.b2bpic.net/free-photo/woman-model-demonstrating-winter-cloths_1303-16949.jpg",      imageAlt: "Classic denim jeans",      size: "32",      color: "Blue",      stock: 18
+    }
+  ]);
+
+  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [formData, setFormData] = useState<FormData>({
+    name: "",    price: "",    imageSrc: "",    imageAlt: "",    size: "",    color: "",    stock: ""
+  });
+
+  const handleOpenForm = (product?: Product) => {
+    if (product) {
+      setEditingId(product.id);
+      setFormData({
+        name: product.name,
+        price: product.price,
+        imageSrc: product.imageSrc,
+        imageAlt: product.imageAlt || "",        size: product.size || "",        color: product.color || "",        stock: product.stock?.toString() || ""
+      });
+    } else {
+      setEditingId(null);
+      setFormData({
+        name: "",        price: "",        imageSrc: "",        imageAlt: "",        size: "",        color: "",        stock: ""
+      });
+    }
+    setIsFormOpen(true);
+  };
+
+  const handleCloseForm = () => {
+    setIsFormOpen(false);
+    setEditingId(null);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSaveProduct = () => {
+    if (!formData.name || !formData.price) {
+      alert("Please fill in required fields");
+      return;
+    }
+
+    if (editingId) {
+      setProducts(products.map(p =>
+        p.id === editingId
+          ? {
+              ...p,
+              name: formData.name,
+              price: formData.price,
+              imageSrc: formData.imageSrc,
+              imageAlt: formData.imageAlt,
+              size: formData.size,
+              color: formData.color,
+              stock: parseInt(formData.stock) || 0
+            }
+          : p
+      ));
+    } else {
+      const newProduct: Product = {
+        id: Date.now().toString(),
+        name: formData.name,
+        price: formData.price,
+        imageSrc: formData.imageSrc,
+        imageAlt: formData.imageAlt,
+        size: formData.size,
+        color: formData.color,
+        stock: parseInt(formData.stock) || 0
+      };
+      setProducts([...products, newProduct]);
+    }
+    handleCloseForm();
+  };
+
+  const handleDeleteProduct = (id: string) => {
+    if (confirm("Are you sure you want to delete this product?")) {
+      setProducts(products.filter(p => p.id !== id));
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="small"
+      sizing="largeSmallSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="StyleHub"
+          navItems={[
+            { name: "Home", id: "hero" },
+            { name: "Shop", id: "products" },
+            { name: "About", id: "about" },
+            { name: "Reviews", id: "testimonials" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{
+            text: "Back to Store",            href: "/"
+          }}
+        />
+      </div>
+
+      <div className="min-h-screen bg-background pt-32 pb-16">
+        <div className="max-w-6xl mx-auto px-4">
+          <div className="mb-8">
+            <h1 className="text-4xl font-semibold mb-2 text-foreground">Admin Panel</h1>
+            <p className="text-lg text-foreground/70">Manage your clothing inventory</p>
+          </div>
+
+          {/* Add Product Button */}
+          <button
+            onClick={() => handleOpenForm()}
+            className="mb-8 flex items-center gap-2 px-6 py-3 bg-primary-cta text-primary-cta-text rounded-lg hover:opacity-90 transition-opacity"
+          >
+            <Plus size={20} />
+            Add New Product
+          </button>
+
+          {/* Products Table */}
+          <div className="bg-card rounded-lg overflow-hidden shadow-lg">
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead className="bg-primary-cta/10">
+                  <tr>
+                    <th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Product Name</th>
+                    <th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Price</th>
+                    <th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Size</th>
+                    <th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Color</th>
+                    <th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Stock</th>
+                    <th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Actions</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-accent/20">
+                  {products.map((product) => (
+                    <tr key={product.id} className="hover:bg-background/50 transition-colors">
+                      <td className="px-6 py-4 text-sm text-foreground">{product.name}</td>
+                      <td className="px-6 py-4 text-sm text-foreground">{product.price}</td>
+                      <td className="px-6 py-4 text-sm text-foreground">{product.size || "-"}</td>
+                      <td className="px-6 py-4 text-sm text-foreground">{product.color || "-"}</td>
+                      <td className="px-6 py-4 text-sm text-foreground">{product.stock || 0}</td>
+                      <td className="px-6 py-4 text-sm">
+                        <div className="flex gap-2">
+                          <button
+                            onClick={() => handleOpenForm(product)}
+                            className="p-2 hover:bg-background rounded transition-colors"
+                            title="Edit"
+                          >
+                            <Edit2 size={18} className="text-primary-cta" />
+                          </button>
+                          <button
+                            onClick={() => handleDeleteProduct(product.id)}
+                            className="p-2 hover:bg-background rounded transition-colors"
+                            title="Delete"
+                          >
+                            <Trash2 size={18} className="text-red-500" />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Modal Form */}
+      {isFormOpen && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
+          <div className="bg-card rounded-lg p-8 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+            <div className="flex justify-between items-center mb-6">
+              <h2 className="text-2xl font-semibold text-foreground">
+                {editingId ? "Edit Product" : "Add New Product"}
+              </h2>
+              <button
+                onClick={handleCloseForm}
+                className="p-2 hover:bg-background rounded transition-colors"
+              >
+                <X size={24} className="text-foreground" />
+              </button>
+            </div>
+
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Product Name *</label>
+                <input
+                  type="text"
+                  name="name"
+                  value={formData.name}
+                  onChange={handleInputChange}
+                  className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
+                  placeholder="e.g., Elegant Dress"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Price *</label>
+                <input
+                  type="text"
+                  name="price"
+                  value={formData.price}
+                  onChange={handleInputChange}
+                  className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
+                  placeholder="e.g., $89.99"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Image URL</label>
+                <input
+                  type="text"
+                  name="imageSrc"
+                  value={formData.imageSrc}
+                  onChange={handleInputChange}
+                  className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
+                  placeholder="https://..."
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Image Alt Text</label>
+                <input
+                  type="text"
+                  name="imageAlt"
+                  value={formData.imageAlt}
+                  onChange={handleInputChange}
+                  className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
+                  placeholder="e.g., Stylish women's dress"
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-foreground mb-2">Size</label>
+                  <input
+                    type="text"
+                    name="size"
+                    value={formData.size}
+                    onChange={handleInputChange}
+                    className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
+                    placeholder="e.g., M, L, XL"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-foreground mb-2">Color</label>
+                  <input
+                    type="text"
+                    name="color"
+                    value={formData.color}
+                    onChange={handleInputChange}
+                    className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
+                    placeholder="e.g., Black, Blue"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Stock</label>
+                <input
+                  type="number"
+                  name="stock"
+                  value={formData.stock}
+                  onChange={handleInputChange}
+                  className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
+                  placeholder="e.g., 15"
+                />
+              </div>
+            </div>
+
+            <div className="flex gap-4 mt-8">
+              <button
+                onClick={handleSaveProduct}
+                className="flex-1 flex items-center justify-center gap-2 px-6 py-3 bg-primary-cta text-primary-cta-text rounded-lg hover:opacity-90 transition-opacity"
+              >
+                <Check size={20} />
+                {editingId ? "Update Product" : "Add Product"}
+              </button>
+              <button
+                onClick={handleCloseForm}
+                className="flex-1 px-6 py-3 border border-accent/30 text-foreground rounded-lg hover:bg-background/50 transition-colors"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </ThemeProvider>
+  );
+}