ft(seller stats) seller should see statics on daily basis (#60)

- Update pie chart to show Available, Expired, and Other product categories - Ensure percentages always sum to 100% by introducing, -indicating total number of total products, available products , expired products and wished products -Also the percentage is being on indicated regarding total products, available products , expired products and wished products Co-authored-by: Eli Hirwa <[email protected]>
atlp-rwanda · Jul 17, 2024 · 68abb41 · 68abb41
1 parent d74ebca
commit 68abb41
Show file tree

Hide file tree

Showing 3 changed files with 161 additions and 31 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
@@ -18,18 +18,19 @@ function Page() {
       noStore();
       let data;
       const date = new Date();
-      const dataDateNow = date
-        .toLocaleDateString()
-        .replaceAll('/', '-')
-        .split('-');
-      const response: any = await request.get(
-        `/stats?start=2023-02-06&end=${dataDateNow[2]}-${dataDateNow[0].length > 1 ? dataDateNow[0] : '0' + dataDateNow[0]}-${dataDateNow[1].length > 1 ? dataDateNow[1] : '0' + dataDateNow[1]}`,
-      );
+      const year = date.getFullYear();
+      const month = (date.getMonth() + 1).toString().padStart(2, '0'); 
+      const day = date.getDate().toString().padStart(2, '0');
+      const formattedDate = `${year}-${month}-${day}`;
+
+      const response: any = await request.get(`/stats?start=2023-02-06&end=${formattedDate}`);
       data = response.data;
-
+      console.log("............", data);
+      console.log("statics are recorded properly here ...........................");
       return data;
     },
   });
+
 
   useEffect(() => {
     const categ = async () => {

diff --git a/src/components/SellerSummary.tsx b/src/components/SellerSummary.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import ShortCard from '@/components/shortCard';
 
 interface Params {
@@ -8,50 +8,59 @@ interface Params {
   categories: any;
   users: [];
 }
+
 const SellerSummary: React.FC<Params> = ({ user, data, categories, users }) => {
+  const calculatePercentage = (part: number, total: number) => {
+    return total > 0 ? Math.round((part / total) * 100) : 0;
+  };
+
+  const totalProducts = data?.productsStats || 0;
+  const availablePercentage = calculatePercentage(data?.availableProducts || 0, totalProducts);
+  const expiredPercentage = calculatePercentage(data?.expiredProducts || 0, totalProducts);
+  const wishedPercentage = calculatePercentage(data?.wishesStats || 0, totalProducts);
+
   return (
-    <div className="flex justify-between  border-[1px] p-5 sm:w-[80%] w-[90%]">
-      <div className="flex flex-col p-3 w-full ">
+    <div className="flex justify-between border-[1px] p-5 sm:w-[80%] w-[90%]">
+      <div className="flex flex-col p-3 w-full">
         <div className="flex justify-between w-full">
           <div>
             <h1 className="font-semibold">Today Summary</h1>
             <p className="pl-2">seller summary</p>
           </div>
         </div>
 
-        <div className="grid sm:grid-cols-4 grid-cols-2  p-2 sm:gap-4 gap-1 w-full">
+        <div className="grid sm:grid-cols-4 grid-cols-2 p-2 sm:gap-4 gap-1 w-full">
           {user && user.Role.name === 'seller' ? (
             <>
               <ShortCard
-                imagelink="/wishdash.png"
-                name="Total whishers"
-                number={data?.wishesStats}
-                bgcolor="bg-pink-400"
+                imagelink="/dash2.png"
+                name="Total Products"
+                number={totalProducts}
+                bgcolor="bg-blue-400"
                 numbercolor="text-black"
                 namecolor="text-black"
               />
               <ShortCard
-                imagelink="/orderdash.png"
-                name="Expired product"
-                number={`${data?.expiredProducts}`}
-                bgcolor="bg-green-400"
+                imagelink="/dash1.png"
+                name="Available Products"
+                number={`${availablePercentage}% (${data?.availableProducts})`}
+                bgcolor="bg-gray-400"
                 numbercolor="text-black"
                 namecolor="text-black"
               />
-
               <ShortCard
-                imagelink="/dash1.png"
-                name="available Products"
-                number={data?.availableProducts}
-                bgcolor="bg-gray-400"
+                imagelink="/wishdash.png"
+                name="Wished Products"
+                number={`${wishedPercentage}% (${data?.wishesStats})`}
+                bgcolor="bg-pink-400"
                 numbercolor="text-black"
                 namecolor="text-black"
               />
               <ShortCard
-                imagelink="/dash2.png"
-                name="stockLevel Stats"
-                number={data?.stockLevelStats}
-                bgcolor="bg-blue-400"
+                imagelink="/orderdash.png"
+                name="Expired Products"
+                number={`${expiredPercentage}% (${data?.expiredProducts})`}
+                bgcolor="bg-green-400"
                 numbercolor="text-black"
                 namecolor="text-black"
               />
@@ -60,7 +69,7 @@ const SellerSummary: React.FC<Params> = ({ user, data, categories, users }) => {
             <>
               <ShortCard
                 imagelink="/wishdash.png"
-                name="Categories Available "
+                name="Categories Available"
                 number={`${categories?.length}`}
                 bgcolor="bg-pink-400"
                 numbercolor="text-black"
@@ -82,4 +91,4 @@ const SellerSummary: React.FC<Params> = ({ user, data, categories, users }) => {
   );
 };
 
-export default SellerSummary;
+export default SellerSummary;