@apptimate/ui 3.1.0 → 3.3.0

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@apptimate/ui",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "dependencies": {
     "@apptimate/core-lib": "*",
+    "apexcharts": "^5.15.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.38.0",
     "lucide-react": "^1.14.0",
     "react": "^19.2.5",
+    "react-apexcharts": "^2.1.1",
     "recharts": "^2.15.4",
-    "tailwind-merge": "^3.5.0",
-    "apexcharts": "^5.11.0",
-    "react-apexcharts": "^2.1.0"
+    "tailwind-merge": "^3.5.0"
   },
   "publishConfig": {
     "access": "public"

package/src/base-components/FinanceErrorToast.tsx

@@ -1,23 +1,23 @@
-import React from "react";
-import toast from "react-hot-toast";
-import { Button } from "./Button";
-
-export const handleFinanceError = (error: any, defaultMessage: string = "An error occurred") => {
-  const errMsg = typeof error === "string" ? error : (error?.message || defaultMessage);
-  
-  if (errMsg.toLowerCase().includes("fiscal year")) {
-    toast.error((t) => (
-      <div className="flex flex-col gap-2 mt-1">
-        <span>{errMsg}</span>
-        <Button size="small" variant="solid" color="primary" className="w-fit mt-1" onClick={() => {
-          toast.dismiss(t.id);
-          window.open("/finance/fiscal-years", "_blank");
-        }}>
-          Open Fiscal Years
-        </Button>
-      </div>
-    ), { duration: 8000 });
-  } else {
-    toast.error(errMsg);
-  }
-};
+import React from "react";
+import toast from "react-hot-toast";
+import { Button } from "./Button";
+
+export const handleFinanceError = (error: any, defaultMessage: string = "An error occurred") => {
+  const errMsg = typeof error === "string" ? error : (error?.message || defaultMessage);
+  
+  if (errMsg.toLowerCase().includes("fiscal year")) {
+    toast.error((t) => (
+      <div className="flex flex-col gap-2 mt-1">
+        <span>{errMsg}</span>
+        <Button size="small" variant="solid" color="primary" className="w-fit mt-1" onClick={() => {
+          toast.dismiss(t.id);
+          window.open("/finance/fiscal-years", "_blank");
+        }}>
+          Open Fiscal Years
+        </Button>
+      </div>
+    ), { duration: 8000 });
+  } else {
+    toast.error(errMsg);
+  }
+};

package/src/common-components/DashboardLayout.tsx

@@ -19,6 +19,8 @@ export type DashboardMenuConfig = {
       id: string;
       label: string;
       path: string;
+      icon?: React.ReactNode;
+      badge?: React.ReactNode;
     }[]
   }[]
 };
@@ -47,7 +49,8 @@ export function DashboardLayout({
   onProfile,
   organizations = [],
   selectedOrganization,
-  onOrganizationChange
+  onOrganizationChange,
+  extraHeaderContent
 }: {
   children: React.ReactNode;
   logo?: React.ReactNode;
@@ -60,6 +63,7 @@ export function DashboardLayout({
   organizations?: OrganizationConfig[];
   selectedOrganization?: OrganizationConfig | null;
   onOrganizationChange?: (org: OrganizationConfig) => void;
+  extraHeaderContent?: React.ReactNode;
 }) {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isOrgModalOpen, setIsOrgModalOpen] = useState(false);
@@ -120,14 +124,42 @@ export function DashboardLayout({
           {logo}
         </div>
 
-        <nav className="flex flex-col gap-6 flex-1 w-full">
+        <style dangerouslySetInnerHTML={{
+          __html: `
+          .sidebar-scroll {
+            overflow-y: hidden;
+          }
+          .sidebar-scroll:hover {
+            overflow-y: auto;
+          }
+          /* Custom Scrollbar for Webkit */
+          .sidebar-scroll::-webkit-scrollbar {
+            width: 4px;
+          }
+          .sidebar-scroll::-webkit-scrollbar-track {
+            background: transparent;
+          }
+          .sidebar-scroll::-webkit-scrollbar-thumb {
+            background: #cbd5e1;
+            border-radius: 4px;
+          }
+          /* For Firefox */
+          .sidebar-scroll {
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+          }
+          .sidebar-scroll:hover {
+            scrollbar-color: #cbd5e1 transparent;
+          }
+        `}} />
+        <nav className="flex flex-col gap-6 flex-1 w-full sidebar-scroll pb-4">
           {menus.map((menu) => {
             const isActive = activeMenuId === menu.id;
             return (
               <div
                 key={menu.id}
                 onClick={() => setActiveMenuId(menu.id)}
-                className={`flex flex-col items-center justify-center gap-1.5 cursor-pointer transition-colors ${isActive ? "text-[#2D3142]" : "text-gray-400 hover:text-[#2D3142]"
+                className={`flex flex-col items-center justify-center gap-1.5 cursor-pointer transition-colors w-full px-1 ${isActive ? "text-[#2D3142]" : "text-gray-400 hover:text-[#2D3142]"
                   }`}
               >
                 {/* Clone the icon to dynamically apply styling based on active state */}
@@ -135,7 +167,7 @@ export function DashboardLayout({
                   size: 22,
                   className: isActive ? "stroke-[2.5]" : "stroke-[2]"
                 })}
-                <span className={`text-[11px] text-center leading-tight px-1 ${isActive ? "font-bold" : "font-medium"}`}>{menu.label}</span>
+                <span className={`text-[11px] text-center leading-tight truncate block w-full max-w-[70px] ${isActive ? "font-bold" : "font-medium"}`}>{menu.label}</span>
               </div>
             );
           })}
@@ -178,7 +210,9 @@ export function DashboardLayout({
           <div className="flex-1 overflow-y-auto px-4 space-y-6">
             {activeMenu.groups.map((group) => (
               <div key={group.id}>
-                <h3 className="px-2 text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">{group.label}</h3>
+                {group.label && (
+                  <h3 className="px-2 text-xs font-bold text-gray-400 uppercase tracking-wider mb-2 empty:hidden">{group.label}</h3>
+                )}
                 <nav className="flex flex-col gap-1">
                   {group.items.map((item) => {
                     // Find the longest matching path in this group to avoid parent paths being active
@@ -191,18 +225,28 @@ export function DashboardLayout({
                       : !externalPaths.some(ext => item.path.startsWith(ext));
                     const href = basePath && isInternal ? item.path.replace(basePath, "") || "/" : item.path;
 
-                    const className = `px-3 py-2 rounded-lg text-sm transition-colors block ${isItemActive
+                    const className = `px-3 py-2 rounded-lg text-sm transition-colors flex items-center justify-between ${isItemActive
                       ? "bg-[#F4F5F7] text-[#2D3142] font-semibold"
                       : "text-gray-500 font-medium hover:bg-gray-50"
                       }`;
 
+                    const content = (
+                      <>
+                        <div className="flex items-center gap-3">
+                          {item.icon && <span className={`${isItemActive ? 'text-[#2D3142]' : 'text-gray-400'}`}>{item.icon}</span>}
+                          <span>{item.label}</span>
+                        </div>
+                        {item.badge && <div>{item.badge}</div>}
+                      </>
+                    );
+
                     return isInternal ? (
                       <Link key={item.id} href={href} className={className}>
-                        {item.label}
+                        {content}
                       </Link>
                     ) : (
                       <a key={item.id} href={href} className={className}>
-                        {item.label}
+                        {content}
                       </a>
                     );
                   })}
@@ -469,7 +513,8 @@ export function DashboardLayout({
             </div>
           </div>
 
-          <style dangerouslySetInnerHTML={{ __html: `
+          <style dangerouslySetInnerHTML={{
+            __html: `
             @keyframes orgModalIn {
               from {
                 opacity: 0;

package/src/common-components/PaymentSection.tsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect, useCallback, useMemo, useRef } from "react"
 import { cn } from "@apptimate/core-lib";
 import { CreditCard, Banknote, Building, Trash2, Loader2, Split, Check, AlertCircle, AlertTriangle, CheckCircle } from "lucide-react";
 import { HintIcon } from "../base-components/HintIcon";
+import { AsyncSearchableSelect } from "../base-components/SearchableSelect";
 
 /* ── Types (mirroring sales POS types) ── */
 
@@ -63,7 +64,7 @@ export interface PaymentSectionProps {
   /** Special mode codes that are allowed (e.g. 'credit-gold') */
   allowedSpecialModes?: string[];
   /** Fetcher for cheque leaves (for auto-complete) */
-  fetchChequeLeaves?: (query: string) => Promise<{ is_success: boolean; result?: any[] }>;
+  fetchChequeLeaves?: (query: string, page: number) => Promise<{ is_success: boolean; result?: any[] }>;
 }
 
 /* ── Component ── */
@@ -328,7 +329,7 @@ interface PaymentEntryRowProps {
   onUpdate: (updates: Partial<PaymentEntry>) => void;
   onRemove: () => void;
   showRemove?: boolean;
-  fetchChequeLeaves?: (query: string) => Promise<{ is_success: boolean; result?: any[] }>;
+  fetchChequeLeaves?: (query: string, page: number) => Promise<{ is_success: boolean; result?: any[] }>;
 }
 
 function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpdate, onRemove, showRemove = true, fetchChequeLeaves }: PaymentEntryRowProps) {
@@ -371,7 +372,12 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
       {/* Dynamic sub-fields from field_config */}
       {fields.length > 0 && (
         <div className="grid grid-cols-2 gap-2.5">
-          {fields.map((field: PaymentModeField) => (
+          {fields.map((field: PaymentModeField) => {
+            if (field.key === "bank_account_id" && entry.mode_code === "cheque" && fetchChequeLeaves) {
+              return null;
+            }
+
+            return (
             <div key={field.key} className="flex flex-col gap-1">
               <label className="text-[11px] text-foreground-subtle font-bold uppercase tracking-wider flex items-center">
                 {field.label}
@@ -409,20 +415,53 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
                   {materialTypes.map((m) => (<option key={m.id} value={m.id}>{m.name}</option>))}
                 </select>
               ) : field.key === "cheque_number" && fetchChequeLeaves ? (
-                <ChequeAutocomplete
-                  value={String(entry.metadata[field.key] || "")}
-                  onChange={(val, leafId, suggestion) => {
-                    const newMetadata = { ...entry.metadata, [field.key]: val, cheque_leaf_id: leafId || "" };
-                    if (suggestion?.cheque_book?.bank_account) {
-                      const ba = suggestion.cheque_book.bank_account;
-                      if (ba.bank_name) newMetadata.bank_name = ba.bank_name;
-                      if (ba.branch) newMetadata.branch = ba.branch;
-                    }
-                    onUpdate({ metadata: newMetadata });
-                  }}
-                  fetchChequeLeaves={fetchChequeLeaves}
-                  readonly={field.readonly}
-                />
+                <>
+                  <AsyncSearchableSelect
+                    defaultValue={entry.metadata[field.key] ? { cheque_number: entry.metadata[field.key] } : undefined}
+                    onChange={(val, selected: any) => {
+                      const leafObj = Array.isArray(selected) ? selected[0] : selected;
+                      const newMetadata = { ...entry.metadata, [field.key]: val, cheque_leaf_id: leafObj?.id || "" };
+                      if (leafObj?.cheque_book?.bank_account) {
+                        const ba = leafObj.cheque_book.bank_account;
+                        newMetadata.bank_account_id = ba.id;
+                        newMetadata._display_bank_name = ba.bank_name;
+                        newMetadata._display_branch = ba.branch;
+                      } else {
+                        delete newMetadata.bank_account_id;
+                        delete newMetadata._display_bank_name;
+                        delete newMetadata._display_branch;
+                      }
+                      onUpdate({ metadata: newMetadata });
+                    }}
+                    loadOptions={async (search, page) => {
+                      if (!fetchChequeLeaves) return [];
+                      const res = await fetchChequeLeaves(search, page);
+                      return res.is_success && res.result ? res.result : [];
+                    }}
+                    option={{
+                      label: "cheque_number",
+                      value: "cheque_number",
+                      renderOption: (item: any) => (
+                        <div className="flex flex-col">
+                          <span>{item.cheque_number}</span>
+                          {item.cheque_book?.bank_account?.bank_name && (
+                            <span className="text-[11px] text-foreground-subtle mt-0.5">
+                              {item.cheque_book.bank_account.bank_name} {item.cheque_book.bank_account.branch ? `— ${item.cheque_book.bank_account.branch}` : ""}
+                            </span>
+                          )}
+                        </div>
+                      )
+                    }}
+                    placeholder="Search cheque number..."
+                    disabled={field.readonly}
+                  />
+                  {entry.metadata._display_bank_name && (
+                    <div className="text-[11px] text-foreground-subtle mt-1 flex items-center gap-1.5 font-medium px-1">
+                      <Building size={12} className="text-foreground-disabled" />
+                      {entry.metadata._display_bank_name} {entry.metadata._display_branch ? `— ${entry.metadata._display_branch}` : ""}
+                    </div>
+                  )}
+                </>
               ) : (
                 <input type={field.type === "number" ? "number" : field.type === "date" ? "date" : "text"}
                   {...(field.type === "number" ? { step: "any" } : {})}
@@ -432,113 +471,7 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
                   className={cn("w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", field.readonly && "opacity-60 bg-surface-0 cursor-not-allowed border-border")} />
               )}
             </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/* ── ChequeAutocomplete ── */
-
-function ChequeAutocomplete({ 
-  value, 
-  onChange, 
-  fetchChequeLeaves, 
-  readonly 
-}: { 
-  value: string; 
-  onChange: (val: string, leafId?: number, suggestion?: any) => void; 
-  fetchChequeLeaves: (q: string) => Promise<{ is_success: boolean; result?: any[] }>; 
-  readonly?: boolean; 
-}) {
-  const [query, setQuery] = useState(value);
-  const [suggestions, setSuggestions] = useState<any[]>([]);
-  const [isOpen, setIsOpen] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const wrapperRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    setQuery(value);
-  }, [value]);
-
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  const fetchSuggestions = useCallback(async (search: string) => {
-    setIsLoading(true);
-    try {
-      const res = await fetchChequeLeaves(search);
-      if (res.is_success && res.result) {
-        setSuggestions(res.result);
-        setIsOpen(true);
-      }
-    } catch (e) {
-      console.error(e);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [fetchChequeLeaves]);
-
-  useEffect(() => {
-    if (!isOpen) return;
-    const timer = setTimeout(() => {
-      fetchSuggestions(query);
-    }, 300);
-    return () => clearTimeout(timer);
-  }, [query, isOpen, fetchSuggestions]);
-
-  return (
-    <div ref={wrapperRef} className="relative">
-      <input 
-        type="text"
-        value={query}
-        onChange={(e) => {
-          setQuery(e.target.value);
-          onChange(e.target.value, undefined, undefined); // reset ID when typed manually
-          setIsOpen(true);
-        }}
-        onFocus={() => {
-          if (!readonly) {
-            setIsOpen(true);
-            fetchSuggestions(query);
-          }
-        }}
-        readOnly={readonly}
-        className={cn("w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all", readonly && "opacity-60 bg-surface-0 cursor-not-allowed border-border")} 
-        placeholder="Type to search cheques..."
-      />
-      {isLoading && (
-        <div className="absolute right-2 top-2.5">
-          <Loader2 size={14} className="animate-spin text-foreground-subtle" />
-        </div>
-      )}
-      {isOpen && suggestions.length > 0 && !readonly && (
-        <div className="absolute z-50 mt-1 w-full bg-surface-0 border border-border-subtle rounded-[8px] shadow-lg max-h-48 overflow-y-auto">
-          {suggestions.map((s) => (
-            <div 
-              key={s.id} 
-              className="px-3 py-2 text-[12px] text-foreground-1 hover:bg-primary/5 hover:text-primary cursor-pointer transition-colors"
-              onClick={() => {
-                setQuery(s.cheque_number);
-                onChange(s.cheque_number, s.id, s);
-                setIsOpen(false);
-              }}
-            >
-              <div className="font-semibold">{s.cheque_number}</div>
-              <div className="text-[10px] text-foreground-subtle flex items-center gap-2">
-                {s.cheque_book?.bank_account?.bank_name && <span>{s.cheque_book.bank_account.bank_name}</span>}
-                {s.amount && <span>Amount: {s.amount}</span>}
-              </div>
-            </div>
-          ))}
+          )})}
         </div>
       )}
     </div>

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

@@ -48,7 +48,8 @@ export interface BarChartProps {
   colors?: string[];
   horizontal?: boolean;
   stacked?: boolean;
-  yFormatter?: (val: number) => string;
+  xFormatter?: (val: number) => string;
+  yFormatter?: (val: number | string) => string;
   tooltipYFormatter?: (val: number) => string;
   showToolbar?: boolean;
   showLegend?: boolean;
@@ -99,7 +100,7 @@ export function AreaChart({
     grid: defaultGrid,
     tooltip: {
       theme: "dark", shared: true, intersect: false,
-      x: tooltipXFormatter ? { formatter: tooltipXFormatter } : undefined,
+      ...(tooltipXFormatter ? { x: { formatter: tooltipXFormatter } } : {}),
       y: { formatter: tooltipYFormatter || yFormatter },
       style: { fontSize: "12px" },
     },
@@ -162,7 +163,7 @@ export function LineChart({
 export function BarChart({
   series, categories, height = 350, colors,
   horizontal = false, stacked = false,
-  yFormatter = (v) => String(v),
+  xFormatter, yFormatter = (v) => String(v),
   tooltipYFormatter,
   showToolbar = false, showLegend = true,
   borderRadius = 6, columnWidth = "50%", className = "",
@@ -179,7 +180,7 @@ export function BarChart({
     dataLabels: { enabled: false },
     xaxis: {
       categories,
-      labels: { style: defaultAxisStyle },
+      labels: { style: defaultAxisStyle, formatter: xFormatter },
       axisBorder: { show: false }, axisTicks: { show: false },
     },
     yaxis: { labels: { style: defaultAxisStyle, formatter: yFormatter } },
@@ -220,3 +221,55 @@ export function DonutChart({
     </div>
   );
 }
+
+// ── Heatmap Chart ────────────────────────────────────────────────────
+export interface HeatmapChartProps {
+  series: { name: string; data: { x: string; y: number }[] }[];
+  height?: number;
+  colors?: string[];
+  className?: string;
+  tooltipYFormatter?: (val: number) => string;
+}
+
+export function HeatmapChart({
+  series, height = 350, colors = ["#3D5A80"], className = "", tooltipYFormatter
+}: HeatmapChartProps) {
+  const options = useMemo<ApexCharts.ApexOptions>(() => ({
+    chart: { type: "heatmap", height, fontFamily: defaultFont, ...defaultAnimations, toolbar: { show: false } },
+    colors,
+    plotOptions: {
+      heatmap: {
+        shadeIntensity: 0.5,
+        radius: 4,
+        useFillColorAsStroke: false,
+        colorScale: {
+          ranges: [
+            { from: 0, to: 0, color: "#f1f5f9", name: "0" },
+            { from: 1, to: 5, color: "#cbd5e1", name: "1-5" },
+            { from: 6, to: 15, color: "#94a3b8", name: "6-15" },
+            { from: 16, to: 50, color: "#64748b", name: "16-50" },
+            { from: 51, to: 1000, color: colors[0], name: "50+" }
+          ]
+        }
+      }
+    },
+    dataLabels: { enabled: false },
+    xaxis: {
+      labels: { style: defaultAxisStyle },
+      axisBorder: { show: false }, axisTicks: { show: false }
+    },
+    yaxis: { labels: { style: defaultAxisStyle } },
+    grid: defaultGrid,
+    tooltip: {
+      theme: "dark",
+      y: { formatter: tooltipYFormatter || ((val) => String(val)) },
+      style: { fontSize: "12px" },
+    },
+  }), [colors, height, tooltipYFormatter]);
+
+  return (
+    <div className={`w-full ${className}`}>
+      <ApexChart options={options} series={series} type="heatmap" height={height} width="100%" />
+    </div>
+  );
+}