Merge pull request #65 from team-capstone-1/feat/api-dashboard

(065) fix:(TotalCards) add initial value in total cards when data not found

src/apis/APIDashboard.js

@@ -32,4 +32,31 @@ export const APIDashboard = {
     }
   },
 
+  getDashboardIncome: async () => {
+    try {
+      const response = await axiosInstance.get("/doctors/dashboard/graph");
+      return response.data;
+    } catch (error) {
+      if (error instanceof AxiosError) {
+        const { message } = error;
+        throw new AxiosError(message);
+      }
+      throw new Error(error);
+    }
+  },
+
+  getCountDataForOneDay: async () => {
+    try {
+      const result = await axiosInstance.get(
+        "/doctors/dashboard/data-count-one-day",
+      );
+      return result.data;
+    } catch (err) {
+      if (err instanceof AxiosError) {
+        const { message } = err;
+        throw new AxiosError(message);
+      }
+      throw new Error(err);
+    }
+  },
 };

src/components/layout-components/Footer.jsx

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 import { FaFacebookF, FaTwitter, FaYoutube } from "react-icons/fa";
 import { AiFillInstagram } from "react-icons/ai";
 
-import Logo from "@/assets/logo-white.png";
+import logo from "@/assets/logo-white.png";
 
 export function Footer() {
   return (
@@ -16,7 +16,7 @@ export function Footer() {
           <Col className="gutter-row" span={8} xs={24} md={8} lg={7}>
             <div>
               <Link id="logo-footer" to="/">
-                <img src={Logo} alt="" />
+                <img src={logo} alt="" />
               </Link>
               <p className="my-3 pt-5 font-semibold">Sosial Media</p>
               <div className="flex gap-3">

src/components/layout-components/Topbar.jsx

@@ -6,7 +6,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { Flex, Skeleton } from "antd";
 
 import { DrawerSidebar } from "@/components/layout-components/DrawerSidebar";
-import BlankProfile from "@/assets/blank-profile.png";
+import anonymousPict from "@/assets/anonymous-pp.jpg";
 import logoReproHealth from "@/assets/logo-reprohealth.png";
 import {
   fetchGetDoctorProfile,
@@ -63,7 +63,7 @@ export default function Topbar() {
                 {stateDataDoctor.status === "success" && (
                   <img
                     id="profile-doctor-topbar"
-                    src={dataDoctor?.profile_image || BlankProfile}
+                    src={dataDoctor?.profile_image || anonymousPict}
                     alt="profile-doctor"
                     className="h-8 w-8 rounded-full md:h-11 md:w-11"
                   />

src/components/shared-components/BannerDownload.jsx

@@ -3,7 +3,7 @@ import { Row, Col } from "antd";
 import { ButtonGooglePlay } from "@/components/shared-components/ButtonGooglePlay";
 import { ButtonAppStore } from "@/components/shared-components/ButtonAppStore";
 
-import HandPhone from "@/assets/handphone-2.png";
+import handPhone from "@/assets/handphone-2.png";
 
 export function BannerDownload() {
   return (
@@ -14,7 +14,7 @@ export function BannerDownload() {
       >
         <Row align="middle">
           <Col span={6} xs={0} md={6} align="center">
-            <img src={HandPhone} alt="handphone" />
+            <img src={handPhone} alt="handphone" />
           </Col>
           <Col span={18} xs={24} sm={18}>
             <Row align="middle">
@@ -40,7 +40,7 @@ export function BannerDownload() {
             </Row>
           </Col>
           <Col xs={24} md={0} align="center">
-            <img src={HandPhone} alt="handphone" />
+            <img src={handPhone} alt="handphone" />
           </Col>
         </Row>
       </div>

src/views/app-views/appointment/components/CardAppointment.jsx

@@ -1,5 +1,5 @@
-import Icon01 from "@/assets/db-icon-01.png";
-import Icon02 from "@/assets/db-icon-02.png";
+import icon01 from "@/assets/db-icon-01.png";
+import icon02 from "@/assets/db-icon-02.png";
 import { Card, Col, Flex, Row } from "antd";
 
 export function CardAppointment({ data }) {
@@ -24,7 +24,7 @@ export function CardAppointment({ data }) {
                   </h4>
                 </div>
                 <div className="grid h-16 w-16 place-content-center rounded-lg bg-green-50">
-                  <img id="item-icon" src={Icon01} alt="item-icon" />
+                  <img id="item-icon" src={icon01} alt="item-icon" />
                 </div>
               </Flex>
             </div>
@@ -43,7 +43,7 @@ export function CardAppointment({ data }) {
                   </h4>
                 </div>
                 <div className="grid h-16 w-16 place-content-center rounded-lg bg-green-50">
-                  <img id="item-icon" src={Icon02} alt="item-icon" />
+                  <img id="item-icon" src={icon02} alt="item-icon" />
                 </div>
               </Flex>
             </div>

src/views/app-views/appointment/components/DetailPatient.jsx

@@ -14,6 +14,8 @@ import {
   toggleFetchLatestData,
 } from "@/store/toggle-fetch-new-data";
 
+import anonymousPict from "@/assets/anonymous-pp.jpg";
+
 export function DetailPatient({ idAppointment, handleOpen, isOpen }) {
   return (
     <>
@@ -95,7 +97,7 @@ const CardDetailPatient = ({ dataPasien, isError }) => {
       >
         <Flex justify="center">
           <img
-            src={dataPasien?.profile_image}
+            src={dataPasien?.profile_image || anonymousPict}
             alt="pasien"
             className="h-[6.25rem] w-[6.25rem] rounded-full border bg-white"
           />

src/views/app-views/chatbot/index.jsx

@@ -3,8 +3,8 @@ import { useState, useRef, useEffect } from "react";
 import { LuSendHorizonal } from "react-icons/lu";
 import { useForm } from "react-hook-form";
 
-import ChatbotIcon from "@/assets/chatbot-icon.svg";
-import ChatbotMascot from "@/assets/chatbot-mascot.svg";
+import chatbotIcon from "@/assets/chatbot-icon.svg";
+import chatbotMascot from "@/assets/chatbot-mascot.svg";
 import profileDoctor from "@/assets/profile-doctor.svg";
 import { useDocumentTitle } from "@/hooks/useDocumentTitle";
 
@@ -103,7 +103,7 @@ export default function Chatbot() {
         </div>
         <div className="max-h-full w-full max-w-[1200px] rounded-md ring-1 ring-slate-200">
           <div className="flex items-center gap-6 border-b-2 px-6 py-4">
-            <img src={ChatbotIcon} alt="" />
+            <img src={chatbotIcon} alt="" />
             <div className="flex flex-col gap-1">
               <h5 className="font-semibold leading-none">Asisten Dokter</h5>
               <p className="hidden font-medium leading-none md:block">
@@ -115,7 +115,7 @@ export default function Chatbot() {
             <div className="flex h-[60vh] max-h-[60vh] w-full flex-col overflow-y-scroll px-2 min-[500px]:px-6 [&::-webkit-scrollbar-thumb]:bg-slate-400 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:w-[4px]">
               {selectedList[0]?.pesan.length === 0 ? (
                 <div className="my-auto">
-                  <img className="mx-auto" src={ChatbotMascot} alt="" />
+                  <img className="mx-auto" src={chatbotMascot} alt="" />
                   <p className="px-2 text-center font-medium md:px-8">
                     Selamat datang di Asisten Dokter! Saya adalah AI Bot yang
                     siap membantu Anda menjelajahi topik Kesehatan Reproduksi.
@@ -144,7 +144,7 @@ export default function Chatbot() {
                           src={
                             pesan.pengirim === "user"
                               ? profileDoctor
-                              : ChatbotIcon
+                              : chatbotIcon
                           }
                           className="hidden h-8 w-8 min-[500px]:block"
                           alt="chatbot icon"

src/views/app-views/dashboard/components/ChartIncome.jsx

@@ -1,3 +1,8 @@
+import dayjs from "dayjs";
+import "dayjs/locale/id";
+
+dayjs.locale("id");
+
 import { Card, Col, Row } from "antd";
 import {
   BarChart,
@@ -10,11 +15,16 @@ import {
   Legend,
 } from "recharts";
 
-import {
-  DataIncome,
-  DataIncomeDay,
-  DataIncomeWeek,
-} from "@/views/app-views/dashboard/constant/graph-income";
+import // DataIncome,
+// DataIncomeDay,
+// DataIncomeWeek,
+// formatDateToStringDay,
+// formatDateToStringWeek,
+// formatDateToStringMonth,
+"@/views/app-views/dashboard/constant/graph-income";
+import { useEffect, useState } from "react";
+
+import { APIDashboard } from "@/apis/APIDashboard";
 
 export function CustomTooltip({ active, payload, label }) {
   if (active && payload && payload.length) {
@@ -38,15 +48,81 @@ export function CustomTooltip({ active, payload, label }) {
 }
 
 export function ChartIncome({ selectedFilter }) {
-  const IncomeMonth = DataIncome.slice(DataIncome.length - 7);
-  // const IncomeWeeks = DataIncomeWeek.slice(DataIncomeWeek.length - 7);
-  const IncomeWeeks = DataIncomeWeek;
-  const IncomeDays = DataIncomeDay.slice(DataIncomeDay.length - 7);
+  const [dataIncome, setDataIncome] = useState([]);
+  // const [isError, setIsError] = useState(null);
+  const today = dayjs();
   const mobileSize = window.innerWidth <= 450;
 
-  console.log("week", IncomeWeeks);
-  console.log("month", IncomeMonth);
-  console.log("days", IncomeDays);
+  useEffect(() => {
+    const fecthDataIncome = async () => {
+      try {
+        const result = await APIDashboard.getDashboardIncome();
+        console.log("data income", result);
+
+        setDataIncome(result?.response);
+      } catch (error) {
+        console.error(error);
+        // setIsError(error);
+      }
+    };
+
+    fecthDataIncome();
+  }, []);
+
+  const filterAndAggregateData = (startDate, endDate) => {
+    const filteredData = dataIncome.filter(
+      (data) => dayjs(data.date) >= startDate && dayjs(data.date) <= endDate,
+    );
+
+    const sortedData = filteredData.sort(
+      (a, b) => dayjs(a.date).toDate() - dayjs(b.date).toDate(),
+    );
+
+    const aggregatedData = sortedData.reduce((acc, data) => {
+      // const date = dayjs(data.date).format("dddd, DD MMMM YYYY");
+      let formattedDate = "";
+
+      if (selectedFilter === "hari") {
+        formattedDate = dayjs(data.date).format("dddd, DD MMMM YYYY");
+      }
+      if (selectedFilter === "minggu") {
+        const value = dayjs(data.date);
+        const startOfWeek = value.startOf("week");
+        const endOfWeek = value.endOf("week");
+
+        formattedDate = `Week ${value.week()}, ${startOfWeek.format(
+          "DD",
+        )} - ${endOfWeek.format("DD MMMM YYYY")}`;
+      }
+      if (selectedFilter === "bulan") {
+        formattedDate = dayjs(data.date).format("MMMM YYYY");
+      }
+
+      acc[formattedDate] = (acc[formattedDate] || 0) + parseFloat(data.income);
+      return acc;
+    }, {});
+
+    return Object.entries(aggregatedData).map(([date, income]) => ({
+      date,
+      income,
+    }));
+  };
+
+  let chartData = [];
+
+  switch (selectedFilter) {
+    case "hari":
+      chartData = filterAndAggregateData(today.subtract(7, "days"), today);
+      break;
+    case "minggu":
+      chartData = filterAndAggregateData(today.subtract(7, "weeks"), today);
+      break;
+    case "bulan":
+      chartData = filterAndAggregateData(today.subtract(7, "months"), today);
+      break;
+    default:
+      break;
+  }
 
   // const customTickYAxis = (values) => `${values.toString().slice(0, 2)} jt`;
   const customTickYAxis = (values) => {
@@ -97,21 +173,22 @@ export function ChartIncome({ selectedFilter }) {
             <BarChart
               id="bar-chart"
               // data={data}
-              data={
-                selectedFilter === "hari"
-                  ? IncomeDays
-                  : selectedFilter === "minggu"
-                  ? IncomeWeeks
-                  : IncomeMonth
-              }
+              // data={
+              //   selectedFilter === "hari"
+              //     ? DataIncomeDay
+              //     : selectedFilter === "minggu"
+              //     ? IncomeWeeks
+              //     : IncomeMonth
+              // }
+              // data={filteredData}
+              data={chartData}
               barGap={0}
               margin={{
                 top: 5,
                 right: 0,
                 left: 0,
                 bottom: 10,
               }}
-              // maxBarSize={30}
             >
               <Legend
                 id="legend-chart-income"
@@ -145,11 +222,9 @@ export function ChartIncome({ selectedFilter }) {
                 tickFormatter={customTickYAxis}
                 orientation="left"
                 type="number"
-                // dataKey="amount"
                 tickLine={false}
                 axisLine={false}
                 tickMargin={0}
-                // ticks={[0, 10, 20, 30, 40, 50, 60]}
                 className="text-base"
               />