Showing {count} products
{/* Column toggle */}
{[2, 3, 4].map((n) => (
))}
{/* Sort dropdown */}
{open && (
<>
setOpen(false)} />
{SORT_OPTIONS.map((o) => (
))}
)}
);
}
function ColIcon({ n }: { n: number }) {
if (n === 2) return
;
if (n === 3) return
;
return
;
}
// ─── Product Card ─────────────────────────────────────────────────────────────
function ProductCard({
product,
wished,
onWish,
onQuickView,
onPreview,
}: {
product: Product;
wished: boolean;
onWish: (id: number) => void;
onQuickView: (p: Product) => void;
onPreview: (p: Product) => void;
}) {
const img = product.images?.find((i) => i.is_primary) ?? product.images?.[0];
const hasDiscount = product.compare_price && Number(product.compare_price) > Number(product.price);
const discountPct = hasDiscount
? Math.round(((Number(product.compare_price) - Number(product.price)) / Number(product.compare_price)) * 100)
: 0;
const inStock = product.stock_qty > 0;
const [hover, setHover] = useState(false);
const [adding, setAdding] = useState(false);
const [added, setAdded] = useState(false);
const badge = product.is_new_arrival ? { label: 'New', bg: 'var(--brand-gold)', fg: 'var(--brand-slate)' }
: product.is_best_seller ? { label: 'Best Seller', bg: 'var(--brand-slate)', fg: '#FBF7EF' }
: product.is_featured ? { label: 'Featured', bg: 'var(--brand-slate)', fg: '#FBF7EF' }
: null;
const addToCart = (e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
if (product.has_variant) {
// Navigate to product page for variant selection
router.visit(`/products/${product.slug}`);
return;
}
setAdding(true);
fetch('/cart/add', {
method: 'POST',
credentials: 'same-origin',
headers: { 'Content-Type': 'application/json', 'X-XSRF-TOKEN': xsrfToken() },
body: JSON.stringify({ product_id: product.id, qty: 1 }),
})
.then(() => {
setAdded(true);
router.reload({ only: [] });
setTimeout(() => setAdded(false), 2200);
})
.finally(() => setAdding(false));
};
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
>
{/* Image */}
{img ? (
) : (
)}
{/* Sold out overlay */}
{!inStock && (
Sold Out
)}
{/* Badges */}
{badge && (
{badge.label}
)}
{hasDiscount && (
-{discountPct}%
)}
{/* Hover quick-add */}
{inStock && (
{product.has_variant ? (
e.stopPropagation()}
>
Select Options →
) : (
)}
)}
{product.category?.name ?? 'Product'}
{product.name}
৳ {Number(product.price).toLocaleString()}
{hasDiscount && (
৳ {Number(product.compare_price).toLocaleString()}
)}
{/* Fabric outfit preview button — always visible, works on mobile */}
);
}
// ─── Quick View Modal ─────────────────────────────────────────────────────────
function QuickViewModal({ product, onClose }: { product: Product | null; onClose: () => void }) {
const [adding, setAdding] = useState(false);
const [added, setAdded] = useState(false);
useEffect(() => {
if (product) { setAdded(false); setAdding(false); }
}, [product]);
if (!product) return null;
const img = product.images?.find((i) => i.is_primary) ?? product.images?.[0];
const hasDiscount = product.compare_price && Number(product.compare_price) > Number(product.price);
const addToCart = () => {
if (product.has_variant) {
router.visit(`/products/${product.slug}`);
onClose();
return;
}
setAdding(true);
fetch('/cart/add', {
method: 'POST',
credentials: 'same-origin',
headers: { 'Content-Type': 'application/json', 'X-XSRF-TOKEN': xsrfToken() },
body: JSON.stringify({ product_id: product.id, qty: 1 }),
})
.then(() => { setAdded(true); router.reload({ only: [] }); setTimeout(() => setAdded(false), 2000); })
.finally(() => setAdding(false));
};
return (
{/* Image */}
{img ? (
) : (
)}
{/* Info */}
{product.category?.name ?? 'Product'}
{product.name}
৳ {Number(product.price).toLocaleString()}
{hasDiscount && (
৳ {Number(product.compare_price).toLocaleString()}
)}
{product.short_description && (
{product.short_description}
)}
{product.stock_qty > 0 ? `In Stock (${product.stock_qty} available)` : 'Out of Stock'}
{product.sku && (
SKU: {product.sku}
)}
View full details →
{[
{ l: 'COD Available', s: 'Pay on delivery' },
{ l: '7-day returns', s: 'Unworn only' },
{ l: 'Authentic', s: '100% genuine' },
].map((b, i) => (
))}
);
}
// ─── Mobile Filter Drawer ─────────────────────────────────────────────────────
function MobileFilterDrawer({
open,
onClose,
filters,
categories,
attributes,
onChange,
onClear,
resultCount,
}: {
open: boolean;
onClose: () => void;
filters: FilterState;
categories: Category[];
attributes: Attribute[];
onChange: (updates: Partial
) => void;
onClear: () => void;
resultCount: number;
}) {
if (!open) return null;
return (
);
}
// ─── Footer ───────────────────────────────────────────────────────────────────
function PageFooter() {
const { siteSettings } = usePage().props;
const s = siteSettings;
const siteName = s?.site_name ?? 'Kapor Bikreta';
const logoPath = s?.logo_path;
const footerDesc = s?.footer_desc ?? '';
const copyright = (s?.copyright ?? '© {year} All rights reserved.').replace('{year}', String(new Date().getFullYear()));
const showAbout = s?.show_about ?? true;
const showBlog = s?.show_blog ?? true;
const phone = s?.phone ?? '';
return (
);
}
// ─── Page ─────────────────────────────────────────────────────────────────────
interface Filters {
search?: string;
category?: string;
brand?: string;
min_price?: string;
max_price?: string;
sort?: string;
attr?: string[] | string;
availability?: string;
}
function ProductsInner({
products,
categories,
brands: _brands,
attributes,
filters,
}: {
products: PaginatedData;
categories: Category[];
brands: Brand[];
attributes: Attribute[];
filters: Filters;
}) {
const { siteSettings } = usePage().props;
const activeAttrs: string[] = Array.isArray(filters.attr) ? filters.attr : filters.attr ? [filters.attr] : [];
const [localFilters, setLocalFilters] = useState({
search: filters.search ?? '',
category: filters.category ?? '',
min_price: filters.min_price ?? '',
max_price: filters.max_price ?? '',
sort: filters.sort ?? '',
attr: activeAttrs,
availability: filters.availability ?? '',
});
const [cols, setCols] = useState(() => {
try { return Number(localStorage.getItem('collection-cols')) || 3; } catch { return 3; }
});
const [wishlist, setWishlist] = useState>(new Set());
const [quickView, setQuickView] = useState(null);
const [previewProduct, setPreviewProduct] = useState(null);
const [mobileFilters, setMobileFilters] = useState(false);
const priceTimer = useRef>();
const navigate = (updates: Partial) => {
const next = { ...localFilters, ...updates };
setLocalFilters(next);
router.visit('/products', {
data: next,
preserveState: true,
preserveScroll: false,
});
};
const navigateDebounced = (updates: Partial) => {
const next = { ...localFilters, ...updates };
setLocalFilters(next);
clearTimeout(priceTimer.current);
priceTimer.current = setTimeout(() => {
router.visit('/products', { data: next, preserveState: true });
}, 500);
};
const handleFilterChange = (updates: Partial) => {
const hasPriceChange = 'min_price' in updates || 'max_price' in updates;
if (hasPriceChange) {
navigateDebounced(updates);
} else {
navigate(updates);
}
};
const clearAll = () => {
const empty: FilterState = { search: '', category: '', min_price: '', max_price: '', sort: '', attr: [], availability: '' };
setLocalFilters(empty);
router.visit('/products');
};
const removeFilter = (key: keyof FilterState, value?: string) => {
if (key === 'attr' && value) {
navigate({ attr: localFilters.attr.filter((s) => s !== value) });
} else if (key === 'min_price' || key === 'max_price') {
navigate({ min_price: '', max_price: '' });
} else {
navigate({ [key]: '' });
}
};
const currentCategory = categories.find((c) => c.slug === localFilters.category);
const siteName = siteSettings?.site_name ?? 'Kapor Bikreta';
const showAnnouncement = siteSettings?.show_announcement ?? true;
const announcementText = siteSettings?.announcement_bar ?? '';
const gridClass = cols === 2 ? 'grid-cols-2 lg:grid-cols-2'
: cols === 4 ? 'grid-cols-2 lg:grid-cols-4'
: 'grid-cols-2 lg:grid-cols-3';
return (
{/* Announcement bar */}
{showAnnouncement && announcementText && (
{[...Array(8)].map((_, i) => (
♦
{announcementText}
))}
)}
{/* Desktop filter sidebar */}
{/* Product grid */}
navigate({ sort: v })}
cols={cols}
onCols={(n) => { setCols(n); try { localStorage.setItem('collection-cols', String(n)); } catch {} }}
onMobileFilters={() => setMobileFilters(true)}
/>
{products.data.length === 0 ? (
Nothing matches yet.
Try widening your filters or browse the full collection.
) : (
<>
{products.data.map((p) => (
{
const next = new Set(wishlist);
next.has(id) ? next.delete(id) : next.add(id);
setWishlist(next);
}}
onQuickView={setQuickView}
onPreview={setPreviewProduct}
/>
))}
Page {products.current_page} of {products.last_page} · {products.from}–{products.to} of {products.total}
{products.links.map((link, i) => (
)}
)}
);
}
export default function ProductsIndex(props: {
products: PaginatedData