@apptimate/ui 1.0.0 → 1.1.0

package/src/base-components/TableMobileOptions.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Search, Settings2 } from 'lucide-react';
+import { Dropdown, DropdownItem } from './Dropdown';
+import { Input } from './Input';
+
+export interface TableMobileOptionsProps {
+    searchValue: string;
+    onSearchChange: (value: string) => void;
+    searchPlaceholder?: string;
+    searchLabel?: string;
+    actionsLabel?: string;
+    children?: React.ReactNode;
+}
+
+export const TableMobileOptions = ({ 
+    searchValue, 
+    onSearchChange, 
+    searchPlaceholder = "Search...", 
+    searchLabel = "Search",
+    actionsLabel = "Actions",
+    children 
+}: TableMobileOptionsProps) => {
+    return (
+        <Dropdown
+            align="right"
+            contentClassName="w-[280px] p-2"
+            trigger={
+                <button className="flex items-center justify-center gap-2 px-3 py-2 rounded-[10px] bg-white border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors shadow-sm font-bold text-[13px]">
+                    <Settings2 size={16} /> Options
+                </button>
+            }
+        >
+            <div className="px-2 pb-2 pt-1 mb-1 border-b border-gray-100">
+                <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider mb-2">{searchLabel}</p>
+                <Input
+                    placeholder={searchPlaceholder}
+                    icon={<Search size={16} className="text-gray-400" />}
+                    className="[&_input]:rounded-[8px] [&_input]:border [&_input]:border-gray-200 [&_input]:bg-white [&_input]:hover:border-gray-300 [&_input]:focus:border-gray-300 w-full"
+                    value={searchValue}
+                    onChange={(e) => onSearchChange(e.target.value)}
+                />
+            </div>
+            {children && (
+                <div className="px-2 pt-1 pb-1">
+                    <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider mb-1">{actionsLabel}</p>
+                    {children}
+                </div>
+            )}
+        </Dropdown>
+    );
+};

package/src/common-components/Charts.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>
+  );
+}