@apptimate/ui 3.0.0 → 3.2.0

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@apptimate/ui",
-  "version": "3.0.0",
+  "version": "3.2.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"
@@ -21,4 +21,4 @@
   "peerDependencies": {
     "next": "^16.0.0"
   }
-}
+}

package/src/base-components/HintIcon.tsx

@@ -6,9 +6,10 @@ import { Info } from 'lucide-react';
 
 interface HintIconProps {
     text: string;
+    icon?: React.ReactNode;
 }
 
-export function HintIcon({ text }: HintIconProps) {
+export function HintIcon({ text, icon }: HintIconProps) {
     const [show, setShow] = useState(false);
     const [pos, setPos] = useState({ top: 0, left: 0, isBelow: false });
     const iconRef = React.useRef<HTMLSpanElement>(null);
@@ -40,7 +41,7 @@ export function HintIcon({ text }: HintIconProps) {
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={() => setShow(false)}
             >
-                <Info size={14} className="text-foreground-muted hover:text-foreground-1 transition-colors cursor-help" />
+                {icon ? icon : <Info size={14} className="text-foreground-muted hover:text-foreground-1 transition-colors cursor-help" />}
             </span>
             {show && typeof document !== 'undefined' && ReactDOM.createPortal(
                 <div

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);
@@ -178,7 +182,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 +197,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 +485,8 @@ export function DashboardLayout({
             </div>
           </div>
 
-          <style dangerouslySetInnerHTML={{ __html: `
+          <style dangerouslySetInnerHTML={{
+            __html: `
             @keyframes orgModalIn {
               from {
                 opacity: 0;

package/src/common-components/PaymentSection.tsx

@@ -2,7 +2,8 @@
 
 import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { cn } from "@apptimate/core-lib";
-import { CreditCard, Banknote, Building, Trash2, Loader2, Split, Check, AlertCircle } from "lucide-react";
+import { CreditCard, Banknote, Building, Trash2, Loader2, Split, Check, AlertCircle, AlertTriangle, CheckCircle } from "lucide-react";
+import { HintIcon } from "../base-components/HintIcon";
 
 /* ── Types (mirroring sales POS types) ── */
 
@@ -61,11 +62,13 @@ export interface PaymentSectionProps {
   materialTypes?: any[];
   /** 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[] }>;
 }
 
 /* ── Component ── */
 
-export function PaymentSection({ totalAmount, payments, onPaymentsChange, compact, fetchPaymentModes, fetchBankAccounts, materialTypes = [], allowedSpecialModes = [] }: PaymentSectionProps) {
+export function PaymentSection({ totalAmount, payments, onPaymentsChange, compact, fetchPaymentModes, fetchBankAccounts, materialTypes = [], allowedSpecialModes = [], fetchChequeLeaves }: PaymentSectionProps) {
   const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
   const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -241,7 +244,7 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
       {/* ── Single Mode: Entry with fields (no delete) ── */}
       {selectionMode === "single" && payments.length === 1 && (
         <PaymentEntryRow entry={payments[0]} mode={paymentModes.find((m) => m.id === payments[0].mode_id)}
-          bankAccounts={bankAccounts} materialTypes={materialTypes} onUpdate={(updates) => updatePayment(0, updates)} onRemove={() => {}} showRemove={false} />
+          bankAccounts={bankAccounts} materialTypes={materialTypes} onUpdate={(updates) => updatePayment(0, updates)} onRemove={() => {}} showRemove={false} fetchChequeLeaves={fetchChequeLeaves} />
       )}
 
       {/* ── Split Mode: Multi-entry UI ── */}
@@ -251,7 +254,7 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
             const mode = paymentModes.find((m) => m.id === entry.mode_id);
             return (
               <PaymentEntryRow key={idx} entry={entry} mode={mode} bankAccounts={bankAccounts} materialTypes={materialTypes}
-                onUpdate={(updates) => updatePayment(idx, updates)} onRemove={() => removePayment(idx)} />
+                onUpdate={(updates) => updatePayment(idx, updates)} onRemove={() => removePayment(idx)} fetchChequeLeaves={fetchChequeLeaves} />
             );
           })}
           {/* Add split mode buttons */}
@@ -325,9 +328,10 @@ interface PaymentEntryRowProps {
   onUpdate: (updates: Partial<PaymentEntry>) => void;
   onRemove: () => void;
   showRemove?: boolean;
+  fetchChequeLeaves?: (query: string) => Promise<{ is_success: boolean; result?: any[] }>;
 }
 
-function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpdate, onRemove, showRemove = true }: PaymentEntryRowProps) {
+function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpdate, onRemove, showRemove = true, fetchChequeLeaves }: PaymentEntryRowProps) {
   const fields = mode?.field_config?.fields || [];
 
   const getModeIcon = () => {
@@ -369,9 +373,24 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
         <div className="grid grid-cols-2 gap-2.5">
           {fields.map((field: PaymentModeField) => (
             <div key={field.key} className="flex flex-col gap-1">
-              <label className="text-[11px] text-foreground-subtle font-bold uppercase tracking-wider">
+              <label className="text-[11px] text-foreground-subtle font-bold uppercase tracking-wider flex items-center">
                 {field.label}
                 {field.required && <span className="text-danger-alt ml-0.5">*</span>}
+                {field.key === "cheque_number" && fetchChequeLeaves && !!entry.metadata[field.key] && (
+                  <span className="ml-1.5 flex items-center">
+                    {entry.metadata.cheque_leaf_id ? (
+                      <HintIcon 
+                        text="Selected from your cheque book. This will be automatically issued."
+                        icon={<CheckCircle size={13} className="text-green-500" />}
+                      />
+                    ) : (
+                      <HintIcon 
+                        text="Not selected from cheque book. This cheque will not be auto-issued."
+                        icon={<AlertTriangle size={13} className="text-amber-500" />}
+                      />
+                    )}
+                  </span>
+                )}
               </label>
               {field.type === "bank_account_select" ? (
                 <select value={entry.metadata[field.key] || ""}
@@ -389,6 +408,21 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
                   <option value="">Select Material...</option>
                   {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}
+                />
               ) : (
                 <input type={field.type === "number" ? "number" : field.type === "date" ? "date" : "text"}
                   {...(field.type === "number" ? { step: "any" } : {})}
@@ -404,3 +438,109 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
     </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>
+  );
+}