@apptimate/ui 3.1.0 → 3.2.0

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@apptimate/ui",
-  "version": "3.1.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/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/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>
+  );
+}