+ {loading ? (
+
+
+ );
+}
+
+
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] = useStateLoading...
+ ) : error ? (
+ {error}
+ ) : product ? (
+
+
+ ) : null}
+
+
+
+ {activeMedia ? (
+
+
+ {renderMedia(activeMedia)}
+
+ ) : (
+
+ )}
+ {product.media && product.media.length > 1 && (
+
+ {product.media.map((media, index) => (
+
+ ))}
+
+ )}
+
+
+
+ {product.category?.name && (
+
+ {product.category.name}
+
+ )}
+ ID: {product.id.slice(0, 8)}...
+
+ {product.title}
+
+ {product.currency} {product.price.toFixed(2)}
+
+ + {product.description || "No description."} +
+
+
+ Variants
+ {variants.length === 0 ? ( +This product does not have additional variants.
+ ) : ( +
+ {variants.map((variant) => (
+
+ )}
+
+
+ ))}
+
+ {variant.sku || "Variant"}
+ {variant.priceOverride ? (
+
+ {product.currency} {variant.priceOverride.toFixed(2)}
+
+ ) : (
+ Default price
+ )}
+
+
+ {variant.size && Size: {variant.size}}
+ {variant.color && Color: {variant.color}}
+
+ Stock: {variant.stock}
+
+
+
+ {product.media && product.media.length > 0 && (
+
+ Gallery
+ )} + {product.media && product.media.length > 0 ? ( +
+ {product.media.map((media) => (
+
+ ) : (
+
+ {renderMedia(media)}
+
+ ))}
+
+ No media has been added for this product yet.
+
+ )}
+
+
+
+ );
+}
+
+
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] = useStateBrowse Products
+ +
+
+
+ + Showing {products.length} of{" "} + {pagination.total} products +
+
+ {appliedFilters.length > 0 && (
+
+ Active filters:
+ )}
+ {appliedFilters.map((filter) => (
+
+ {filter}
+
+ ))}
+
+
+
+
+ {loading ? (
+
+
+ setFilters((prev) => ({ ...prev, q: e.target.value, page: 1 }))}
+ />
+
+
+
+
+
+
+
+
+
+
+ setFilters((prev) => ({
+ ...prev,
+ minPrice: e.target.value ? Number(e.target.value) : undefined,
+ page: 1,
+ }))
+ }
+ />
+
+ setFilters((prev) => ({
+ ...prev,
+ maxPrice: e.target.value ? Number(e.target.value) : undefined,
+ page: 1,
+ }))
+ }
+ />
+
+ Loading...
+ ) : error ? (
+ {error}
+ ) : (
+ <>
+
+ {products.map((p) => {
+ const cover = p.media?.[0];
+ const categoryLabel = p.category?.name;
+ const variantCount = p.variants?.length;
+ return (
+
+ {cover ? (
+ cover.mediaType === 'image' ? (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ) : (
+
+ )
+ ) : (
+
+ )}
+
+
+
+
+ );
+ })}
+
+
+ {p.title}
+ + {p.currency} {p.price.toFixed(2)} + +
+ {categoryLabel ?? "Uncategorized"}
+ {variantCount ? `${variantCount} variants` : "Single variant"}
+
+
+
+ Page {pagination.page} of {pagination.totalPages}
+
+
+
+ )}
+
+ {/* Header */}
+
+ );
+}
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
+
+
+ {/* Success Message */}
+ {successMessage && (
+
+
+
+ + Stock Management Dashboard +
++ Monitor inventory levels and manage stock +
+
+
+ )}
+
+ {/* Stats Overview */}
+ {successMessage}
+
+
+
+ {/* Bulk Update Section */}
+ {bulkUpdates.length > 0 && (
+
+
+
+
+
+
+
+ Low Stock Items
++ {lowStockItems.length} +
+
+
+
+
+
+
+
+
+
+ Out of Stock
++ {lowStockItems.filter((item) => item.stock === 0).length} +
+
+
+
+
+
+
+
+
+ Pending Updates
++ {bulkUpdates.length} +
+
+
+
+
+ )}
+
+ {/* Low Stock Items */}
+
+
+
+ + Bulk Stock Updates ({bulkUpdates.length}) +
+
+
+
+
+
+ {bulkUpdates.map((item) => (
+
+
+
+ ))}
+
+
+ + {item.productTitle} +
+{item.variantName}
+
+
+
+
+ Current
++ {item.currentStock} +
+
+
+
+
+
+ {loading ? (
+ + Low Stock Alerts +
+
+
+
+
+
+
+
+
+ ) : error ? (
+
+
+ ) : filteredLowStock.length === 0 ? (
+ {error}
+
+
+ ) : (
+ + No Low Stock Items +
+All products are well stocked!
+
+
+
+
+
+ )}
+ | + Product + | ++ Variant + | ++ Stock + | ++ Status + | ++ Price + | ++ Actions + | +
|---|---|---|---|---|---|
|
+
+ {item.product?.title || "Unknown"}
+
+ |
+
+
+ {variantName}
+
+ |
+
+
+ {item.stock} units
+
+ |
+ + + {stockStatus.label} + + | +
+
+ {formatCurrency(
+ item.priceOverride || item.product?.price || 0,
+ item.product?.currency || "ETB"
+ )}
+
+ |
+ + + | +