Skip to content
This repository has been archived by the owner on Aug 23, 2024. It is now read-only.

Commit

Permalink
refactor: update ui for ui complain pages
Browse files Browse the repository at this point in the history 
affected: #3 #4
fix: #6 #7
  • Loading branch information
@yehezkieldio
yehezkieldio committed Feb 14, 2024
1 parent 02aaabc commit 7efec77
Show file tree
Hide file tree
Showing 15 changed files with 204 additions and 89 deletions.
51 changes: 51 additions & 0 deletions apps/app/src/components/complain-tabs.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { Redirect, Route } from "react-router-dom";
import { IonRouterOutlet, IonTabs, IonTabBar, IonTabButton, IonLabel } from "@ionic/react";
import { Icons } from "@trashtrack/ui";

import ComplainDashboard from "../pages/complain/dashboard";
import ComplainReportHistory from "../pages/complain/form/report-history";
import ComplainFormTempatSampah from "../pages/complain/form/tempat-sampah";
import ComplainFormLaporan from "../pages/complain/form/laporan";

const ComplainTabs: React.FC = () => {
return (
<IonTabs>
<IonRouterOutlet animated={false} mode="ios">
<Route path="/complain/tabs/dashboard" render={() => <ComplainDashboard />} exact={true} />
<Route
path="/complain/tabs/form/report-history"
render={() => <ComplainReportHistory />}
exact={true}
/>
<Route
path="/complain/tabs/form/tempat-sampah"
render={() => <ComplainFormTempatSampah />}
exact={true}
/>
<Route
path="/complain/tabs/form/laporan/:tempat_sampah_id"
render={() => <ComplainFormLaporan />}
exact={true}
/>

<Route path="/complain/tabs" render={() => <Redirect to="/complain/tabs/dashboard" />} exact={true} />
</IonRouterOutlet>
<IonTabBar slot="bottom" mode="ios" translucent className="pb-4">
<IonTabButton tab="dashboardTabsComplain" href="/complain/tabs/dashboard">
<Icons.dashboardLaporan strokeWidth={1} className="pt-2 w-[32px] h-[30px]" />
<IonLabel className="pt-2 pb-2">Dashboard</IonLabel>
</IonTabButton>
<IonTabButton tab="laporanTabs" href="/complain/tabs/form/tempat-sampah">
<Icons.tambahakanLaporan strokeWidth={1} className="pt-2 w-[32px] h-[30px]" />
<IonLabel className="pt-2 pb-2">Laporkan</IonLabel>
</IonTabButton>
<IonTabButton tab="riwayatTabs" href="/complain/tabs/form/report-history">
<Icons.riwayatLaporan strokeWidth={1} className="pt-2 w-[32px] h-[30px]" />
<IonLabel className="pt-2 pb-2">Riwayat</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
);
};

export default ComplainTabs;
17 changes: 5 additions & 12 deletions apps/app/src/components/complain.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,23 @@ import { IonPage, IonRouterOutlet } from "@ionic/react";
import { Redirect, Route } from "react-router-dom";

import ComplainIndex from "../pages/complain";
import ComplainDashboard from "../pages/complain/dashboard";
import ComplainFormPersonalDetails from "../pages/complain/form/personal-details";
import ComplainFormTempatSampah from "../pages/complain/form/tempat-sampah";
import ComplainFormLaporan from "../pages/complain/form/laporan";
import { ComplainReportHistory } from "../pages/complain/form/report-history";
import ComplainTabs from "./complain-tabs";

const Complain: React.FC = () => {
return (
<IonPage>
<IonRouterOutlet id="main" animated={false} mode="ios">
<Route path="/complain/index" render={() => <ComplainIndex />} exact={true} />
<Route path="/complain/dashboard" render={() => <ComplainDashboard />} exact={true} />
<Route
path="/complain/form/personal-details"
render={() => <ComplainFormPersonalDetails />}
exact={true}
/>
<Route path="/complain/form/report-history" render={() => <ComplainReportHistory />} exact={true} />
<Route path="/complain/form/tempat-sampah" render={() => <ComplainFormTempatSampah />} exact={true} />
<Route
path="/complain/form/laporan/:tempat_sampah_id"
render={() => <ComplainFormLaporan />}
exact={true}
/>

<Route path="/complain/tabs">
<ComplainTabs />
</Route>
<Route path="/complain" render={() => <Redirect to="/complain/index" />} exact={true} />
</IonRouterOutlet>
</IonPage>
Expand Down
74 changes: 30 additions & 44 deletions apps/app/src/pages/complain/dashboard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { IonContent, IonPage } from "@ionic/react";
import { Card, CardHeader, CardContent, CardTitle, Button } from "@trashtrack/ui";
import { Card, CardHeader, CardContent, CardTitle, Button, CardDescription } from "@trashtrack/ui";
import { getUserNIK } from "@trashtrack/utils";
import { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
Expand Down Expand Up @@ -31,53 +31,39 @@ export function ComplainDashboard() {
<IonContent className="complain-dashboard 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">Dashboard</p>
<p className="text-xs text-left text-slate-600">Dashboard.</p>
</div>
<div className="flex flex-col pt-8 gap-4">
<div>
<h2 className="text-lg">
Selamat datang, <span className="font-bold">{nik}</span>
</h2>
</div>
<Card className="flex flex-col">
<CardHeader className="text-center">
<CardTitle className="text-lg">Lihat riwayat laporan kamu</CardTitle>
<CardHeader>
<CardTitle className="text-lg">Selamat datang di pusat pelaporan sampah.</CardTitle>
<CardDescription className="text-base">
Silahkan pilih menu yang tersedia dibawah untuk melaporkan tempah sampah, atau melihat
riwayat laporan sampah.
</CardDescription>
</CardHeader>
<CardContent className="pt-2">
<Button
className="font-bold text-xs w-full"
variant={"secondary"}
onClick={() => history.replace("/complain/form/report-history")}
>
Riwayat Laporan
</Button>
</CardContent>
</Card>
<Card className="flex flex-col">
<CardHeader className="text-center">
<CardTitle className="text-lg">Sampaikan keluhan atau laporan baru kamu</CardTitle>
</CardHeader>
<CardContent className="pt-2">
<Button
className="font-bold text-xs w-full"
variant={"secondary"}
onClick={() => history.replace("/complain/form/tempat-sampah")}
>
Lapor Sekarang
</Button>
</CardContent>
</Card>
<Card className="flex flex-col mt-8">
<CardContent className="pt-6">
<Button
className="font-bold text-xs w-full mb-2"
onClick={() => history.replace("/complain/form/personal-details")}
>
Kembali ke Login
</Button>
<Button className="font-bold text-xs w-full" onClick={() => history.replace("/tabs/home")}>
Kembali
</Button>
<CardContent>
<p className="text-sm">
NIK:{" "}
<span className="font-bold">{`${String(nik).substring(0, 3)}***${String(nik).substring(
6
)}`}</span>
</p>
<div className="flex flex-col gap-2 mt-8">
<Button
className="font-semibold text-xs w-full mb-2"
onClick={() => history.replace("/complain/form/personal-details")}
>
Isi ulang informasi pribadi
</Button>
<Button
variant="secondary"
className="font-semibold text-xs w-full mb-2"
onClick={() => history.replace("/tabs/home")}
>
Kembali ke halaman utama
</Button>
</div>
</CardContent>
</Card>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/app/src/pages/complain/form/laporan.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export function ComplainFormLaporan() {
<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">Laporan Tempah Sampah</p>
<p className="text-xs text-left text-slate-600">Laporkan sampah yang ada di tempat sampah ini.</p>
</div>
<div className="flex flex-col pt-8 gap-4">
<ComplainLaporanForm tempah_sampah_id={tempat_sampah_id} />
Expand Down
4 changes: 3 additions & 1 deletion apps/app/src/pages/complain/form/personal-details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@ export function ComplainFormPersonalDetails() {
<IonContent className="complain-form-personal-details 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">
Isi informasi pribadi anda untuk melanjutkan pelaporan sampah.
</p>
</div>
<div className="flex flex-col pt-8 gap-4">
<h1 className="font-bold text-lg">Personal Details</h1>
<PersonalDetailsForm />
</div>
</IonContent>
Expand Down
1 change: 1 addition & 0 deletions apps/app/src/pages/complain/form/report-history.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export function ComplainReportHistory() {
<IonContent className="complain-report-history 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">Riwayat laporan.</p>
</div>
<div className="flex flex-col pt-8 gap-4">
<h1 className="font-bold text-lg">Riwayat Laporan</h1>
Expand Down
77 changes: 49 additions & 28 deletions apps/app/src/pages/complain/form/tempat-sampah.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { IonContent, IonPage } from "@ionic/react";
import { Card, CardHeader, CardContent, CardTitle, Button, Input } from "@trashtrack/ui";
import { Card, CardHeader, CardContent, CardTitle, Button, Input, Label, Separator, Skeleton } from "@trashtrack/ui";
import { useHistory } from "react-router-dom";
import { useState } from "react";
import Fuse from "fuse.js";
Expand All @@ -26,50 +26,71 @@ export function ComplainFormTempatSampah() {

const fuse = new Fuse(!isLoading ? (data.data as TrashBin[]) : [], fuseOptions);

const filteredData =
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const filteredData: any[] =
!isLoading && searchTerm === "" ? data.data : fuse.search(searchTerm).map((result) => result.item);

return (
<IonPage>
<IonContent className="complain-form-tempat-sampah 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">Pilih tempah sampah.</p>
</div>
<div className="flex flex-col pt-8 gap-4">
<Input
type="text"
placeholder="Search tempat sampah"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<div className="flex flex-col">
<Label className="mb-2" htmlFor="search">
Cari tempat sampah
</Label>
<Input
id="search"
type="text"
placeholder="Cari tempat sampah..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
<Separator className="my-4" />
{isLoading ? (
<div>Loading...</div>
<Card className="flex flex-col">
<CardHeader>
<Skeleton className="h-4 w-20" />
</CardHeader>
<CardContent>
<Skeleton className="h-4 w-40" />
<Skeleton className="h-4 w-40" />
<Skeleton className="h-4 w-40" />
</CardContent>
</Card>
) : filteredData.length === 0 && searchTerm !== "" ? (
<Card className="flex flex-col">
<CardHeader className="text-left">
<CardTitle className="text-lg">
Tidak ditemukan tempat sampah dengan nama{" "}
<span className="font-bold">{searchTerm}</span>
</CardTitle>
</CardHeader>
</Card>
) : (
filteredData.map(
(trashBin: {
id: number;
name: string;
description: string;
latitude: number;
longitude: number;
}) => (
<Card className="flex flex-col">
<CardHeader className="text-center">
<CardTitle className="text-lg">{trashBin.name}</CardTitle>
</CardHeader>
<CardContent className="pt-2">
<p>{trashBin.description}</p>
filteredData.map((trashBin) => (
<Card className="flex flex-col" key={trashBin.id}>
<CardHeader className="text-left">
<CardTitle className="text-lg">{trashBin.name}</CardTitle>
</CardHeader>
<CardContent className="pt-2">
<p className="text-sm">{trashBin.description}</p>
<div className="mt-4">
<Button
className="font-bold text-xs w-full"
variant={"secondary"}
onClick={() => history.push(`/complain/form/laporan/${trashBin.id}`)}
onClick={() => history.push(`/complain/tabs/form/laporan/${trashBin.id}`)}
>
Laporkan
</Button>
</CardContent>
</Card>
)
)
</div>
</CardContent>
</Card>
))
)}
</div>
</IonContent>
Expand Down
2 changes: 1 addition & 1 deletion apps/app/src/pages/complain/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export function ComplainIndex() {
const nik = await getNik();

if (nik) {
history.push("/complain/dashboard");
history.push("/complain/tabs/dashboard");
} else {
history.push("/complain/form/personal-details");
}
Expand Down
1 change: 1 addition & 0 deletions libs/components/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"@radix-ui/react-progress": "^1.0.3",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-toast": "^1.1.5",
"embla-carousel-react": "8.0.0-rc21",
"react-hook-form": "^7.50.0",
Expand Down
22 changes: 22 additions & 0 deletions libs/components/pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion libs/components/src/complain/personal-details-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export function PersonalDetailsForm() {
phoneNo: values.no_telpon_wa.toString(),
});

history.replace("/complain/dashboard");
history.replace("/complain/tabs/dashboard");
}

return (
Expand Down
6 changes: 5 additions & 1 deletion libs/components/src/forms/complain/laporan/laporan-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,11 @@ export function ComplainLaporanForm({ tempah_sampah_id }: { tempah_sampah_id: st
<Button className="w-full" type="submit" disabled={isPending}>
{isPending ? "Sedang mengirim laporan..." : "Kirim Laporan"}
</Button>
<Button className="w-full" variant="secondary" onClick={() => history.replace("/tabs/home")}>
<Button
className="w-full"
variant="secondary"
onClick={() => history.replace("/complain/tabs/form/tempat-sampah")}
>
Kembali
</Button>
</div>
Expand Down
Loading

0 comments on commit 7efec77

Please sign in to comment.