Merge branch 'module/analytics' into feature/ui-event-count

Author: wanasart

client/my-app/src/app/(with-layout)/analytics/page.tsx

@@ -2,6 +2,7 @@ import AnalyticsView from "@/components/features/analytics/AnalyticsView";
 import TimeBasedAlertDistribution from "@/components/features/analytics/chart/TimeBasedAlertDistribution";
 import AiAccuracyChart from "@/components/features/analytics/chart/AiAccuracyChart";
 import EventCount from "@/components/features/analytics/chart/EventCount";
+import AlertResolutionRate from "@/components/features/analytics/chart/AlertResolutionRate";
 
 export default function Analytics() {
   return (
@@ -31,6 +32,10 @@ export default function Analytics() {
           <EventCount />
         </div>
       </div>
+
+      <div className="rounded-lg bg-[var(--color-white)] shadow-md p-6">
+        <AlertResolutionRate />
+      </div>
     </div>
   );
 }

client/my-app/src/components/features/analytics/Chart/AlertResolutionRate.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import React from "react";
+import dynamic from "next/dynamic";
+import type { ApexOptions } from "apexcharts";
+
+const ReactApexChart = dynamic(() => import("react-apexcharts"), {
+  ssr: false,
+});
+
+// props เผื่อรองรับ custom height
+type Props = {
+  height?: number;
+};
+
+const AXIS_LABEL_STYLE = {
+  colors: "#6b7280",
+  fontSize: "12px",
+};
+
+
+const data = [
+  { month: "January", total: 65, closed: 80 },
+  { month: "February", total: 90, closed: 60 },
+  { month: "March", total: 55, closed: 10 },
+  { month: "April", total: 78, closed: 50 },
+  { month: "May", total: 50, closed: 45 },
+  { month: "June", total: 42, closed: 40 },
+  { month: "July", total: 67, closed: 20 },
+  { month: "August", total: 40, closed: 55 },
+  { month: "September", total: 52, closed: 90 },
+  { month: "October", total: 64, closed: 78 },
+  { month: "November", total: 48, closed: 25 },
+  { month: "December", total: 88, closed: 15 },
+];
+
+
+const chartSeries = [
+  { name: "Total Alerts", data: data.map((d) => d.total) },
+  { name: "Closed Alerts", data: data.map((d) => d.closed) },
+];
+
+
+const chartOptions: ApexOptions = {
+  chart: {
+    type: "line",
+    zoom: { enabled: false },
+    toolbar: { show: false },
+    background: "transparent",
+    parentHeightOffset: 0,
+  },
+
+  stroke: {
+    curve: "straight",
+    width: 3,
+  },
+
+  markers: {
+    size: 5,
+    strokeWidth: 2,
+    colors: ["#ffffff"],
+    strokeColors: ["#3b82f6", "#ef4444"],
+    hover: { size: 7 },
+  },
+
+  colors: ["#3b82f6", "#ef4444"],
+
+  grid: {
+    borderColor: "#e5e7eb",
+    strokeDashArray: 4,
+    xaxis: { lines: { show: true } }, 
+    yaxis: { lines: { show: true } }, 
+  },
+
+  xaxis: {
+    categories: data.map((d) => d.month),
+    labels: { style: AXIS_LABEL_STYLE },
+    axisBorder: { show: false },
+    axisTicks: { show: false },
+  },
+
+  yaxis: {
+    min: 0,
+    max: 100,
+    tickAmount: 5,
+    labels: { style: AXIS_LABEL_STYLE },
+  },
+
+  tooltip: {
+    theme: "light",
+    shared: true,
+    intersect: false,
+  },
+
+  legend: {
+    show: false,
+  },
+};
+
+
+export default function AlertResolutionRate({ height = 250 }: Props) {
+  return (
+    <div className="w-full rounded-3xl bg-white px-6 py-5 shadow-sm border border-[#e5e7f5]">
+      <div className="mb-3 flex items-center justify-between">
+        <h2 className="text-lg font-bold text-[var(--color-primary,#111827)]">
+          Alert Resolution Rate
+        </h2>
+      </div>
+
+      {/* Chart */}
+      <div className="w-full">
+        <ReactApexChart
+          options={chartOptions}
+          series={chartSeries}
+          type="line"
+          height={height}
+        />
+      </div>
+
+      {/* Legend */}
+      <div className="mt-4 flex flex-wrap items-center justify-center gap-3 text-xs text-slate-600">
+        <div className="flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-full bg-[#3b82f6]" />
+          <span className="whitespace-nowrap">Total Alerts</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-full bg-[#ef4444]" />
+          <span className="whitespace-nowrap">Closed Alerts</span>
+        </div>
+      </div>
+    </div>
+  );
+}