Skip to content

Commit f4fff35

Browse files
codermehrajcodermehraj
committed
added employee section in the Contractor manager dashborad
1 parent 97dd347 commit f4fff35

File tree

11 files changed

+862
-3
lines changed

11 files changed

+862
-3
lines changed

‎client/components/dashboard-componenets/mainContent/contractManagerContents/Employees.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { Button } from "@/components/ui/button";
2+
import EmptyFillContainer from "../../cards/EmptyFillContainer";
3+
import { Plus, Trash, Truck, Warehouse } from "lucide-react";
4+
import ContractLists from "@/components/dataTables/ContractLists";
5+
import ContractorLogTable from "@/components/dataTables/ContractorLogs";
6+
import { AddNewContractor } from "@/components/modals/ContractorControl/AddNewContractor";
7+
import { AddNewContractorManager } from "@/components/modals/ContractorControl/AddNewContractorManager";
8+
import CleanerLists from "@/components/dataTables/CleanerList";
9+
import { AddNewCleaner } from "@/components/modals/cleanerControl/AddNewCleaner";
10+
import CleanerLog from "@/components/dataTables/CleanerLog";
11+
import EmployeeList from "@/components/dataTables/EmployeeList";
12+
import EmployeeLogs from "@/components/dataTables/EmployeeLogs";
13+
import { AddNewEmployee } from "@/components/modals/cleanerControl/AddNewEmployee";
14+
15+
export default function EmployeePanel() {
16+
return (
17+
<main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6 max-h-[calc(100vh-60px)] overflow-scroll">
18+
<div className="flex items-center justify-between">
19+
<h1 className="text-lg font-semibold md:text-2xl hidden md:block">
20+
EMPLOYEE DATA
21+
</h1>
22+
<div className="flex-grow-1"></div>
23+
<div className="flex gap-2">
24+
<AddNewEmployee>
25+
<Button
26+
variant="outline"
27+
size="sm"
28+
className={`w-full bg-[#1A4D2E] text-white flex item-center`}
29+
>
30+
<Plus size={14} strokeWidth={3} className="mr-2" />
31+
ADD NEW CLEANER
32+
</Button>
33+
</AddNewEmployee>
34+
</div>
35+
</div>
36+
<div className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm">
37+
<div className="grid grid-cols-1 md:grid-cols-5 grid-flow-row gap-2 md:gap-4 w-full md:h-full max-h-max">
38+
<div className="md:col-span-3 min-h-48">
39+
<EmptyFillContainer className={`bg-[#F5EFE6]`}>
40+
<EmployeeList />
41+
</EmptyFillContainer>
42+
</div>
43+
<div className="md:col-span-2 min-h-48">
44+
<EmptyFillContainer>
45+
<EmployeeLogs />
46+
</EmptyFillContainer>
47+
</div>
48+
</div>
49+
</div>
50+
</main>
51+
);
52+
}

‎client/components/dashboard-componenets/sidebar/SidebarItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const SidebarItem = ({
1616
<div
1717
onClick={onclick}
1818
className={`flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary cursor-pointer ${
19-
active && ("text-primary bg-[" + "#1A4D2E" + "25]")
19+
active && ("text-primary bg-[#1A4D2E25]")
2020
}`}
2121
>
2222
{Icon && <Icon className="h-4 w-4" />}

‎client/components/dataTables/EmployeeList.tsx‎

Lines changed: 308 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,308 @@
1+
"use client";
2+
3+
import * as React from "react";
4+
import {
5+
CaretSortIcon,
6+
ChevronDownIcon,
7+
DotsHorizontalIcon,
8+
} from "@radix-ui/react-icons";
9+
10+
import { Button } from "@/components/ui/button";
11+
12+
import {
13+
ColumnDef,
14+
ColumnFiltersState,
15+
SortingState,
16+
VisibilityState,
17+
flexRender,
18+
getCoreRowModel,
19+
getFilteredRowModel,
20+
getPaginationRowModel,
21+
getSortedRowModel,
22+
useReactTable,
23+
} from "@tanstack/react-table";
24+
25+
import {
26+
DropdownMenu,
27+
DropdownMenuCheckboxItem,
28+
DropdownMenuContent,
29+
DropdownMenuItem,
30+
DropdownMenuLabel,
31+
DropdownMenuSeparator,
32+
DropdownMenuTrigger,
33+
} from "@/components/ui/dropdown-menu";
34+
import { Input } from "@/components/ui/input";
35+
import {
36+
Table,
37+
TableBody,
38+
TableCell,
39+
TableHead,
40+
TableHeader,
41+
TableRow,
42+
} from "@/components/ui/table";
43+
import useGetAllUser from "@/hooks/user_data/useGetAllUser";
44+
import { DeleteUserModal } from "../modals/userControls/DeleteUserModal";
45+
import { Copy, EditIcon, Plus } from "lucide-react";
46+
import { EditUserModal } from "../modals/userControls/EditUserInfoModal";
47+
import gettAllRoles from "@/hooks/user_data/useGetAllRole";
48+
import { Contractor, roleList } from "@/data/roles";
49+
import useGetAllSTS from "@/hooks/dataQuery/useGetAllSTS";
50+
import { EditSTSInfoModal } from "../modals/stsControl/EditSTSInfoModal";
51+
import { DeleteSTSModal } from "../modals/stsControl/DeleteSTSModal";
52+
import { ViewSTSInfoModal } from "../modals/stsControl/ViewSTSInfoModal";
53+
import { StsCreateModal } from "../modals/stsControl/StsModal";
54+
import useGetAllContractor from "@/hooks/dataQuery/useGetAllContractor";
55+
56+
57+
export const columns: ColumnDef<Contractor>[] = [
58+
{
59+
accessorKey: "name",
60+
header: ({ column }) => {
61+
return (
62+
<div className="flex justify-center items-center">
63+
<Button
64+
variant="ghost"
65+
className="text-center"
66+
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
67+
>
68+
Cleaner Name
69+
<CaretSortIcon className="ml-2 h-4 w-4" />
70+
</Button>
71+
</div>
72+
);
73+
},
74+
cell: ({ row }) => (
75+
<div className="text-center font-medium">{row.getValue("name")}</div>
76+
),
77+
},
78+
{
79+
accessorKey: "contactNumber",
80+
header: ({ column }) => {
81+
return (
82+
<div className="flex justify-center items-center">
83+
<Button
84+
variant="ghost"
85+
className="text-center"
86+
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
87+
>
88+
Contact
89+
<CaretSortIcon className="ml-2 h-4 w-4" />
90+
</Button>
91+
</div>
92+
);
93+
},
94+
cell: ({ row }) => (
95+
<div className="text-center font-medium">
96+
{row.getValue("contactNumber")}
97+
</div>
98+
),
99+
},
100+
{
101+
accessorKey: "workforceSize",
102+
header: ({ column }) => {
103+
return (
104+
<div className="flex justify-center items-center">
105+
<Button
106+
variant="ghost"
107+
className="text-center"
108+
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
109+
>
110+
Payment Rate (Per Hour)
111+
<CaretSortIcon className="ml-2 h-4 w-4" />
112+
</Button>
113+
</div>
114+
);
115+
},
116+
cell: ({ row }) => (
117+
<div className="text-center font-medium">{row.getValue("workforceSize")}</div>
118+
),
119+
},
120+
{
121+
accessorKey: "assignedSTS",
122+
header: ({ column }) => {
123+
return (
124+
<div className="flex justify-center items-center">
125+
<Button
126+
variant="ghost"
127+
className="text-center"
128+
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
129+
>
130+
Assigned STS
131+
<CaretSortIcon className="ml-2 h-4 w-4" />
132+
</Button>
133+
</div>
134+
);
135+
},
136+
cell: ({ row }) => (
137+
<div className="text-center font-medium">{row.getValue("assignedSTS")}</div>
138+
),
139+
},
140+
{
141+
id: "actions",
142+
enableHiding: false,
143+
cell: ({ row }) => {
144+
const contractor: Contractor = row.original;
145+
146+
return (
147+
<div>
148+
{/* <ViewSTSInfoModal stsInfo={sts} />
149+
<EditSTSInfoModal stsInfo={sts} />
150+
<DeleteSTSModal stsInfo={sts} /> */}
151+
</div>
152+
);
153+
},
154+
},
155+
];
156+
157+
export default function EmployeeList() {
158+
const [data, setData] = React.useState<Contractor[]>([]);
159+
const { fetchAllContractors, contractorData } = useGetAllContractor();
160+
const [sorting, setSorting] = React.useState<SortingState>([]);
161+
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
162+
[]
163+
);
164+
const [columnVisibility, setColumnVisibility] =
165+
React.useState<VisibilityState>({});
166+
const [rowSelection, setRowSelection] = React.useState({});
167+
168+
React.useEffect(() => {
169+
fetchAllContractors();
170+
}, []);
171+
172+
React.useEffect(() => {
173+
setData(contractorData);
174+
}, [contractorData]);
175+
176+
const table = useReactTable({
177+
data,
178+
columns,
179+
onSortingChange: setSorting,
180+
onColumnFiltersChange: setColumnFilters,
181+
getCoreRowModel: getCoreRowModel(),
182+
getPaginationRowModel: getPaginationRowModel(),
183+
getSortedRowModel: getSortedRowModel(),
184+
getFilteredRowModel: getFilteredRowModel(),
185+
onColumnVisibilityChange: setColumnVisibility,
186+
onRowSelectionChange: setRowSelection,
187+
state: {
188+
sorting,
189+
columnFilters,
190+
columnVisibility,
191+
rowSelection,
192+
},
193+
});
194+
return (
195+
<>
196+
<div className="font-bold text-lg w-full text-center">LIST OF ALL EMPLOYEES</div>
197+
<div className="flex justify-between items-center py-4 gap-4">
198+
<Input
199+
placeholder="Search by Contractor Name..."
200+
value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
201+
onChange={(event) =>
202+
table.getColumn("name")?.setFilterValue(event.target.value)
203+
}
204+
className="max-w-sm"
205+
/>
206+
<DropdownMenu>
207+
<DropdownMenuTrigger asChild>
208+
<Button variant="outline" className="ml-auto">
209+
Filter Contractors <ChevronDownIcon className="ml-2 h-4 w-4" />
210+
</Button>
211+
</DropdownMenuTrigger>
212+
<DropdownMenuContent align="end">
213+
{table
214+
.getAllColumns()
215+
.filter((column) => column.getCanHide())
216+
.map((column) => {
217+
return (
218+
<DropdownMenuCheckboxItem
219+
key={column.id}
220+
className="capitalize"
221+
checked={column.getIsVisible()}
222+
onCheckedChange={(value) =>
223+
column.toggleVisibility(!!value)
224+
}
225+
>
226+
{column.id}
227+
</DropdownMenuCheckboxItem>
228+
);
229+
})}
230+
</DropdownMenuContent>
231+
</DropdownMenu>
232+
</div>
233+
<div className="rounded-md border">
234+
<Table>
235+
<TableHeader>
236+
{table.getHeaderGroups().map((headerGroup) => (
237+
<TableRow key={headerGroup.id}>
238+
{headerGroup.headers.map((header) => {
239+
return (
240+
<TableHead key={header.id}>
241+
{header.isPlaceholder
242+
? null
243+
: flexRender(
244+
header.column.columnDef.header,
245+
header.getContext()
246+
)}
247+
</TableHead>
248+
);
249+
})}
250+
</TableRow>
251+
))}
252+
</TableHeader>
253+
<TableBody>
254+
{table.getRowModel().rows?.length ? (
255+
table.getRowModel().rows.map((row) => (
256+
<TableRow
257+
key={row.id}
258+
data-state={row.getIsSelected() && "selected"}
259+
>
260+
{row.getVisibleCells().map((cell) => (
261+
<TableCell key={cell.id}>
262+
{flexRender(
263+
cell.column.columnDef.cell,
264+
cell.getContext()
265+
)}
266+
</TableCell>
267+
))}
268+
</TableRow>
269+
))
270+
) : (
271+
<TableRow>
272+
<TableCell
273+
colSpan={columns.length}
274+
className="h-24 text-center"
275+
>
276+
No results.
277+
</TableCell>
278+
</TableRow>
279+
)}
280+
</TableBody>
281+
</Table>
282+
</div>
283+
<div className="flex items-center justify-end space-x-2 py-4">
284+
<div className="flex-1 text-sm text-muted-foreground">
285+
Total {table.getFilteredRowModel().rows.length} row(s) loaded.
286+
</div>
287+
<div className="space-x-2">
288+
<Button
289+
variant="outline"
290+
size="sm"
291+
onClick={() => table.previousPage()}
292+
disabled={!table.getCanPreviousPage()}
293+
>
294+
Previous
295+
</Button>
296+
<Button
297+
variant="outline"
298+
size="sm"
299+
onClick={() => table.nextPage()}
300+
disabled={!table.getCanNextPage()}
301+
>
302+
Next
303+
</Button>
304+
</div>
305+
</div>
306+
</>
307+
);
308+
}

0 commit comments

Comments
 (0)