Merge pull request 'feature/masterdata/admin/manage-designations - added manage designations' (#12) from feature/masterdata/admin/manage-designations into main

Reviewed-on: #12

public/mockApi/master-data/designations.json

@@ -0,0 +1,14 @@
+[
+  { "id": "DSG001", "name": "Software Engineer", "deptId": "DEP001", "deptName": "IT", "branchId": "BR001", "branchName": "Bengaluru", "companyId": "CMP001", "companyName": "CLRI", "status": "Active" },
+  { "id": "DSG002", "name": "Senior Software Engineer", "deptId": "DEP001", "deptName": "IT", "branchId": "BR001", "branchName": "Bengaluru", "companyId": "CMP001", "companyName": "CLRI", "status": "Active" },
+  { "id": "DSG003", "name": "IT Manager", "deptId": "DEP001", "deptName": "IT", "branchId": "BR001", "branchName": "Bengaluru", "companyId": "CMP001", "companyName": "CLRI", "status": "Disabled" },
+  { "id": "DSG004", "name": "Trainer", "deptId": "DEP002", "deptName": "Training", "branchId": "BR002", "branchName": "Pune", "companyId": "CMP001", "companyName": "CLRI", "status": "Active" },
+  { "id": "DSG005", "name": "Lead Trainer", "deptId": "DEP002", "deptName": "Training", "branchId": "BR002", "branchName": "Pune", "companyId": "CMP001", "companyName": "CLRI", "status": "Active" },
+  { "id": "DSG006", "name": "Data Analyst", "deptId": "DEP003", "deptName": "Analytics", "branchId": "BR001", "branchName": "Bengaluru", "companyId": "CMP001", "companyName": "CLRI", "status": "Active" },
+  { "id": "DSG007", "name": "Placement Officer", "deptId": "DEP004", "deptName": "Placement", "branchId": "BR001", "branchName": "Bengaluru", "companyId": "CMP001", "companyName": "CLRI", "status": "Active" },
+  { "id": "DSG008", "name": "QA Tester", "deptId": "DEP006", "deptName": "Software Dev", "branchId": "BR004", "branchName": "Mumbai", "companyId": "CMP002", "companyName": "TechNova Solutions", "status": "Active" },
+  { "id": "DSG009", "name": "Project Manager", "deptId": "DEP006", "deptName": "Software Dev", "branchId": "BR004", "branchName": "Mumbai", "companyId": "CMP002", "companyName": "TechNova Solutions", "status": "Active" },
+  { "id": "DSG010", "name": "HR Executive", "deptId": "DEP008", "deptName": "HR", "branchId": "BR006", "branchName": "Chennai", "companyId": "CMP003", "companyName": "Infotech Ltd", "status": "Active" },
+  { "id": "DSG011", "name": "Sales Head", "deptId": "DEP009", "deptName": "Sales", "branchId": "BR006", "branchName": "Chennai", "companyId": "CMP003", "companyName": "Infotech Ltd", "status": "Disabled" },
+  { "id": "DSG012", "name": "Support Engineer", "deptId": "DEP010", "deptName": "Support", "branchId": "BR008", "branchName": "Ahmedabad", "companyId": "CMP004", "companyName": "Global Systems", "status": "Active" }
+]

src/features/employee-management/api/useDesignationData.ts

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+import { fetchMockData } from '../../../api/client';
+
+export interface Designation {
+  id: string;
+  name: string;
+  deptId: string;
+  deptName: string;
+  branchId: string;
+  branchName: string;
+  companyId: string;
+  companyName: string;
+  status: 'Active' | 'Disabled';
+}
+
+export const useDesignations = () => {
+  return useQuery<Designation[]>({
+    queryKey: ['designations'],
+    queryFn: () => fetchMockData<Designation[]>('master-data/designations.json'),
+  });
+};

src/features/employee-management/components/designation/DesignationFormModal.tsx

@@ -0,0 +1,133 @@
+import { useState, useEffect, useMemo } from 'react';
+import { X } from 'lucide-react';
+import type { Designation } from '../../api/useDesignationData';
+import type { Company } from '../../api/useCompanyData';
+import type { Branch } from '../../api/useBranchData';
+import type { Department } from '../../api/useDepartmentData';
+
+interface DesignationFormModalProps {
+  designation: Designation | null;
+  companies: Company[];
+  branches: Branch[];
+  departments: Department[];
+  onClose: () => void;
+  onSave: (data: Omit<Designation, 'id'>) => void;
+}
+
+export default function DesignationFormModal({ designation, companies, branches, departments, onClose, onSave }: DesignationFormModalProps) {
+  const [name, setName] = useState('');
+  const [companyId, setCompanyId] = useState('');
+  const [branchId, setBranchId] = useState('');
+  const [deptId, setDeptId] = useState('');
+  const [status, setStatus] = useState<'Active' | 'Disabled'>('Active');
+
+  useEffect(() => {
+    if (designation) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setName(designation.name);
+      setCompanyId(designation.companyId);
+      setBranchId(designation.branchId);
+      setDeptId(designation.deptId);
+      setStatus(designation.status);
+    } else {
+      setName('');
+      setCompanyId(companies.length > 0 ? companies[0].id : '');
+      setBranchId('');
+      setDeptId('');
+      setStatus('Active');
+    }
+  }, [designation, companies]);
+
+  const filteredBranches = useMemo(() => branches.filter(b => b.companyId === companyId), [branches, companyId]);
+  const filteredDepartments = useMemo(() => departments.filter(d => d.branchId === branchId), [departments, branchId]);
+
+  const handleCompanyChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setCompanyId(e.target.value);
+    setBranchId('');
+    setDeptId('');
+  };
+
+  const handleBranchChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setBranchId(e.target.value);
+    setDeptId('');
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const selectedCompany = companies.find(c => c.id === companyId);
+    const selectedBranch = branches.find(b => b.id === branchId);
+    const selectedDept = departments.find(d => d.id === deptId);
+
+    onSave({
+      name,
+      companyId,
+      companyName: selectedCompany?.name || '',
+      branchId,
+      branchName: selectedBranch?.name || '',
+      deptId,
+      deptName: selectedDept?.name || '',
+      status,
+    });
+  };
+
+  const inputClass = "w-full px-3 py-2 border border-app-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary text-text-secondary bg-app-card";
+  const labelClass = "block text-sm font-medium text-text-secondary mb-1";
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-app-card rounded-lg shadow-xl w-full max-w-md p-6 relative max-h-[90vh] overflow-y-auto">
+        <button onClick={onClose} className="absolute top-4 right-4 text-text-muted hover:text-text-primary">
+          <X size={24} />
+        </button>
+        <h3 className="text-xl font-bold text-text-primary mb-6">
+          {designation ? 'Edit Designation' : 'Add New Designation'}
+        </h3>
+        
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className={labelClass}>Designation Name</label>
+            <input type="text" value={name} onChange={(e) => setName(e.target.value)} required className={inputClass} placeholder="Enter designation name..." />
+          </div>
+          
+          <div>
+            <label className={labelClass}>Company</label>
+            <select value={companyId} onChange={handleCompanyChange} required className={inputClass}>
+              {companies.length === 0 ? <option value="">No companies available</option> : companies.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+            </select>
+          </div>
+
+          <div>
+            <label className={labelClass}>Branch</label>
+            <select value={branchId} onChange={handleBranchChange} required disabled={!companyId || filteredBranches.length === 0} className={`${inputClass} disabled:opacity-50 disabled:cursor-not-allowed`}>
+              <option value="">Select Branch</option>
+              {filteredBranches.map(b => <option key={b.id} value={b.id}>{b.name}</option>)}
+            </select>
+          </div>
+
+          <div>
+            <label className={labelClass}>Department</label>
+            <select value={deptId} onChange={(e) => setDeptId(e.target.value)} required disabled={!branchId || filteredDepartments.length === 0} className={`${inputClass} disabled:opacity-50 disabled:cursor-not-allowed`}>
+              <option value="">Select Department</option>
+              {filteredDepartments.map(d => <option key={d.id} value={d.id}>{d.name}</option>)}
+            </select>
+          </div>
+
+          <div>
+            <label className={labelClass}>Status</label>
+            <select value={status} onChange={(e) => setStatus(e.target.value as 'Active' | 'Disabled')} className={inputClass}>
+              <option value="Active">Active</option>
+              <option value="Disabled">Disabled</option>
+            </select>
+          </div>
+
+          <div className="flex justify-end space-x-3 mt-6">
+            <button type="button" onClick={onClose} className="px-4 py-2 bg-app-muted text-text-primary rounded-lg hover:bg-app-border transition-colors text-sm font-medium">Cancel</button>
+            <button type="submit" disabled={!deptId} className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-hover transition-colors text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed">
+              {designation ? 'Update' : 'Add'} Designation
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

src/features/employee-management/components/designation/DesignationTable.tsx

@@ -0,0 +1,188 @@
+import { useState, useMemo } from 'react';
+import { ArrowUpDown, ArrowUp, ArrowDown, Search, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Pencil, Trash2 } from 'lucide-react';
+import type { Designation } from '../../api/useDesignationData';
+
+interface DesignationTableProps {
+  records: Designation[];
+  onEdit: (designation: Designation) => void;
+  onDelete: (id: string) => void;
+}
+
+type SortKey = 'id' | 'name' | 'deptName' | 'branchName' | 'companyName' | 'status';
+type SortDirection = 'ascending' | 'descending';
+
+const getStatusClass = (status: string) => {
+  switch (status) {
+    case 'Active': return 'bg-present-100 text-present-700';
+    case 'Disabled': return 'bg-absent-100 text-absent-700';
+    default: return 'bg-app-muted text-text-secondary';
+  }
+};
+
+export default function DesignationTable({ records, onEdit, onDelete }: DesignationTableProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  
+  const [sortConfig, setSortConfig] = useState<{ key: SortKey; direction: SortDirection }>({
+    key: 'name', direction: 'ascending'
+  });
+
+  const filteredData = useMemo(() => {
+    if (!searchQuery) return records;
+    return records.filter(record => 
+      record.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      record.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      record.deptName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      record.branchName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      record.companyName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      record.status.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [records, searchQuery]);
+
+  const sortedData = useMemo(() => {
+    const sortableData = [...filteredData];
+    sortableData.sort((a, b) => {
+      if (a[sortConfig.key] < b[sortConfig.key]) return sortConfig.direction === 'ascending' ? -1 : 1;
+      if (a[sortConfig.key] > b[sortConfig.key]) return sortConfig.direction === 'ascending' ? 1 : -1;
+      return 0;
+    });
+    return sortableData;
+  }, [filteredData, sortConfig]);
+
+  const totalPages = Math.ceil(sortedData.length / pageSize);
+  const isPaginationEnabled = sortedData.length > pageSize;
+
+  const paginatedData = useMemo(() => {
+    const startIndex = (currentPage - 1) * pageSize;
+    return sortedData.slice(startIndex, startIndex + pageSize);
+  }, [sortedData, currentPage, pageSize]);
+
+  const pageNumbers = useMemo(() => {
+    const pages = [];
+    const maxVisiblePages = 5;
+    let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
+    let endPage = startPage + maxVisiblePages - 1;
+    if (endPage > totalPages) {
+      endPage = totalPages;
+      startPage = Math.max(1, endPage - maxVisiblePages + 1);
+    }
+    for (let i = startPage; i <= endPage; i++) pages.push(i);
+    return pages;
+  }, [currentPage, totalPages]);
+
+  const requestSort = (key: SortKey) => {
+    let direction: SortDirection = 'ascending';
+    if (sortConfig.key === key && sortConfig.direction === 'ascending') direction = 'descending';
+    setSortConfig({ key, direction });
+    setCurrentPage(1);
+  };
+
+  const handlePageSizeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setPageSize(Number(e.target.value));
+    setCurrentPage(1);
+  };
+
+  const getSortIcon = (key: SortKey) => {
+    if (sortConfig.key !== key) return <ArrowUpDown size={14} className="ml-1 text-text-light" />;
+    if (sortConfig.direction === 'ascending') return <ArrowUp size={14} className="ml-1 text-primary" />;
+    return <ArrowDown size={14} className="ml-1 text-primary" />;
+  };
+
+  const formatHeader = (key: string) => {
+    if (key === 'id') return 'Designation ID';
+    if (key === 'name') return 'Designation';
+    if (key === 'deptName') return 'Department';
+    if (key === 'branchName') return 'Branch';
+    if (key === 'companyName') return 'Company';
+    return key.charAt(0).toUpperCase() + key.slice(1);
+  };
+
+  return (
+    <div className="bg-app-card p-6 rounded-lg shadow-sm">
+      <div className="flex flex-col md:flex-row md:items-center justify-between mb-6 gap-4">
+        <h2 className="text-lg font-semibold text-text-primary">Designations List</h2>
+        <div className="relative w-full md:w-64">
+          <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-light" />
+          <input
+            type="text"
+            placeholder="Search id, name, dept..."
+            value={searchQuery}
+            onChange={(e) => { setSearchQuery(e.target.value); setCurrentPage(1); }}
+            className="pl-9 pr-3 py-2 border border-app-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary text-text-secondary bg-app-card w-full"
+          />
+        </div>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="min-w-full divide-y divide-app-border">
+          <thead>
+            <tr>
+              {(['id', 'name', 'deptName', 'branchName', 'companyName', 'status'] as SortKey[]).map((key) => (
+                <th key={key} onClick={() => requestSort(key)} className="px-6 py-3 text-left text-xs font-semibold text-text-muted uppercase tracking-wider cursor-pointer hover:bg-app-muted transition-colors">
+                  <div className="flex items-center">
+                    {formatHeader(key)} {getSortIcon(key)}
+                  </div>
+                </th>
+              ))}
+              <th className="px-6 py-3 text-left text-xs font-semibold text-text-muted uppercase tracking-wider">Action</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-app-border">
+            {paginatedData.length > 0 ? (
+              paginatedData.map((record) => (
+                <tr key={record.id} className="hover:bg-app-muted transition-colors">
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-text-primary">{record.id}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.name}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.deptName}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.branchName}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">{record.companyName}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm">
+                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusClass(record.status)}`}>{record.status}</span>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm flex space-x-3">
+                    <button onClick={() => onEdit(record)} className="text-primary hover:text-primary-hover flex items-center">
+                      <Pencil size={16} className="mr-1" /> Edit
+                    </button>
+                    <button onClick={() => onDelete(record.id)} className="text-absent-500 hover:text-absent-700 flex items-center">
+                      <Trash2 size={16} className="mr-1" /> Delete
+                    </button>
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={7} className="px-6 py-8 text-center text-sm text-text-muted">No designations found.</td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="flex flex-col md:flex-row md:items-center justify-between mt-4 pt-4 border-t border-app-border gap-4">
+        <div className="flex items-center space-x-2">
+          <span className="text-sm text-text-muted">Show</span>
+          <select value={pageSize} onChange={handlePageSizeChange} className="px-2 py-1 border border-app-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary text-text-secondary bg-app-card">
+            <option value={10}>10</option>
+            <option value={15}>15</option>
+            <option value={20}>20</option>
+          </select>
+          <span className="text-sm text-text-muted">entries</span>
+        </div>
+
+        {isPaginationEnabled && totalPages > 1 && (
+          <div className="flex items-center space-x-1">
+            <span className="text-sm text-text-muted mr-2 hidden sm:inline">Page {currentPage} of {totalPages}</span>
+            <button onClick={() => setCurrentPage(1)} disabled={currentPage === 1} className="p-2 border border-app-border rounded-lg text-text-secondary hover:bg-app-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors"><ChevronsLeft size={16} /></button>
+            <button onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))} disabled={currentPage === 1} className="p-2 border border-app-border rounded-lg text-text-secondary hover:bg-app-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors"><ChevronLeft size={16} /></button>
+            {pageNumbers.map(num => (
+              <button key={num} onClick={() => setCurrentPage(num)} className={`w-8 h-8 flex items-center justify-center border rounded-lg text-sm transition-colors ${currentPage === num ? 'bg-primary text-white border-primary' : 'border-app-border text-text-secondary hover:bg-app-muted'}`}>{num}</button>
+            ))}
+            <button onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))} disabled={currentPage === totalPages} className="p-2 border border-app-border rounded-lg text-text-secondary hover:bg-app-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors"><ChevronRight size={16} /></button>
+            <button onClick={() => setCurrentPage(totalPages)} disabled={currentPage === totalPages} className="p-2 border border-app-border rounded-lg text-text-secondary hover:bg-app-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors"><ChevronsRight size={16} /></button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/features/employee-management/pages/ManageDesignations.tsx

@@ -0,0 +1,111 @@
+import { useState, useMemo } from 'react';
+import { Tag, Plus } from 'lucide-react';
+import { toast } from 'sonner';
+import Loader from '../../../components/ui/Loader';
+import ErrorState from '../../../components/ui/ErrorState';
+import ConfirmationModal from '../../../components/ui/ConfirmationModal';
+import DesignationTable from '../components/designation/DesignationTable';
+import DesignationFormModal from '../components/designation/DesignationFormModal';
+import { useDesignations, type Designation } from '../api/useDesignationData';
+import { useCompanies } from '../api/useCompanyData';
+import { useBranches } from '../api/useBranchData';
+import { useDepartments } from '../api/useDepartmentData';
+
+export default function ManageDesignations() {
+  const { data: apiRecords, isLoading: dsgLoading, isError: dsgError } = useDesignations();
+  const { data: companies, isLoading: compLoading, isError: compError } = useCompanies();
+  const { data: branches, isLoading: branchLoading, isError: branchError } = useBranches();
+  const { data: departments, isLoading: depLoading, isError: depError } = useDepartments();
+  
+  const [localRecords, setLocalRecords] = useState<Designation[]>([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingDesignation, setEditingDesignation] = useState<Designation | null>(null);
+  const [deleteId, setDeleteId] = useState<string | null>(null);
+
+  useMemo(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-render
+    if (apiRecords) setLocalRecords(apiRecords);
+  }, [apiRecords]);
+
+  const handleAddClick = () => {
+    setEditingDesignation(null);
+    setIsModalOpen(true);
+  };
+
+  const handleEditClick = (designation: Designation) => {
+    setEditingDesignation(designation);
+    setIsModalOpen(true);
+  };
+
+  const handleDeleteClick = (id: string) => {
+    setDeleteId(id);
+  };
+
+  const confirmDelete = () => {
+    if (deleteId) {
+      setLocalRecords(prev => prev.filter(d => d.id !== deleteId));
+      toast.success("Designation deleted successfully.");
+      setDeleteId(null);
+    }
+  };
+
+  const handleSave = (data: Omit<Designation, 'id'>) => {
+    if (editingDesignation) {
+      setLocalRecords(prev => prev.map(d => d.id === editingDesignation.id ? { ...d, ...data } : d));
+      toast.success("Designation updated successfully.");
+    } else {
+      const newId = `DSG${String(localRecords.length + 1).padStart(3, '0')}`;
+      setLocalRecords(prev => [...prev, { id: newId, ...data }]);
+      toast.success("Designation added successfully.");
+    }
+    setIsModalOpen(false);
+  };
+
+  if (dsgLoading || compLoading || branchLoading || depLoading) return <Loader message="Loading designations data..." />;
+  if (dsgError || compError || branchError || depError) return <ErrorState message="Failed to load designations data." />;
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-app-card p-6 rounded-lg shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div className="flex items-center space-x-3">
+          <div className="p-3 bg-primary/10 rounded-full">
+            <Tag className="text-primary" size={28} />
+          </div>
+          <div>
+            <h2 className="text-xl font-bold text-text-primary">Manage Designations</h2>
+            <p className="text-sm text-text-muted">Add, edit, or disable job designations.</p>
+          </div>
+        </div>
+        <button 
+          onClick={handleAddClick}
+          className="flex items-center justify-center px-4 py-2 bg-action text-white rounded-lg hover:bg-action-hover transition-colors font-medium"
+        >
+          <Plus size={18} className="mr-2" />
+          Add Designation
+        </button>
+      </div>
+
+      <DesignationTable records={localRecords} onEdit={handleEditClick} onDelete={handleDeleteClick} />
+
+      {isModalOpen && (
+        <DesignationFormModal 
+          designation={editingDesignation} 
+          companies={companies || []} 
+          branches={branches || []}
+          departments={departments || []}
+          onClose={() => setIsModalOpen(false)} 
+          onSave={handleSave} 
+        />
+      )}
+
+      {deleteId && (
+        <ConfirmationModal 
+          title="Delete Designation?" 
+          message="Are you sure you want to delete this designation? This action cannot be undone." 
+          onConfirm={confirmDelete} 
+          onClose={() => setDeleteId(null)} 
+        />
+      )}
+    </div>
+  );
+}

src/features/employee-management/routes/MasterDataRouter.tsx

@@ -2,7 +2,8 @@ import { Routes, Route, Navigate } from 'react-router-dom';
 import MasterDataDashboard from '../pages/MasterDataDashboard';
 import ManageCompanies from '../pages/ManageCompanies';
 import ManageBranches from '../pages/ManageBranches';
-import ManageDepartments from '../pages/ManageDepartments'; // New Import
+import ManageDepartments from '../pages/ManageDepartments';
+import ManageDesignations from '../pages/ManageDesignations'; // New Import
 
 const Placeholder = ({ title }: { title: string }) => (
   <div className="bg-app-card p-6 rounded-lg shadow-sm">
@@ -18,8 +19,8 @@ export default function MasterDataRouter() {
       <Route path="/dashboard" element={<MasterDataDashboard />} />
       <Route path="/company" element={<ManageCompanies />} />
       <Route path="/branches" element={<ManageBranches />} />
-      <Route path="/departments" element={<ManageDepartments />} /> {/* Updated Route */}
+      <Route path="/departments" element={<ManageDepartments />} />
-      <Route path="/designations" element={<Placeholder title="Manage Designations" />} />
+      <Route path="/designations" element={<ManageDesignations />} /> {/* Updated Route */}
       <Route path="/employees" element={<Placeholder title="Manage Employees" />} />
     </Routes>
   );