feat: user details

affected: #9
trashtrackteam · Feb 14, 2024 · 9aa9a0c · 9aa9a0c
1 parent ac4cfc7
commit 9aa9a0c
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 3 deletions.
diff --git a/apps/app/src/pages/operator/user/display.tsx b/apps/app/src/pages/operator/user/display.tsx
@@ -3,12 +3,13 @@ import { Button, Card, CardContent, CardHeader, Icons } from "@trashtrack/ui";
 import { useGetUsersQuery } from "../../../queries/get-users-query";
 import { IonFab, IonFabButton } from "@ionic/react";
 import { useState } from "react";
-import { UserCreationSheet, UserDeleteConfirmationDialog } from "@trashtrack/ui";
+import { UserCreationSheet, UserDeleteConfirmationDialog, UserDetailsShet } from "@trashtrack/ui";
 
 export function OperatorUserDisplay() {
     const { data, isLoading, refetch } = useGetUsersQuery();
     const [isUserCreationSheetOpen, setIsUserCreationSheetOpen] = useState(false);
     const [isUserDeleteConfirmationOpen, setIsUserDeleteConfirmationOpen] = useState(false);
+    const [isUserDetailsSheetOpen, setIsUserDetailsSheetOpen] = useState(false);
 
     return (
         <IonPage>
@@ -28,8 +29,10 @@ export function OperatorUserDisplay() {
                         data.data?.map((user: { id: number; username: string; role: string }) => (
                             <Card className="flex flex-row" key={user.username}>
                                 <CardHeader className="w-56">
-                                    <h2 className="text-sm font-bold">Username: {user.username}</h2>
-                                    <p className="text-xs text-slate-600">Level: {user.role}</p>
+                                    <div onClick={() => setIsUserDetailsSheetOpen(true)}>
+                                        <h2 className="text-sm font-bold">Username: {user.username}</h2>
+                                        <p className="text-xs text-slate-600">Level: {user.role}</p>
+                                    </div>
                                 </CardHeader>
                                 <CardContent className="pt-6 flex flex-col gap-2">
                                     <Button variant="default" className="font-bold text-xs w-full">
@@ -44,6 +47,12 @@ export function OperatorUserDisplay() {
                                     </Button>
                                 </CardContent>
 
+                                <UserDetailsShet
+                                    id={user.id.toString()}
+                                    isOpen={isUserDetailsSheetOpen}
+                                    setIsOpen={setIsUserDetailsSheetOpen}
+                                />
+
                                 <UserDeleteConfirmationDialog
                                     id={user.id.toString()}
                                     refetchUser={refetch}

diff --git a/libs/components/src/forms/sheets/user-details.tsx b/libs/components/src/forms/sheets/user-details.tsx
@@ -0,0 +1,99 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+    Input,
+    Label,
+    Sheet,
+    SheetContent,
+    SheetHeader,
+    SheetTitle,
+    SheetFooter,
+    SheetClose,
+    Button,
+} from "../../index";
+import { API_URL } from "@trashtrack/utils";
+
+export function UserDetailsShet({
+    id,
+    isOpen,
+    setIsOpen,
+}: {
+    id: string;
+    isOpen: boolean;
+    setIsOpen: (value: boolean) => void;
+}) {
+    const { data, isLoading } = useQuery({
+        queryKey: ["getUser"],
+        queryFn: () => fetch(API_URL + `/user/id/${id}`).then((res) => res.json()),
+    });
+
+    return (
+        <Sheet open={isOpen} onOpenChange={setIsOpen}>
+            <SheetContent className="w-full overflow-y-scroll max-h-screen">
+                {isLoading ? (
+                    <div>Loading...</div>
+                ) : (
+                    <div>
+                        <SheetHeader className="mb-4">
+                            <SheetTitle>User Details</SheetTitle>
+                        </SheetHeader>
+                        <div className="grid gap-4 py-4">
+                            <div className="grid grid-cols-4 items-center gap-4">
+                                <Label htmlFor="name" className="text-right">
+                                    Name
+                                </Label>
+                                <Input readOnly id="name" value={data.data.name} className="col-span-3" />
+                            </div>
+                            <div className="grid grid-cols-4 items-center gap-4">
+                                <Label htmlFor="username" className="text-right">
+                                    Username
+                                </Label>
+                                <Input readOnly id="username" value={data.data.username} className="col-span-3" />
+                            </div>
+                            <div className="grid grid-cols-4 items-center gap-4">
+                                <Label htmlFor="phoneNumber" className="text-right">
+                                    Phone Number
+                                </Label>
+                                <Input readOnly id="phoneNumber" value={data.data.phoneNumber} className="col-span-3" />
+                            </div>
+                            <div className="grid grid-cols-4 items-center gap-4">
+                                <Label htmlFor="role" className="text-right">
+                                    Role
+                                </Label>
+                                <Input readOnly id="role" value={data.data.role} className="col-span-3" />
+                            </div>
+                            <div className="grid grid-cols-4 items-center gap-4">
+                                <Label htmlFor="active" className="text-right">
+                                    Is Active
+                                </Label>
+                                <Input
+                                    readOnly
+                                    id="active"
+                                    value={data.data.active ? "Yes" : "No"}
+                                    className="col-span-3"
+                                />
+                            </div>
+                            <div className="grid grid-cols-4 items-center gap-4">
+                                <Label htmlFor="description" className="text-right">
+                                    Description
+                                </Label>
+                                <Input
+                                    readOnly
+                                    id="description"
+                                    value={data.data.description || "No description"}
+                                    className="col-span-3"
+                                />
+                            </div>
+                        </div>
+                        <SheetFooter>
+                            <SheetClose className="mt-4" asChild>
+                                <Button variant="secondary" type="button">
+                                    Close
+                                </Button>
+                            </SheetClose>
+                        </SheetFooter>
+                    </div>
+                )}
+            </SheetContent>
+        </Sheet>
+    );
+}
diff --git a/libs/components/src/forms/sheets/user-edit.tsx b/libs/components/src/forms/sheets/user-edit.tsx
@@ -0,0 +1,11 @@
+export function UserEditSheet({
+    id,
+    refetchUser,
+    isOpen,
+    setIsOpen,
+}: {
+    id: string;
+    refetchUser: () => void;
+    isOpen: boolean;
+    setIsOpen: (value: boolean) => void;
+}) {}
diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
@@ -25,4 +25,6 @@ export * from "./forms/operator/auth/login-form";
 export * from "./forms/complain/laporan/laporan-form";
 
 export * from "./forms/sheets/user-creation";
+export * from "./forms/sheets/user-details";
+export * from "./forms/sheets/user-edit";
 export * from "./forms/sheets/delete-confirmation";