BhawanSingh
/
va-tracker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Schedule ui

This commit is contained in:
JaiPandey425 2025-11-27 19:32:04 +05:30
parent 35fa90705b
commit f1c66c6621
3 changed files with 104 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/ui/App.tsx
View File

@ -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 */}

2
src/ui/layout/DashboardLayout.tsx
View File

@ -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} /> },

100
src/ui/pages/Schedule/Schedule.tsx Normal file
View File

@ -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;