@apptimate/ui 1.1.0 → 1.3.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/RAreaChart.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import React from "react";
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts";
+import {
+  CHART_COLORS,
+  CHART_GRADIENTS,
+  TOOLTIP_STYLE,
+  TOOLTIP_ITEM_STYLE,
+  AXIS_TICK_STYLE,
+  GRID_STROKE,
+  ANIMATION_DURATION,
+  ANIMATION_EASING,
+} from "./palette";
+
+export interface RAreaChartSeries {
+  dataKey: string;
+  name?: string;
+  color?: string;
+  strokeWidth?: number;
+  type?: "monotone" | "linear" | "step" | "basis";
+  stackId?: string;
+  fillOpacity?: number;
+}
+
+export interface RAreaChartProps {
+  data: Record<string, any>[];
+  series: RAreaChartSeries[];
+  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 RAreaChart({
+  data,
+  series,
+  xAxisKey,
+  height = 350,
+  colors = [...CHART_COLORS],
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  legendPosition = "bottom",
+  xAxisFormatter,
+  yAxisFormatter,
+  tooltipFormatter,
+  className = "",
+}: RAreaChartProps) {
+  const gradientId = React.useId();
+
+  return (
+    <div className={`w-full ${className}`} style={{ height }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <AreaChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 10 }}>
+          <defs>
+            {series.map((s, idx) => {
+              const gradientPair = CHART_GRADIENTS[idx % CHART_GRADIENTS.length];
+              const id = `area-gradient-${gradientId}-${idx}`;
+              return (
+                <linearGradient key={id} id={id} x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stopColor={s.color || gradientPair[0]} stopOpacity={0.4} />
+                  <stop offset="50%" stopColor={s.color || gradientPair[1]} stopOpacity={0.1} />
+                  <stop offset="100%" stopColor={s.color || gradientPair[1]} stopOpacity={0} />
+                </linearGradient>
+              );
+            })}
+          </defs>
+
+          {showGrid && (
+            <CartesianGrid stroke={GRID_STROKE} strokeDasharray="0" />
+          )}
+          <XAxis
+            dataKey={xAxisKey}
+            tickFormatter={xAxisFormatter}
+            tick={AXIS_TICK_STYLE}
+            tickLine={false}
+            axisLine={false}
+          />
+          <YAxis
+            tickFormatter={yAxisFormatter}
+            tick={AXIS_TICK_STYLE}
+            tickLine={false}
+            axisLine={false}
+          />
+          {showTooltip && (
+            <Tooltip
+              formatter={tooltipFormatter}
+              contentStyle={TOOLTIP_STYLE}
+              itemStyle={TOOLTIP_ITEM_STYLE}
+              animationDuration={300}
+            />
+          )}
+          {showLegend && (
+            <Legend
+              verticalAlign={legendPosition}
+              wrapperStyle={{ fontSize: "12px", fontWeight: 700, paddingTop: "8px" }}
+              iconType="circle"
+              iconSize={8}
+            />
+          )}
+          {series.map((s, idx) => (
+            <Area
+              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.5}
+              fill={`url(#area-gradient-${gradientId}-${idx})`}
+              fillOpacity={s.fillOpacity ?? 1}
+              stackId={s.stackId}
+              activeDot={{ r: 5, fill: "#fff", stroke: s.color || colors[idx % colors.length], strokeWidth: 2.5 }}
+              isAnimationActive={true}
+              animationDuration={ANIMATION_DURATION}
+              animationEasing={ANIMATION_EASING}
+            />
+          ))}
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

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

@@ -0,0 +1,171 @@
+"use client";
+
+import React from "react";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts";
+import {
+  CHART_COLORS,
+  CHART_GRADIENTS,
+  TOOLTIP_STYLE,
+  TOOLTIP_ITEM_STYLE,
+  AXIS_TICK_STYLE,
+  GRID_STROKE,
+  ANIMATION_DURATION,
+  ANIMATION_EASING,
+} 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];
+  enableGradient?: boolean;
+  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,
+  enableGradient = true,
+  className = "",
+}: RBarChartProps) {
+  const gradientId = React.useId();
+
+  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 }}>
+          {/* Gradient definitions */}
+          {enableGradient && (
+            <defs>
+              {series.map((s, idx) => {
+                const gradientPair = CHART_GRADIENTS[idx % CHART_GRADIENTS.length];
+                const id = `bar-gradient-${gradientId}-${idx}`;
+                return (
+                  <linearGradient key={id} id={id} x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stopColor={s.color || gradientPair[0]} stopOpacity={1} />
+                    <stop offset="100%" stopColor={s.color || gradientPair[1]} stopOpacity={0.7} />
+                  </linearGradient>
+                );
+              })}
+            </defs>
+          )}
+
+          {showGrid && (
+            <CartesianGrid stroke={GRID_STROKE} strokeDasharray="0" />
+          )}
+          {layout === "horizontal" ? (
+            <>
+              <XAxis
+                dataKey={xAxisKey}
+                tickFormatter={xAxisFormatter}
+                tick={AXIS_TICK_STYLE}
+                tickLine={false}
+                axisLine={false}
+              />
+              <YAxis
+                tickFormatter={yAxisFormatter}
+                tick={AXIS_TICK_STYLE}
+                tickLine={false}
+                axisLine={false}
+              />
+            </>
+          ) : (
+            <>
+              <XAxis
+                type="number"
+                tickFormatter={xAxisFormatter}
+                tick={AXIS_TICK_STYLE}
+                tickLine={false}
+                axisLine={false}
+              />
+              <YAxis
+                type="category"
+                dataKey={xAxisKey}
+                tickFormatter={yAxisFormatter}
+                tick={AXIS_TICK_STYLE}
+                tickLine={false}
+                axisLine={false}
+              />
+            </>
+          )}
+          {showTooltip && (
+            <Tooltip
+              formatter={tooltipFormatter}
+              contentStyle={TOOLTIP_STYLE}
+              itemStyle={TOOLTIP_ITEM_STYLE}
+              cursor={{ fill: "rgba(99,102,241,0.06)" }}
+              animationDuration={300}
+            />
+          )}
+          {showLegend && (
+            <Legend
+              verticalAlign={legendPosition}
+              wrapperStyle={{ fontSize: "12px", fontWeight: 700, paddingTop: "8px" }}
+              iconType="circle"
+              iconSize={8}
+            />
+          )}
+          {series.map((s, idx) => {
+            const radius = s.radius !== undefined ? s.radius : 6;
+            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={enableGradient ? `url(#bar-gradient-${gradientId}-${idx})` : (s.color || colors[idx % colors.length])}
+                stackId={s.stackId}
+                barSize={barSize}
+                radius={radiusArray as any}
+                isAnimationActive={true}
+                animationDuration={ANIMATION_DURATION}
+                animationEasing={ANIMATION_EASING}
+              />
+            );
+          })}
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

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

@@ -0,0 +1,156 @@
+"use client";
+
+import React from "react";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts";
+import {
+  CHART_COLORS,
+  CHART_GRADIENTS,
+  TOOLTIP_STYLE,
+  TOOLTIP_ITEM_STYLE,
+  AXIS_TICK_STYLE,
+  GRID_STROKE,
+  ANIMATION_DURATION,
+  ANIMATION_EASING,
+} 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];
+  enableGradient?: boolean;
+  className?: string;
+}
+
+// Pulsing active dot component
+function PulsingActiveDot(props: any) {
+  const { cx, cy, fill } = props;
+  return (
+    <g>
+      <circle cx={cx} cy={cy} r={8} fill={fill} opacity={0.15}>
+        <animate attributeName="r" values="8;14;8" dur="2s" repeatCount="indefinite" />
+        <animate attributeName="opacity" values="0.15;0.05;0.15" dur="2s" repeatCount="indefinite" />
+      </circle>
+      <circle cx={cx} cy={cy} r={5} fill="#fff" stroke={fill} strokeWidth={2.5} />
+    </g>
+  );
+}
+
+export function RLineChart({
+  data,
+  series,
+  xAxisKey,
+  height = 350,
+  colors = [...CHART_COLORS],
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  legendPosition = "bottom",
+  xAxisFormatter,
+  yAxisFormatter,
+  tooltipFormatter,
+  enableGradient = true,
+  className = "",
+}: RLineChartProps) {
+  const gradientId = React.useId();
+
+  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 }}>
+          {/* Gradient definitions for area fill beneath lines */}
+          {enableGradient && (
+            <defs>
+              {series.map((s, idx) => {
+                const gradientPair = CHART_GRADIENTS[idx % CHART_GRADIENTS.length];
+                const id = `line-gradient-${gradientId}-${idx}`;
+                return (
+                  <linearGradient key={id} id={id} x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stopColor={s.color || gradientPair[0]} stopOpacity={0.3} />
+                    <stop offset="100%" stopColor={s.color || gradientPair[1]} stopOpacity={0} />
+                  </linearGradient>
+                );
+              })}
+            </defs>
+          )}
+
+          {showGrid && (
+            <CartesianGrid stroke={GRID_STROKE} strokeDasharray="0" />
+          )}
+          <XAxis
+            dataKey={xAxisKey}
+            tickFormatter={xAxisFormatter}
+            tick={AXIS_TICK_STYLE}
+            tickLine={false}
+            axisLine={false}
+          />
+          <YAxis
+            tickFormatter={yAxisFormatter}
+            tick={AXIS_TICK_STYLE}
+            tickLine={false}
+            axisLine={false}
+          />
+          {showTooltip && (
+            <Tooltip
+              formatter={tooltipFormatter}
+              contentStyle={TOOLTIP_STYLE}
+              itemStyle={TOOLTIP_ITEM_STYLE}
+              animationDuration={300}
+            />
+          )}
+          {showLegend && (
+            <Legend
+              verticalAlign={legendPosition}
+              wrapperStyle={{ fontSize: "12px", fontWeight: 700, paddingTop: "8px" }}
+              iconType="circle"
+              iconSize={8}
+            />
+          )}
+          {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.5}
+              strokeDasharray={s.dashed ? "5 5" : undefined}
+              dot={s.showDot ? { r: 3, fill: "#fff", stroke: s.color || colors[idx % colors.length], strokeWidth: 2 } : false}
+              activeDot={<PulsingActiveDot fill={s.color || colors[idx % colors.length]} />}
+              isAnimationActive={true}
+              animationDuration={ANIMATION_DURATION}
+              animationEasing={ANIMATION_EASING}
+            />
+          ))}
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}