@apptimate/ui 1.0.0 → 1.2.0

package/src/common-components/charts/ApexCharts.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import React, { useMemo } from "react";
+import dynamic from "next/dynamic";
+
+const ApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });
+
+// ── Shared defaults ──────────────────────────────────────────────────
+const defaultFont = "inherit";
+const defaultAxisStyle = { fontSize: "11px", fontWeight: 600, colors: "#94a3b8" } as const;
+const defaultGrid: ApexCharts.ApexOptions["grid"] = {
+  borderColor: "#f1f5f9", strokeDashArray: 0,
+  xaxis: { lines: { show: false } }, yaxis: { lines: { show: true } },
+  padding: { left: 8, right: 8 },
+};
+const defaultAnimations: ApexCharts.ApexOptions["chart"] = {
+  animations: { enabled: true, speed: 1000, animateGradually: { enabled: true, delay: 150 }, dynamicAnimation: { enabled: true, speed: 400 } },
+};
+
+// ── Types ────────────────────────────────────────────────────────────
+export interface ChartSeries { name: string; data: number[]; color?: string; }
+
+export interface AreaChartProps {
+  series: ChartSeries[];
+  categories: string[];
+  height?: number;
+  colors?: string[];
+  yFormatter?: (val: number) => string;
+  xFormatter?: (val: string) => string;
+  tooltipYFormatter?: (val: number) => string;
+  tooltipXFormatter?: (val: any, opts?: any) => string;
+  showToolbar?: boolean;
+  showLegend?: boolean;
+  legendPosition?: "top" | "bottom";
+  enableZoom?: boolean;
+  strokeWidth?: number;
+  className?: string;
+}
+
+export interface LineChartProps extends AreaChartProps {
+  strokeDashArray?: number[];
+}
+
+export interface BarChartProps {
+  series: ChartSeries[];
+  categories: string[];
+  height?: number;
+  colors?: string[];
+  horizontal?: boolean;
+  stacked?: boolean;
+  yFormatter?: (val: number) => string;
+  tooltipYFormatter?: (val: number) => string;
+  showToolbar?: boolean;
+  showLegend?: boolean;
+  borderRadius?: number;
+  columnWidth?: string;
+  className?: string;
+}
+
+export interface DonutChartProps {
+  series: number[];
+  labels: string[];
+  height?: number;
+  colors?: string[];
+  showLegend?: boolean;
+  legendPosition?: "top" | "bottom" | "right" | "left";
+  className?: string;
+}
+
+// ── Area Chart ───────────────────────────────────────────────────────
+export function AreaChart({
+  series, categories, height = 350, colors,
+  yFormatter = (v) => String(v),
+  xFormatter = (v) => v,
+  tooltipYFormatter,
+  tooltipXFormatter,
+  showToolbar = true, showLegend = true, legendPosition = "top",
+  enableZoom = true, strokeWidth = 2.5, className = "",
+}: AreaChartProps) {
+  const chartColors = colors || series.map(s => s.color).filter(Boolean) as string[];
+
+  const options = useMemo<ApexCharts.ApexOptions>(() => ({
+    chart: {
+      type: "area", height, fontFamily: defaultFont, ...defaultAnimations,
+      toolbar: { show: showToolbar },
+      zoom: { enabled: enableZoom, type: "x", autoScaleYaxis: true },
+    },
+    colors: chartColors.length ? chartColors : undefined,
+    stroke: { curve: "smooth", width: strokeWidth },
+    fill: { type: "gradient", gradient: { shadeIntensity: 1, opacityFrom: 0.25, opacityTo: 0.02, stops: [0, 95, 100] } },
+    dataLabels: { enabled: false },
+    xaxis: {
+      categories, type: "category",
+      labels: { style: defaultAxisStyle, rotate: -45, rotateAlways: false, formatter: xFormatter },
+      axisBorder: { show: false }, axisTicks: { show: false },
+      tickAmount: Math.min(categories.length, 12),
+    },
+    yaxis: { labels: { style: defaultAxisStyle, formatter: yFormatter } },
+    grid: defaultGrid,
+    tooltip: {
+      theme: "dark", shared: true, intersect: false,
+      x: tooltipXFormatter ? { formatter: tooltipXFormatter } : undefined,
+      y: { formatter: tooltipYFormatter || yFormatter },
+      style: { fontSize: "12px" },
+    },
+    legend: { show: showLegend, position: legendPosition, horizontalAlign: "center", fontSize: "12px", fontWeight: 700, markers: { size: 5, shape: "circle" as const }, itemMargin: { horizontal: 12, vertical: 4 } },
+    markers: { size: 0, hover: { size: 6, sizeOffset: 3 } },
+  }), [categories, chartColors, height, showToolbar, enableZoom, strokeWidth, showLegend, legendPosition]);
+
+  return (
+    <div className={`w-full ${className}`}>
+      <ApexChart options={options} series={series} type="area" height={height} width="100%" />
+    </div>
+  );
+}
+
+// ── Line Chart ───────────────────────────────────────────────────────
+export function LineChart({
+  series, categories, height = 350, colors,
+  yFormatter = (v) => String(v),
+  xFormatter = (v) => v,
+  tooltipYFormatter,
+  showToolbar = true, showLegend = true, legendPosition = "top",
+  enableZoom = true, strokeWidth = 2.5, strokeDashArray, className = "",
+}: LineChartProps) {
+  const chartColors = colors || series.map(s => s.color).filter(Boolean) as string[];
+
+  const options = useMemo<ApexCharts.ApexOptions>(() => ({
+    chart: {
+      type: "line", height, fontFamily: defaultFont, ...defaultAnimations,
+      toolbar: { show: showToolbar },
+      zoom: { enabled: enableZoom, type: "x", autoScaleYaxis: true },
+    },
+    colors: chartColors.length ? chartColors : undefined,
+    stroke: { curve: "smooth", width: strokeWidth, dashArray: strokeDashArray },
+    dataLabels: { enabled: false },
+    xaxis: {
+      categories, type: "category",
+      labels: { style: defaultAxisStyle, rotate: -45, rotateAlways: false, formatter: xFormatter },
+      axisBorder: { show: false }, axisTicks: { show: false },
+      tickAmount: Math.min(categories.length, 12),
+    },
+    yaxis: { labels: { style: defaultAxisStyle, formatter: yFormatter } },
+    grid: defaultGrid,
+    tooltip: {
+      theme: "dark", shared: true, intersect: false,
+      y: { formatter: tooltipYFormatter || yFormatter },
+      style: { fontSize: "12px" },
+    },
+    legend: { show: showLegend, position: legendPosition, horizontalAlign: "center", fontSize: "12px", fontWeight: 700, markers: { size: 5, shape: "circle" as const }, itemMargin: { horizontal: 12, vertical: 4 } },
+    markers: { size: 4, hover: { size: 6, sizeOffset: 3 } },
+  }), [categories, chartColors, height, showToolbar, enableZoom, strokeWidth, strokeDashArray, showLegend, legendPosition]);
+
+  return (
+    <div className={`w-full ${className}`}>
+      <ApexChart options={options} series={series} type="line" height={height} width="100%" />
+    </div>
+  );
+}
+
+// ── Bar Chart ────────────────────────────────────────────────────────
+export function BarChart({
+  series, categories, height = 350, colors,
+  horizontal = false, stacked = false,
+  yFormatter = (v) => String(v),
+  tooltipYFormatter,
+  showToolbar = false, showLegend = true,
+  borderRadius = 6, columnWidth = "50%", className = "",
+}: BarChartProps) {
+  const chartColors = colors || series.map(s => s.color).filter(Boolean) as string[];
+
+  const options = useMemo<ApexCharts.ApexOptions>(() => ({
+    chart: {
+      type: "bar", height, fontFamily: defaultFont, stacked, ...defaultAnimations,
+      toolbar: { show: showToolbar },
+    },
+    colors: chartColors.length ? chartColors : undefined,
+    plotOptions: { bar: { horizontal, borderRadius, columnWidth, borderRadiusApplication: "end" as const } },
+    dataLabels: { enabled: false },
+    xaxis: {
+      categories,
+      labels: { style: defaultAxisStyle },
+      axisBorder: { show: false }, axisTicks: { show: false },
+    },
+    yaxis: { labels: { style: defaultAxisStyle, formatter: yFormatter } },
+    grid: defaultGrid,
+    tooltip: {
+      theme: "dark", shared: true, intersect: false,
+      y: { formatter: tooltipYFormatter || yFormatter },
+      style: { fontSize: "12px" },
+    },
+    legend: { show: showLegend, position: "top", horizontalAlign: "center", fontSize: "12px", fontWeight: 700, markers: { size: 5, shape: "circle" as const }, itemMargin: { horizontal: 12, vertical: 4 } },
+  }), [categories, chartColors, height, horizontal, stacked, showToolbar, showLegend, borderRadius, columnWidth]);
+
+  return (
+    <div className={`w-full ${className}`}>
+      <ApexChart options={options} series={series} type="bar" height={height} width="100%" />
+    </div>
+  );
+}
+
+// ── Donut Chart ──────────────────────────────────────────────────────
+export function DonutChart({
+  series, labels, height = 300, colors,
+  showLegend = true, legendPosition = "bottom", className = "",
+}: DonutChartProps) {
+  const options = useMemo<ApexCharts.ApexOptions>(() => ({
+    chart: { type: "donut", height, fontFamily: defaultFont, ...defaultAnimations },
+    colors,
+    labels,
+    dataLabels: { enabled: true, style: { fontSize: "12px", fontWeight: 700 } },
+    plotOptions: { pie: { donut: { size: "65%", labels: { show: true, name: { fontSize: "14px", fontWeight: 700 }, value: { fontSize: "20px", fontWeight: 800 }, total: { show: true, fontSize: "13px", fontWeight: 600, label: "Total" } } } } },
+    legend: { show: showLegend, position: legendPosition, fontSize: "12px", fontWeight: 600, markers: { size: 5, shape: "circle" as const }, itemMargin: { horizontal: 8, vertical: 4 } },
+    stroke: { width: 2, colors: ["#fff"] },
+  }), [labels, colors, height, showLegend, legendPosition]);
+
+  return (
+    <div className={`w-full ${className}`}>
+      <ApexChart options={options} series={series} type="donut" height={height} width="100%" />
+    </div>
+  );
+}

package/src/common-components/charts/RBarChart.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import React from "react";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts";
+import { CHART_COLORS } from "./palette";
+
+export interface RBarChartSeries {
+  dataKey: string;
+  name?: string;
+  color?: string;
+  stackId?: string;
+  radius?: number;
+}
+
+export interface RBarChartProps {
+  data: Record<string, any>[];
+  series: RBarChartSeries[];
+  xAxisKey: string;
+  height?: number;
+  colors?: string[];
+  layout?: "horizontal" | "vertical";
+  barSize?: number;
+  showGrid?: boolean;
+  showTooltip?: boolean;
+  showLegend?: boolean;
+  legendPosition?: "top" | "bottom";
+  xAxisFormatter?: (value: any) => string;
+  yAxisFormatter?: (value: any) => string;
+  tooltipFormatter?: (value: any, name: string) => [string, string];
+  className?: string;
+}
+
+export function RBarChart({
+  data,
+  series,
+  xAxisKey,
+  height = 350,
+  colors = [...CHART_COLORS],
+  layout = "horizontal",
+  barSize,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  legendPosition = "bottom",
+  xAxisFormatter,
+  yAxisFormatter,
+  tooltipFormatter,
+  className = "",
+}: RBarChartProps) {
+  return (
+    <div className={`w-full ${className}`} style={{ height }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart data={data} layout={layout} margin={{ top: 10, right: 10, left: 0, bottom: 10 }}>
+          {showGrid && (
+            <CartesianGrid stroke="#f1f5f9" strokeDasharray="0" />
+          )}
+          {layout === "horizontal" ? (
+            <>
+              <XAxis
+                dataKey={xAxisKey}
+                tickFormatter={xAxisFormatter}
+                tick={{ fontSize: 11, fontWeight: 600, fill: "#94a3b8" }}
+                tickLine={false}
+                axisLine={false}
+              />
+              <YAxis
+                tickFormatter={yAxisFormatter}
+                tick={{ fontSize: 11, fontWeight: 600, fill: "#94a3b8" }}
+                tickLine={false}
+                axisLine={false}
+              />
+            </>
+          ) : (
+            <>
+              <XAxis
+                type="number"
+                tickFormatter={xAxisFormatter}
+                tick={{ fontSize: 11, fontWeight: 600, fill: "#94a3b8" }}
+                tickLine={false}
+                axisLine={false}
+              />
+              <YAxis
+                type="category"
+                dataKey={xAxisKey}
+                tickFormatter={yAxisFormatter}
+                tick={{ fontSize: 11, fontWeight: 600, fill: "#94a3b8" }}
+                tickLine={false}
+                axisLine={false}
+              />
+            </>
+          )}
+          {showTooltip && (
+            <Tooltip
+              formatter={tooltipFormatter}
+              contentStyle={{
+                backgroundColor: "#1e293b",
+                color: "#fff",
+                borderRadius: "8px",
+                border: "none",
+              }}
+              itemStyle={{ color: "#fff" }}
+              cursor={{ fill: "transparent" }}
+              animationDuration={1000}
+            />
+          )}
+          {showLegend && (
+            <Legend
+              verticalAlign={legendPosition}
+              wrapperStyle={{ fontSize: "12px", fontWeight: 700 }}
+              iconType="circle"
+            />
+          )}
+          {series.map((s, idx) => {
+            const radius = s.radius !== undefined ? s.radius : 4;
+            const radiusArray =
+              layout === "vertical" ? [0, radius, radius, 0] : [radius, radius, 0, 0];
+
+            return (
+              <Bar
+                key={s.dataKey}
+                dataKey={s.dataKey}
+                name={s.name || s.dataKey}
+                fill={s.color || colors[idx % colors.length]}
+                stackId={s.stackId}
+                barSize={barSize}
+                radius={radiusArray as any}
+                isAnimationActive={true}
+                animationDuration={1000}
+              />
+            );
+          })}
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

package/src/common-components/charts/RLineChart.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import React from "react";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts";
+import { CHART_COLORS } from "./palette";
+
+export interface RLineChartSeries {
+  dataKey: string;
+  name?: string;
+  color?: string;
+  strokeWidth?: number;
+  type?: "monotone" | "linear" | "step" | "basis";
+  dashed?: boolean;
+  showDot?: boolean;
+}
+
+export interface RLineChartProps {
+  data: Record<string, any>[];
+  series: RLineChartSeries[];
+  xAxisKey: string;
+  height?: number;
+  colors?: string[];
+  showGrid?: boolean;
+  showTooltip?: boolean;
+  showLegend?: boolean;
+  legendPosition?: "top" | "bottom";
+  xAxisFormatter?: (value: any) => string;
+  yAxisFormatter?: (value: any) => string;
+  tooltipFormatter?: (value: any, name: string) => [string, string];
+  className?: string;
+}
+
+export function RLineChart({
+  data,
+  series,
+  xAxisKey,
+  height = 350,
+  colors = [...CHART_COLORS],
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  legendPosition = "bottom",
+  xAxisFormatter,
+  yAxisFormatter,
+  tooltipFormatter,
+  className = "",
+}: RLineChartProps) {
+  return (
+    <div className={`w-full ${className}`} style={{ height }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <LineChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 10 }}>
+          {showGrid && (
+            <CartesianGrid stroke="#f1f5f9" strokeDasharray="0" />
+          )}
+          <XAxis
+            dataKey={xAxisKey}
+            tickFormatter={xAxisFormatter}
+            tick={{ fontSize: 11, fontWeight: 600, fill: "#94a3b8" }}
+            tickLine={false}
+            axisLine={false}
+          />
+          <YAxis
+            tickFormatter={yAxisFormatter}
+            tick={{ fontSize: 11, fontWeight: 600, fill: "#94a3b8" }}
+            tickLine={false}
+            axisLine={false}
+          />
+          {showTooltip && (
+            <Tooltip
+              formatter={tooltipFormatter}
+              contentStyle={{
+                backgroundColor: "#1e293b",
+                color: "#fff",
+                borderRadius: "8px",
+                border: "none",
+              }}
+              itemStyle={{ color: "#fff" }}
+              animationDuration={1000}
+            />
+          )}
+          {showLegend && (
+            <Legend
+              verticalAlign={legendPosition}
+              wrapperStyle={{ fontSize: "12px", fontWeight: 700 }}
+              iconType="circle"
+            />
+          )}
+          {series.map((s, idx) => (
+            <Line
+              key={s.dataKey}
+              type={s.type || "monotone"}
+              dataKey={s.dataKey}
+              name={s.name || s.dataKey}
+              stroke={s.color || colors[idx % colors.length]}
+              strokeWidth={s.strokeWidth || 2}
+              strokeDasharray={s.dashed ? "5 5" : undefined}
+              dot={s.showDot ? { r: 4 } : false}
+              activeDot={{ r: 6 }}
+              isAnimationActive={true}
+              animationDuration={1000}
+            />
+          ))}
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

package/src/common-components/charts/index.ts

@@ -0,0 +1,3 @@
+export * from "./ApexCharts";
+export * from "./RLineChart";
+export * from "./RBarChart";

package/src/common-components/charts/palette.ts

@@ -0,0 +1,10 @@
+export const CHART_COLORS = [
+  '#6366f1', // Indigo
+  '#22c55e', // Green
+  '#f59e0b', // Amber
+  '#ef4444', // Red
+  '#06b6d4', // Cyan
+  '#8b5cf6', // Violet
+  '#ec4899', // Pink
+  '#14b8a6', // Teal
+] as const;

package/src/components/shared/CustomerSelectorComponent.tsx

@@ -0,0 +1,163 @@
+"use client";
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { Modal, Button, Input, Pagination, EmptyState, ModalFooter } from "@apptimate/ui";
+import { Search, User, Phone, Mail, MapPin, X } from "lucide-react";
+import toast from "react-hot-toast";
+import { sendRequest, IApiResponse } from "@apptimate/core-lib";
+
+export interface SelectedCustomer {
+  id: number;
+  customer_name: string;
+  customer_code?: string;
+  phone?: string;
+  email?: string;
+  address?: string;
+}
+
+export interface CustomerSelectorProps {
+  /** Currently selected customer ID */
+  value?: number | null;
+  /** Callback with full customer object on select */
+  onChange: (customer: SelectedCustomer | null) => void;
+  /** API base URL */
+  apiBase?: string;
+  /** API endpoint for listing customers. Default: /api/sales/customers */
+  apiPath?: string;
+  /** Whether the selector is disabled */
+  disabled?: boolean;
+  /** Label text */
+  label?: string;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Required */
+  required?: boolean;
+}
+
+export default function CustomerSelectorComponent({
+  value,
+  onChange,
+  apiBase = process.env.NEXT_PUBLIC_API_URL || "",
+  apiPath = "/api/sales/customers",
+  disabled = false,
+  label = "Customer",
+  placeholder = "Search customers...",
+  required = false,
+}: CustomerSelectorProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [dSearch, setDSearch] = useState("");
+  const [customers, setCustomers] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [selected, setSelected] = useState<SelectedCustomer | null>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => { const t = setTimeout(() => { setDSearch(search); setPage(1); }, 350); return () => clearTimeout(t); }, [search]);
+
+  const fetchCustomers = 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) { setCustomers(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) fetchCustomers(); }, [isOpen, fetchCustomers]);
+  useEffect(() => { if (isOpen) setTimeout(() => searchRef.current?.focus(), 100); }, [isOpen]);
+
+  const handleSelect = (c: any) => {
+    const sel: SelectedCustomer = {
+      id: c.id,
+      customer_name: c.customer_name || c.name,
+      customer_code: c.customer_code || c.code,
+      phone: c.phone,
+      email: c.email,
+      address: c.address,
+    };
+    setSelected(sel);
+    onChange(sel);
+    setIsOpen(false);
+  };
+
+  const handleClear = () => {
+    setSelected(null);
+    onChange(null);
+  };
+
+  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>
+
+      {/* Display */}
+      {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.customer_name}</p>
+            <p className="text-xs text-gray-500">{[selected.customer_code, selected.phone].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>
+      )}
+
+      {/* Selector Modal */}
+      <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, code, phone, or email..."
+              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>
+          ) : customers.length === 0 ? (
+            <div className="py-12 text-center"><EmptyState message="No customers found." /></div>
+          ) : (
+            <div className="space-y-1.5 max-h-[50vh] overflow-y-auto">
+              {customers.map((c: any) => (
+                <button
+                  key={c.id}
+                  onClick={() => handleSelect(c)}
+                  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"><User size={16} /></div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-bold text-gray-800">{c.customer_name || c.name}</p>
+                    <div className="flex items-center gap-3 mt-1 text-xs text-gray-500">
+                      {c.customer_code && <span className="bg-gray-100 px-1.5 py-0.5 rounded font-mono">{c.customer_code}</span>}
+                      {c.phone && <span className="flex items-center gap-1"><Phone size={10} />{c.phone}</span>}
+                      {c.email && <span className="flex items-center gap-1"><Mail size={10} />{c.email}</span>}
+                    </div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+
+          {!loading && customers.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>
+  );
+}