Data fetched from API
This commit is contained in:
parent
0920b7a686
commit
3277c80c30
@ -9,9 +9,8 @@ const Sidebar = () => {
|
||||
const { darkMode } = useTheme();
|
||||
|
||||
return (
|
||||
<aside className={`w-[290px] h-full border-r flex flex-col ${
|
||||
darkMode ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-200'
|
||||
}`}>
|
||||
<aside className={`w-[290px] h-full border-r flex flex-col ${darkMode ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-200'
|
||||
}`}>
|
||||
{/* Logo */}
|
||||
<div className="py-8 flex justify-start">
|
||||
<Link href="/">
|
||||
@ -36,11 +35,10 @@ const Sidebar = () => {
|
||||
<div>
|
||||
<Link
|
||||
href="/pages/dashboard"
|
||||
className={`flex items-center w-full p-2 rounded-lg ${
|
||||
darkMode
|
||||
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="/images/icons/grid.svg"
|
||||
@ -52,53 +50,66 @@ const Sidebar = () => {
|
||||
</div>
|
||||
|
||||
{/* -------------table01 page--------------- */}
|
||||
<Link
|
||||
href="/pages/table01"
|
||||
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'
|
||||
<Link
|
||||
href="/pages/table01"
|
||||
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="table01"
|
||||
className={`w-5 h-5 mr-3 ${darkMode ? 'filter invert' : ''}`}
|
||||
/>
|
||||
<span className="flex-1 text-left">table01</span>
|
||||
</Link>
|
||||
{/* ---------------Temporary-------------- */}
|
||||
<Link
|
||||
href="/pages/register-employee"
|
||||
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="table01"
|
||||
className={`w-5 h-5 mr-3 ${darkMode ? 'filter invert' : ''}`}
|
||||
/>
|
||||
<span className="flex-1 text-left">table01</span>
|
||||
</Link>
|
||||
{/* ---------------TemporaryTable-------------- */}
|
||||
<Link
|
||||
href="/pages/register-employee"
|
||||
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="register employee"
|
||||
className={`w-5 h-5 mr-3 ${darkMode ? 'filter invert' : ''}`}
|
||||
/>
|
||||
<span className="flex-1 text-left">register employee</span>
|
||||
</Link>
|
||||
>
|
||||
<img
|
||||
src="/file.svg"
|
||||
alt="register employee"
|
||||
className={`w-5 h-5 mr-3 ${darkMode ? 'filter invert' : ''}`}
|
||||
/>
|
||||
<span className="flex-1 text-left">register employee</span>
|
||||
</Link>
|
||||
{/* --------------register employee--------- */}
|
||||
<Link
|
||||
href="/pages/temporary"
|
||||
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'
|
||||
<Link
|
||||
href="/pages/TemporaryTable"
|
||||
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="temporary"
|
||||
className={`w-5 h-5 mr-3 ${darkMode ? 'filter invert' : ''}`}
|
||||
/>
|
||||
<span className="flex-1 text-left">temporary</span>
|
||||
</Link>
|
||||
>
|
||||
<img
|
||||
src="/file.svg"
|
||||
alt="TemporaryTable"
|
||||
className={`w-5 h-5 mr-3 ${darkMode ? 'filter invert' : ''}`}
|
||||
/>
|
||||
<span className="flex-1 text-left">TemporaryTable</span>
|
||||
</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>
|
||||
|
||||
52
src/app/pages/TraineesData/page.js
Normal file
52
src/app/pages/TraineesData/page.js
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
48
src/app/pages/TraineesData/trainee/[id]/page.js
Normal file
48
src/app/pages/TraineesData/trainee/[id]/page.js
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user