From 2ac0e2061274ad9feb94041ccb8fd3aef70ec121 Mon Sep 17 00:00:00 2001
From: ISHIMWE Ami Paradis <141851169+amiparadis250@users.noreply.github.com>
Date: Thu, 11 Jul 2024 11:56:19 +0200
Subject: [PATCH] ft(seller stats) seller should see statics on daily basis -
 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

---
 src/components/SellerSummary.tsx |  55 +++++++------
 src/components/chartssection.tsx | 127 ++++++++++++++++---------------
 2 files changed, 97 insertions(+), 85 deletions(-)

diff --git a/src/components/SellerSummary.tsx b/src/components/SellerSummary.tsx
index 627610a..cf70057 100644
--- 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,10 +8,20 @@ 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>
@@ -19,39 +29,38 @@ const SellerSummary: React.FC<Params> = ({ user, data, categories, users }) => {
           </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;
\ No newline at end of file
diff --git a/src/components/chartssection.tsx b/src/components/chartssection.tsx
index 56f0f31..6c6c370 100644
--- a/src/components/chartssection.tsx
+++ b/src/components/chartssection.tsx
@@ -1,33 +1,40 @@
 'use client';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Chart } from 'react-google-charts';
-import { unstable_noStore as noStore } from 'next/cache';
-import { useQuery } from '@tanstack/react-query';
-import request from '@/utils/axios';
+
 interface Params {
   user: any;
   data: any;
   categories: any;
   users: any;
 }
-export const options = {
-  title: '',
-};
+
 const Chartssection: React.FC<Params> = ({ user, data, categories, users }) => {
+  const totalProducts = data?.productsStats || 0;
+
+  const calculatePercentage = (part: number, total: number) => {
+    return total > 0 ? Math.round((part / total) * 100) : 0;
+  };
+
   const data1 = [
-    ['Task', 'Hours per Day'],
-    [
-      'availableProducts',
-      data?.availableProducts > 1 ? data?.availableProducts : 0.2,
-    ],
-    [
-      'expiredProducts',
-      data?.expiredProducts > 1 ? data?.expiredProducts : 0.2,
-    ],
-    ['wishesStats', data?.wishesStats > 1 ? data?.wishesStats : 0.2],
-    ['productsStats', data?.productsStats > 1 ? data?.productsStats : 0.2],
+    ['Category', 'Percentage'],
+    ['Available Products', calculatePercentage(data?.availableProducts || 0, totalProducts)],
+    ['Expired Products', calculatePercentage(data?.expiredProducts || 0, totalProducts)],
+    ['Wished Products', calculatePercentage(data?.wishesStats || 0, totalProducts)],
   ];
 
+  const options = {
+    title: 'Product Distribution',
+    pieHole: 0.4,
+    is3D: false,
+    slices: {
+      0: { color: '#9CA3AF' }, // gray-400
+      1: { color: '#34D399' }, // green-400
+      2: { color: '#F472B6' }, // pink-400
+    },
+    legend: { position: 'bottom' },
+  };
+
   return (
     <div className="flex gap-7 sm:w-[80%] h-full sm:flex-row flex-col w-full sm:justify-start sm:items-start justify-center items-center ">
       {user && user?.Role?.name === 'seller' ? (
@@ -37,70 +44,66 @@ const Chartssection: React.FC<Params> = ({ user, data, categories, users }) => {
             chartType="PieChart"
             data={data1}
             options={options}
-            width={'90%'}
-            height={'260px'}
+            width={'100%'}
+            height={'300px'}
           />
         </div>
       ) : (
         <div className="sm:w-[50%] w-[90%] border-[1px] p-2">
           <h1 className="font-bold text-2xl text-left mx-4 w-full mb-3">
-            All Markert Users
+            All Market Users
           </h1>
-          <div className=" sm:w-[90%] w-[100%] p-2 rounded-sm overflow-auto h-[250px]">
+          <div className="sm:w-[90%] w-[100%] p-2 rounded-sm overflow-auto h-[250px]">
             <ul className="flex flex-col gap-3">
               {users &&
-                users?.map((el: any) => (
-                  <>
-                    <li className="border-pink-300 border p-5" key={el.id}>
-                      <div className="flex gap-2">
-                        <div className="flex-1">
-                          <div className="flex gap-2 ">
-                            <h1 className="text-blue-500 font-bold p-0 m-0 ">
-                              Names :
-                            </h1>
-                            <p className="p-0 m-0">{el.firstName}</p>
-                          </div>
-                          <div className="flex gap-2 ">
-                            <h1 className="text-blue-500 font-bold p-0 m-0 ">
-                              email :
-                            </h1>
-                            <p className="p-0 pl-4 m-0">{el.email}</p>
-                          </div>
+                users.map((el: any) => (
+                  <li className="border-pink-300 border p-5" key={el.id}>
+                    <div className="flex gap-2">
+                      <div className="flex-1">
+                        <div className="flex gap-2 ">
+                          <h1 className="text-blue-500 font-bold p-0 m-0 ">
+                            Name:
+                          </h1>
+                          <p className="p-0 m-0">{el.firstName}</p>
                         </div>
-                        <div className="w-[30px] sm:block hidden">
-                          <img
-                            src={el.profileImage}
-                            alt=""
-                            className="w-[30px] h-[30px]  rounded-lg border "
-                          />
+                        <div className="flex gap-2 ">
+                          <h1 className="text-blue-500 font-bold p-0 m-0 ">
+                            Email:
+                          </h1>
+                          <p className="p-0 pl-4 m-0">{el.email}</p>
                         </div>
                       </div>
-                    </li>
-                  </>
+                      <div className="w-[30px] sm:block hidden">
+                        <img
+                          src={el.profileImage}
+                          alt=""
+                          className="w-[30px] h-[30px] rounded-lg border"
+                        />
+                      </div>
+                    </div>
+                  </li>
                 ))}
             </ul>
           </div>
         </div>
       )}
-      <div className="sm:w-[50%] w-[90%] border-[1px] h-[200px]  ">
+      <div className="sm:w-[50%] w-[90%] border-[1px] h-[200px]">
         <div className="w-full flex justify-center items-center flex-col ">
           <h1 className="font-semibold text-2xl text-left mx-4 w-full mb-3">
-            All Categolie On Market
+            All Categories On Market
           </h1>
-          <div className=" w-[80%] p-2 rounded-sm overflow-auto h-[150px]">
+          <div className="w-[80%] p-2 rounded-sm overflow-auto h-[150px]">
             <ul className="flex flex-col gap-3">
               {categories &&
-                categories?.map((el: any) => (
-                  <>
-                    <li className="bg-gray-100 p-5" key={el.id}>
-                      <div className="flex gap-2 ">
-                        <h1 className="text-blue-500 font-bold p-0 m-0 ">
-                          Names :
-                        </h1>
-                        <p className="p-0 m-0">{el.categoryName}</p>
-                      </div>
-                    </li>
-                  </>
+                categories.map((el: any) => (
+                  <li className="bg-gray-100 p-5" key={el.id}>
+                    <div className="flex gap-2 ">
+                      <h1 className="text-blue-500 font-bold p-0 m-0 ">
+                        Name:
+                      </h1>
+                      <p className="p-0 m-0">{el.categoryName}</p>
+                    </div>
+                  </li>
                 ))}
             </ul>
           </div>
@@ -110,4 +113,4 @@ const Chartssection: React.FC<Params> = ({ user, data, categories, users }) => {
   );
 };
 
-export default Chartssection;
+export default Chartssection;
\ No newline at end of file