refactor; quol on complain and report

trashtrackteam · Feb 16, 2024 · 8796b6e · 8796b6e
1 parent 016bb53
commit 8796b6e
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 16 deletions.
diff --git a/apps/app/src/components/trashbin-tabs.tsx b/apps/app/src/components/trashbin-tabs.tsx
@@ -4,8 +4,8 @@ import { Icons } from "@trashtrack/ui";
 
 import OperatorTrashbinDisplay from "../pages/operator/trash-bin/display";
 import OperatorSubTrashbinDisplay from "../pages/operator/trash-bin/subtrashbin/subtrash-bin";
-import OperatorReportActionDisplay, { ReportsPage } from "../pages/operator/trash-bin/report/reports.page";
-import OperatorFeedbackDisplay from "../pages/operator/trash-bin/report/feedback/feedback";
+import { ReportsPage } from "../pages/operator/trash-bin/report/reports.page";
+import OperatorFeedbackDisplay, { FeedbackPage } from "../pages/operator/trash-bin/report/feedback/feedback.page";
 import OperatorTrashDisplay from "../pages/operator/trash-bin/subtrashbin/trash/trash";
 import { useTranslation } from "react-i18next";
 import { DetailedReportPage } from "../pages/operator/trash-bin/report/detailed-report.page";
@@ -29,10 +29,9 @@ const TrashbinTabs: React.FC = () => {
                     render={() => <DetailedReportPage />}
                     exact={true}
                 />
+                <Route path="/trash-bin/tabs/feedback" render={() => <FeedbackPage />} exact={true} />
 
-                <Route path="/trash-bin/tabs/feedback" render={() => <OperatorFeedbackDisplay />} exact={true} />
                 <Route path="/trash-bin/tabs/trash" render={() => <OperatorTrashDisplay />} exact={true} />
-
                 <Route path="/trash-bin/tabs" render={() => <Redirect to="/trash-bin/tabs/trashbin" />} exact={true} />
             </IonRouterOutlet>
             <IonTabBar slot="bottom" mode="ios" translucent className="pb-4">

diff --git a/apps/app/src/pages/operator/trash-bin/report/detailed-report.page.tsx b/apps/app/src/pages/operator/trash-bin/report/detailed-report.page.tsx
@@ -157,12 +157,15 @@ export function DetailedReportPage() {
                                         />
                                     </div>
                                     <Separator className="my-4" />
-                                    <div className="mt-4 flex flex-row gap-2">
-                                        <ReportStatusAction
-                                            report={report}
-                                            refetch={refetch}
-                                            isRefetching={isRefetching}
-                                        />
+                                    <div className="mt-4">
+                                        <p className="text-center text-xs">Actions</p>
+                                        <div className="flex flex-row gap-2">
+                                            <ReportStatusAction
+                                                report={report}
+                                                refetch={refetch}
+                                                isRefetching={isRefetching}
+                                            />
+                                        </div>
                                     </div>
                                 </div>
                             </CardContent>

diff --git a/...or/trash-bin/report/feedback/feedback.tsx → ...ash-bin/report/feedback/feedback.page.tsx b/...or/trash-bin/report/feedback/feedback.tsx → ...ash-bin/report/feedback/feedback.page.tsx
@@ -1,10 +1,10 @@
 import { IonContent, IonPage } from "@ionic/react";
 import { Card, CardContent } from "@trashtrack/ui";
 
-export function OperatorFeedbackDisplay() {
+export function FeedbackPage() {
     return (
         <IonPage>
-            <IonContent className="operator-display-display ion-padding" fullscreen>
+            <IonContent className="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">Trashbin Management</p>
@@ -21,4 +21,4 @@ export function OperatorFeedbackDisplay() {
     );
 }
 
-export default OperatorFeedbackDisplay;
+export default FeedbackPage;
diff --git a/apps/app/src/pages/operator/trash-bin/report/reports.page.tsx b/apps/app/src/pages/operator/trash-bin/report/reports.page.tsx
@@ -1,5 +1,5 @@
 import { IonContent, IonPage } from "@ionic/react";
-import { Card, CardContent, CardHeader, Skeleton } from "@trashtrack/ui";
+import { Card, CardContent, CardHeader, Skeleton, Separator, Button } from "@trashtrack/ui";
 import { useGetReports } from "./get-reports.query";
 import { useGetTrashBinById } from "./get-trash-bin.query";
 import { useHistory } from "react-router-dom";
@@ -104,6 +104,10 @@ export function ReportsPage() {
                     <p className="text-xs text-left text-slate-600">Trashbin Management</p>
                 </div>
                 <div className="flex flex-col pt-8 gap-2">
+                    <Button disabled className="w-full" onClick={() => history.push("/trash-bin/tabs/feedback")}>
+                        Feedback
+                    </Button>
+                    <Separator className="my-4" />
                     {isLoading
                         ? Array.from({ length: 5 }).map((_, index) => (
                               <Card key={index} className="flex flex-col mt-4">

diff --git a/libs/components/src/forms/complain/laporan/laporan-form.tsx b/libs/components/src/forms/complain/laporan/laporan-form.tsx
@@ -200,7 +200,12 @@ export function ComplainLaporanForm({ tempah_sampah_id }: { tempah_sampah_id: st
                             <FormLabel>Foto</FormLabel>
                             <FormControl>
                                 <>
-                                    <Button type="button" className="w-full" onClick={handlePickImage}>
+                                    <Button
+                                        type="button"
+                                        className="w-full"
+                                        onClick={handlePickImage}
+                                        disabled={isPending}
+                                    >
                                         Ambil Foto
                                     </Button>
                                     {pickedImage && (
@@ -218,7 +223,7 @@ export function ComplainLaporanForm({ tempah_sampah_id }: { tempah_sampah_id: st
                     )}
                 />
 
-                <div className="flex flex-col gap-4">
+                <div className="flex flex-col gap-4 mt-4">
                     <Button className="w-full" type="submit" disabled={isPending}>
                         {isPending ? "Sedang mengirim laporan..." : "Kirim Laporan"}
                     </Button>