VEICLE LIST
diff --git a/client/components/dataTables/STSList.tsx b/client/components/dataTables/STSList.tsx
new file mode 100644
index 0000000..e97343d
--- /dev/null
+++ b/client/components/dataTables/STSList.tsx
@@ -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
[] = [
+ {
+ accessorKey: "name",
+ header: ({ column }) => {
+ return (
+
+
+
+ );
+ },
+ cell: ({ row }) => (
+ {row.getValue("name")}
+ ),
+ },
+ {
+ accessorKey: "wardNumber",
+ header: ({ column }) => {
+ return (
+
+
+
+ );
+ },
+ cell: ({ row }) => (
+
+ {row.getValue("wardNumber")}
+
+ ),
+ },
+ {
+ accessorKey: "capacity",
+ header: ({ column }) => {
+ return (
+
+
+
+ );
+ },
+ cell: ({ row }) => (
+ {row.getValue("capacity")}
+ ),
+ },
+ {
+ id: "actions",
+ enableHiding: false,
+ cell: ({ row }) => {
+ const sts: STS = row.original;
+
+ return (
+
+
+
+
+ );
+ },
+ },
+];
+
+export default function STSListTable() {
+ const [data, setData] = React.useState([]);
+ const { fetchAllSTS, stsData } = useGetAllSTS();
+ const [sorting, setSorting] = React.useState([]);
+ const [columnFilters, setColumnFilters] = React.useState(
+ []
+ );
+ const [columnVisibility, setColumnVisibility] =
+ React.useState({});
+ 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 (
+ <>
+
+
+ table.getColumn("name")?.setFilterValue(event.target.value)
+ }
+ className="max-w-sm"
+ />
+
+
+
+
+
+ {table
+ .getAllColumns()
+ .filter((column) => column.getCanHide())
+ .map((column) => {
+ return (
+
+ column.toggleVisibility(!!value)
+ }
+ >
+ {column.id}
+
+ );
+ })}
+
+
+
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => {
+ return (
+
+ {header.isPlaceholder
+ ? null
+ : flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+
+ );
+ })}
+
+ ))}
+
+
+ {table.getRowModel().rows?.length ? (
+ table.getRowModel().rows.map((row) => (
+
+ {row.getVisibleCells().map((cell) => (
+
+ {flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext()
+ )}
+
+ ))}
+
+ ))
+ ) : (
+
+
+ No results.
+
+
+ )}
+
+
+
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "}
+ {table.getFilteredRowModel().rows.length} row(s) selected.
+
+
+
+
+
+
-
-
-
- {/* */}
-
- );
+ return (
+ <>
+
+
+
+
+
+
+
+ {/* */}
+
+ );
};
export default SetZone;
diff --git a/client/components/modals/DeleteSTSModal.tsx b/client/components/modals/DeleteSTSModal.tsx
new file mode 100644
index 0000000..d7c6420
--- /dev/null
+++ b/client/components/modals/DeleteSTSModal.tsx
@@ -0,0 +1,97 @@
+import { Button } from "@/components/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog";
+
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import React, { useState } from "react";
+import { Trash } from "lucide-react";
+import deleteUser from "@/hooks/user_data/deleteUser";
+import deleteSTS from "@/hooks/entityCreation/deleteSTS";
+
+export type STS = {
+ id: string;
+ name: string;
+ wardNumber: string;
+ capacity: string;
+ latitude: string;
+ longitude: string;
+ };
+
+export const DeleteSTSModal = ({ stsInfo }: { stsInfo: STS }) => {
+ const [confirmText, setConfirmText] = useState("");
+ return (
+
+ );
+};
diff --git a/client/components/modals/EditSTSInfoModal.tsx b/client/components/modals/EditSTSInfoModal.tsx
new file mode 100644
index 0000000..f6a9733
--- /dev/null
+++ b/client/components/modals/EditSTSInfoModal.tsx
@@ -0,0 +1,180 @@
+import { Button } from "@/components/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog";
+
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import React, { use, useEffect, useState } from "react";
+import { EditIcon, Trash } from "lucide-react";
+import deleteUser from "@/hooks/user_data/deleteUser";
+import {
+ Select,
+ SelectTrigger,
+ SelectValue,
+ SelectContent,
+ SelectGroup,
+ SelectLabel,
+ SelectItem,
+} from "../ui/select";
+import editUser from "@/hooks/user_data/editUser";
+import gettAllRoles from "@/hooks/user_data/useGetAllRole";
+import { number } from "prop-types";
+import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
+import editSTS from "@/hooks/entityCreation/editSTS";
+import getUserByRole from "@/hooks/user_data/getUserByRole";
+
+export type STS = {
+ id: string;
+ name: string;
+ wardNumber: string;
+ capacity: string;
+ latitude: string;
+ longitude: string;
+};
+
+type STSManager = {
+ id: string;
+ username: string;
+};
+
+export const EditSTSInfoModal = ({ stsInfo }: { stsInfo: STS }) => {
+ const [stsData, setSTSData] = useState(stsInfo);
+ const [stsManagerData, setSTSManagerData] = useState();
+ const [stsManagerList, setSTSManagerList] = useState([]);
+
+ const getManagerList = async () => {
+ const result = await getUserByRole(stsManager);
+ if (result) await setSTSManagerList(result);
+ };
+
+ useEffect(() => {
+ getManagerList();
+ }, []);
+
+ return (
+
+ );
+};
diff --git a/client/components/modals/LandfillModal.tsx b/client/components/modals/LandfillModal.tsx
index 0b6c995..aae67c1 100644
--- a/client/components/modals/LandfillModal.tsx
+++ b/client/components/modals/LandfillModal.tsx
@@ -7,13 +7,16 @@ import {
DialogHeader,
DialogTitle,
DialogTrigger,
- DialogClose
+ DialogClose,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
-import React , {useState} from "react";
+import React, { useState } from "react";
import SetZone from "../maps/SetZone";
+import useCreateLandFill, {
+ LandFill,
+} from "@/hooks/entityCreation/useCreateLandfill";
interface DialogWrapperProps {
children: React.ReactNode;
@@ -22,29 +25,22 @@ interface DialogWrapperProps {
export const LandfillCreateModal: React.FC = ({
children,
}) => {
- const [landfillName, setLandfill] = useState("");
- const [capacity, setCapacity] = useState("");
- const [latitude, setLatitude] = useState("");
- const [longitude, setLongitude] = useState("");
-
-
+ const [landfillName, setLandfill] = useState("");
+ const [capacity, setCapacity] = useState("");
+ const [latitude, setLatitude] = useState("");
+ const [longitude, setLongitude] = useState("");
+ const { createLandfill } = useCreateLandFill();
-
-
-
-
-
- const handleSaveChanges = () => {
- // console.log("Vehicle Number:", vehicleNumber);
- // console.log("Vehicle Type:", vehicleType);
- // console.log("Capacity:", capacity);
- console.log(landfillName);
- console.log(capacity);
- console.log(latitude);
- console.log(longitude);
+ const handleSaveChanges = async () => {
+ const data: LandFill = {
+ name: landfillName,
+ capacity: parseInt(capacity),
+ latitude: parseFloat(latitude),
+ longitude: parseFloat(longitude),
+ };
+ alert((await createLandfill(data)) || "Landfill data invalid");
};
-
return (
+