Skip to content

updating sts branch #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Mar 27, 2024
Merged

updating sts branch #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f54fef7
fixed the hydration error in refresh
codermehraj Mar 27, 2024
443e9cf
add new sts integrated
codermehraj Mar 27, 2024
77e353e
Add new landfill integrated with backend
codermehraj Mar 27, 2024
73a698b
added component to fetch and filter all sts list in the admin dashboard
codermehraj Mar 27, 2024
9fbe77e
Assign manager to STS and update sts done
codermehraj Mar 27, 2024
1f9624e
STS delete integrated
codermehraj Mar 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions client/app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,18 @@ import MainSection from "../../components/dashboard-componenets/mainContent/main
import { useRouter } from "next/navigation";
import { getCookie } from "@/lib/cookieFunctions";
import { curActive, role } from "@/data/cookieNames";
import { set } from "react-hook-form";

export default function Dashboard() {

const curRole = getCookie(role) || "";
const [currentActive, setCurrentActive] = useState(getCookie(curActive) || "");
const [curRole, setCurrentRole] = useState("");
const [currentActive, setCurrentActive] = useState("");
const router = useRouter();

if(curRole === ""){
alert('Please login first');
router.push('/auth/login');
}
useEffect(() => {
setCurrentRole(getCookie(role));
setCurrentActive(getCookie(curActive));
}, []);

console.log('Role: ' + curRole + ' Current Active: ' + currentActive);

Expand Down
44 changes: 29 additions & 15 deletions client/components/dashboard-componenets/mainContent/systemAdminContents/System.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { Button } from "@/components/ui/button";
import EmptyFillContainer from "../../cards/EmptyFillContainer";
import { Plus, Truck } from "lucide-react";
import { StsCreateModal } from "../../../modals/StsModal"
import { StsCreateModal } from "../../../modals/StsModal";
import { VehicleCreateModal } from "@/components/modals/VehicleModal";
import { LandfillCreateModal } from "@/components/modals/LandfillModal";
import { LandfillCreateModal } from "@/components/modals/LandfillModal";
import UserListTable from "@/components/dataTables/UserList";
import STSListTable from "@/components/dataTables/STSList";

export default function AdminSystemDataPanel() {
return (
Expand All @@ -13,29 +15,41 @@ export default function AdminSystemDataPanel() {
<div className="flex-grow-1"></div>
<div className="flex gap-2">
<StsCreateModal>
<Button variant="outline" size="sm" className="w-full bg-black text-white">
<Plus size={16} className="mr-2"/>
ADD NEW STS
</Button>
<Button
variant="outline"
size="sm"
className="w-full bg-black text-white"
>
<Plus size={16} className="mr-2" />
ADD NEW STS
</Button>
</StsCreateModal>
<LandfillCreateModal>
<Button variant="outline" size="sm" className="w-full bg-black text-white">
<Plus size={16} className="mr-2"/>
ADD NEW LANDFILL
</Button>
<Button
variant="outline"
size="sm"
className="w-full bg-black text-white"
>
<Plus size={16} className="mr-2" />
ADD NEW LANDFILL
</Button>
</LandfillCreateModal>
<VehicleCreateModal>
<Button variant="outline" size="sm" className="w-full bg-black text-white">
<Truck size={16} className="mr-2"/>
ADD NEW VEHICLE
</Button>
<Button
variant="outline"
size="sm"
className="w-full bg-black text-white"
>
<Truck size={16} className="mr-2" />
ADD NEW VEHICLE
</Button>
</VehicleCreateModal>
</div>
</div>
<div className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm">
<div className="grid grid-cols-1 md:grid-cols-2 grid-rows-2 grid-flow-row gap-2 md:gap-4 w-full md:h-full max-h-max">
<div className="col-span-1 row-span-1 min-h-48">
<EmptyFillContainer>STS LIST</EmptyFillContainer>
<EmptyFillContainer><STSListTable /></EmptyFillContainer>
</div>
<div className="col-span-1 row-span-2 min-h-48">
<EmptyFillContainer>VEICLE LIST</EmptyFillContainer>
Expand Down
292 changes: 292 additions & 0 deletions client/components/dataTables/STSList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,292 @@
"use client";

import * as React from "react";
import {
CaretSortIcon,
ChevronDownIcon,
DotsHorizontalIcon,
} from "@radix-ui/react-icons";

import { Button } from "@/components/ui/button";

import {
ColumnDef,
ColumnFiltersState,
SortingState,
VisibilityState,
flexRender,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";

import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import useGetAllUser from "@/hooks/user_data/useGetAllUser";
import { DeleteUserModal } from "../modals/DeleteUserModal";
import { Copy, EditIcon } from "lucide-react";
import { EditUserModal } from "../modals/EditUserInfoModal";
import gettAllRoles from "@/hooks/user_data/useGetAllRole";
import { roleList } from "@/data/roles";
import useGetAllSTS from "@/hooks/dataQuery/useGetAllSTS";
import { EditSTSInfoModal } from "../modals/EditSTSInfoModal";
import { DeleteSTSModal } from "../modals/DeleteSTSModal";

export type STS = {
id: string;
name: string;
wardNumber: string;
capacity: string;
latitude: string;
longitude: string;
};

export const columns: ColumnDef<STS>[] = [
{
accessorKey: "name",
header: ({ column }) => {
return (
<div className="flex justify-center items-center">
<Button
variant="ghost"
className="text-center"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
STS Name
<CaretSortIcon className="ml-2 h-4 w-4" />
</Button>
</div>
);
},
cell: ({ row }) => (
<div className="text-center font-medium">{row.getValue("name")}</div>
),
},
{
accessorKey: "wardNumber",
header: ({ column }) => {
return (
<div className="flex justify-center items-center">
<Button
variant="ghost"
className="text-center"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Ward
<CaretSortIcon className="ml-2 h-4 w-4" />
</Button>
</div>
);
},
cell: ({ row }) => (
<div className="text-center font-medium">
{row.getValue("wardNumber")}
</div>
),
},
{
accessorKey: "capacity",
header: ({ column }) => {
return (
<div className="flex justify-center items-center">
<Button
variant="ghost"
className="text-center"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Capacity
<CaretSortIcon className="ml-2 h-4 w-4" />
</Button>
</div>
);
},
cell: ({ row }) => (
<div className="text-center font-medium">{row.getValue("capacity")}</div>
),
},
{
id: "actions",
enableHiding: false,
cell: ({ row }) => {
const sts: STS = row.original;

return (
<div>
<DeleteSTSModal stsInfo={sts} />
<EditSTSInfoModal stsInfo={sts} />
</div>
);
},
},
];

export default function STSListTable() {
const [data, setData] = React.useState<STS[]>([]);
const { fetchAllSTS, stsData } = useGetAllSTS();
const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
);
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({});

React.useEffect(() => {
fetchAllSTS();
}, []);

React.useEffect(() => {
setData(stsData);
}, [stsData]);

const table = useReactTable({
data,
columns,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onColumnVisibilityChange: setColumnVisibility,
onRowSelectionChange: setRowSelection,
state: {
sorting,
columnFilters,
columnVisibility,
rowSelection,
},
});
return (
<>
<div className="flex items-center py-4 gap-4">
<Input
placeholder="Search by STS Name..."
value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
onChange={(event) =>
table.getColumn("name")?.setFilterValue(event.target.value)
}
className="max-w-sm"
/>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="ml-auto">
Columns <ChevronDownIcon className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{table
.getAllColumns()
.filter((column) => column.getCanHide())
.map((column) => {
return (
<DropdownMenuCheckboxItem
key={column.id}
className="capitalize"
checked={column.getIsVisible()}
onCheckedChange={(value) =>
column.toggleVisibility(!!value)
}
>
{column.id}
</DropdownMenuCheckboxItem>
);
})}
</DropdownMenuContent>
</DropdownMenu>
</div>
<div className="rounded-md border">
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No results.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
<div className="flex items-center justify-end space-x-2 py-4">
<div className="flex-1 text-sm text-muted-foreground">
{table.getFilteredSelectedRowModel().rows.length} of{" "}
{table.getFilteredRowModel().rows.length} row(s) selected.
</div>
<div className="space-x-2">
<Button
variant="outline"
size="sm"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
Previous
</Button>
<Button
variant="outline"
size="sm"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
Next
</Button>
</div>
</div>
</>
);
}
Loading