From 3eeca771d1aa4272cef64547f72a79b5e779dcb1 Mon Sep 17 00:00:00 2001
From: Getabalewkemaw <getabalewkemaw@gmail.com>
Date: Wed, 12 Nov 2025 13:29:13 +0300
Subject: [PATCH] Adding products details page

---
 app/admin/stock/page.tsx                      |  45 ++
 app/products/[id]/page.tsx                    | 162 ++++++++
 app/products/page.tsx                         | 238 +++++++++++
 .../products/StockManagementDashboard.tsx     | 392 ++++++++++++++++++
 lib/api/products.ts                           |  45 ++
 lib/hooks/useProducts.ts                      |   1 +
 types/product.ts                              |   6 +
 7 files changed, 889 insertions(+)
 create mode 100644 app/admin/stock/page.tsx
 create mode 100644 app/products/[id]/page.tsx
 create mode 100644 app/products/page.tsx
 create mode 100644 components/products/StockManagementDashboard.tsx

diff --git a/app/admin/stock/page.tsx b/app/admin/stock/page.tsx
new file mode 100644
index 0000000..e9721a8
--- /dev/null
+++ b/app/admin/stock/page.tsx
@@ -0,0 +1,45 @@
+/**
+ * Stock Management Page
+ * Full page for managing inventory and stock levels
+ */
+
+"use client";
+
+import { useAuth } from "@/lib/hooks/useAuth";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import Navbar from "@/components/NavBar";
+import StockManagementDashboard from "@/components/products/StockManagementDashboard";
+
+export default function StockManagementPage() {
+  const { isAdmin, isLoading } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!isLoading && !isAdmin) {
+      router.push("/dashboard");
+    }
+  }, [isAdmin, isLoading, router]);
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
+      </div>
+    );
+  }
+
+  if (!isAdmin) {
+    return null;
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Navbar />
+
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <StockManagementDashboard />
+      </main>
+    </div>
+  );
+}
diff --git a/app/products/[id]/page.tsx b/app/products/[id]/page.tsx
new file mode 100644
index 0000000..90151a6
--- /dev/null
+++ b/app/products/[id]/page.tsx
@@ -0,0 +1,162 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useParams } from "next/navigation";
+import Navbar from "@/components/NavBar";
+import { getPublicProductById, recordProductView } from "@/lib/api/products";
+import type { ProductWithDetails, ProductMedia } from "@/types/product";
+
+export default function ProductDetailPage() {
+  const params = useParams<{ id: string }>();
+  const id = params?.id;
+  const [product, setProduct] = useState<ProductWithDetails | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+  const [activeMediaIndex, setActiveMediaIndex] = useState<number>(0);
+
+  useEffect(() => {
+    const run = async () => {
+      if (!id) return;
+      setLoading(true);
+      setError(null);
+      const res = await getPublicProductById(id);
+      if (res.success && res.data) {
+        setProduct(res.data);
+        setActiveMediaIndex(0);
+        // fire-and-forget view record
+        recordProductView(id).catch(() => {});
+      } else {
+        setError(res.error || "Failed to load product");
+      }
+      setLoading(false);
+    };
+    run();
+  }, [id]);
+
+  const renderMedia = (media: ProductMedia) => {
+    if (media.mediaType === "video") {
+      return <video key={media.id} src={media.url} controls className="w-full rounded" />;
+    }
+    // eslint-disable-next-line @next/next/no-img-element
+    return <img key={media.id} src={media.url} alt={media.altText || product?.title || ""} className="w-full rounded" />;
+  };
+
+  const activeMedia = useMemo(() => product?.media?.[activeMediaIndex], [product?.media, activeMediaIndex]);
+  const variants = product?.variants ?? [];
+
+  return (
+    <>
+      <Navbar />
+      <div className="max-w-5xl mx-auto px-4 py-6">
+        {loading ? (
+          <div className="py-10 text-center">Loading...</div>
+        ) : error ? (
+          <div className="py-10 text-center text-red-600">{error}</div>
+        ) : product ? (
+          <div className="space-y-8">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+              <div>
+                {activeMedia ? (
+                  <div className="border border-gray-200 rounded-xl overflow-hidden mb-4 bg-white">
+                    {renderMedia(activeMedia)}
+                  </div>
+                ) : (
+                  <div className="w-full h-72 bg-gray-100 rounded-xl" />
+                )}
+                {product.media && product.media.length > 1 && (
+                  <div className="flex gap-3 overflow-x-auto pb-2">
+                    {product.media.map((media, index) => (
+                      <button
+                        key={media.id}
+                        type="button"
+                        onClick={() => setActiveMediaIndex(index)}
+                        className={`w-20 h-20 rounded-lg border overflow-hidden shrink-0 ${index === activeMediaIndex ? "border-purple-500 ring-2 ring-purple-200" : "border-transparent"}`}
+                      >
+                        {media.mediaType === "video" ? (
+                          <video src={media.url} className="w-full h-full object-cover" muted />
+                        ) : (
+                          // eslint-disable-next-line @next/next/no-img-element
+                          <img src={media.url} alt={media.altText || product.title} className="w-full h-full object-cover" />
+                        )}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+              <div className="space-y-4">
+                <div className="flex items-center gap-3">
+                  {product.category?.name && (
+                    <span className="px-3 py-1 bg-purple-100 text-purple-700 text-xs uppercase tracking-wide rounded-full">
+                      {product.category.name}
+                    </span>
+                  )}
+                  <span className="text-sm text-gray-400">ID: {product.id.slice(0, 8)}...</span>
+                </div>
+                <h1 className="text-3xl font-semibold text-gray-900">{product.title}</h1>
+                <div className="text-2xl text-purple-600 font-semibold">
+                  {product.currency} {product.price.toFixed(2)}
+                </div>
+                <p className="text-gray-600 whitespace-pre-line leading-relaxed">
+                  {product.description || "No description."}
+                </p>
+                <div className="pt-4 border-t border-gray-100">
+                  <h2 className="text-lg font-semibold mb-2">Variants</h2>
+                  {variants.length === 0 ? (
+                    <p className="text-sm text-gray-500">This product does not have additional variants.</p>
+                  ) : (
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                      {variants.map((variant) => (
+                        <div
+                          key={variant.id}
+                          className="border border-gray-200 rounded-lg p-3 bg-white hover:border-purple-400 transition"
+                        >
+                          <div className="flex items-center justify-between mb-2">
+                            <span className="font-medium text-gray-900">{variant.sku || "Variant"}</span>
+                            {variant.priceOverride ? (
+                              <span className="text-sm text-purple-600 font-semibold">
+                                {product.currency} {variant.priceOverride.toFixed(2)}
+                              </span>
+                            ) : (
+                              <span className="text-sm text-gray-500">Default price</span>
+                            )}
+                          </div>
+                          <div className="flex flex-wrap gap-2 text-xs text-gray-500">
+                            {variant.size && <span className="px-2 py-1 bg-gray-100 rounded-full">Size: {variant.size}</span>}
+                            {variant.color && <span className="px-2 py-1 bg-gray-100 rounded-full">Color: {variant.color}</span>}
+                            <span className="px-2 py-1 bg-gray-100 rounded-full">
+                              Stock: {variant.stock}
+                            </span>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+            <div>
+              {product.media && product.media.length > 0 && (
+                <h2 className="text-lg font-semibold mb-3">Gallery</h2>
+              )}
+              {product.media && product.media.length > 0 ? (
+                <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+                  {product.media.map((media) => (
+                    <div key={media.id} className="border border-gray-200 rounded-lg overflow-hidden">
+                      {renderMedia(media)}
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="p-6 border border-dashed border-gray-300 rounded-lg text-center text-sm text-gray-500">
+                  No media has been added for this product yet.
+                </div>
+              )}
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </>
+  );
+}
+
+
diff --git a/app/products/page.tsx b/app/products/page.tsx
new file mode 100644
index 0000000..00fbaa6
--- /dev/null
+++ b/app/products/page.tsx
@@ -0,0 +1,238 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import Link from "next/link";
+import { getPublicProducts, getFilterOptions } from "@/lib/api/products";
+import type { ProductWithDetails, FilterOptions } from "@/types/product";
+import Navbar from "@/components/NavBar";
+
+const DEFAULT_FILTERS = {
+  q: "",
+  categoryId: "",
+  minPrice: undefined as number | undefined,
+  maxPrice: undefined as number | undefined,
+  page: 1,
+  limit: 12,
+};
+
+export default function ProductsPage() {
+  const [products, setProducts] = useState<ProductWithDetails[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+  const [filters, setFilters] = useState<typeof DEFAULT_FILTERS>(DEFAULT_FILTERS);
+  const [options, setOptions] = useState<FilterOptions | null>(null);
+  const [pagination, setPagination] = useState<{ total: number; page: number; limit: number; totalPages: number }>({
+    total: 0,
+    page: 1,
+    limit: DEFAULT_FILTERS.limit,
+    totalPages: 0,
+  });
+
+  useEffect(() => {
+    const run = async () => {
+      setLoading(true);
+      setError(null);
+      const [optRes, listRes] = await Promise.all([
+        getFilterOptions(),
+        getPublicProducts({
+          ...filters,
+          categoryId: filters.categoryId || undefined,
+          q: filters.q || undefined,
+        }),
+      ]);
+      if (optRes.success && optRes.data) setOptions(optRes.data);
+      if (listRes.success) {
+        setProducts(listRes.data);
+        setPagination(listRes.pagination);
+      } else {
+        setProducts([]);
+        setError("Failed to load products");
+      }
+      setLoading(false);
+    };
+    run();
+  }, [filters]);
+
+  const categoryOptions = useMemo(() => options?.categories ?? [], [options]);
+  const priceRange = useMemo(() => options?.priceRange ?? { min: 0, max: 0 }, [options]);
+  const appliedFilters = useMemo(() => {
+    const active: string[] = [];
+    if (filters.q) active.push("Search");
+    if (filters.categoryId) active.push("Category");
+    if (typeof filters.minPrice === "number" || typeof filters.maxPrice === "number") active.push("Price");
+    return active;
+  }, [filters]);
+
+  const handleResetFilters = () => {
+    setFilters({ ...DEFAULT_FILTERS, page: 1 });
+  };
+
+  const handlePageChange = (newPage: number) => {
+    setFilters((prev) => ({ ...prev, page: newPage }));
+  };
+
+  return (
+    <>
+      <Navbar />
+      <div className="max-w-6xl mx-auto px-4 py-6">
+        <h1 className="text-2xl font-semibold mb-4">Browse Products</h1>
+
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-4">
+          <p className="text-sm text-gray-600">
+            Showing <span className="font-medium">{products.length}</span> of{" "}
+            <span className="font-medium">{pagination.total}</span> products
+          </p>
+          <div className="flex flex-wrap items-center gap-2">
+            {appliedFilters.length > 0 && (
+              <div className="text-xs text-gray-500">Active filters:</div>
+            )}
+            {appliedFilters.map((filter) => (
+              <span key={filter} className="text-xs bg-purple-100 text-purple-700 py-1 px-2 rounded-full">
+                {filter}
+              </span>
+            ))}
+            <button
+              type="button"
+              onClick={handleResetFilters}
+              className="text-sm text-purple-600 hover:text-purple-800 underline underline-offset-4"
+            >
+              Clear Filters
+            </button>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+          <div className="md:col-span-2">
+            <label className="block text-xs uppercase tracking-wide text-gray-500 mb-2">Search</label>
+            <input
+              type="text"
+              placeholder="Search by name or description"
+              className="border rounded px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-purple-500"
+              value={filters.q}
+              onChange={(e) => setFilters((prev) => ({ ...prev, q: e.target.value, page: 1 }))}
+            />
+          </div>
+          <div>
+            <label className="block text-xs uppercase tracking-wide text-gray-500 mb-2">Category</label>
+            <select
+              className="border rounded px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-purple-500"
+              value={filters.categoryId}
+              onChange={(e) => setFilters((prev) => ({ ...prev, categoryId: e.target.value, page: 1 }))}
+            >
+              <option value="">All Categories</option>
+              {categoryOptions.map((c) => (
+                <option key={c.id} value={c.id}>
+                  {c.name} {c.productCount ? `(${c.productCount})` : ""}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-xs uppercase tracking-wide text-gray-500 mb-2">Price Range</label>
+            <div className="flex gap-2">
+              <input
+                type="number"
+                min={priceRange.min}
+                max={priceRange.max}
+                placeholder={`Min ${priceRange.min}`}
+                className="border rounded px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-purple-500"
+                value={filters.minPrice ?? ""}
+                onChange={(e) =>
+                  setFilters((prev) => ({
+                    ...prev,
+                    minPrice: e.target.value ? Number(e.target.value) : undefined,
+                    page: 1,
+                  }))
+                }
+              />
+              <input
+                type="number"
+                min={priceRange.min}
+                max={priceRange.max}
+                placeholder={`Max ${priceRange.max}`}
+                className="border rounded px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-purple-500"
+                value={filters.maxPrice ?? ""}
+                onChange={(e) =>
+                  setFilters((prev) => ({
+                    ...prev,
+                    maxPrice: e.target.value ? Number(e.target.value) : undefined,
+                    page: 1,
+                  }))
+                }
+              />
+            </div>
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="py-10 text-center">Loading...</div>
+        ) : error ? (
+          <div className="py-10 text-center text-red-600">{error}</div>
+        ) : (
+          <>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+              {products.map((p) => {
+                const cover = p.media?.[0];
+                const categoryLabel = p.category?.name;
+                const variantCount = p.variants?.length;
+                return (
+                  <Link
+                    key={p.id}
+                    href={`/products/${p.id}`}
+                    className="block border border-gray-200 rounded-xl overflow-hidden hover:shadow-lg transition-shadow bg-white"
+                  >
+                    {cover ? (
+                      cover.mediaType === 'image' ? (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img
+                          src={cover.url}
+                          alt={cover.altText || p.title}
+                          className="w-full h-48 object-cover"
+                        />
+                      ) : (
+                        <video src={cover.url} className="w-full h-48 object-cover" muted controls={false} />
+                      )
+                    ) : (
+                      <div className="w-full h-48 bg-gray-100" />
+                    )}
+                    <div className="p-3">
+                      <div className="flex items-center justify-between mb-1">
+                        <h2 className="font-semibold text-gray-900 line-clamp-1">{p.title}</h2>
+                        <span className="text-sm text-purple-600 font-medium">
+                          {p.currency} {p.price.toFixed(2)}
+                        </span>
+                      </div>
+                      <div className="flex items-center justify-between text-xs text-gray-500">
+                        <span>{categoryLabel ?? "Uncategorized"}</span>
+                        <span>{variantCount ? `${variantCount} variants` : "Single variant"}</span>
+                      </div>
+                    </div>
+                  </Link>
+                );
+              })}
+            </div>
+            <div className="flex items-center justify-center gap-4 mt-6">
+              <button
+                className="px-3 py-2 border rounded disabled:opacity-50"
+                disabled={pagination.page <= 1}
+                onClick={() => handlePageChange(Math.max(1, pagination.page - 1))}
+              >
+                Previous
+              </button>
+              <span className="text-sm">Page {pagination.page} of {pagination.totalPages}</span>
+              <button
+                className="px-3 py-2 border rounded disabled:opacity-50"
+                disabled={pagination.page >= pagination.totalPages}
+                onClick={() => handlePageChange(pagination.page + 1)}
+              >
+                Next
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  );
+}
+
+
diff --git a/components/products/StockManagementDashboard.tsx b/components/products/StockManagementDashboard.tsx
new file mode 100644
index 0000000..0b7bcda
--- /dev/null
+++ b/components/products/StockManagementDashboard.tsx
@@ -0,0 +1,392 @@
+/**
+ * Stock Management Dashboard
+ * Bulk stock updates, low stock alerts, and inventory overview
+ */
+
+"use client";
+
+import { useState } from "react";
+import { useLowStock } from "@/lib/hooks/useProducts";
+import * as productApi from "@/lib/api/products";
+import { ProductVariant } from "@/types/product";
+import {
+  Package,
+  AlertTriangle,
+  TrendingUp,
+  TrendingDown,
+  RefreshCw,
+  Download,
+  Search,
+} from "lucide-react";
+import {
+  getStockStatus,
+  formatCurrency,
+  getVariantDisplayName,
+} from "@/lib/utils/product-utils";
+
+interface BulkUpdateItem {
+  variantId: string;
+  productTitle: string;
+  variantName: string;
+  currentStock: number;
+  newStock: number;
+}
+
+export default function StockManagementDashboard() {
+  const { lowStockItems, loading, error, refetch } = useLowStock(10);
+  const [bulkUpdates, setBulkUpdates] = useState<BulkUpdateItem[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [updating, setUpdating] = useState(false);
+  const [successMessage, setSuccessMessage] = useState("");
+
+  // Add item to bulk update list
+  const addToBulkUpdate = (item: ProductVariant) => {
+    const exists = bulkUpdates.find((u) => u.variantId === item.id);
+    if (!exists) {
+      setBulkUpdates([
+        ...bulkUpdates,
+        {
+          variantId: item.id,
+          productTitle: item.product?.title || "Unknown",
+          variantName: getVariantDisplayName(item),
+          currentStock: item.stock,
+          newStock: item.stock,
+        },
+      ]);
+    }
+  };
+
+  // Update new stock value
+  const updateNewStock = (variantId: string, newStock: number) => {
+    setBulkUpdates(
+      bulkUpdates.map((item) =>
+        item.variantId === variantId ? { ...item, newStock } : item
+      )
+    );
+  };
+
+  // Remove from bulk update
+  const removeFromBulkUpdate = (variantId: string) => {
+    setBulkUpdates(bulkUpdates.filter((item) => item.variantId !== variantId));
+  };
+
+  // Apply bulk updates
+  const applyBulkUpdates = async () => {
+    if (bulkUpdates.length === 0) return;
+
+    setUpdating(true);
+    try {
+      const updates = bulkUpdates.map((item) => ({
+        variantId: item.variantId,
+        quantity: item.newStock - item.currentStock,
+        operation: 'set' as const,
+      }));
+
+      const response = await productApi.bulkUpdateStock(updates);
+
+      if (response.success) {
+        setSuccessMessage(
+          `Successfully updated ${bulkUpdates.length} variants!`
+        );
+        setBulkUpdates([]);
+        refetch();
+        setTimeout(() => setSuccessMessage(""), 3000);
+      } else {
+        alert(response.error || "Failed to update stock");
+      }
+    } catch {
+      alert("Failed to update stock");
+    } finally {
+      setUpdating(false);
+    }
+  };
+
+  // Export low stock report
+  const exportLowStockReport = () => {
+    const csv = [
+      ["Product", "Variant", "Current Stock", "Status"],
+      ...lowStockItems.map((item) => [
+        item.product?.title || "Unknown",
+        getVariantDisplayName(item),
+        item.stock.toString(),
+        getStockStatus(item.stock).label,
+      ]),
+    ]
+      .map((row) => row.join(","))
+      .join("\n");
+
+    const blob = new Blob([csv], { type: "text/csv" });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `low-stock-report-${new Date().toISOString().split("T")[0]}.csv`;
+    a.click();
+  };
+
+  const filteredLowStock = lowStockItems.filter((item) =>
+    item.product?.title.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-900">
+            Stock Management Dashboard
+          </h2>
+          <p className="text-gray-600 mt-1">
+            Monitor inventory levels and manage stock
+          </p>
+        </div>
+        <button
+          onClick={refetch}
+          className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
+        >
+          <RefreshCw className="h-4 w-4" />
+          Refresh
+        </button>
+      </div>
+
+      {/* Success Message */}
+      {successMessage && (
+        <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+          <p className="text-green-700">{successMessage}</p>
+        </div>
+      )}
+
+      {/* Stats Overview */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="bg-white rounded-xl shadow-md p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-gray-600">Low Stock Items</p>
+              <p className="text-3xl font-bold text-orange-600 mt-2">
+                {lowStockItems.length}
+              </p>
+            </div>
+            <div className="bg-orange-100 p-3 rounded-lg">
+              <AlertTriangle className="h-8 w-8 text-orange-600" />
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl shadow-md p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-gray-600">Out of Stock</p>
+              <p className="text-3xl font-bold text-red-600 mt-2">
+                {lowStockItems.filter((item) => item.stock === 0).length}
+              </p>
+            </div>
+            <div className="bg-red-100 p-3 rounded-lg">
+              <Package className="h-8 w-8 text-red-600" />
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl shadow-md p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-gray-600">Pending Updates</p>
+              <p className="text-3xl font-bold text-indigo-600 mt-2">
+                {bulkUpdates.length}
+              </p>
+            </div>
+            <div className="bg-indigo-100 p-3 rounded-lg">
+              <TrendingUp className="h-8 w-8 text-indigo-600" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Bulk Update Section */}
+      {bulkUpdates.length > 0 && (
+        <div className="bg-white rounded-xl shadow-md p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-lg font-semibold text-gray-900">
+              Bulk Stock Updates ({bulkUpdates.length})
+            </h3>
+            <div className="flex gap-2">
+              <button
+                onClick={() => setBulkUpdates([])}
+                className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
+              >
+                Clear All
+              </button>
+              <button
+                onClick={applyBulkUpdates}
+                disabled={updating}
+                className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors disabled:opacity-50"
+              >
+                {updating ? "Updating..." : "Apply Updates"}
+              </button>
+            </div>
+          </div>
+
+          <div className="space-y-3">
+            {bulkUpdates.map((item) => (
+              <div
+                key={item.variantId}
+                className="flex items-center gap-4 p-4 bg-gray-50 rounded-lg"
+              >
+                <div className="flex-1">
+                  <p className="font-medium text-gray-900">
+                    {item.productTitle}
+                  </p>
+                  <p className="text-sm text-gray-600">{item.variantName}</p>
+                </div>
+                <div className="flex items-center gap-3">
+                  <div className="text-center">
+                    <p className="text-xs text-gray-500">Current</p>
+                    <p className="font-semibold text-gray-900">
+                      {item.currentStock}
+                    </p>
+                  </div>
+                  <TrendingDown className="h-4 w-4 text-gray-400" />
+                  <input
+                    type="number"
+                    value={item.newStock}
+                    onChange={(e) =>
+                      updateNewStock(item.variantId, parseInt(e.target.value))
+                    }
+                    min="0"
+                    className="w-24 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                  />
+                  <button
+                    onClick={() => removeFromBulkUpdate(item.variantId)}
+                    className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                  >
+                    ✕
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Low Stock Items */}
+      <div className="bg-white rounded-xl shadow-md p-6">
+        <div className="flex items-center justify-between mb-6">
+          <h3 className="text-lg font-semibold text-gray-900">
+            Low Stock Alerts
+          </h3>
+          <div className="flex gap-2">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+              <input
+                type="text"
+                placeholder="Search products..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+              />
+            </div>
+            <button
+              onClick={exportLowStockReport}
+              className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
+            >
+              <Download className="h-4 w-4" />
+              Export CSV
+            </button>
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="flex items-center justify-center py-12">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
+          </div>
+        ) : error ? (
+          <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+            <p className="text-red-700">{error}</p>
+          </div>
+        ) : filteredLowStock.length === 0 ? (
+          <div className="text-center py-12">
+            <Package className="h-16 w-16 text-gray-400 mx-auto mb-4" />
+            <h3 className="text-xl font-semibold text-gray-900 mb-2">
+              No Low Stock Items
+            </h3>
+            <p className="text-gray-600">All products are well stocked!</p>
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="bg-gray-50">
+                <tr>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Product
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Variant
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Stock
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Status
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Price
+                  </th>
+                  <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-gray-200">
+                {filteredLowStock.map((item) => {
+                  const stockStatus = getStockStatus(item.stock);
+                  const variantName = getVariantDisplayName(item);
+
+                  return (
+                    <tr key={item.id} className="hover:bg-gray-50">
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <div className="text-sm font-medium text-gray-900">
+                          {item.product?.title || "Unknown"}
+                        </div>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <div className="text-sm text-gray-600">
+                          {variantName}
+                        </div>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <div className="text-sm font-semibold text-gray-900">
+                          {item.stock} units
+                        </div>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <span
+                          className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${stockStatus.bgColor} ${stockStatus.textColor}`}
+                        >
+                          {stockStatus.label}
+                        </span>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <div className="text-sm text-gray-900">
+                          {formatCurrency(
+                            item.priceOverride || item.product?.price || 0,
+                            item.product?.currency || "ETB"
+                          )}
+                        </div>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                        <button
+                          onClick={() => addToBulkUpdate(item)}
+                          className="text-indigo-600 hover:text-indigo-900"
+                        >
+                          Add to Update
+                        </button>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/lib/api/products.ts b/lib/api/products.ts
index f0823a7..e7edc5d 100644
--- a/lib/api/products.ts
+++ b/lib/api/products.ts
@@ -82,6 +82,51 @@ export async function getProductById(
   return apiCall<ProductWithDetails>(`/api/v1/admin/products/${id}`);
 }
 
+// ==================== PUBLIC BROWSE ====================
+/**
+ * Get public product list with filters
+ * Supports: categoryId, search (q), minPrice, maxPrice, page, limit
+ */
+export async function getPublicProducts(params: {
+  categoryId?: string;
+  q?: string;
+  minPrice?: number;
+  maxPrice?: number;
+  page?: number;
+  limit?: number;
+} = {}): Promise<PaginatedResponse<ProductWithDetails>> {
+  const qs = new URLSearchParams();
+  if (params.categoryId) qs.append('categoryId', params.categoryId);
+  if (params.q) qs.append('search', params.q);
+  if (typeof params.minPrice === 'number') qs.append('minPrice', String(params.minPrice));
+  if (typeof params.maxPrice === 'number') qs.append('maxPrice', String(params.maxPrice));
+  if (params.page) qs.append('page', String(params.page));
+  if (params.limit) qs.append('limit', String(params.limit));
+  try {
+    const response = await fetch(
+      `${API_BASE_URL}/api/v1/products${qs.toString() ? `?${qs.toString()}` : ''}`,
+      { credentials: 'include' }
+    );
+    return await response.json();
+  } catch (error) {
+    console.error('Public list failed:', error);
+    return {
+      success: false,
+      data: [],
+      pagination: { total: 0, page: 1, limit: 20, totalPages: 0 },
+    };
+  }
+}
+
+/**
+ * Get public product details by ID
+ */
+export async function getPublicProductById(
+  id: string
+): Promise<ApiResponse<ProductWithDetails>> {
+  return apiCall<ProductWithDetails>(`/api/v1/products/${id}`);
+}
+
 /**
  * Create product (admin)
  */
diff --git a/lib/hooks/useProducts.ts b/lib/hooks/useProducts.ts
index 706691c..1b0421c 100644
--- a/lib/hooks/useProducts.ts
+++ b/lib/hooks/useProducts.ts
@@ -381,6 +381,7 @@ export function useLowStock(threshold: number = 10) {
   }, [threshold]);
 
   return {
+    lowStockItems: variants,
     variants,
     loading,
     error,
diff --git a/types/product.ts b/types/product.ts
index df1f627..ac196e8 100644
--- a/types/product.ts
+++ b/types/product.ts
@@ -46,6 +46,12 @@ export interface ProductVariant {
   stock: number;
   createdAt: string;
   updatedAt: string;
+  product?: {
+    id: string;
+    title: string;
+    price: number;
+    currency: string;
+  };
 }
 
 // Product Media