refactor: user edit and edit password

apps/app/src/components/operator-tabs.tsx

@@ -5,6 +5,8 @@ import { Icons, OperatorContext } from "@trashtrack/ui";
 import OperatorDashboard from "../pages/operator/dashboard";
 import OperatorUserDisplay from "../pages/operator/user/display";
 import { useContext } from "react";
+import OperatorUserEdit from "../pages/operator/user/edit-user";
+import OperatorUserEditPassword from "../pages/operator/user/edit-password-user";
 
 const OperatorTabs: React.FC = () => {
     const operator = useContext(OperatorContext);
@@ -17,6 +19,12 @@ const OperatorTabs: React.FC = () => {
                 <Route path="/operator/tabs/dashboard" render={() => <OperatorDashboard />} exact={true} />
 
                 <Route path="/operator/tabs/user" render={() => <OperatorUserDisplay />} exact={true} />
+                <Route path="/operator/tabs/user/edit/:user_id" render={() => <OperatorUserEdit />} exact={true} />
+                <Route
+                    path="/operator/tabs/user/edit-password/:id"
+                    render={() => <OperatorUserEditPassword />}
+                    exact={true}
+                />
                 <Route path="/operator/tabs" render={() => <Redirect to="/operator/tabs/dashboard" />} exact={true} />
             </IonRouterOutlet>
             <IonTabBar slot="bottom" mode="ios" translucent className="pb-4">

apps/app/src/pages/operator/user/display.tsx

@@ -4,8 +4,11 @@ import { useGetUsersQuery } from "../../../queries/get-users-query";
 import { IonFab, IonFabButton } from "@ionic/react";
 import { useState } from "react";
 import { UserCreationSheet, UserDeleteConfirmationDialog, UserDetailsSheet } from "@trashtrack/ui";
+import { useHistory } from "react-router-dom";
 
 export function OperatorUserDisplay() {
+    const history = useHistory();
+
     const { data, isLoading, refetch } = useGetUsersQuery();
     const [isUserCreationSheetOpen, setIsUserCreationSheetOpen] = useState(false);
     const [isUserDeleteConfirmationOpen, setIsUserDeleteConfirmationOpen] = useState(false);
@@ -26,16 +29,23 @@ export function OperatorUserDisplay() {
                             </CardContent>
                         </Card>
                     ) : (
-                        data.data?.map((user: { id: number; username: string; role: string }) => (
+                        data.data?.map((user: { id: number; username: string; role: string; active: boolean }) => (
                             <Card className="flex flex-row" key={user.username}>
                                 <CardHeader className="w-56">
                                     <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>
+                                        <p className="text-xs text-slate-600">
+                                            Level: {user.role} <br />
+                                            Status: {user.active ? "Active" : "Inactive"}
+                                        </p>
                                     </div>
                                 </CardHeader>
                                 <CardContent className="pt-6 flex flex-col gap-2">
-                                    <Button variant="default" className="font-bold text-xs w-full">
+                                    <Button
+                                        onClick={() => history.push(`/operator/tabs/user/edit/${user.id}`)}
+                                        variant="default"
+                                        className="font-bold text-xs w-full"
+                                    >
                                         Edit
                                     </Button>
                                     <Button

apps/app/src/pages/operator/user/edit-password-user.tsx

@@ -0,0 +1,20 @@
+import { IonContent, IonPage } from "@ionic/react";
+import { useParams } from "react-router-dom";
+
+export function OperatorUserEditPassword() {
+    const { id } = useParams<{ id: string }>();
+
+    return (
+        <IonPage>
+            <IonContent className="complain-form-laporan ion-padding" fullscreen>
+                <div className="pt-12">
+                    <h1 className="font-bold text-left text-xl">TrashTrack</h1>
+                    <p className="text-xs text-left text-slate-600">Edit User Password</p>
+                </div>
+                <div className="flex flex-col pt-8 gap-4"></div>
+            </IonContent>
+        </IonPage>
+    );
+}
+
+export default OperatorUserEditPassword;

apps/app/src/pages/operator/user/edit-user.tsx

@@ -0,0 +1,33 @@
+import { IonContent, IonPage } from "@ionic/react";
+import { useParams } from "react-router-dom";
+import { useGetUserQuery, IUserQuery } from "../../../queries/get-user-query";
+import { UserEditForm } from "@trashtrack/ui";
+import { useGetUsersQuery } from "../../../queries/get-users-query";
+
+export function OperatorUserEdit() {
+    const { user_id } = useParams<{ user_id: string }>();
+    const { refetch } = useGetUsersQuery();
+
+    const { data, isLoading, isError } = useGetUserQuery(user_id);
+
+    return (
+        <IonPage>
+            <IonContent className="complain-form-laporan ion-padding" fullscreen>
+                <div className="pt-12">
+                    <h1 className="font-bold text-left text-xl">TrashTrack</h1>
+                    <p className="text-xs text-left text-slate-600">Edit User</p>
+                </div>
+                <div className="flex flex-col pt-8 gap-4">
+                    {isError && <p>Error fetching user</p>}
+                    {isLoading ? (
+                        <p>Loading...</p>
+                    ) : (
+                        <UserEditForm id={user_id} refetch={refetch} user={data.data as IUserQuery} />
+                    )}
+                </div>
+            </IonContent>
+        </IonPage>
+    );
+}
+
+export default OperatorUserEdit;

apps/app/src/queries/get-user-query.ts

@@ -0,0 +1,25 @@
+import { useQuery } from "@tanstack/react-query";
+import { API_URL } from "@trashtrack/utils";
+
+enum Role {
+    operator = "operator",
+    admin = "admin",
+}
+
+export interface IUserQuery {
+    id: number;
+    name: string;
+    username: string;
+    password: string;
+    phoneNumber: string;
+    role: Role;
+    active: boolean;
+    description: string;
+}
+
+export const useGetUserQuery = (id: string | undefined) => {
+    return useQuery({
+        queryKey: ["getUserQ"],
+        queryFn: () => fetch(API_URL + `/user/id/${id}`).then((res) => res.json()),
+    });
+};