@apptimate/ui 1.1.0 → 1.3.0

package/src/components/shared/ProductSelectorComponent.tsx

@@ -0,0 +1,166 @@
+"use client";
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { Modal, Button, Pagination, EmptyState, ModalFooter, Badge } from "@apptimate/ui";
+import { Search, Package, X, Tag, Barcode } from "lucide-react";
+import toast from "react-hot-toast";
+import { sendRequest, IApiResponse } from "@apptimate/core-lib";
+
+export interface SelectedProduct {
+  id: number;
+  item_name: string;
+  sku?: string;
+  barcode?: string;
+  category_name?: string;
+  unit_price?: number;
+  available_qty?: number;
+}
+
+export interface ProductSelectorProps {
+  value?: number | null;
+  onChange: (product: SelectedProduct | null) => void;
+  apiBase?: string;
+  apiPath?: string;
+  disabled?: boolean;
+  label?: string;
+  placeholder?: string;
+  required?: boolean;
+  /** Show price and stock info */
+  showDetails?: boolean;
+}
+
+export default function ProductSelectorComponent({
+  value,
+  onChange,
+  apiBase = process.env.NEXT_PUBLIC_API_URL || "",
+  apiPath = "/api/inventory/items",
+  disabled = false,
+  label = "Product",
+  placeholder = "Search products...",
+  required = false,
+  showDetails = true,
+}: ProductSelectorProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [dSearch, setDSearch] = useState("");
+  const [products, setProducts] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [selected, setSelected] = useState<SelectedProduct | null>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => { const t = setTimeout(() => { setDSearch(search); setPage(1); }, 350); return () => clearTimeout(t); }, [search]);
+
+  const fetchProducts = useCallback(async () => {
+    setLoading(true);
+    try {
+      const qs = new URLSearchParams({ page: String(page), per_page: "15", ...(dSearch ? { search: dSearch } : {}) }).toString();
+      const r = await sendRequest({ url: `${apiBase}${apiPath}?${qs}`, method: "GET" });
+      const data = r.responseData as IApiResponse;
+      if (data.is_success) { setProducts(data.result?.data || []); setTotal(data.result?.total ?? 0); }
+    } catch (e: any) { toast.error(e.message); } finally { setLoading(false); }
+  }, [page, dSearch, apiBase, apiPath]);
+
+  useEffect(() => { if (isOpen) fetchProducts(); }, [isOpen, fetchProducts]);
+  useEffect(() => { if (isOpen) setTimeout(() => searchRef.current?.focus(), 100); }, [isOpen]);
+
+  const handleSelect = (p: any) => {
+    const sel: SelectedProduct = {
+      id: p.id,
+      item_name: p.item_name || p.name,
+      sku: p.sku,
+      barcode: p.barcode,
+      category_name: p.category?.name || p.category_name,
+      unit_price: p.selling_price || p.unit_price,
+      available_qty: p.available_qty ?? p.current_stock,
+    };
+    setSelected(sel);
+    onChange(sel);
+    setIsOpen(false);
+  };
+
+  const handleClear = () => { setSelected(null); onChange(null); };
+  const fmt = (n: number) => Number(n).toLocaleString("en", { minimumFractionDigits: 2 });
+
+  return (
+    <div>
+      <label className="text-xs font-bold text-gray-500 uppercase mb-1 block">{label}{required && <span className="text-red-500 ml-0.5">*</span>}</label>
+
+      {selected ? (
+        <div className="flex items-center gap-2 border border-gray-200 rounded-lg px-3 py-2 bg-white">
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-bold text-gray-800 truncate">{selected.item_name}</p>
+            <p className="text-xs text-gray-500">{[selected.sku, selected.category_name].filter(Boolean).join(" • ")}</p>
+          </div>
+          {!disabled && <button onClick={handleClear} className="p-1 rounded hover:bg-gray-100"><X size={14} className="text-gray-400" /></button>}
+        </div>
+      ) : (
+        <button
+          onClick={() => !disabled && setIsOpen(true)}
+          className={`w-full text-left border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-400 hover:border-blue-300 transition-colors ${disabled ? "bg-gray-50 cursor-not-allowed" : "bg-white cursor-pointer"}`}
+        >
+          <span className="flex items-center gap-2"><Search size={14} />{placeholder}</span>
+        </button>
+      )}
+
+      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title={`Select ${label}`} size="lg">
+        <div className="p-1">
+          <div className="relative mb-4">
+            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+            <input
+              ref={searchRef}
+              type="text"
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              placeholder="Search by name, SKU, barcode..."
+              className="w-full pl-9 pr-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-300"
+            />
+          </div>
+
+          {loading ? (
+            <div className="flex items-center justify-center py-16"><div className="w-6 h-6 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" /></div>
+          ) : products.length === 0 ? (
+            <div className="py-12 text-center"><EmptyState message="No products found." /></div>
+          ) : (
+            <div className="space-y-1.5 max-h-[50vh] overflow-y-auto">
+              {products.map((p: any) => (
+                <button
+                  key={p.id}
+                  onClick={() => handleSelect(p)}
+                  className="w-full text-left p-3 rounded-xl hover:bg-blue-50 border border-transparent hover:border-blue-200 transition-all flex items-start gap-3"
+                >
+                  <div className="p-2 rounded-xl bg-gray-100 text-gray-500"><Package size={16} /></div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-bold text-gray-800">{p.item_name || p.name}</p>
+                    <div className="flex items-center gap-3 mt-1 text-xs text-gray-500">
+                      {p.sku && <span className="flex items-center gap-1 bg-gray-100 px-1.5 py-0.5 rounded font-mono"><Tag size={10} />{p.sku}</span>}
+                      {p.barcode && <span className="flex items-center gap-1"><Barcode size={10} />{p.barcode}</span>}
+                      {p.category?.name && <span>{p.category.name}</span>}
+                    </div>
+                  </div>
+                  {showDetails && (
+                    <div className="text-right flex-shrink-0">
+                      {p.selling_price != null && <p className="text-sm font-bold text-gray-800">{fmt(p.selling_price)}</p>}
+                      {p.available_qty != null && (
+                        <Badge variant="flat" color={p.available_qty > 0 ? "success" : "danger"} className="text-[10px] font-bold px-1.5 py-0 rounded">
+                          {p.available_qty > 0 ? `${p.available_qty} in stock` : "Out of stock"}
+                        </Badge>
+                      )}
+                    </div>
+                  )}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {!loading && products.length > 0 && total > 15 && (
+            <div className="mt-3 pt-3 border-t border-gray-100">
+              <Pagination currentPage={page} totalItems={total} itemsPerPage={15} onPageChange={setPage} />
+            </div>
+          )}
+        </div>
+        <ModalFooter><Button variant="soft" color="default" onClick={() => setIsOpen(false)}>Cancel</Button></ModalFooter>
+      </Modal>
+    </div>
+  );
+}

package/src/components/shared/SupplierSelectorComponent.tsx

@@ -0,0 +1,5 @@
+/**
+ * Re-export from procurement-ui — this is the canonical source.
+ * @see apps/common-ui/procurement-ui/components/shared/SupplierSelectorComponent.tsx
+ */
+export { default } from '../../../procurement-ui/components/shared/SupplierSelectorComponent';

package/src/index.tsx

@@ -12,6 +12,8 @@ export * from './base-components/Dropdown';
 export * from './base-components/EmptyState';
 export * from './base-components/HintIcon';
 export * from './base-components/RecordCount';
+export * from './base-components/DateLabel';
+export * from './base-components/DateRangePicker';
 export * from './base-components/TableMobileOptions';
 export * from './base-components/DesktopSearchPopover';
 export * from './base-components/DesktopFilterPopover';
@@ -23,5 +25,8 @@ export * from './base-components/PopConfirm';
 export * from './base-components/SearchableSelect';
 export * from './base-components/Select';
 export * from './base-components/Table';
+export * from './base-components/ImageDropzone';
+export { default as ImageUploadComponent } from './components/shared/ImageUploadComponent';
+export type { ImageUploadComponentProps, ItemImage } from './components/shared/ImageUploadComponent';
 export * from './common-components/DashboardLayout';
-export * from './common-components/Charts';
+export * from './common-components/charts';