@apptimate/ui 1.1.0 → 1.2.0

package/src/common-components/DashboardLayout.tsx

@@ -69,7 +69,11 @@ export function DashboardLayout({
   const fullPath = basePath + (pathname === "/" && basePath ? "" : pathname);
 
   const currentMainMenu = menus.find(menu =>
-    menu.groups.some(group => group.items.some(item => fullPath.startsWith(item.path)))
+    menu.groups.some(group => group.items.some(item => 
+      fullPath === item.path || 
+      fullPath.startsWith(item.path + "/") || 
+      item.path.startsWith(fullPath + "/")
+    ))
   ) || menus[0];
 
   const [activeMenuId, setActiveMenuId] = useState(currentMainMenu?.id || "");
@@ -162,7 +166,11 @@ export function DashboardLayout({
                 <h3 className="px-2 text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">{group.label}</h3>
                 <nav className="flex flex-col gap-1">
                   {group.items.map((item) => {
-                    const isItemActive = fullPath === item.path || fullPath.startsWith(`${item.path}/`);
+                    // Find the longest matching path in this group to avoid parent paths being active
+                    const allGroupItems = activeMenu.groups.flatMap(g => g.items);
+                    const matchingItems = allGroupItems.filter(i => fullPath === i.path || fullPath.startsWith(`${i.path}/`));
+                    const longestMatch = matchingItems.sort((a, b) => b.path.length - a.path.length)[0];
+                    const isItemActive = longestMatch?.path === item.path;
                     const isInternal = basePath
                       ? item.path.startsWith(basePath)
                       : !externalPaths.some(ext => item.path.startsWith(ext));
@@ -244,8 +252,8 @@ export function DashboardLayout({
         </header>
 
         {/* Main Content Scrollable Area */}
-        <main className="flex-1 p-4 md:p-6 lg:p-8 overflow-y-auto">
-          <div className="bg-white rounded-2xl min-h-[calc(100vh-2rem)] md:min-h-[calc(100vh-4rem)] p-4 md:p-8">
+        <main className="flex-1 p-4 md:p-6 lg:p-8 overflow-hidden min-h-0">
+          <div className="bg-white rounded-2xl h-full p-4 md:p-8 flex flex-col overflow-y-auto">
             {children}
           </div>
         </main>
@@ -296,7 +304,10 @@ export function DashboardLayout({
                             {group.label}
                           </span>
                           {group.items.map(item => {
-                            const isItemActive = fullPath === item.path || fullPath.startsWith(`${item.path}/`);
+                            const allMenuItems = menu.groups.flatMap(g => g.items);
+                            const matchingItems = allMenuItems.filter(i => fullPath === i.path || fullPath.startsWith(`${i.path}/`));
+                            const longestMatch = matchingItems.sort((a, b) => b.path.length - a.path.length)[0];
+                            const isItemActive = longestMatch?.path === item.path;
                             const isInternal = basePath
                               ? item.path.startsWith(basePath)
                               : !externalPaths.some(ext => item.path.startsWith(ext));

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>
+  );
+}