diff --git a/apps/app/src/locales/en.json b/apps/app/src/locales/en.json
index d16091f..d131934 100644
--- a/apps/app/src/locales/en.json
+++ b/apps/app/src/locales/en.json
@@ -86,7 +86,13 @@
             },
             "dashboard": {
                 "login": "Back to Login",
-                "home": "Back to Home"
+                "home": "Back to Home",
+                "chart": {
+                    "total_trash": "Total Trash",
+                    "total_report": "Total Report",
+                    "report_status": "Report Status",
+                    "total_trash_bin": "Total Trash Bin"
+                }
             },
             "user": {
                 "subtitle": "User",
@@ -243,6 +249,7 @@
                 "view_subtrashbin": "View Sub Trash Bin",
                 "view_trash": "View Trash",
                 "view_history": "View History",
+                "capacity": "Capacity",
                 "trash": {
                     "subtitle": "Trash",
                     "filter_oldest": "Filter by Oldest",
@@ -310,6 +317,7 @@
                         "status": "Report Status",
                         "photo": "Report Photo",
                         "submitFeedback": "Submit Feedback",
+                        "view_feedback": "Feedback",
                         "action": "Actions",
                         "actions": {
                             "title": "Report Actions",
diff --git a/apps/app/src/locales/id.json b/apps/app/src/locales/id.json
index e025107..3b5592f 100644
--- a/apps/app/src/locales/id.json
+++ b/apps/app/src/locales/id.json
@@ -86,7 +86,13 @@
             },
             "dashboard": {
                 "login": "Kembali ke Login",
-                "home": "Kembali ke Home"
+                "home": "Kembali ke Home",
+                "chart": {
+                    "total_trash": "Total Sampah",
+                    "total_report": "Total Laporan",
+                    "report_status": "Status Laporan",
+                    "total_trash_bin": "Total Tempat Sampah"
+                }
             },
             "user": {
                 "subtitle": "Pengguna",
@@ -243,6 +249,7 @@
                 "view_subtrashbin": "Lihat Sub Tempat Sampah",
                 "view_trash": "Lihat Sampah",
                 "view_history": "Lihat Riwayat",
+                "capacity": "Kapasitas",
                 "trash": {
                     "subtitle": "Sampah",
                     "filter_oldest": "Filter Terlama",
@@ -310,6 +317,7 @@
                         "status": "Status Laporan",
                         "photo": "Foto Laporan",
                         "submitFeedback": "Kirim Tanggapan",
+                        "view_feedback": "Tanggapan",
                         "actions": {
                             "title": "Tindakan Laporan",
                             "loading": "Loading...",
diff --git a/apps/app/src/pages/complain/form/report-history.tsx b/apps/app/src/pages/complain/form/report-history.tsx
index d5036d5..a302758 100644
--- a/apps/app/src/pages/complain/form/report-history.tsx
+++ b/apps/app/src/pages/complain/form/report-history.tsx
@@ -16,6 +16,7 @@ import { EnumResponseStatus, InterfaceReport } from "../../operator/trash-bin/re
 import { useGetTrashBinById } from "../../operator/trash-bin/report/get-trash-bin.query";
 import { useTranslation } from "react-i18next";
 import { t } from "i18next";
+import dayjs from "dayjs";
 
 function ReportStatus({ status }: { status: EnumResponseStatus }) {
     return (
@@ -105,6 +106,12 @@ export function ComplainReportHistory() {
         refetch();
     });
 
+    function filterAndSortLatest(data: InterfaceReport[]) {
+        return data
+            .filter((report) => dayjs(report.createdAt))
+            .sort((a, b) => dayjs(b.createdAt).valueOf() - dayjs(a.createdAt).valueOf());
+    }
+
     function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
         queryClient.invalidateQueries({
             queryKey: ["getRepgetReportByNikorts", String(nik)],
@@ -114,6 +121,8 @@ export function ComplainReportHistory() {
         event.detail.complete();
     }
 
+    const sortedData = reportData ? filterAndSortLatest(reportData.data) : [];
+
     return (
         <IonPage>
             <IonContent className="operator-report-action-display ion-padding" fullscreen>
@@ -153,7 +162,7 @@ export function ComplainReportHistory() {
                             </CardHeader>
                         </Card>
                     ) : (
-                        reportData.data.map((report: InterfaceReport) => (
+                        sortedData.map((report: InterfaceReport) => (
                             <Card
                                 onClick={() => history.push(`/complain/tabs/form/report-history/feedback/${report.id}`)}
                                 key={report.id}
diff --git a/apps/app/src/pages/complain/form/tempat-sampah.tsx b/apps/app/src/pages/complain/form/tempat-sampah.tsx
index c414aa9..d36d74c 100644
--- a/apps/app/src/pages/complain/form/tempat-sampah.tsx
+++ b/apps/app/src/pages/complain/form/tempat-sampah.tsx
@@ -6,6 +6,7 @@ import Fuse from "fuse.js";
 
 import { useTrashBinQuery } from "../../../queries/get-trash-bin-query";
 import { useTranslation } from "react-i18next";
+import dayjs from "dayjs";
 
 interface TrashBin {
     id: number;
@@ -13,6 +14,7 @@ interface TrashBin {
     description: string;
     latitude: number;
     longitude: number;
+    createdAt: string;
 }
 
 export function ComplainFormTempatSampah() {
@@ -26,11 +28,19 @@ export function ComplainFormTempatSampah() {
         threshold: 0.4,
     };
 
-    const fuse = new Fuse(!isLoading ? (data.data as TrashBin[]) : [], fuseOptions);
+    function filterAndSortLatest(data: TrashBin[]) {
+        return data
+            .filter((trashbin) => dayjs(trashbin.createdAt))
+            .sort((a, b) => dayjs(b.createdAt).valueOf() - dayjs(a.createdAt).valueOf());
+    }
+
+    const fuse = new Fuse(!isLoading ? (filterAndSortLatest(data.data) as TrashBin[]) : [], fuseOptions);
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const filteredData: any[] =
-        !isLoading && searchTerm === "" ? data.data : fuse.search(searchTerm).map((result) => result.item);
+        !isLoading && searchTerm === ""
+            ? filterAndSortLatest(data.data)
+            : fuse.search(searchTerm).map((result) => result.item);
 
     return (
         <IonPage>
diff --git a/apps/app/src/pages/operator/dashboard.tsx b/apps/app/src/pages/operator/dashboard.tsx
index 51afa0a..99adcca 100644
--- a/apps/app/src/pages/operator/dashboard.tsx
+++ b/apps/app/src/pages/operator/dashboard.tsx
@@ -1,18 +1,71 @@
-import { IonContent, IonPage } from "@ionic/react";
-import { Card, CardContent, Button, ChartExample } from "@trashtrack/ui";
+import { CapacitorHttp } from "@capacitor/core";
+import { IonContent, IonPage, IonRefresher, IonRefresherContent, RefresherEventDetail } from "@ionic/react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+    Card,
+    CardContent,
+    Button,
+    AreaChartTotalTrash,
+    AreaChartTotalReport,
+    PieChartReportStatus,
+} from "@trashtrack/ui";
 import { OperatorContext } from "@trashtrack/ui";
+import { API_URL } from "@trashtrack/utils";
 import { t } from "i18next";
 import { useContext } from "react";
+import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
-import { Chart } from "react-google-charts";
+
+export const useGetTotalTrashbin = () => {
+    return useQuery({
+        queryKey: ["useGetTotalTrashbin"],
+        queryFn: () =>
+            CapacitorHttp.request({
+                url: API_URL + `/trash-bin/card-chart-total`,
+                method: "GET",
+            }).then((res) => res.data),
+    });
+};
 
 export function OperatorDashboard() {
     const history = useHistory();
     const operator = useContext(OperatorContext);
+    const { t } = useTranslation();
+    const queryClient = useQueryClient();
+
+    function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+        Promise.all([
+            queryClient.invalidateQueries({
+                queryKey: ["useGetTotalTrashbin"],
+            }),
+            queryClient.invalidateQueries({
+                queryKey: ["useGetAreaChartTrashTotal"],
+            }),
+            queryClient.invalidateQueries({
+                queryKey: ["useGetAreaChartReportTotal"],
+            }),
+            queryClient.invalidateQueries({
+                queryKey: ["useGetPieChartResponseStatus"],
+            }),
+        ]);
+
+        event.detail.complete();
+    }
+
+    const { data: totalTrashbin, isLoading } = useGetTotalTrashbin();
+
+    if (isLoading) {
+        return <div>Loading...</div>;
+    }
 
     return (
         <IonPage>
             <IonContent className="operator-dashboard ion-padding" fullscreen>
+                <IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
+                    <IonRefresherContent>
+                        <p className="text-xs text-center">Refreshing...</p>
+                    </IonRefresherContent>
+                </IonRefresher>
                 <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>
@@ -20,24 +73,30 @@ export function OperatorDashboard() {
                 <div className="flex flex-col pt-8 gap-4">
                     <Card>
                         <CardContent className="pt-2 pb-2 pl-0 pr-0">
-                            <ChartExample />
+                            <p className="pl-6 pt-4 mb-4 text-base">
+                                {t("operator.dashboard.chart.total_trash_bin")}: {totalTrashbin.data}
+                            </p>
                         </CardContent>
                     </Card>
                     <Card>
-                        <CardContent>
-                            <Chart
-                                chartType="ScatterChart"
-                                data={[
-                                    ["Age", "Weight"],
-                                    [4, 5.5],
-                                    [8, 12],
-                                ]}
-                                width="100%"
-                                height="400px"
-                                legendToggle
-                            />
+                        <CardContent className="pt-2 pb-2 pl-0 pr-0">
+                            <p className="pl-6 pt-4 mb-4 text-base">{t("operator.dashboard.chart.total_trash")}</p>
+                            <AreaChartTotalTrash />
                         </CardContent>
                     </Card>
+                    <Card>
+                        <CardContent className="pt-2 pb-2 pl-0 pr-0">
+                            <p className="pl-6 pt-4 mb-4 text-base">{t("operator.dashboard.chart.report_status")}</p>
+                            <PieChartReportStatus />
+                        </CardContent>
+                    </Card>
+                    <Card>
+                        <CardContent className="pt-2 pb-2 pl-0 pr-0">
+                            <p className="pl-6 pt-4 mb-4 text-base">{t("operator.dashboard.chart.total_report")}</p>
+                            <AreaChartTotalReport />
+                        </CardContent>
+                    </Card>
+
                     <Card className="flex flex-col mt-8">
                         <CardContent className="pt-6">
                             <Button
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
index 371ce2d..4f8a0a9 100644
--- 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
@@ -279,10 +279,11 @@ export function DetailedReportPage() {
                                         <div>
                                             <Button
                                                 className="w-full mb-2"
-                                                disabled={report?.status !== EnumResponseStatus.ACCEPTED}
                                                 onClick={() => history.push(`/trash-bin/tabs/feedback/${report?.id}`)}
                                             >
-                                                {t("operator.reports.detailed.input.submitFeedback")}
+                                                {report?.status === EnumResponseStatus.COMPLETED
+                                                    ? t("operator.reports.detailed.input.view_feedback")
+                                                    : t("operator.reports.detailed.input.submitFeedback")}
                                             </Button>
                                             <div className="flex flex-row gap-2">
                                                 <ReportStatusAction
diff --git a/apps/app/src/pages/operator/trash-bin/report/report-feedback/feedback.page.tsx b/apps/app/src/pages/operator/trash-bin/report/report-feedback/feedback.page.tsx
index 2f5815f..33784aa 100644
--- a/apps/app/src/pages/operator/trash-bin/report/report-feedback/feedback.page.tsx
+++ b/apps/app/src/pages/operator/trash-bin/report/report-feedback/feedback.page.tsx
@@ -17,6 +17,8 @@ import { CapacitorHttp } from "@capacitor/core";
 import { queryClient } from "../../../../../main";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { EnumResponseStatus, InterfaceReport } from "../reports.page";
+import { useGetReportsWithTrashBins } from "../get-trash-and-report.query";
 
 export interface InterfaceFeedback {
     id: number;
@@ -99,6 +101,17 @@ export function FeedbackPage() {
     const [isOpen, setIsOpen] = useState(false);
     const { t } = useTranslation();
 
+    const { reports, trashBins, isReportsLoading, isTrashBinsLoading } = useGetReportsWithTrashBins();
+    let filter_report: InterfaceReport = !isReportsLoading
+        ? reports.data.find((report: InterfaceReport) => report.id === Number(report_id))
+        : { id: 0, trashBinId: 0, status: "", createdAt: "" };
+
+    if (isReportsLoading || isTrashBinsLoading) {
+        console.log("Loading...");
+    } else {
+        filter_report = reports.data.find((report: InterfaceReport) => report.id === Number(report_id));
+    }
+
     const { data: feedbackData, isError, error, isLoading, refetch, isRefetching } = useGetFeedbacks();
     const filteredData = !isLoading
         ? feedbackData.data.filter((feedback: InterfaceFeedback) => feedback.reportId === Number(report_id))
@@ -123,6 +136,7 @@ export function FeedbackPage() {
                     <div className="flex flex-col gap-2">
                         <Button
                             className="w-full"
+                            disabled={filter_report?.status === EnumResponseStatus.COMPLETED ? true : false}
                             onClick={() => history.push(`/trash-bin/tabs/feedback/${report_id}/create`)}
                         >
                             {t("operator.reports.feedback.delete.create")}
@@ -179,6 +193,11 @@ export function FeedbackPage() {
                                             <Button
                                                 className="w-full mt-4"
                                                 variant="destructive"
+                                                disabled={
+                                                    filter_report?.status === EnumResponseStatus.COMPLETED
+                                                        ? true
+                                                        : false
+                                                }
                                                 onClick={() => {
                                                     setIsOpen(true);
                                                 }}
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
index 01f83bf..bd52d2c 100644
--- a/apps/app/src/pages/operator/trash-bin/report/reports.page.tsx
+++ b/apps/app/src/pages/operator/trash-bin/report/reports.page.tsx
@@ -11,6 +11,7 @@ import { useState } from "react";
 import { InterfaceResult, useGetReportsWithTrashBins } from "./get-trash-and-report.query";
 import Fuse from "fuse.js";
 import { useTranslation } from "react-i18next";
+import dayjs from "dayjs";
 
 export enum EnumResponseStatus {
     NOT_RESPONDED = "notResponded",
@@ -105,13 +106,21 @@ export function ReportsPage() {
         threshold: 0.4,
     };
 
+    function filterAndSortLatest(data: InterfaceReport[]) {
+        return data
+            .filter((report) => dayjs(report.createdAt))
+            .sort((a, b) => dayjs(b.createdAt).valueOf() - dayjs(a.createdAt).valueOf());
+    }
+
     let data: InterfaceResult[] = [];
     const fuse = new Fuse(data, fuseOptions);
 
     if (isReportsLoading || isTrashBinsLoading) {
         console.log("Loading...");
     } else {
-        data = reports.data.map((re: InterfaceReport) => {
+        const filter_by_latest_first = filterAndSortLatest(reports.data);
+
+        data = filter_by_latest_first.map((re: InterfaceReport) => {
             const trashBin = trashBins.data.find((tb: InterfaceTrashbin) => tb.id === re.trashBinId);
             return {
                 ...re,
diff --git a/apps/app/src/pages/operator/trash-bin/trashbin/sub-trashbin/detailed-subtrashbin.page.tsx b/apps/app/src/pages/operator/trash-bin/trashbin/sub-trashbin/detailed-subtrashbin.page.tsx
index 15c7bb1..7db2131 100644
--- a/apps/app/src/pages/operator/trash-bin/trashbin/sub-trashbin/detailed-subtrashbin.page.tsx
+++ b/apps/app/src/pages/operator/trash-bin/trashbin/sub-trashbin/detailed-subtrashbin.page.tsx
@@ -115,6 +115,15 @@ export function DetailedSubTrashbinPage() {
         refetch();
     });
 
+    const capacity =
+        subtrashbin?.currentCapacity === 0
+            ? 0
+            : 100 - (((subtrashbin?.currentCapacity as number) / (subtrashbin?.maxCapacity ?? 0)) as number) * 100;
+
+    console.log("capacity", capacity);
+    console.log("max capacity", subtrashbin?.maxCapacity);
+    console.log("current capacity", subtrashbin?.currentCapacity);
+
     const { t } = useTranslation();
 
     return (
@@ -159,12 +168,7 @@ export function DetailedSubTrashbinPage() {
                                             <Label htmlFor="openCount" className="text-xs">
                                                 {t("operator.subtrashbin.detailed.capacity")}
                                             </Label>
-                                            <Input
-                                                readOnly
-                                                type="text"
-                                                id="openCount"
-                                                value={`${subtrashbin?.currentCapacity} / ${subtrashbin?.maxCapacity}`}
-                                            />
+                                            <Input readOnly type="text" id="openCount" value={`${capacity}% / 100%`} />
                                         </div>
                                     </div>
                                     <Separator className="my-4" />
diff --git a/apps/app/src/pages/operator/trash-bin/trashbin/sub-trashbin/history.page.tsx b/apps/app/src/pages/operator/trash-bin/trashbin/sub-trashbin/history.page.tsx
index d66597b..9a63d95 100644
--- a/apps/app/src/pages/operator/trash-bin/trashbin/sub-trashbin/history.page.tsx
+++ b/apps/app/src/pages/operator/trash-bin/trashbin/sub-trashbin/history.page.tsx
@@ -26,7 +26,7 @@ export function TrashPage() {
     const history = useHistory();
     const queryClient = useQueryClient();
     const { trashbin_id, subtrashbin_id } = useParams<{ trashbin_id: string; subtrashbin_id: string }>();
-    const [filterType, setFilterType] = useState<"latest" | "oldest" | "none">("none");
+    const [filterType, setFilterType] = useState<"latest" | "oldest" | "none">("latest");
 
     const { data: historyData, isLoading, isFetching, isError, error, refetch } = useGetHistories();
 
diff --git a/apps/app/src/pages/operator/trash-bin/trashbin/sub-trashbin/subtrashbin.page.tsx b/apps/app/src/pages/operator/trash-bin/trashbin/sub-trashbin/subtrashbin.page.tsx
index de20e33..4b232b3 100644
--- a/apps/app/src/pages/operator/trash-bin/trashbin/sub-trashbin/subtrashbin.page.tsx
+++ b/apps/app/src/pages/operator/trash-bin/trashbin/sub-trashbin/subtrashbin.page.tsx
@@ -13,6 +13,7 @@ import { useState } from "react";
 import Fuse from "fuse.js";
 import { useGetSubTrashbins } from "./get-subtrashbins.query";
 import { useTranslation } from "react-i18next";
+import dayjs from "dayjs";
 
 export interface InterfaceSubTrashbin {
     id: number;
@@ -20,6 +21,7 @@ export interface InterfaceSubTrashbin {
     name: string;
     maxCapacity: number;
     currentCapacity: number;
+    createdAt: string;
 }
 
 export function SubTrashbinPage() {
@@ -44,13 +46,22 @@ export function SubTrashbinPage() {
         threshold: 0.4,
     };
 
+    function filterAndSortLatest(data: InterfaceSubTrashbin[]) {
+        return data
+            .filter((subtrashbin) => dayjs(subtrashbin.createdAt))
+            .sort((a, b) => dayjs(b.createdAt).valueOf() - dayjs(a.createdAt).valueOf());
+    }
+
     const filteredDataForId = !isLoading
         ? subtrashBinData.data.filter(
               (subtrashbin: InterfaceSubTrashbin) => subtrashbin.trashBinId === Number(trashbin_id)
           )
         : [];
 
-    const fuse = new Fuse(!isLoading ? (filteredDataForId as InterfaceSubTrashbin[]) : [], fuseOptions);
+    const fuse = new Fuse(
+        !isLoading ? (filterAndSortLatest(filteredDataForId) as InterfaceSubTrashbin[]) : [],
+        fuseOptions
+    );
 
     const filteredData: InterfaceSubTrashbin[] =
         !isLoading && searchTerm === "" ? filteredDataForId : fuse.search(searchTerm).map((result) => result.item);
@@ -132,7 +143,17 @@ export function SubTrashbinPage() {
                             <Card key={subtrashbin.id} className="flex flex-col mt-4">
                                 <CardContent className="pt-4">
                                     <div className="flex flex-col gap-2">
-                                        <p className="text-xs text-left">{subtrashbin.name}</p>
+                                        <p className="text-sm text-left">{subtrashbin.name}</p>
+                                        <p className="text-xs text-left mb-2">
+                                            {t("operator.subtrashbin.capacity")}:{" "}
+                                            {subtrashbin?.currentCapacity === 0
+                                                ? 0
+                                                : 100 -
+                                                  (((subtrashbin?.currentCapacity as number) /
+                                                      (subtrashbin?.maxCapacity ?? 0)) as number) *
+                                                      100}
+                                            % / 100%
+                                        </p>
                                         <div className="flex flex-col gap-4">
                                             <Button
                                                 className="w-full"
diff --git a/apps/app/src/pages/operator/trash-bin/trashbin/sub-trashbin/trash.page.tsx b/apps/app/src/pages/operator/trash-bin/trashbin/sub-trashbin/trash.page.tsx
index 3903163..47a8be8 100644
--- a/apps/app/src/pages/operator/trash-bin/trashbin/sub-trashbin/trash.page.tsx
+++ b/apps/app/src/pages/operator/trash-bin/trashbin/sub-trashbin/trash.page.tsx
@@ -24,7 +24,7 @@ export function TrashPage() {
     const history = useHistory();
     const queryClient = useQueryClient();
     const { trashbin_id, subtrashbin_id } = useParams<{ trashbin_id: string; subtrashbin_id: string }>();
-    const [filterType, setFilterType] = useState<"latest" | "oldest" | "none">("none");
+    const [filterType, setFilterType] = useState<"latest" | "oldest" | "none">("latest");
     const { t } = useTranslation();
 
     const { data: trashData, isLoading, isFetching, isError, error, refetch } = useGetTrashes();
diff --git a/apps/app/src/pages/operator/trash-bin/trashbin/trashbin.page.tsx b/apps/app/src/pages/operator/trash-bin/trashbin/trashbin.page.tsx
index 734909e..987711b 100644
--- a/apps/app/src/pages/operator/trash-bin/trashbin/trashbin.page.tsx
+++ b/apps/app/src/pages/operator/trash-bin/trashbin/trashbin.page.tsx
@@ -13,6 +13,7 @@ import { useHistory } from "react-router-dom";
 import { useState } from "react";
 import Fuse from "fuse.js";
 import { useTranslation } from "react-i18next";
+import dayjs from "dayjs";
 
 export interface InterfaceTrashbin {
     id: number;
@@ -41,14 +42,25 @@ export function TrashBinPage() {
         refetch();
     });
 
+    function filterAndSortLatest(data: InterfaceTrashbin[]) {
+        return data
+            .filter((trashbin) => dayjs(trashbin.createdAt))
+            .sort((a, b) => dayjs(b.createdAt).valueOf() - dayjs(a.createdAt).valueOf());
+    }
+
     const fuseOptions = {
         keys: ["name"],
         threshold: 0.4,
     };
-    const fuse = new Fuse(!isLoading ? (trashBinData.data as InterfaceTrashbin[]) : [], fuseOptions);
+    const fuse = new Fuse(
+        !isLoading ? (filterAndSortLatest(trashBinData.data) as InterfaceTrashbin[]) : [],
+        fuseOptions
+    );
 
     const filteredData: InterfaceTrashbin[] =
-        !isLoading && searchTerm === "" ? trashBinData.data : fuse.search(searchTerm).map((result) => result.item);
+        !isLoading && searchTerm === ""
+            ? filterAndSortLatest(trashBinData.data)
+            : fuse.search(searchTerm).map((result) => result.item);
 
     function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
         queryClient.invalidateQueries({
diff --git a/libs/components/src/charts/report-status.tsx b/libs/components/src/charts/report-status.tsx
new file mode 100644
index 0000000..3d90a03
--- /dev/null
+++ b/libs/components/src/charts/report-status.tsx
@@ -0,0 +1,163 @@
+import React from "react";
+import {
+    AreaChart,
+    Area,
+    XAxis,
+    YAxis,
+    CartesianGrid,
+    Tooltip,
+    Legend,
+    ResponsiveContainer,
+    PieChart,
+    Pie,
+    Sector,
+    Cell,
+} from "recharts";
+import { CapacitorHttp } from "@capacitor/core";
+import { useQuery } from "@tanstack/react-query";
+import { API_URL } from "@trashtrack/utils";
+import dayjs from "dayjs";
+
+export const useGetPieChartResponseStatus = () => {
+    return useQuery({
+        queryKey: ["useGetPieChartResponseStatus"],
+        queryFn: () =>
+            CapacitorHttp.request({
+                url: API_URL + `/report/pie-chart-status`,
+                method: "GET",
+            }).then((res) => res.data),
+    });
+};
+
+enum Local_EnumResponseStatus {
+    NOT_RESPONDED = "notResponded",
+    ACCEPTED = "accepted",
+    REJECTED = "rejected",
+    COMPLETED = "completed",
+}
+
+const statusColors = {
+    "Not Responded": "#FFD700", // Gold
+    "Accepted": "#00FF00", // Green
+    "Rejected": "#FF0000", // Red
+    "Completed": "#0000FF", // Blue
+};
+
+export interface InterfacePieChartReportStatus {
+    name: string;
+    total: number;
+}
+
+const renderActiveShape = (props) => {
+    const RADIAN = Math.PI / 180;
+    const { cx, cy, midAngle, innerRadius, outerRadius, startAngle, endAngle, fill, payload, percent, value, name } =
+        props;
+    const sin = Math.sin(-RADIAN * midAngle);
+    const cos = Math.cos(-RADIAN * midAngle);
+    const sx = cx + (outerRadius + 10) * cos;
+    const sy = cy + (outerRadius + 10) * sin;
+    const mx = cx + (outerRadius + 30) * cos;
+    const my = cy + (outerRadius + 30) * sin;
+    const ex = mx + (cos >= 0 ? 1 : -1) * 22;
+    const ey = my;
+    const textAnchor = cos >= 0 ? "start" : "end";
+
+    return (
+        <g>
+            <Sector
+                cx={cx}
+                cy={cy}
+                innerRadius={innerRadius}
+                outerRadius={outerRadius}
+                startAngle={startAngle}
+                endAngle={endAngle}
+                fill={fill}
+            />
+            <Sector
+                cx={cx}
+                cy={cy}
+                startAngle={startAngle}
+                endAngle={endAngle}
+                innerRadius={outerRadius + 6}
+                outerRadius={outerRadius + 10}
+                fill={fill}
+            />
+            <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
+            <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
+            <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333">{`${name}`}</text>
+        </g>
+    );
+};
+export function PieChartReportStatus() {
+    const { data: chartData, isLoading } = useGetPieChartResponseStatus();
+    const [activeIndex, setActiveIndex] = React.useState(0);
+
+    if (isLoading) {
+        return <div>Loading...</div>;
+    }
+
+    const onPieEnter = (data, index) => {
+        setActiveIndex(index);
+    };
+
+    const sanitalizeNameWithEnum = (name: string) => {
+        switch (name) {
+            case Local_EnumResponseStatus.NOT_RESPONDED:
+                return "Not Responded";
+            case Local_EnumResponseStatus.ACCEPTED:
+                return "Accepted";
+            case Local_EnumResponseStatus.REJECTED:
+                return "Rejected";
+            case Local_EnumResponseStatus.COMPLETED:
+                return "Completed";
+            default:
+                return name;
+        }
+    };
+
+    const appendToData = (data: InterfacePieChartReportStatus[]) => {
+        return data.map((d) => {
+            return {
+                ...d,
+                name: sanitalizeNameWithEnum(d.name),
+            };
+        });
+    };
+
+    chartData.data = appendToData(chartData.data);
+
+    console.log("chartData", chartData.data);
+
+    return (
+        <ResponsiveContainer width="100%" height={600}>
+            <PieChart
+                width={500}
+                height={400}
+                margin={{
+                    top: 10,
+                    right: 30,
+                    left: 0,
+                    bottom: 0,
+                }}
+            >
+                <Legend layout="horizontal" verticalAlign="top" align="center" />
+                <Pie
+                    activeIndex={activeIndex}
+                    activeShape={renderActiveShape}
+                    onMouseEnter={onPieEnter}
+                    label
+                    data={chartData.data}
+                    dataKey="value"
+                    cx="50%"
+                    cy="50%"
+                    outerRadius={60}
+                    fill="#8884d8"
+                >
+                    {chartData.data.map((entry, index) => (
+                        <Cell key={`cell-${index}`} fill={statusColors[entry.name]} />
+                    ))}
+                </Pie>
+            </PieChart>
+        </ResponsiveContainer>
+    );
+}
diff --git a/libs/components/src/charts/total-report.tsx b/libs/components/src/charts/total-report.tsx
new file mode 100644
index 0000000..9a0db02
--- /dev/null
+++ b/libs/components/src/charts/total-report.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Sector } from "recharts";
+import { CapacitorHttp } from "@capacitor/core";
+import { useQuery } from "@tanstack/react-query";
+import { API_URL } from "@trashtrack/utils";
+import dayjs from "dayjs";
+
+export const useGetAreaChartReportTotal = () => {
+    return useQuery({
+        queryKey: ["useGetAreaChartReportTotal"],
+        queryFn: () =>
+            CapacitorHttp.request({
+                url: API_URL + `/report/area-chart-total`,
+                method: "GET",
+            }).then((res) => res.data),
+    });
+};
+
+export interface InterfaceAreaChartReportTotal {
+    name: string;
+    total: number;
+}
+
+export function AreaChartTotalReport() {
+    const { data: chartData, isLoading } = useGetAreaChartReportTotal();
+
+    if (isLoading) {
+        return <div>Loading...</div>;
+    }
+
+    return (
+        <ResponsiveContainer width="100%" height={600}>
+            <AreaChart
+                width={500}
+                height={400}
+                data={chartData.data}
+                margin={{
+                    top: 10,
+                    right: 30,
+                    left: 0,
+                    bottom: 0,
+                }}
+            >
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="name" />
+                <YAxis />
+                <Tooltip />
+                <Area type="monotone" dataKey="total" stroke="#8884d8" fill="#8884d8" />
+            </AreaChart>
+        </ResponsiveContainer>
+    );
+}
diff --git a/libs/components/src/charts/total-trash.tsx b/libs/components/src/charts/total-trash.tsx
new file mode 100644
index 0000000..0b1556c
--- /dev/null
+++ b/libs/components/src/charts/total-trash.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
+import { CapacitorHttp } from "@capacitor/core";
+import { useQuery } from "@tanstack/react-query";
+import { API_URL } from "@trashtrack/utils";
+import dayjs from "dayjs";
+
+export const useGetAreaChartTrashTotal = () => {
+    return useQuery({
+        queryKey: ["useGetAreaChartTrashTotal"],
+        queryFn: () =>
+            CapacitorHttp.request({
+                url: API_URL + `/trash/area-chart-total`,
+                method: "GET",
+            }).then((res) => res.data),
+    });
+};
+
+export interface InterfaceAreaChartTrashTotal {
+    name: string;
+    total: number;
+}
+
+export function AreaChartTotalTrash() {
+    const { data: chartData, isLoading } = useGetAreaChartTrashTotal();
+
+    if (isLoading) {
+        return <div>Loading...</div>;
+    }
+
+    // const appendDummyData = () => {
+    //     const data = chartData.data;
+    //     const today = dayjs(); // DD-M-YYYY
+    //     const days = 30;
+    //     const dummyData = [];
+    //     for (let i = 0; i < days; i++) {
+    //         const date = today.subtract(i, "day").format("DD-M-YYYY");
+    //         if (!data.find((d) => d.name === date)) {
+    //             dummyData.push({ name: date, total: Math.floor(Math.random() * 19) + 1 });
+    //         }
+    //     }
+    //     return [...data, ...dummyData];
+    // };
+
+    // if (chartData.data.length < 30) {
+    //     chartData.data = appendDummyData();
+    // }
+
+    return (
+        <ResponsiveContainer width="100%" height={600}>
+            <AreaChart
+                width={500}
+                height={400}
+                data={chartData.data}
+                margin={{
+                    top: 10,
+                    right: 30,
+                    left: 0,
+                    bottom: 0,
+                }}
+            >
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="name" />
+                <YAxis />
+                <Tooltip />
+                <Area type="monotone" dataKey="total" stroke="#8884d8" fill="#8884d8" />
+            </AreaChart>
+        </ResponsiveContainer>
+    );
+}
diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
index db52008..fa21f61 100644
--- a/libs/components/src/index.ts
+++ b/libs/components/src/index.ts
@@ -36,3 +36,7 @@ export * from "./forms/operator/trash-bin/change-trashbin.form";
 export * from "./forms/operator/trash-bin/change-subtrashbin.form";
 
 export * from "./charts/chart";
+
+export * from "./charts/total-trash";
+export * from "./charts/total-report";
+export * from "./charts/report-status";