feat(app): operator tabs

affected: #9 #10 fix: #11 #12
trashtrackteam · Feb 11, 2024 · f9454ea · f9454ea
1 parent 8581179
commit f9454ea
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 5 deletions.
diff --git a/apps/app/src/components/operator-tabs.tsx b/apps/app/src/components/operator-tabs.tsx
@@ -0,0 +1,36 @@
+import { Redirect, Route } from "react-router-dom";
+import { IonRouterOutlet, IonTabs, IonTabBar, IonTabButton, IonLabel } from "@ionic/react";
+import { Icons } from "@trashtrack/ui";
+
+import OperatorDashboard from "../pages/operator/dashboard";
+import OperatorTrashbinDisplay from "../pages/operator/trash-bin/display";
+import OperatorUserDisplay from "../pages/operator/user/display";
+
+const OperatorTabs: React.FC = () => {
+    return (
+        <IonTabs>
+            <IonRouterOutlet animated={false} mode="ios">
+                <Route path="/operator/tabs/dashboard" render={() => <OperatorDashboard />} exact={true} />
+                <Route path="/operator/tabs/trash-bin" render={() => <OperatorTrashbinDisplay />} exact={true} />
+                <Route path="/operator/tabs/user" render={() => <OperatorUserDisplay />} exact={true} />
+                <Route path="/operator/tabs" render={() => <Redirect to="/operator/tabs/dashboard" />} exact={true} />
+            </IonRouterOutlet>
+            <IonTabBar slot="bottom" mode="ios" translucent className="pb-4">
+                <IonTabButton tab="tab1" href="/operator/tabs/dashboard">
+                    <Icons.dashboard strokeWidth={1} className="pt-2 w-[32px] h-[30px]" />
+                    <IonLabel className="pt-2">Dashboard</IonLabel>
+                </IonTabButton>
+                <IonTabButton tab="tab2" href="/operator/tabs/trash-bin">
+                    <Icons.trash strokeWidth={1} className="pt-2 w-[32px] h-[30px]" />
+                    <IonLabel className="pt-2">Trashbin</IonLabel>
+                </IonTabButton>
+                <IonTabButton tab="tab3" href="/operator/tabs/user">
+                    <Icons.user strokeWidth={1} className="pt-2 w-[32px] h-[30px]" />
+                    <IonLabel className="pt-2">User</IonLabel>
+                </IonTabButton>
+            </IonTabBar>
+        </IonTabs>
+    );
+};
+
+export default OperatorTabs;
diff --git a/apps/app/src/components/operator.tsx b/apps/app/src/components/operator.tsx
@@ -2,17 +2,20 @@ import { IonPage, IonRouterOutlet } from "@ionic/react";
 import { Redirect, Route } from "react-router-dom";
 
 import OperatorFormLogin from "../pages/operator/form/login";
-import OperatorDashboard from "../pages/operator/dashboard";
 import OperatorIndex from "../pages/operator";
+import OperatorTabs from "./operator-tabs";
 
 const Operator: React.FC = () => {
     return (
         <IonPage>
             <IonRouterOutlet id="main" animated={false} mode="ios">
                 <Route path="/operator/index" render={() => <OperatorIndex />} exact={true} />
-                <Route path="/operator/dashboard" render={() => <OperatorDashboard />} exact={true} />
                 <Route path="/operator/form/login" render={() => <OperatorFormLogin />} exact={true} />
 
+                <Route path="/operator/tabs">
+                    <OperatorTabs />
+                </Route>
+
                 <Route path="/operator" render={() => <Redirect to="/operator/index" />} exact={true} />
             </IonRouterOutlet>
         </IonPage>

diff --git a/apps/app/src/pages/operator/index.tsx b/apps/app/src/pages/operator/index.tsx
@@ -8,7 +8,7 @@ export function OperatorIndex() {
 
     useEffect(() => {
         if (operator.operator) {
-            history.push("/operator/dashboard");
+            history.push("/operator/tabs/dashboard");
         } else {
             history.push("/operator/form/login");
         }

diff --git a/apps/app/src/pages/operator/trash-bin/display.tsx b/apps/app/src/pages/operator/trash-bin/display.tsx
@@ -0,0 +1,31 @@
+import { IonContent, IonPage } from "@ionic/react";
+import { Card, CardContent, Button, OperatorContext } from "@trashtrack/ui";
+import { useContext } from "react";
+import { useHistory } from "react-router-dom";
+
+export function OperatorTrashbinDisplay() {
+    const history = useHistory();
+    const operator = useContext(OperatorContext);
+
+    return (
+        <IonPage>
+            <IonContent className="operator-trashbin-display ion-padding" fullscreen>
+                <div className="pt-12">
+                    <h1 className="font-bold text-left text-xl">TrashTrack</h1>
+                </div>
+                <div className="flex flex-col pt-8 gap-4">
+                    <h1 className="font-bold text-lg">Dashboard Trash-bin, {operator.operator}</h1>
+                    <Card className="flex flex-col mt-8">
+                        <CardContent className="pt-6">
+                            <Button className="font-bold text-xs w-full" onClick={() => history.replace("/tabs/home")}>
+                                Kembali
+                            </Button>
+                        </CardContent>
+                    </Card>
+                </div>
+            </IonContent>
+        </IonPage>
+    );
+}
+
+export default OperatorTrashbinDisplay;
diff --git a/apps/app/src/pages/operator/user/display.tsx b/apps/app/src/pages/operator/user/display.tsx
@@ -0,0 +1,31 @@
+import { IonContent, IonPage } from "@ionic/react";
+import { Card, CardContent, Button, OperatorContext } from "@trashtrack/ui";
+import { useContext } from "react";
+import { useHistory } from "react-router-dom";
+
+export function OperatorUserDisplay() {
+    const history = useHistory();
+    const operator = useContext(OperatorContext);
+
+    return (
+        <IonPage>
+            <IonContent className="operator-user-display ion-padding" fullscreen>
+                <div className="pt-12">
+                    <h1 className="font-bold text-left text-xl">TrashTrack</h1>
+                </div>
+                <div className="flex flex-col pt-8 gap-4">
+                    <h1 className="font-bold text-lg">Dashboard User, {operator.operator}</h1>
+                    <Card className="flex flex-col mt-8">
+                        <CardContent className="pt-6">
+                            <Button className="font-bold text-xs w-full" onClick={() => history.replace("/tabs/home")}>
+                                Kembali
+                            </Button>
+                        </CardContent>
+                    </Card>
+                </div>
+            </IonContent>
+        </IonPage>
+    );
+}
+
+export default OperatorUserDisplay;
diff --git a/libs/components/src/icons.tsx b/libs/components/src/icons.tsx
@@ -1,4 +1,13 @@
-import { Home, ClipboardEdit, UserPlus, Settings2, type Icon as LucideIcon } from "lucide-react";
+import {
+    Home,
+    ClipboardEdit,
+    UserPlus,
+    Settings2,
+    UserCog,
+    type Icon as LucideIcon,
+    LayoutDashboard,
+    Trash,
+} from "lucide-react";
 
 export type Icon = LucideIcon;
 
@@ -7,4 +16,7 @@ export const Icons = {
     settings: Settings2,
     complain: ClipboardEdit,
     login: UserPlus,
+    dashboard: LayoutDashboard,
+    user: UserCog,
+    trash: Trash,
 };
diff --git a/libs/components/src/operator/login-form.tsx b/libs/components/src/operator/login-form.tsx
@@ -87,7 +87,7 @@ export function LoginForm() {
         onSuccess: (data) => {
             if (data.data === true) {
                 setOperator(form.getValues("username"));
-                history.push("/operator/dashboard");
+                history.push("/operator/tabs/dashboard");
             } else {
                 setIsOpen(true);
             }