Atul/EmployeesManagementPortalRepository
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Data fetched from API

Browse Source
This commit is contained in:
ATUL GUNJAL 2025-05-31 15:26:59 +05:30
parent 0920b7a686
commit 3277c80c30
4 changed files with 164 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/app/components/Sidebar.js
View File

@ -9,8 +9,7 @@ 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">
@ -36,8 +35,7 @@ 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'
}`}
@ -54,8 +52,7 @@ const Sidebar = () => {
{/* -------------table01 page--------------- */}
<Link
href="/pages/table01"
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'
}`}
@ -67,11 +64,10 @@ const Sidebar = () => {
/>
<span className="flex-1 text-left">table01</span>
</Link>
{/* ---------------Temporary-------------- */}
{/* ---------------TemporaryTable-------------- */}
<Link
href="/pages/register-employee"
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'
}`}
@ -85,19 +81,34 @@ const Sidebar = () => {
</Link>
{/* --------------register employee--------- */}
<Link
href="/pages/temporary"
className={`flex items-center w-full p-2 rounded-lg ${
darkMode
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"
alt="TemporaryTable"
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>
{/* ----------------------- */}
{/* ----------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>

0
src/app/pages/temporary/page.js → src/app/pages/TemporaryTable/page.js
View File

52
src/app/pages/TraineesData/page.js Normal file
View 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
View 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>
);
}