{formData.createdAt ? \"Edit Employee\" : \"Add Employee\"}

\n {\n setCurrentView(\"list\");\n setSaveSuccess(false);\n setError(null);\n }}\n >\n ← Back to List\n \n

\n\n {saveSuccess &&

Employee saved successfully!

}\n {error &&

{error}

}\n\n

\n {/* Left Column */}\n

\n {/* Employee ID */}\n

\n \n Employee ID*\n \n \n

\n\n {/* First Name */}\n

\n \n First Name*\n \n \n

\n\n {/* Last Name (Father's Name) */}\n

\n Father's Name\n \n

\n\n {/* Username */}\n

\n \n Username*\n \n \n

\n\n {/* Password (only for new employees or if explicitly changed) */}\n

\n \n Password{(!formData.createdAt) && *}\n \n \n

\n\n {/* Role */}\n

\n \n Role*\n \n \n {ROLES.map((role) => (\n \n ))}\n \n

\n\n {/* Job Title */}\n

\n \n Job Title*\n \n \n

\n\n {/* Grade */}\n

\n Grade\n \n

\n\n {/* Sex */}\n

\n Sex\n \n \n \n \n \n \n

\n\n {/* Right Column */}\n

\n {/* Email */}\n

\n \n Email*\n \n \n

\n\n {/* Phone Number */}\n

\n \n Phone Number*\n \n \n

\n\n {/* Department */}\n

\n \n Department*\n \n \n

\n\n {/* Date of Employment */}\n

\n \n Date of Employment*\n \n \n

\n\n {/* Address */}\n

\n Address\n \n

\n\n {/* Supervisor - Required except for CEO */}\n

\n \n Supervisor{formData.role === \"CEO\" ? \"\" : *}\n \n \n \n {employees\n .filter(emp => emp.employeeId !== formData.employeeId && emp.role !== \"CEO\") // Exclude self and CEO\n .map(employee => (\n \n ))}\n \n

\n\n {/* Status */}\n

\n \n Status*\n \n \n \n \n \n

\n\n {/* Date of Birth */}\n

\n Date of Birth\n \n

\n\n \n

\n );\n\n const renderList = () => (\n

Employee List

\n {\n setFormData({ // Reset form for new employee\n employeeId: \"\",\n username: \"\",\n password: \"\",\n firstName: \"\",\n fatherName: \"\",\n role: \"Employee\",\n jobTitle: \"\",\n email: \"\",\n phoneNumber: \"\",\n department: \"\",\n dateOfEmployment: \"\",\n address: \"\",\n supervisor: \"\",\n sex: \"\",\n dateOfBirth: \"\",\n createdAt: \"\",\n updatedAt: \"\",\n grade: \"\",\n status: \"active\",\n });\n setCurrentView(\"edit\");\n setSaveSuccess(false);\n setError(null);\n }}\n >\n + Add New Employee\n \n

\n\n {saveSuccess &&

Operation completed successfully!

}\n {isLoading &&

Loading employees...

}\n {error &&

{error}

}\n\n {employees.length > 0\n ? (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {employees.map((employee, index) => (\n \n \n \n \n \n \n \n \n \n \n \n ))}\n \n

ID	Name	Username	Role	Department	Grade	Experience	Status	Actions
{employee.employeeId}	\n {employee.firstName} {employee.fatherName}\n	{employee.username}	{employee.role}	{employee.department}	{employee.grade \|\| \"-\"}	{calculateExperience(employee.dateOfEmployment)}	{employee.status}	\n canEditEmployee(employee) && handleEditEmployee(employee)}\n disabled={!canEditEmployee(employee)}\n >\n Edit\n \n canEditEmployee(employee) && handleDeleteEmployee(employee.employeeId)}\n disabled={!canEditEmployee(employee)}\n >\n Delete\n \n

\n )\n : (\n !isLoading &&

No employees found

\n )}\n

\n );\n\n return (\n

\n {currentView === \"list\" ? renderList() : renderForm()}\n

\n );\n};\n\nexport default SettingTab;","deleted","label",[172,154],"components","permalink","https://www.val.town/x/solomonferede/EEPPortal/code/components/setting.tsx","extension","actionData","errors"]