Merge pull request #209 from SynTech-T5/develop

2.1.0

Author: wanasart

.gitignore

@@ -45,5 +45,9 @@
     "tailwindcss": "^4",
     "tw-animate-css": "^1.3.7",
     "typescript": "^5"
-  }
+  },
+  "description": "This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).",
+  "main": "index.js",
+  "author": "",
+  "license": "ISC"
 }

client/my-app/package-lock.json

@@ -31,8 +31,6 @@ export default function LoginPage() {
       const data = await res.json().catch(() => ({}));
       if (!res.ok) throw new Error(data?.message || 'Login failed');
 
-      localStorage.setItem("access_token", data.token);
-
       window.location.href = '/cameras';
     } catch (e: any) {
       setErr(e.message ?? 'Login failed');
@@ -41,8 +39,6 @@ export default function LoginPage() {
     }
   }
 
-  console.log('Token: ', localStorage.getItem("access_token"));
-
   return (
     <main
       className="

client/my-app/package.json

@@ -1,17 +1,13 @@
 import { Alert } from "@/app/models/alerts.model";
-import AlertDetails from '@/app/components/Alerts/Details/AlertDetails'
+import AlertDetails from '@/components/features/alerts/details/AlertDetails'
+import { fetchWithAuth } from "@/lib/fetchWithAuth";
 
 const base = process.env.NEXT_PUBLIC_APP_URL!;
 
 export default async function Page({ params }: { params: Promise<{ alr_id: string }> }) {
     const { alr_id } = await params
 
-    const res = await fetch(`${base}/api/alerts/${alr_id}`, { cache: "no-store" });
-    if (!res.ok) {
-        throw new Error("Failed to load alert");
-    }
-
-    const json = await res.json();
+    const json = await fetchWithAuth<{ data: Alert }>(`/api/alerts/${alr_id}`);
     const alert: Alert = json.data;
 
     return (

client/my-app/src/app/(plain)/login/page.tsx

@@ -1,9 +1,9 @@
 // app/(dashboard)/alerts/page.tsx
 import { Separator } from "@/components/ui/separator";
-import AlertView from "@/app/components/Alerts/AlertsView";
-import SearchAlertsInput from "@/app/components/Alerts/SearchAlertsInput";
-import AlertFilters from "@/app/components/Alerts/AlertFilters";
-import RecentAlerts from "@/app/components/Alerts/RecentAlerts";
+import AlertView from "@/components/features/alerts/AlertsView";
+import SearchAlertsInput from "@/components/features/alerts/SearchAlertsInput";
+import AlertFilters from "@/components/features/alerts/AlertFilters";
+import RecentAlerts from "@/components/features/alerts/RecentAlerts";
 
 export default function AlertsPage() {
   return (

client/my-app/src/app/(with-layout)/alerts/[alr_id]/details/page.tsx

@@ -1,9 +1,25 @@
+import AnalyticsView from "@/components/features/analytics/AnalyticsView";
+import TimeBasedAlertDistribution from "@/components/features/analytics/chart/TimeBasedAlertDistribution";
+import AiAccuracyChart from "@/components/features/analytics/chart/AiAccuracyChart";
+
 export default function Analytics() {
-    return (
-        <div className="rounded-lg bg-[var(--color-white)] shadow-md p-6">
-            <div className="grid grid-cols-[repeat(auto-fit,minmax(320px,1fr))] gap-6">
-                <h1 className="text-2xl font-bold">Analytics</h1>
-            </div>
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(320px,1fr))] gap-6">
+        <AnalyticsView />
+      </div>
+
+  
+      <div className="rounded-lg bg-[var(--color-white)] shadow-md p-6">
+        <div className="rounded-lg bg-[var(--color-white)] shadow-md p-6 mt-6">
+          <TimeBasedAlertDistribution />
         </div>
-    );
-}
+      </div>
+
+     
+      <div className="rounded-lg bg-[var(--color-white)] shadow-md p-6">
+        <AiAccuracyChart />
+      </div>
+    </div>
+  );
+}

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

@@ -1,17 +1,13 @@
 import { Camera } from "@/app/models/cameras.model";
-import CameraDetails from '@/app/components/Cameras/Details/CameraDetails'
+import CameraDetails from '@/components/features/cameras/details/CameraDetails'
+import { fetchWithAuth } from "@/lib/fetchWithAuth";
 
 const base = process.env.NEXT_PUBLIC_APP_URL!;
 
 export default async function Page({ params }: { params: Promise<{ cam_id: string }> }) {
     const { cam_id } = await params
 
-    const res = await fetch(`${base}/api/cameras/${cam_id}`, { cache: "no-store" });
-    if (!res.ok) {
-        throw new Error("Failed to load cameras");
-    }
-
-    const json = await res.json();
+    const json = await fetchWithAuth<{ data: Camera[] }>(`/api/cameras/${cam_id}`);
     const camera: Camera = json.data[0];
 
     return (

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

@@ -1,24 +1,11 @@
-import FullScreenView from "@/app/components/Cameras/FullScreenView";
+import FullScreenView from "@/components/features/cameras/FullScreenView";
 import { Camera } from "@/app/models/cameras.model";
-
-const base = process.env.NEXT_PUBLIC_APP_URL!;
+import { fetchWithAuth } from "@/lib/fetchWithAuth";
 
 export default async function Page({ params }: { params: Promise<{ cam_id: string }> }) {
   const { cam_id } = await params
 
-  const res = await fetch(`${base}/api/cameras/${cam_id}`, {
-    method: "GET",
-    headers: {
-      Authorization: `Bearer ${process.env.NEXT_PUBLIC_TOKEN}`,
-      "Content-Type": "application/json",
-    },
-    cache: "no-store",
-  });
-  if (!res.ok) {
-    throw new Error("Failed to load cameras");
-  }
-
-  const json = await res.json();
+  const json = await fetchWithAuth<{ data: Camera }>(`/api/cameras/${cam_id}`);
   const camera: Camera = json.data;
 
   console.log(camera);

client/my-app/src/app/(with-layout)/cameras/[cam_id]/details/page.tsx

@@ -1,10 +1,10 @@
 // app/(with-layout)/cameras/page.tsx
-import CreateEventForm from "@/app/components/Forms/CreateEventForm";
+import CreateEventForm from "@/components/forms/events/CreateEventForm";
 import { Separator } from "@/components/ui/separator";
-import CameraView from "@/app/components/Cameras/CameraView";
-import SearchCamerasInput from "@/app/components/Cameras/SearchCamerasInput";
-import CameraFilters from "@/app/components/Cameras/CameraFilters";
-import EventGrid from "@/app/components/Events/EventCardGrid";
+import CameraView from "@/components/features/cameras/CameraView";
+import SearchCamerasInput from "@/components/features/cameras/SearchCamerasInput";
+import CameraFilters from "@/components/features/cameras/CameraFilters";
+import EventGrid from "@/components/features/events/EventCardGrid";
 
 type ViewMode = "grid" | "list";
 type SP = Record<string, string | string[] | undefined>;