zanewalker/EmployeeManagementSystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

(Feat-Fix): Type Fixes, sloppy import fixes, fix dynamic activity fetching and more

Browse Source
This commit is contained in:
Zane Walker
2025-12-21 07:49:37 +00:00
parent 865e0bf00e
commit 6cc9ebdcf7
17 changed files with 96 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.tsx
View File

@@ -1,5 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { AuthProvider, useAuth } from "./contexts/AuthContext.tsx"; import { AuthProvider } from "./contexts/AuthContext.tsx";
import { useAuth } from "./contexts/authContext.ts";
import { Sidebar } from "./components/layout/Sidebar.tsx"; import { Sidebar } from "./components/layout/Sidebar.tsx";
import { Header } from "./components/layout/Header.tsx"; import { Header } from "./components/layout/Header.tsx";
import { DashboardPage } from "./pages/DashboardPage.tsx"; import { DashboardPage } from "./pages/DashboardPage.tsx";

14
src/components/layout/Header.tsx
View File

@@ -15,7 +15,7 @@ import {
User, User,
X, X,
} from "lucide-react"; } from "lucide-react";
import { useAuth } from "../../contexts/AuthContext.tsx"; import { useAuth } from "../../contexts/authContext.ts";
import { useDepartments } from "../../hooks/useDepartments.ts"; import { useDepartments } from "../../hooks/useDepartments.ts";
import { api } from "../../services/api.ts"; import { api } from "../../services/api.ts";
import type { User as UserType } from "../../types.ts"; import type { User as UserType } from "../../types.ts";
@@ -100,7 +100,7 @@ const ProfilePopup: React.FC<ProfilePopupProps> = (
<div className="bg-gradient-to-r from-teal-600 to-teal-500 px-6 py-4"> <div className="bg-gradient-to-r from-teal-600 to-teal-500 px-6 py-4">
<div className="flex justify-between items-start"> <div className="flex justify-between items-start">
<div className="flex-1" /> <div className="flex-1" />
<button <button type="button"
onClick={onClose} onClick={onClose}
className="text-white/80 hover:text-white hover:bg-white/20 rounded-full p-1 transition-colors" className="text-white/80 hover:text-white hover:bg-white/20 rounded-full p-1 transition-colors"
> >
@@ -167,7 +167,7 @@ const ProfilePopup: React.FC<ProfilePopupProps> = (
{/* Personal & Bank Details Section - for Employee and Contractor */} {/* Personal & Bank Details Section - for Employee and Contractor */}
{isEmployeeOrContractor && ( {isEmployeeOrContractor && (
<button <button type="button"
onClick={() => setShowDetails(!showDetails)} onClick={() => setShowDetails(!showDetails)}
className="w-full flex items-center justify-between p-3 bg-teal-50 hover:bg-teal-100 rounded-xl transition-colors" className="w-full flex items-center justify-between p-3 bg-teal-50 hover:bg-teal-100 rounded-xl transition-colors"
> >
@@ -277,7 +277,7 @@ const ProfilePopup: React.FC<ProfilePopupProps> = (
)} )}
{/* Permissions Section */} {/* Permissions Section */}
<button <button type="button"
onClick={() => setShowPermissions(!showPermissions)} onClick={() => setShowPermissions(!showPermissions)}
className="w-full flex items-center justify-between p-3 bg-amber-50 hover:bg-amber-100 rounded-xl transition-colors" className="w-full flex items-center justify-between p-3 bg-amber-50 hover:bg-amber-100 rounded-xl transition-colors"
> >
@@ -321,7 +321,7 @@ const ProfilePopup: React.FC<ProfilePopupProps> = (
{/* Sign Out Button */} {/* Sign Out Button */}
<div className="px-6 pb-4"> <div className="px-6 pb-4">
<button <button type="button"
onClick={onLogout} onClick={onLogout}
className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-red-50 hover:bg-red-100 text-red-600 rounded-xl transition-colors font-medium" className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-red-50 hover:bg-red-100 text-red-600 rounded-xl transition-colors font-medium"
> >
@@ -351,12 +351,12 @@ export const Header: React.FC = () => {
</h1> </h1>
</div> </div>
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<button className="p-2 text-gray-600 hover:bg-gray-100 rounded-full relative"> <button type="button" className="p-2 text-gray-600 hover:bg-gray-100 rounded-full relative">
<Bell size={20} /> <Bell size={20} />
<span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"> <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full">
</span> </span>
</button> </button>
<button <button type="button"
onClick={() => setIsProfileOpen(!isProfileOpen)} onClick={() => setIsProfileOpen(!isProfileOpen)}
className="w-10 h-10 bg-teal-600 rounded-full flex items-center justify-center text-white font-medium hover:bg-teal-700" className="w-10 h-10 bg-teal-600 rounded-full flex items-center justify-center text-white font-medium hover:bg-teal-700"
> >

4
src/components/layout/Sidebar.tsx
View File

@@ -12,7 +12,7 @@ import {
Scale, Scale,
Users, Users,
} from "lucide-react"; } from "lucide-react";
import { useAuth } from "../../contexts/AuthContext.tsx"; import { useAuth } from "../../contexts/authContext.ts";
interface SidebarItemProps { interface SidebarItemProps {
icon: React.ElementType; icon: React.ElementType;
@@ -24,7 +24,7 @@ interface SidebarItemProps {
const SidebarItem: React.FC<SidebarItemProps> = ( const SidebarItem: React.FC<SidebarItemProps> = (
{ icon: Icon, label, active, onClick }, { icon: Icon, label, active, onClick },
) => ( ) => (
<button <button type="button"
onClick={onClick} onClick={onClick}
className={`w-full flex items-center space-x-3 px-6 py-4 cursor-pointer transition-colors duration-200 outline-none focus:outline-none ${ className={`w-full flex items-center space-x-3 px-6 py-4 cursor-pointer transition-colors duration-200 outline-none focus:outline-none ${
active active

3
src/contexts/AuthContext.tsx
View File

@@ -3,9 +3,6 @@ import { api } from "../services/api.ts";
import type { User } from "../types.ts"; import type { User } from "../types.ts";
import { AuthContext } from "./authContext.ts"; import { AuthContext } from "./authContext.ts";
// Re-export useAuth for convenience
export { useAuth } from "./authContext.ts";
interface AuthProviderProps { interface AuthProviderProps {
children: ReactNode; children: ReactNode;
} }

2
src/contexts/authContext.ts
View File

@@ -1,5 +1,5 @@
import { createContext, useContext } from "react"; import { createContext, useContext } from "react";
import type { User } from "../types"; import type { User } from "../types.ts";
export interface AuthContextType { export interface AuthContextType {
user: User | null; user: User | null;

14
src/hooks/useActivities.ts
View File

@@ -8,14 +8,18 @@ export const useActivities = (subDepartmentId?: string | number) => {
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const fetchActivities = useCallback(async () => { const fetchActivities = useCallback(async () => {
// Don't fetch if no subDepartmentId - return empty array
if (!subDepartmentId) {
setActivities([]);
return;
}
setLoading(true); setLoading(true);
setError(null); setError(null);
try { try {
const params: { subDepartmentId?: number; departmentId?: number } = {}; const data = await api.getActivities({
if (subDepartmentId) { subDepartmentId: Number(subDepartmentId),
params.subDepartmentId = Number(subDepartmentId); });
}
const data = await api.getActivities(params);
setActivities(data); setActivities(data);
} catch (err) { } catch (err) {
setError( setError(

2
src/main.tsx
View File

@@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import "./index.css"; import "./index.css";
import App from "./App"; import App from "./App.tsx";
createRoot(document.getElementById("root")!).render( createRoot(document.getElementById("root")!).render(
<React.StrictMode> <React.StrictMode>

2
src/pages/ActivitiesPage.tsx
View File

@@ -19,7 +19,7 @@ import { Button } from "../components/ui/Button.tsx";
import { Input, Select } from "../components/ui/Input.tsx"; import { Input, Select } from "../components/ui/Input.tsx";
import { useDepartments, useSubDepartments } from "../hooks/useDepartments.ts"; import { useDepartments, useSubDepartments } from "../hooks/useDepartments.ts";
import { useActivitiesByDepartment } from "../hooks/useActivities.ts"; import { useActivitiesByDepartment } from "../hooks/useActivities.ts";
import { useAuth } from "../contexts/AuthContext.tsx"; import { useAuth } from "../contexts/authContext.ts";
import { api } from "../services/api.ts"; import { api } from "../services/api.ts";
import { Activity, SubDepartment } from "../types.ts"; import { Activity, SubDepartment } from "../types.ts";

12
src/pages/AllRatesPage.tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useMemo, useState } from "react"; import React, { useCallback, useEffect, useMemo, useState } from "react";
import { Calendar, Eye, Filter, RefreshCw, Search } from "lucide-react"; import { Calendar, Eye, Filter, RefreshCw, Search } from "lucide-react";
import { Card, CardContent } from "../components/ui/Card.tsx"; import { Card, CardContent } from "../components/ui/Card.tsx";
import { import {
@@ -13,7 +13,7 @@ import { Button } from "../components/ui/Button.tsx";
import { Input, Select } from "../components/ui/Input.tsx"; import { Input, Select } from "../components/ui/Input.tsx";
import { api } from "../services/api.ts"; import { api } from "../services/api.ts";
import { useDepartments } from "../hooks/useDepartments.ts"; import { useDepartments } from "../hooks/useDepartments.ts";
import { useAuth } from "../contexts/AuthContext.tsx"; import { useAuth } from "../contexts/authContext.ts";
export const AllRatesPage: React.FC = () => { export const AllRatesPage: React.FC = () => {
const { user } = useAuth(); const { user } = useAuth();
@@ -41,7 +41,7 @@ export const AllRatesPage: React.FC = () => {
const isSuperAdmin = user?.role === "SuperAdmin"; const isSuperAdmin = user?.role === "SuperAdmin";
// Fetch all rates // Fetch all rates
const fetchAllRates = async () => { const fetchAllRates = useCallback(async () => {
setLoading(true); setLoading(true);
setError(""); setError("");
try { try {
@@ -60,13 +60,13 @@ export const AllRatesPage: React.FC = () => {
} finally { } finally {
setLoading(false); setLoading(false);
} }
}; }, [filters.departmentId, filters.startDate, filters.endDate]);
useEffect(() => { useEffect(() => {
if (isSuperAdmin) { if (isSuperAdmin) {
fetchAllRates(); fetchAllRates();
} }
}, [isSuperAdmin]); }, [isSuperAdmin, fetchAllRates]);
const handleFilterChange = ( const handleFilterChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>, e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
@@ -212,7 +212,7 @@ export const AllRatesPage: React.FC = () => {
<Button onClick={applyFilters} size="sm"> <Button onClick={applyFilters} size="sm">
Apply Filters Apply Filters
</Button> </Button>
<Button variant="outline" onClick={clearFilters} size="sm"> <Button variant="primary" onClick={clearFilters} size="sm">
Clear Clear
</Button> </Button>
</div> </div>

2
src/pages/AttendancePage.tsx
View File

@@ -27,7 +27,7 @@ import { Button } from "../components/ui/Button.tsx";
import { Input, Select } from "../components/ui/Input.tsx"; import { Input, Select } from "../components/ui/Input.tsx";
import { api } from "../services/api.ts"; import { api } from "../services/api.ts";
import { useEmployees } from "../hooks/useEmployees.ts"; import { useEmployees } from "../hooks/useEmployees.ts";
import { useAuth } from "../contexts/AuthContext.tsx"; import { useAuth } from "../contexts/authContext.ts";
import type { AttendanceStatus } from "../types.ts"; import type { AttendanceStatus } from "../types.ts";
export const AttendancePage: React.FC = () => { export const AttendancePage: React.FC = () => {

90
src/pages/DashboardPage.tsx
View File

@@ -26,7 +26,7 @@ import { Card, CardContent, CardHeader } from "../components/ui/Card.tsx";
import { useEmployees } from "../hooks/useEmployees.ts"; import { useEmployees } from "../hooks/useEmployees.ts";
import { useDepartments } from "../hooks/useDepartments.ts"; import { useDepartments } from "../hooks/useDepartments.ts";
import { useWorkAllocations } from "../hooks/useWorkAllocations.ts"; import { useWorkAllocations } from "../hooks/useWorkAllocations.ts";
import { useAuth } from "../contexts/AuthContext.tsx"; import { useAuth } from "../contexts/authContext.ts";
import { api } from "../services/api.ts"; import { api } from "../services/api.ts";
// Types for attendance hierarchy // Types for attendance hierarchy
@@ -260,8 +260,12 @@ export const DashboardPage: React.FC = () => {
? "Present" ? "Present"
: "Absent") : "Absent")
: undefined, : undefined,
inTime: empAttendance?.check_in_time?.substring(0, 5), inTime: empAttendance?.check_in_time
outTime: empAttendance?.check_out_time?.substring(0, 5), ? new Date(empAttendance.check_in_time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
: undefined,
outTime: empAttendance?.check_out_time
? new Date(empAttendance.check_out_time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
: undefined,
remark: empAttendance?.remark, remark: empAttendance?.remark,
children: [], children: [],
}; };
@@ -298,8 +302,12 @@ export const DashboardPage: React.FC = () => {
? "Present" ? "Present"
: "Absent") : "Absent")
: undefined, : undefined,
inTime: empAttendance?.check_in_time?.substring(0, 5), inTime: empAttendance?.check_in_time
outTime: empAttendance?.check_out_time?.substring(0, 5), ? new Date(empAttendance.check_in_time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
: undefined,
outTime: empAttendance?.check_out_time
? new Date(empAttendance.check_out_time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
: undefined,
remark: empAttendance?.remark, remark: empAttendance?.remark,
children: [], children: [],
}; };
@@ -369,8 +377,12 @@ export const DashboardPage: React.FC = () => {
? "Present" ? "Present"
: "Absent") : "Absent")
: undefined, : undefined,
inTime: empAttendance?.check_in_time?.substring(0, 5), inTime: empAttendance?.check_in_time
outTime: empAttendance?.check_out_time?.substring(0, 5), ? new Date(empAttendance.check_in_time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
: undefined,
outTime: empAttendance?.check_out_time
? new Date(empAttendance.check_out_time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
: undefined,
remark: empAttendance?.remark, remark: empAttendance?.remark,
children: [], children: [],
}; };
@@ -408,8 +420,12 @@ export const DashboardPage: React.FC = () => {
? "Present" ? "Present"
: "Absent") : "Absent")
: undefined, : undefined,
inTime: empAttendance?.check_in_time?.substring(0, 5), inTime: empAttendance?.check_in_time
outTime: empAttendance?.check_out_time?.substring(0, 5), ? new Date(empAttendance.check_in_time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
: undefined,
outTime: empAttendance?.check_out_time
? new Date(empAttendance.check_out_time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
: undefined,
remark: empAttendance?.remark, remark: empAttendance?.remark,
children: [], children: [],
}; };
@@ -599,8 +615,8 @@ export const DashboardPage: React.FC = () => {
</span> </span>
)} )}
</td> </td>
<td className="py-3 px-4 text-gray-600">{node.inTime || "-"}</td> <td className="py-3 px-4 text-gray-600 whitespace-nowrap">{node.inTime || "-"}</td>
<td className="py-3 px-4 text-gray-600">{node.outTime || "-"}</td> <td className="py-3 px-4 text-gray-600 whitespace-nowrap">{node.outTime || "-"}</td>
<td className="py-3 px-4 text-gray-500 text-sm"> <td className="py-3 px-4 text-gray-500 text-sm">
{node.remark || "-"} {node.remark || "-"}
</td> </td>
@@ -666,28 +682,28 @@ export const DashboardPage: React.FC = () => {
<table className="w-full"> <table className="w-full">
<thead> <thead>
<tr className="bg-gray-50 border-b border-gray-200"> <tr className="bg-gray-50 border-b border-gray-200">
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm min-w-[200px]">
Level / Name Level / Name
</th> </th>
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm whitespace-nowrap">
Dept Dept
</th> </th>
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm whitespace-nowrap">
Sub-Dept Sub-Dept
</th> </th>
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm whitespace-nowrap">
Activity Activity
</th> </th>
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm whitespace-nowrap">
Status Status
</th> </th>
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm whitespace-nowrap min-w-[120px]">
In Time In Time
</th> </th>
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm whitespace-nowrap min-w-[120px]">
Out Time Out Time
</th> </th>
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm whitespace-nowrap">
Remark Remark
</th> </th>
</tr> </tr>
@@ -1018,31 +1034,31 @@ export const DashboardPage: React.FC = () => {
<table className="w-full"> <table className="w-full">
<thead> <thead>
<tr className="bg-gray-50 border-b border-gray-200"> <tr className="bg-gray-50 border-b border-gray-200">
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm min-w-[200px]">
Contractor / Employee Contractor / Employee
</th> </th>
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm whitespace-nowrap">
Dept Dept
</th> </th>
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm whitespace-nowrap">
Sub-Dept Sub-Dept
</th> </th>
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm whitespace-nowrap">
Activity Activity
</th> </th>
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm whitespace-nowrap">
Rate (₹) Rate (₹)
</th> </th>
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm whitespace-nowrap">
Status Status
</th> </th>
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm whitespace-nowrap min-w-[120px]">
In Time In Time
</th> </th>
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm whitespace-nowrap min-w-[120px]">
Out Time Out Time
</th> </th>
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm whitespace-nowrap">
Remark Remark
</th> </th>
</tr> </tr>
@@ -1162,10 +1178,10 @@ export const DashboardPage: React.FC = () => {
</span> </span>
)} )}
</td> </td>
<td className="py-3 px-4 text-sm text-gray-600"> <td className="py-3 px-4 text-sm text-gray-600 whitespace-nowrap">
{emp.inTime || "-"} {emp.inTime || "-"}
</td> </td>
<td className="py-3 px-4 text-sm text-gray-600"> <td className="py-3 px-4 text-sm text-gray-600 whitespace-nowrap">
{emp.outTime || "-"} {emp.outTime || "-"}
</td> </td>
<td className="py-3 px-4 text-sm text-gray-500"> <td className="py-3 px-4 text-sm text-gray-500">
@@ -1651,19 +1667,19 @@ export const DashboardPage: React.FC = () => {
<table className="w-full"> <table className="w-full">
<thead> <thead>
<tr className="bg-gray-50 border-b border-gray-200"> <tr className="bg-gray-50 border-b border-gray-200">
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm min-w-[150px]">
Employee Employee
</th> </th>
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm whitespace-nowrap">
Today's Status Today's Status
</th> </th>
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm whitespace-nowrap min-w-[120px]">
Check In Check In
</th> </th>
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm whitespace-nowrap min-w-[120px]">
Check Out Check Out
</th> </th>
<th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm"> <th className="text-left py-3 px-4 font-semibold text-gray-600 text-sm whitespace-nowrap">
Current Work Current Work
</th> </th>
</tr> </tr>
@@ -1716,13 +1732,13 @@ export const DashboardPage: React.FC = () => {
: empAttendance?.status || "Absent"} : empAttendance?.status || "Absent"}
</span> </span>
</td> </td>
<td className="py-3 px-4 text-sm text-gray-600"> <td className="py-3 px-4 text-sm text-gray-600 whitespace-nowrap">
{empAttendance?.check_in_time {empAttendance?.check_in_time
? new Date(empAttendance.check_in_time) ? new Date(empAttendance.check_in_time)
.toLocaleTimeString() .toLocaleTimeString()
: "-"} : "-"}
</td> </td>
<td className="py-3 px-4 text-sm text-gray-600"> <td className="py-3 px-4 text-sm text-gray-600 whitespace-nowrap">
{empAttendance?.check_out_time {empAttendance?.check_out_time
? new Date(empAttendance.check_out_time) ? new Date(empAttendance.check_out_time)
.toLocaleTimeString() .toLocaleTimeString()

8
src/pages/LoginPage.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useAuth } from "../contexts/AuthContext.tsx"; import { useAuth } from "../contexts/authContext.ts";
import { import {
ArrowRight, ArrowRight,
CheckCircle, CheckCircle,
@@ -268,7 +268,7 @@ export const LoginPage: React.FC = () => {
{/* Modal */} {/* Modal */}
<div className="relative bg-slate-800/90 backdrop-blur-xl rounded-2xl shadow-2xl p-8 w-full max-w-md border border-white/10 animate-in fade-in zoom-in duration-200"> <div className="relative bg-slate-800/90 backdrop-blur-xl rounded-2xl shadow-2xl p-8 w-full max-w-md border border-white/10 animate-in fade-in zoom-in duration-200">
{/* Close button */} {/* Close button */}
<button <button type="button"
onClick={closeForgotModal} onClick={closeForgotModal}
className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors" className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
> >
@@ -336,7 +336,7 @@ export const LoginPage: React.FC = () => {
</form> </form>
{/* Back to login */} {/* Back to login */}
<button <button type="button"
onClick={closeForgotModal} onClick={closeForgotModal}
className="w-full mt-4 text-gray-400 hover:text-white text-sm transition-colors" className="w-full mt-4 text-gray-400 hover:text-white text-sm transition-colors"
> >
@@ -359,7 +359,7 @@ export const LoginPage: React.FC = () => {
{forgotEmail} {forgotEmail}
</span> </span>
</p> </p>
<button <button type="button"
onClick={closeForgotModal} onClick={closeForgotModal}
className="w-full bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white font-semibold py-4 rounded-xl shadow-lg transition-all duration-300" className="w-full bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white font-semibold py-4 rounded-xl shadow-lg transition-all duration-300"
> >

2
src/pages/RatesPage.tsx
View File

@@ -14,7 +14,7 @@ import { Input, Select } from "../components/ui/Input.tsx";
import { api } from "../services/api.ts"; import { api } from "../services/api.ts";
import { useDepartments, useSubDepartments } from "../hooks/useDepartments.ts"; import { useDepartments, useSubDepartments } from "../hooks/useDepartments.ts";
import { useActivities } from "../hooks/useActivities.ts"; import { useActivities } from "../hooks/useActivities.ts";
import { useAuth } from "../contexts/AuthContext.tsx"; import { useAuth } from "../contexts/authContext.ts";
export const RatesPage: React.FC = () => { export const RatesPage: React.FC = () => {
const [activeTab, setActiveTab] = useState<"list" | "add">("list"); const [activeTab, setActiveTab] = useState<"list" | "add">("list");

2
src/pages/ReportingPage.tsx
View File

@@ -19,7 +19,7 @@ import { Button } from "../components/ui/Button.tsx";
import { Input, Select } from "../components/ui/Input.tsx"; import { Input, Select } from "../components/ui/Input.tsx";
import { api } from "../services/api.ts"; import { api } from "../services/api.ts";
import { useDepartments } from "../hooks/useDepartments.ts"; import { useDepartments } from "../hooks/useDepartments.ts";
import { useAuth } from "../contexts/AuthContext.tsx"; import { useAuth } from "../contexts/authContext.ts";
import { import {
exportAllocationsToXLSX, exportAllocationsToXLSX,
exportWorkReportToXLSX, exportWorkReportToXLSX,

2
src/pages/StandardRatesPage.tsx
View File

@@ -22,7 +22,7 @@ import { Input, Select } from "../components/ui/Input.tsx";
import { api } from "../services/api.ts"; import { api } from "../services/api.ts";
import { useDepartments, useSubDepartments } from "../hooks/useDepartments.ts"; import { useDepartments, useSubDepartments } from "../hooks/useDepartments.ts";
import { useActivities } from "../hooks/useActivities.ts"; import { useActivities } from "../hooks/useActivities.ts";
import { useAuth } from "../contexts/AuthContext.tsx"; import { useAuth } from "../contexts/authContext.ts";
export const StandardRatesPage: React.FC = () => { export const StandardRatesPage: React.FC = () => {
const [activeTab, setActiveTab] = useState<"list" | "add" | "compare">( const [activeTab, setActiveTab] = useState<"list" | "add" | "compare">(

2
src/pages/UsersPage.tsx
View File

@@ -23,7 +23,7 @@ import { Button } from "../components/ui/Button.tsx";
import { Input, PasswordInput, Select } from "../components/ui/Input.tsx"; import { Input, PasswordInput, Select } from "../components/ui/Input.tsx";
import { useEmployees } from "../hooks/useEmployees.ts"; import { useEmployees } from "../hooks/useEmployees.ts";
import { useDepartments } from "../hooks/useDepartments.ts"; import { useDepartments } from "../hooks/useDepartments.ts";
import { useAuth } from "../contexts/AuthContext.tsx"; import { useAuth } from "../contexts/authContext.ts";
import { api } from "../services/api.ts"; import { api } from "../services/api.ts";
export const UsersPage: React.FC = () => { export const UsersPage: React.FC = () => {

10
src/pages/WorkAllocationPage.tsx
View File

@@ -1,6 +1,6 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { CheckCircle, Plus, RefreshCw, Search, Trash2 } from "lucide-react"; import { CheckCircle, Plus, RefreshCw, Search, Trash2 } from "lucide-react";
import { Card, CardContent } from "../components/ui/Card"; import { Card, CardContent } from "../components/ui/Card.tsx";
import { import {
Table, Table,
TableBody, TableBody,
@@ -15,7 +15,7 @@ import { useWorkAllocations } from "../hooks/useWorkAllocations.ts";
import { useDepartments, useSubDepartments } from "../hooks/useDepartments.ts"; import { useDepartments, useSubDepartments } from "../hooks/useDepartments.ts";
import { useEmployees } from "../hooks/useEmployees.ts"; import { useEmployees } from "../hooks/useEmployees.ts";
import { useActivities } from "../hooks/useActivities.ts"; import { useActivities } from "../hooks/useActivities.ts";
import { useAuth } from "../contexts/AuthContext.tsx"; import { useAuth } from "../contexts/authContext.ts";
import { api } from "../services/api.ts"; import { api } from "../services/api.ts";
export const WorkAllocationPage: React.FC = () => { export const WorkAllocationPage: React.FC = () => {
@@ -227,7 +227,7 @@ export const WorkAllocationPage: React.FC = () => {
<div className="border-b border-gray-200"> <div className="border-b border-gray-200">
<div className="flex space-x-8 px-6"> <div className="flex space-x-8 px-6">
{["create", "view", "summary"].map((tab) => ( {["create", "view", "summary"].map((tab) => (
<button <button type="button"
key={tab} key={tab}
onClick={() => setActiveTab(tab as any)} onClick={() => setActiveTab(tab as any)}
className={`py-4 px-2 border-b-2 font-medium text-sm ${ className={`py-4 px-2 border-b-2 font-medium text-sm ${
@@ -448,10 +448,10 @@ export const WorkAllocationPage: React.FC = () => {
</div> </div>
<div className="flex justify-end gap-4 mt-6"> <div className="flex justify-end gap-4 mt-6">
<Button variant="outline" onClick={() => setActiveTab("view")}> <Button variant="primary" onClick={() => setActiveTab("view")}>
Cancel Cancel
</Button> </Button>
<Button onClick={handleCreateAllocation} disabled={formLoading}> <Button variant="primary" onClick={handleCreateAllocation} disabled={formLoading}>
{formLoading ? "Creating..." : ( {formLoading ? "Creating..." : (
<> <>
<Plus size={16} className="mr-2" /> <Plus size={16} className="mr-2" />