-
{/* Tabs Layout */}
- System Operations
-
- Admin Onboarding Console
-- Provision new tenants, register store outlet branches, and onboard delivery fleet riders into the system. -
-
diff --git a/src/components/CatalogueBrowser.tsx b/src/components/CatalogueBrowser.tsx
index 3af58cb..d317073 100644
--- a/src/components/CatalogueBrowser.tsx
+++ b/src/components/CatalogueBrowser.tsx
@@ -1,26 +1,31 @@
import React, { useState } from 'react';
-import { Search, CheckCircle2, DownloadCloud, Box, PackageOpen } from 'lucide-react';
+import { Search, CheckCircle2, DownloadCloud, Box, PackageOpen, Filter, Layers, Check, Package, X, ArrowLeft } from 'lucide-react';
import {
useCatalogueProducts,
useCatalogueBrands,
useImportedCatalogueRefs,
- useImportCatalogueProduct
+ useImportCatalogueProduct,
+ useTenantCategories
} from '../hooks/useCatalogueImport';
import { CatalogueProduct, ImportCatalogueProductRequest } from '../services/catalogueApi';
+import { useStoreCatalogue } from '../services/storeCatalogue';
import ImportProductModal from './ImportProductModal';
interface CatalogueBrowserProps {
tenantid: number;
locationid: number;
+ onClose?: () => void;
}
-export default function CatalogueBrowser({ tenantid, locationid }: CatalogueBrowserProps) {
+export default function CatalogueBrowser({ tenantid, locationid, onClose }: CatalogueBrowserProps) {
const [brand, setBrand] = useState(undefined);
const [keyword, setKeyword] = useState('');
const [debouncedKeyword, setDebouncedKeyword] = useState('');
const [importingProduct, setImportingProduct] = useState(null);
+ const [isLocalSidebarOpen, setIsLocalSidebarOpen] = useState(true);
+
// Debounce search
React.useEffect(() => {
const handler = setTimeout(() => {
@@ -36,6 +41,8 @@ export default function CatalogueBrowser({ tenantid, locationid }: CatalogueBrow
const { data: brandsData = [], isLoading: isLoadingBrands } = useCatalogueBrands();
const { data: importedRefs = new Set() } = useImportedCatalogueRefs(tenantid, brand);
+ const { data: tenantCategories = [] } = useTenantCategories(tenantid);
+ const storeCat = useStoreCatalogue();
const importProductMutation = useImportCatalogueProduct(tenantid, locationid);
@@ -51,133 +58,207 @@ export default function CatalogueBrowser({ tenantid, locationid }: CatalogueBrow
};
return (
-
+
- {/* Top Filters */}
-
-
-
- {/* Product Grid */}
-
-
-
- {/* Brands Chip Row */}
-
-
-
-
-
-
-
- - Browse {total > 0 ? total : ''} global FMCG products and import them to your store. -
-
-
-
-
- Filter by Brand
-
-
- {isLoadingBrands ? (
- Loading brands...
- ) : (
- brandsData.map(b => (
-
- ))
- )}
-
-
- {isLoadingProducts ? (
-
-
- Loading catalogue...
-
- ) : products.length === 0 ? (
-
-
- ) : (
- No products found in the catalogue.
-
- {products.map(p => {
- const isImported = importedRefs.has(`${p.brand}:${p.id}`);
-
- return (
-
- {isImported && (
- ('');
const [subcategoryId, setSubcategoryId] = useState('');
@@ -25,14 +29,10 @@ export default function ImportProductModal({
const [taxPercent, setTaxPercent] = useState('0');
const [quantity, setQuantity] = useState('1');
- // Categories this tenant's own products actually use — the global
- // categories list is missing categoryids that are nonetheless in real use.
+ // Categories this tenant's own products actually use
const { data: categories = [], isLoading: isLoadingCategories } = useTenantCategories(tenantid);
- // Subcategories are scoped to the selected category, so a product can't be
- // tagged with a subcategory that doesn't actually belong to its category.
- // Optional: many subcategories are unowned/shared and a product can be
- // imported without one (falls back to "Uncategorized" in subcategory views).
+ // Subcategories scoped to selected category
const { data: subcategories = [], isLoading: isLoadingSubcats } = useProductSubcategories(
tenantid,
categoryId ? Number(categoryId) : undefined,
@@ -62,151 +62,114 @@ export default function ImportProductModal({
};
return (
-
-
- )}
-
-
- {p.images && p.images.length > 0 ? (
- 
- ) : (
-
diff --git a/src/components/ImportProductModal.tsx b/src/components/ImportProductModal.tsx
index 88b2251..452c2b5 100644
--- a/src/components/ImportProductModal.tsx
+++ b/src/components/ImportProductModal.tsx
@@ -1,7 +1,9 @@
import React, { useState } from 'react';
-import { X, Save, AlertCircle } from 'lucide-react';
+import { X, Save, AlertCircle, CheckCircle, DownloadCloud, Plus, Box } from 'lucide-react';
import { CatalogueProduct, ImportCatalogueProductRequest } from '../services/catalogueApi';
import { useProductSubcategories, useTenantCategories } from '../hooks/useCatalogueImport';
+import { SlideDrawer } from './consoleUi';
+import FMCGHoverOverlay from './FMCGHoverOverlay';
interface ImportProductModalProps {
product: CatalogueProduct;
@@ -9,6 +11,7 @@ interface ImportProductModalProps {
locationid: number;
onClose: () => void;
onImport: (item: ImportCatalogueProductRequest) => void;
+ isImported?: boolean;
}
export default function ImportProductModal({
@@ -16,7 +19,8 @@ export default function ImportProductModal({
tenantid,
locationid,
onClose,
- onImport
+ onImport,
+ isImported = false
}: ImportProductModalProps) {
const [categoryId, setCategoryId] = useState
+ {/* Left Side: Filters */}
+ {isLocalSidebarOpen && (
+
{importingProduct && (
@@ -187,13 +268,14 @@ export default function CatalogueBrowser({ tenantid, locationid }: CatalogueBrow
locationid={locationid}
onClose={() => setImportingProduct(null)}
onImport={handleImportSubmit}
+ isImported={storeCat.has(String(importingProduct.id))}
/>
)}
{importProductMutation.isPending && (
+
+ )}
+
+ {/* Right Side: Main Content Area */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isLoadingBrands ? (
+ Loading brands...
+ ) : (
+
+
+ {(brand || keyword) && (
+
+ )}
+
+
+ {isLoadingBrands ? (
+ Loading brands...
+ ) : (
+
+ {brandsData.map((b) => (
+
+ ))}
+ )}
+
+
+
+
+ {isLoadingProducts ? (
+
+ {onClose && (
+
+ )}
+
+
+
+
+
+
+
+
+
+ Browse global FMCG products and import them into your local merchant catalogue.
+
+
+
+
+
+
+ Loading catalogue...
+
+ ) : products.length === 0 ? (
+
+ No products match your selection.
+
+ ) : (
+
+
+ )}
+
+ {products.map(p => {
+ const isImported = storeCat.has(String(p.id));
-
+
-
- )}
+ );
+ })}
+ {p.brand.replace('brand_', '')}
- - {p.product_name} -
- -
-
- );
- })}
-
- {p.size || 'N/A'}
- {p.price_range || 'Price N/A'}
+ return (
+
- setImportingProduct(p)}
+ className="bg-white/80 backdrop-blur-md border border-[#e2e8f0] rounded-none flex flex-col shadow-sm hover:shadow-[0_12px_24px_rgba(99,102,241,0.06)] hover:border-[#662582]/40 hover:-translate-y-1 transition-all duration-300 relative group overflow-hidden cursor-pointer"
+ >
+
-
+ {p.images && p.images.length > 0 ? (
+
+ ) : (
+
- {!isImported && (
-
- )}
+
+
+
+
+ + {p.product_name} +
+ID: {p.id}
+
+
+
+ {p.size || 'N/A'}
+ {p.price_range || 'N/A'}
+
+
+ {isImported ? (
+
+ ) : (
+
+ )}
+
-
)}
Importing product...
+ Importing product...
-
+
+
- {/* Header */}
-
-
-
Import Product
-{product.product_name} ({product.brand})
+ {/* Clean Image Container */} +
+ {product.images && product.images.length > 0 ? (
+ 
+ ) : (
+
+
+ {/* Title & Basics */}
+
+
+ )}
+
+
- {/* Body */}
- ID: {product.id}
+{product.product_name}
+
+
+ {product.brand.replace('brand_', '')}
+
-
-