changes made in sidenavbar and added ui to show remaining time of intern

src/Admin/AdminInternTime.jsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/Components/ui/button";
+import { Card } from "@/Components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/Components/ui/select";
+import { Clock, Calendar, Filter } from "lucide-react";
+
+const interns = [
+  {
+    name: "Alice Johnson",
+    department: "Engineering",
+    startDate: "2023-01-01",
+    endDate: "2023-06-30",
+    progress: "100",
+  },
+  {
+    name: "Bob Smith",
+    department: "Marketing",
+    startDate: "2023-03-15",
+    endDate: "2023-09-15",
+    progress: "75",
+  },
+  {
+    name: "Charlie Brown",
+    department: "Design",
+    startDate: "2023-02-01",
+    endDate: "2023-08-01",
+    progress: "50",
+  },
+  {
+    name: "Diana Prince",
+    department: "Engineering",
+    startDate: "2023-01-01",
+    endDate: "2023-06-30",
+    progress: "100",
+  },
+  {
+    name: "Ethan Hunt",
+    department: "HR",
+    startDate: "2023-01-01",
+    endDate: "2023-06-30",
+    progress: "90",
+  },
+];
+
+function calculateRemainingTime(startDate, endDate) {
+  const today = new Date();
+  const end = new Date(endDate);
+  const timeDiff = Math.max(end - today, 0);
+  const daysRemaining = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
+  return daysRemaining > 0
+    ? `${daysRemaining} days remaining`
+    : "Internship Completed";
+}
+
+export default function AdminInternTime() {
+  const [remainingTimes, setRemainingTimes] = useState({});
+  const [selectedDepartment, setSelectedDepartment] = useState("all");
+
+  const handleToggleRemainingTime = (internName) => {
+    setRemainingTimes((prev) => ({
+      ...prev,
+      [internName]: !prev[internName],
+    }));
+  };
+
+  const filteredInterns =
+    selectedDepartment === "all"
+      ? interns
+      : interns.filter(
+          (intern) =>
+            intern.department.toLowerCase() === selectedDepartment.toLowerCase()
+        );
+
+  return (
+    <div className="p-8 max-w-7xl mx-auto bg-gradient-to-b from-blue-50 via-white to-gray-100">
+      {/* Header */}
+      <div className="flex justify-between items-center mb-8">
+        <h1 className="text-4xl font-extrabold text-blue-700 drop-shadow-lg">
+          Intern Progress Tracker
+        </h1>
+        <span className="text-lg text-muted-foreground">
+          Total Interns: {filteredInterns.length}
+        </span>
+      </div>
+
+      {/* Filter Section */}
+      <div className="mb-6 flex items-center gap-4">
+        <Select
+          defaultValue="all"
+          onValueChange={setSelectedDepartment}
+          className="w-52"
+        >
+          <SelectTrigger className="bg-blue-100 rounded-lg shadow hover:shadow-md">
+            <SelectValue placeholder="Filter by Department" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">
+              <Filter className="w-4 h-4 inline-block mr-2" />
+              All Departments
+            </SelectItem>
+            <SelectItem value="Engineering">Engineering</SelectItem>
+            <SelectItem value="Marketing">Marketing</SelectItem>
+            <SelectItem value="Design">Design</SelectItem>
+            <SelectItem value="HR">HR</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Interns Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {filteredInterns.map((intern) => (
+          <Card
+            key={intern.name}
+            className="p-6 relative bg-gradient-to-r from-blue-100 to-white border shadow-md rounded-lg transition-transform transform hover:scale-105"
+          >
+            {/* Intern Info */}
+            <div className="flex justify-between items-center mb-4">
+              <div>
+                <h2 className="text-xl font-bold text-blue-800">
+                  {intern.name}
+                </h2>
+                <p className="text-sm text-gray-600">{intern.department}</p>
+              </div>
+              <Button
+                variant="default"
+                size="sm"
+                className="bg-blue-500 hover:bg-blue-600 text-white"
+              >
+                Auto-Delete
+              </Button>
+            </div>
+
+            {/* Internship Details */}
+            <div
+              className="p-4 bg-white shadow rounded-lg cursor-pointer hover:bg-gray-100"
+              onClick={() => handleToggleRemainingTime(intern.name)}
+            >
+              <div className="flex items-center gap-2 mb-2">
+                <Clock className="w-4 h-4 text-blue-500" />
+                <span className="text-blue-600 font-medium">
+                  Remaining Time
+                </span>
+              </div>
+              {remainingTimes[intern.name] && (
+                <p className="text-gray-700">
+                  {calculateRemainingTime(intern.startDate, intern.endDate)}
+                </p>
+              )}
+            </div>
+
+            {/* Progress Section */}
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <Calendar className="w-4 h-4 text-gray-500" />
+                <span>Progress: <strong>{intern.progress}%</strong></span>
+              </div>
+              <div className="w-full h-2 bg-gray-200 rounded-full">
+                <div
+                  className="h-2 bg-gradient-to-r from-blue-500 to-green-400 rounded-full"
+                  style={{ width: `${intern.progress}%` }}
+                ></div>
+              </div>
+              <div className="text-sm text-gray-600">
+                Duration: {intern.startDate} to {intern.endDate}
+              </div>
+            </div>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

src/App.jsx

@@ -42,6 +42,7 @@ import "./App.css";
 import { NotFound } from "./Components/Notfound";
 import { useAuthContext } from "./context/AuthContext";
 import AllAttendance from "./Admin/AllAttendance";
+import AdminInternTime from "./Admin/AdminInternTime";
 
 const AdminRoute = ({ children }) => {
   const isAdmin = localStorage.getItem("isAdmin") === "true";
@@ -272,7 +273,15 @@ const App = () => {
         path="/help-request"
         element={
           <PrivateRoute>
-            <HarassmentEmailForm/>
+            <HarassmentEmailForm />
+          </PrivateRoute>
+        }
+      />
+      <Route
+        path="/intern-time"
+        element={
+          <PrivateRoute>
+            <AdminInternTime />
           </PrivateRoute>
         }
       />
@@ -284,7 +293,6 @@ const App = () => {
           </PrivateRoute>
         }
       />
-
     </Routes>
   );
 };

src/Components/TopNavbar.jsx

@@ -26,23 +26,22 @@ const TopNavbar = () => {
   const isAdmin = localStorage.getItem("isAdmin") === "true";
 
   const availableRoutes = [
+    // Protected User Routes
+    { path: "/", label: "Home", public: false },
+    { path: "/your-profile", label: "Profile", public: false },
+    { path: "/reports", label: "Reports", public: false },
+    { path: "/projects", label: "Projects", public: false },
+
+
     // Public Routes
-    { path: "/login", label: "Login", public: true },
-    { path: "/signup", label: "Sign Up", public: true },
+    { path: "/frequently-asked-questions", label: "FAQ", public: true },
     { path: "/aboutus", label: "About Us", public: true },
     { path: "/privacypolicy", label: "Privacy Policy", public: true },
-    { path: "/frequently-asked-questions", label: "FAQ", public: true },
 
     // Protected User Routes
-    { path: "/", label: "Home", public: false },
-    { path: "/dashboard", label: "Dashboard", public: false },
-    { path: "/your-profile", label: "Profile", public: false },
     { path: "/notifications", label: "Notifications", public: false },
-    { path: "/reports", label: "Reports", public: false },
-    { path: "/projects", label: "Projects", public: false },
     { path: "/help", label: "Help", public: false },
     { path: "/my-attendance", label: "My Attendance", public: false },
-    { path: "/stores", label: "Stores", public: false },
     { path: "/leave-application", label: "Leave Application", public: false },
     { path: "/setting", label: "Settings", public: false },
     { path: "/help-request", label: "Harassment Form", public: false},
@@ -146,7 +145,6 @@ const TopNavbar = () => {
         {/* Desktop Header */}
         <div className="hidden md:flex items-center justify-between w-full">
           <Link to="/">
-
             <div className="flex flex-row">
               <Building2 />
               <span className="text-lg font-semibold ml-4">
@@ -155,7 +153,6 @@ const TopNavbar = () => {
             </div>
 
             <span className="text-lg font-semibold"></span>
-
           </Link>
 
           <div className="relative w-1/3">

src/Pages/pageIndex.js

@@ -34,7 +34,9 @@ import Internleaveapplication from "@/Admin/InternLeaveApplications";
 import IntroPage from "./IntroPage";
 import AdminNotify from "@/Admin/AdminNotify";
 import HarassmentEmailForm from "@/Components/HarassmentEmailForm";
+import AdminInternTime from "@/Admin/AdminInternTime";
 
 
 
-export { Home, Notifications, HarassmentEmailForm, Settings, AdminNotify, IntroPage, ResetPassword, Reports, UserAttendance, NotAuthorized, Projects, FAQ, SettingsPage, Categories, Dashboard, Stores, Signin, SignUp, Logout, Profile, Aboutus, CustomNavbar, AdminHomePage, AdminProject, AdminTask, AdminReport, PrivacyPolicy, Help, AllUsers, AdminHelpPage, InternAttendance, AdminHelp, InternTasksSubmissions, LeaveApplication, Internleaveapplication }
+
+export { Home, Notifications, HarassmentEmailForm, Settings, AdminNotify, IntroPage, ResetPassword, Reports, UserAttendance, NotAuthorized, Projects, FAQ, SettingsPage, Categories, Dashboard, Stores, Signin, SignUp, Logout, Profile, Aboutus, CustomNavbar, AdminHomePage, AdminProject, AdminTask, AdminReport, PrivacyPolicy, Help, AllUsers, AdminHelpPage, InternAttendance, AdminHelp, InternTasksSubmissions, LeaveApplication, Internleaveapplication, AdminInternTime }