@apptimate/ui 1.1.0 → 1.3.0

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

@@ -0,0 +1,215 @@
+"use client";
+
+import React, { useState, useCallback } from "react";
+import {
+  PieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  Sector,
+} from "recharts";
+import {
+  CHART_COLORS,
+  CHART_GRADIENTS,
+  TOOLTIP_STYLE,
+  TOOLTIP_ITEM_STYLE,
+  ANIMATION_DURATION,
+  ANIMATION_EASING,
+} from "./palette";
+
+export interface RPieChartProps {
+  data: Record<string, any>[];
+  dataKey: string;
+  nameKey: string;
+  height?: number;
+  colors?: string[];
+  innerRadius?: number | string;
+  outerRadius?: number | string;
+  showTooltip?: boolean;
+  showLegend?: boolean;
+  legendPosition?: "top" | "bottom" | "right";
+  showLabels?: boolean;
+  labelType?: "percentage" | "value" | "name";
+  centerLabel?: string;
+  centerValue?: string | number;
+  enableGradient?: boolean;
+  tooltipFormatter?: (value: any, name: string) => [string, string];
+  className?: string;
+}
+
+// Custom active shape for hover-expand effect
+function renderActiveShape(props: any) {
+  const {
+    cx, cy, innerRadius, outerRadius, startAngle, endAngle,
+    fill, payload, percent, value, nameKey, dataKey,
+  } = props;
+
+  return (
+    <g>
+      <Sector
+        cx={cx}
+        cy={cy}
+        innerRadius={innerRadius - 2}
+        outerRadius={outerRadius + 8}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        fill={fill}
+        opacity={1}
+        style={{ filter: "drop-shadow(0 4px 12px rgba(0,0,0,0.15))", transition: "all 0.3s ease" }}
+      />
+      <Sector
+        cx={cx}
+        cy={cy}
+        innerRadius={innerRadius}
+        outerRadius={outerRadius}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        fill={fill}
+      />
+    </g>
+  );
+}
+
+// Percentage label renderer
+function renderLabel(props: any) {
+  const { cx, cy, midAngle, innerRadius, outerRadius, percent, name, labelType, value } = props;
+  const RADIAN = Math.PI / 180;
+  const radius = outerRadius + 20;
+  const x = cx + radius * Math.cos(-midAngle * RADIAN);
+  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+
+  if (percent < 0.04) return null; // Hide labels for tiny slices
+
+  let displayText = `${(percent * 100).toFixed(0)}%`;
+  if (labelType === "value") displayText = `${value}`;
+  if (labelType === "name") displayText = name;
+
+  return (
+    <text
+      x={x}
+      y={y}
+      fill="#64748b"
+      textAnchor={x > cx ? "start" : "end"}
+      dominantBaseline="central"
+      fontSize={11}
+      fontWeight={600}
+    >
+      {displayText}
+    </text>
+  );
+}
+
+export function RPieChart({
+  data,
+  dataKey,
+  nameKey,
+  height = 350,
+  colors = [...CHART_COLORS],
+  innerRadius = "55%",
+  outerRadius = "80%",
+  showTooltip = true,
+  showLegend = true,
+  legendPosition = "bottom",
+  showLabels = false,
+  labelType = "percentage",
+  centerLabel,
+  centerValue,
+  enableGradient = true,
+  tooltipFormatter,
+  className = "",
+}: RPieChartProps) {
+  const [activeIndex, setActiveIndex] = useState<number | undefined>(undefined);
+  const gradientId = React.useId();
+
+  const onMouseEnter = useCallback((_: any, index: number) => {
+    setActiveIndex(index);
+  }, []);
+
+  const onMouseLeave = useCallback(() => {
+    setActiveIndex(undefined);
+  }, []);
+
+  return (
+    <div className={`w-full relative ${className}`} style={{ height }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <PieChart>
+          {enableGradient && (
+            <defs>
+              {data.map((_, idx) => {
+                const gradientPair = CHART_GRADIENTS[idx % CHART_GRADIENTS.length];
+                const id = `pie-gradient-${gradientId}-${idx}`;
+                return (
+                  <linearGradient key={id} id={id} x1="0" y1="0" x2="1" y2="1">
+                    <stop offset="0%" stopColor={gradientPair[0]} stopOpacity={1} />
+                    <stop offset="100%" stopColor={gradientPair[1]} stopOpacity={0.85} />
+                  </linearGradient>
+                );
+              })}
+            </defs>
+          )}
+          <Pie
+            data={data}
+            dataKey={dataKey}
+            nameKey={nameKey}
+            cx="50%"
+            cy="50%"
+            innerRadius={innerRadius}
+            outerRadius={outerRadius}
+            paddingAngle={2}
+            activeIndex={activeIndex}
+            activeShape={renderActiveShape}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+            isAnimationActive={true}
+            animationDuration={ANIMATION_DURATION}
+            animationEasing={ANIMATION_EASING}
+            label={showLabels ? (props: any) => renderLabel({ ...props, labelType }) : undefined}
+          >
+            {data.map((_, idx) => (
+              <Cell
+                key={`cell-${idx}`}
+                fill={enableGradient ? `url(#pie-gradient-${gradientId}-${idx})` : colors[idx % colors.length]}
+                stroke="none"
+              />
+            ))}
+          </Pie>
+          {showTooltip && (
+            <Tooltip
+              formatter={tooltipFormatter}
+              contentStyle={TOOLTIP_STYLE}
+              itemStyle={TOOLTIP_ITEM_STYLE}
+              animationDuration={300}
+            />
+          )}
+          {showLegend && (
+            <Legend
+              verticalAlign={legendPosition === "right" ? "middle" : legendPosition}
+              align={legendPosition === "right" ? "right" : "center"}
+              layout={legendPosition === "right" ? "vertical" : "horizontal"}
+              wrapperStyle={{ fontSize: "12px", fontWeight: 700, paddingTop: legendPosition === "bottom" ? "8px" : "0" }}
+              iconType="circle"
+              iconSize={8}
+            />
+          )}
+        </PieChart>
+      </ResponsiveContainer>
+
+      {/* Center label for donut charts */}
+      {(centerLabel || centerValue) && (
+        <div
+          className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none"
+          style={{ paddingBottom: showLegend && legendPosition === "bottom" ? "40px" : "0" }}
+        >
+          {centerValue && (
+            <span className="text-2xl font-bold text-[#2D3142] tracking-tight">{centerValue}</span>
+          )}
+          {centerLabel && (
+            <span className="text-xs font-semibold text-gray-400 uppercase tracking-wider">{centerLabel}</span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,138 @@
+"use client";
+
+import React, { useEffect, useState, useRef } from "react";
+import { TrendingUp, TrendingDown, Minus } from "lucide-react";
+import { SEMANTIC_COLORS } from "./palette";
+
+export interface RStatCardProps {
+  label: string;
+  value: number | string;
+  prefix?: string;
+  suffix?: string;
+  decimals?: number;
+  trend?: "up" | "down" | "neutral";
+  trendValue?: string;
+  subtitle?: string;
+  icon?: React.ReactNode;
+  color?: string;
+  animate?: boolean;
+  className?: string;
+}
+
+// Animated count-up hook
+function useCountUp(target: number, duration: number = 1000, enabled: boolean = true) {
+  const [current, setCurrent] = useState(0);
+  const frameRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (!enabled || typeof target !== "number" || isNaN(target)) {
+      setCurrent(target);
+      return;
+    }
+
+    const startTime = performance.now();
+    const startValue = 0;
+
+    function tick(now: number) {
+      const elapsed = now - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      // Ease-out cubic
+      const eased = 1 - Math.pow(1 - progress, 3);
+      setCurrent(startValue + (target - startValue) * eased);
+
+      if (progress < 1) {
+        frameRef.current = requestAnimationFrame(tick);
+      }
+    }
+
+    frameRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (frameRef.current) cancelAnimationFrame(frameRef.current);
+    };
+  }, [target, duration, enabled]);
+
+  return current;
+}
+
+function TrendIndicator({ trend, trendValue }: { trend: "up" | "down" | "neutral"; trendValue?: string }) {
+  const config = {
+    up: {
+      Icon: TrendingUp,
+      color: SEMANTIC_COLORS.success,
+      bg: "rgba(34,197,94,0.1)",
+    },
+    down: {
+      Icon: TrendingDown,
+      color: SEMANTIC_COLORS.danger,
+      bg: "rgba(239,68,68,0.1)",
+    },
+    neutral: {
+      Icon: Minus,
+      color: SEMANTIC_COLORS.neutral,
+      bg: "rgba(100,116,139,0.1)",
+    },
+  };
+
+  const { Icon, color, bg } = config[trend];
+
+  return (
+    <div
+      className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-bold"
+      style={{ backgroundColor: bg, color }}
+    >
+      <Icon size={12} strokeWidth={2.5} />
+      {trendValue && <span>{trendValue}</span>}
+    </div>
+  );
+}
+
+export function RStatCard({
+  label,
+  value,
+  prefix = "",
+  suffix = "",
+  decimals = 0,
+  trend,
+  trendValue,
+  subtitle,
+  icon,
+  color,
+  animate = true,
+  className = "",
+}: RStatCardProps) {
+  const isNumeric = typeof value === "number" && !isNaN(value);
+  const animatedValue = useCountUp(isNumeric ? value : 0, 1200, animate && isNumeric);
+
+  const displayValue = isNumeric
+    ? `${prefix}${animatedValue.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals })}${suffix}`
+    : `${prefix}${value}${suffix}`;
+
+  return (
+    <div className={`flex flex-col gap-2 p-4 rounded-xl bg-white border border-gray-100 hover:border-gray-200 transition-all duration-200 hover:shadow-sm ${className}`}>
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-semibold text-gray-400 uppercase tracking-wider">{label}</span>
+        {icon && (
+          <div
+            className="w-8 h-8 rounded-lg flex items-center justify-center"
+            style={{ backgroundColor: color ? `${color}15` : "rgba(99,102,241,0.08)" }}
+          >
+            {React.isValidElement(icon)
+              ? React.cloneElement(icon as React.ReactElement, { size: 16, style: { color: color || "#6366f1" } } as any)
+              : icon}
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-end gap-2">
+        <span className="text-2xl font-bold text-[#2D3142] tracking-tight leading-none">
+          {displayValue}
+        </span>
+        {trend && <TrendIndicator trend={trend} trendValue={trendValue} />}
+      </div>
+
+      {subtitle && (
+        <span className="text-[11px] font-medium text-gray-400 leading-tight">{subtitle}</span>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+export * from "./ApexCharts";
+export * from "./RLineChart";
+export * from "./RBarChart";
+export * from "./RPieChart";
+export * from "./RAreaChart";
+export * from "./RStatCard";
+export * from "./palette";

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

@@ -0,0 +1,84 @@
+// ── Chart Color Palette ──────────────────────────────────────────────────────
+// 16 curated colors with gradient pairs for premium chart aesthetics.
+// Organized into primary rotation + semantic sets.
+
+export const CHART_COLORS = [
+  '#6366f1', // Indigo
+  '#22c55e', // Green
+  '#f59e0b', // Amber
+  '#ef4444', // Red
+  '#06b6d4', // Cyan
+  '#8b5cf6', // Violet
+  '#ec4899', // Pink
+  '#14b8a6', // Teal
+  '#f97316', // Orange
+  '#3b82f6', // Blue
+  '#a855f7', // Purple
+  '#10b981', // Emerald
+  '#e11d48', // Rose
+  '#0ea5e9', // Sky
+  '#84cc16', // Lime
+  '#d946ef', // Fuchsia
+] as const;
+
+// Gradient pairs: [from, to] for gradient fills on charts
+export const CHART_GRADIENTS: [string, string][] = [
+  ['#6366f1', '#818cf8'], // Indigo
+  ['#22c55e', '#4ade80'], // Green
+  ['#f59e0b', '#fbbf24'], // Amber
+  ['#ef4444', '#f87171'], // Red
+  ['#06b6d4', '#22d3ee'], // Cyan
+  ['#8b5cf6', '#a78bfa'], // Violet
+  ['#ec4899', '#f472b6'], // Pink
+  ['#14b8a6', '#2dd4bf'], // Teal
+  ['#f97316', '#fb923c'], // Orange
+  ['#3b82f6', '#60a5fa'], // Blue
+  ['#a855f7', '#c084fc'], // Purple
+  ['#10b981', '#34d399'], // Emerald
+  ['#e11d48', '#fb7185'], // Rose
+  ['#0ea5e9', '#38bdf8'], // Sky
+  ['#84cc16', '#a3e635'], // Lime
+  ['#d946ef', '#e879f9'], // Fuchsia
+];
+
+// Semantic color sets for specific use-cases
+export const SEMANTIC_COLORS = {
+  success: '#22c55e',
+  successLight: '#4ade80',
+  warning: '#f59e0b',
+  warningLight: '#fbbf24',
+  danger: '#ef4444',
+  dangerLight: '#f87171',
+  info: '#3b82f6',
+  infoLight: '#60a5fa',
+  neutral: '#64748b',
+  neutralLight: '#94a3b8',
+} as const;
+
+// Tooltip styling constants (shared across all chart components)
+export const TOOLTIP_STYLE = {
+  backgroundColor: '#1e293b',
+  color: '#fff',
+  borderRadius: '10px',
+  border: 'none',
+  boxShadow: '0 10px 30px rgba(0,0,0,0.2)',
+  padding: '10px 14px',
+  fontSize: '12px',
+  fontWeight: 600,
+} as const;
+
+export const TOOLTIP_ITEM_STYLE = {
+  color: '#cbd5e1',
+  fontSize: '12px',
+  fontWeight: 500,
+} as const;
+
+export const AXIS_TICK_STYLE = {
+  fontSize: 11,
+  fontWeight: 600,
+  fill: '#94a3b8',
+} as const;
+
+export const GRID_STROKE = '#f1f5f9';
+export const ANIMATION_DURATION = 1000;
+export const ANIMATION_EASING = 'ease-out' 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>
+  );
+}