Schedule ui

src/ui/App.tsx

@@ -94,6 +94,7 @@ import Timesheets from "./pages/Timesheets/Timesheets";
 import Settings from "./pages/Settings/Settings";
 import HelpSupport from "./pages/HelpSupport/HelpSupport";
 import Vpn from "./pages/Vpn/Vpn";
+import Schedule from "./pages/Schedule/Schedule";
 
 
 const App: React.FC = () => {
@@ -140,6 +141,7 @@ const App: React.FC = () => {
           <Route path="settings" element={<Settings />} />
           <Route path="vpn" element={<Vpn />} />
           <Route path="help-support" element={<HelpSupport />} />
+          <Route path="schedule" element={<Schedule/>} />
         </Route>
 
         {/* Default Redirect */}

src/ui/layout/DashboardLayout.tsx

@@ -26,6 +26,7 @@ import {
   Play,
   ChevronUp,
   GlobeLock,
+  ClipboardClock,
 } from "lucide-react";
 import { useActiveAppTracker } from "../hooks/useActiveAppTracker";
 import { useDispatch, useSelector } from "react-redux";
@@ -111,6 +112,7 @@ const DashboardLayout = () => {
     { label: "Dashboard", path: "/dashboard", icon: <Home size={18} />, exact: true },
     { label: "Timesheet", path: "/dashboard/timesheet", icon: <TimerIcon size={18} /> },
     { label: "Leave & Adjust", path: "/dashboard/leave-adjustments", icon: <CalendarDays size={18} /> },
+    { label: "Schedule", path: "/dashboard/schedule", icon: <ClipboardClock size={18} />},
     { label: "Settings", path: "/dashboard/settings", icon: <SettingsIcon size={18} /> },
     { label: "VPN", path: "/dashboard/vpn", icon: <GlobeLock size={18} /> },
     { label: "Help & Support", path: "/dashboard/help-support", icon: <HelpCircleIcon size={18} /> },

src/ui/pages/Schedule/Schedule.tsx

@@ -0,0 +1,100 @@
+const Schedule = () => {
+    const rows = [
+        {
+            period: "Oct 25, 2025 to Nov 07, 2025",
+            cutoff: "Nov 11, 2025 05:29:59 AM",
+            payDate: "Nov 14, 2025"
+        },
+        {
+            period: "Nov 08, 2025 to Nov 21, 2025",
+            cutoff: "Nov 25, 2025 05:29:59 AM",
+            payDate: "Nov 28, 2025"
+        },
+        {
+            period: "Nov 22, 2025 to Dec 05, 2025",
+            cutoff: "Dec 09, 2025 05:29:59 AM",
+            payDate: "Dec 12, 2025"
+        },
+        {
+            period: "Dec 06, 2025 to Dec 19, 2025",
+            cutoff: "Dec 23, 2025 05:29:59 AM",
+            payDate: "Dec 26, 2025"
+        },
+        {
+            period: "Dec 20, 2025 to Jan 02, 2026",
+            cutoff: "Jan 06, 2026 05:29:59 AM",
+            payDate: "Jan 09, 2026"
+        },
+        {
+            period: "Jan 03, 2026 to Jan 16, 2026",
+            cutoff: "Jan 20, 2026 05:29:59 AM",
+            payDate: "Jan 23, 2026"
+        },
+        {
+            period: "Jan 17, 2026 to Jan 30, 2026",
+            cutoff: "Feb 03, 2026 05:29:59 AM",
+            payDate: "Feb 06, 2026"
+        },
+        {
+            period: "Jan 31, 2026 to Feb 13, 2026",
+            cutoff: "Feb 17, 2026 05:29:59 AM",
+            payDate: "Feb 20, 2026"
+        },
+        {
+            period: "Feb 14, 2026 to Feb 27, 2026",
+            cutoff: "Mar 03, 2026 05:29:59 AM",
+            payDate: "Mar 06, 2026"
+        },
+        {
+            period: "Feb 28, 2026 to Mar 13, 2026",
+            cutoff: "Mar 17, 2026 05:29:59 AM",
+            payDate: "Mar 20, 2026"
+        }
+    ];
+
+    return (
+        <>
+            <div className="flex flex-col gap-2 max-h-screen">
+                {/* Header */}
+                <div className="flex items-center justify-between">
+                    <h2 className="text-md font-bold">Schedules</h2>
+                </div>
+
+                <div className="overflow-y-auto rounded-box border border-base-content/10 bg-base-100 shadow-md max-h-[80vh] min-h-[83vh] no-scrollbar">
+
+                    {/* ⭐ FIXED: Horizontal scroll wrapper */}
+                    <div className="overflow-x-auto w-full no-scrollbar">
+                        <table className="table table-zebra w-full text-[12px] min-w-[600px]">
+                            <thead className="sticky top-0 bg-base-200 z-10">
+                                <tr>
+                                    <th>#</th>
+                                    <th>Period</th>
+                                    <th>Cutoff Time</th>
+                                    <th>Pay Date</th>
+                                </tr>
+                            </thead>
+
+                            <tbody>
+                                {rows.map((row, index) => (
+                                    <tr key={index}>
+                                        <td>{index + 1}</td>
+                                        <td>{row.period}</td>
+                                        <td>
+                                            {row.cutoff}
+                                            <br />
+                                            <span className="text-gray-500 text-[11px]">(Asia/Calcutta)</span>
+                                        </td>
+                                        <td>{row.payDate}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default Schedule;