Data fetched from API

src/app/components/Sidebar.js

@@ -9,9 +9,8 @@ const Sidebar = () => {
   const { darkMode } = useTheme();
 
   return (
-    <aside className={`w-[290px] h-full border-r flex flex-col ${
+    <aside className={`w-[290px] h-full border-r flex flex-col ${darkMode ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-200'
-      darkMode ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-200'
+      }`}>
-    }`}>
       {/* Logo */}
       <div className="py-8 flex justify-start">
         <Link href="/">
@@ -36,15 +35,14 @@ const Sidebar = () => {
             <div>
               <Link
                 href="/pages/dashboard"
-                className={`flex items-center w-full p-2 rounded-lg ${
+                className={`flex items-center w-full p-2 rounded-lg ${darkMode
-                  darkMode 
+                    ? 'text-gray-300 hover:text-white hover:bg-gray-800'
-                    ? 'text-gray-300 hover:text-white hover:bg-gray-800' 
                     : 'text-gray-600 hover:text-brand-500 hover:bg-gray-100'
-                }`}
+                  }`}
               >
-                <img 
+                <img
-                  src="/images/icons/grid.svg" 
+                  src="/images/icons/grid.svg"
-                  alt="Dashboard" 
+                  alt="Dashboard"
                   className={`w-5 h-5 mr-3 ${darkMode ? 'filter invert' : ''}`}
                 />
                 <span className="flex-1 text-left">Dashboard</span>
@@ -52,53 +50,66 @@ const Sidebar = () => {
             </div>
 
             {/* -------------table01 page--------------- */}
- <Link
+            <Link
-                href="/pages/table01"
+              href="/pages/table01"
-                className={`flex items-center w-full p-2 rounded-lg ${
+              className={`flex items-center w-full p-2 rounded-lg ${darkMode
-                  darkMode 
+                  ? 'text-gray-300 hover:text-white hover:bg-gray-800'
-                    ? 'text-gray-300 hover:text-white hover:bg-gray-800' 
+                  : 'text-gray-600 hover:text-brand-500 hover:bg-gray-100'
-                    : 'text-gray-600 hover:text-brand-500 hover:bg-gray-100'
                 }`}
-              >
+            >
-                <img 
+              <img
-                  src="/file.svg" 
+                src="/file.svg"
-                  alt="table01" 
+                alt="table01"
-                  className={`w-5 h-5 mr-3 ${darkMode ? 'filter invert' : ''}`}
+                className={`w-5 h-5 mr-3 ${darkMode ? 'filter invert' : ''}`}
-                />
+              />
-                <span className="flex-1 text-left">table01</span>
+              <span className="flex-1 text-left">table01</span>
-              </Link>
+            </Link>
-            {/* ---------------Temporary-------------- */}
+            {/* ---------------TemporaryTable-------------- */}
- <Link
+            <Link
-                href="/pages/register-employee"
+              href="/pages/register-employee"
-                className={`flex items-center w-full p-2 rounded-lg ${
+              className={`flex items-center w-full p-2 rounded-lg ${darkMode
-                  darkMode 
+                  ? 'text-gray-300 hover:text-white hover:bg-gray-800'
-                    ? 'text-gray-300 hover:text-white hover:bg-gray-800' 
+                  : 'text-gray-600 hover:text-brand-500 hover:bg-gray-100'
-                    : 'text-gray-600 hover:text-brand-500 hover:bg-gray-100'
                 }`}
-              >
+            >
-                <img 
+              <img
-                  src="/file.svg" 
+                src="/file.svg"
-                  alt="register employee" 
+                alt="register employee"
-                  className={`w-5 h-5 mr-3 ${darkMode ? 'filter invert' : ''}`}
+                className={`w-5 h-5 mr-3 ${darkMode ? 'filter invert' : ''}`}
-                />
+              />
-                <span className="flex-1 text-left">register employee</span>
+              <span className="flex-1 text-left">register employee</span>
-              </Link>
+            </Link>
             {/* --------------register employee--------- */}
-             <Link
+            <Link
-                href="/pages/temporary"
+              href="/pages/TemporaryTable"
-                className={`flex items-center w-full p-2 rounded-lg ${
+              className={`flex items-center w-full p-2 rounded-lg ${darkMode
-                  darkMode 
+                  ? 'text-gray-300 hover:text-white hover:bg-gray-800'
-                    ? 'text-gray-300 hover:text-white hover:bg-gray-800' 
+                  : 'text-gray-600 hover:text-brand-500 hover:bg-gray-100'
-                    : 'text-gray-600 hover:text-brand-500 hover:bg-gray-100'
                 }`}
-              >
+            >
-                <img 
+              <img
-                  src="/file.svg" 
+                src="/file.svg"
-                  alt="temporary" 
+                alt="TemporaryTable"
-                  className={`w-5 h-5 mr-3 ${darkMode ? 'filter invert' : ''}`}
+                className={`w-5 h-5 mr-3 ${darkMode ? 'filter invert' : ''}`}
-                />
+              />
-                <span className="flex-1 text-left">temporary</span>
+              <span className="flex-1 text-left">TemporaryTable</span>
-              </Link>
+            </Link>
+            {/* ----------------------- */}
+            {/* ----------Trainees Data------------- */}
+            <Link
+              href="/pages/TraineesData"
+              className={`flex items-center w-full p-2 rounded-lg ${darkMode
+                  ? 'text-gray-300 hover:text-white hover:bg-gray-800'
+                  : 'text-gray-600 hover:text-brand-500 hover:bg-gray-100'
+                }`}
+            >
+              <img
+                src="/file.svg"
+                alt="TraineesData"
+                className={`w-5 h-5 mr-3 ${darkMode ? 'filter invert' : ''}`}
+              />
+              <span className="flex-1 text-left">Trainees Data</span>
+            </Link>
             {/* ----------------------- */}
           </div>
         </nav>

src/app/pages/TraineesData/page.js

@@ -0,0 +1,52 @@
+"use client";
+import { useEffect, useState } from "react";
+import Link from "next/link";
+
+export default function TraineeList() {
+  const [trainees, setTrainees] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const token = "G_2h5o1NlX1_PfomkUe5zk7Xx0dT2juV"; // Bearer token
+
+  useEffect(() => {
+    const fetchTrainees = async () => {
+      try {
+        const res = await fetch("https://dts.arapp.space/items/trainees", {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+        const data = await res.json();
+        setTrainees(data.data || []);
+        setLoading(false);
+      } catch (err) {
+        console.error("Failed to fetch trainees:", err);
+        setLoading(false);
+      }
+    };
+
+    fetchTrainees();
+  }, []);
+
+  if (loading) return <p>Loading trainees...</p>;
+
+  return (
+    <div className="p-6">
+      <h1 className="text-xl font-bold mb-4">Trainees List</h1>
+      <ul className="space-y-4">
+        {trainees.map((trainee) => (
+          <li key={trainee.id} className="border p-4 rounded">
+            <p><strong>Name:</strong> {trainee.Name}</p>
+            <p><strong>Batch:</strong> {trainee.batch_name}</p>
+            <p><strong>Feedback:</strong> {trainee.overall_feedback}</p>
+            <Link href={`/pages/TraineesData/trainee/${trainee.id}`}>
+              <button className="mt-2 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
+                View Details
+              </button>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

src/app/pages/TraineesData/trainee/[id]/page.js

@@ -0,0 +1,48 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+
+export default function TraineeDetails() {
+  const { id } = useParams();
+  const [trainee, setTrainee] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const token = "G_2h5o1NlX1_PfomkUe5zk7Xx0dT2juV";
+
+  useEffect(() => {
+    const fetchTrainee = async () => {
+      try {
+        const res = await fetch(`https://dts.arapp.space/items/trainees/${id}`, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+        const data = await res.json();
+        setTrainee(data.data);
+        setLoading(false);
+      } catch (err) {
+        console.error("Failed to fetch trainee:", err);
+        setLoading(false);
+      }
+    };
+
+    fetchTrainee();
+  }, [id]);
+
+  if (loading) return <p>Loading details...</p>;
+  if (!trainee) return <p>Trainee not found.</p>;
+
+  return (
+    <div className="p-6">
+      <h1 className="text-xl font-bold mb-4">Trainee Details</h1>
+      <p><strong>Name:</strong> {trainee.Name}</p>
+      <p><strong>Batch Name:</strong> {trainee.batch_name}</p>
+      <p><strong>Feedback:</strong> {trainee.overall_feedback}</p>
+      <p><strong>Attendance:</strong> {trainee.overall_attendance}</p>
+      <p><strong>Speed:</strong> {trainee.speed ?? "N/A"}</p>
+      <p><strong>Accuracy:</strong> {trainee.accuracy ?? "N/A"}</p>
+      <p><strong>Precision:</strong> {trainee.precision ?? "N/A"}</p>
+      <p><strong>DOJ:</strong> {trainee.doj ?? "N/A"}</p>
+    </div>
+  );
+}