Skip to content

Commit

Permalink
ft(seller stats) seller should see statics on daily basis
Browse files Browse the repository at this point in the history 
- 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
  • Loading branch information
@amiparadis250
amiparadis250 committed Jul 11, 2024
1 parent 362d51c commit 2ac0e20
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 85 deletions.
55 changes: 32 additions & 23 deletions src/components/SellerSummary.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
'use client';
import React, { useEffect, useState } from 'react';
import React from 'react';
import ShortCard from '@/components/shortCard';

interface Params {
Expand All @@ -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"
/>
Expand All @@ -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"
Expand All @@ -82,4 +91,4 @@ const SellerSummary: React.FC<Params> = ({ user, data, categories, users }) => {
);
};

export default SellerSummary;
export default SellerSummary;
127 changes: 65 additions & 62 deletions src/components/chartssection.tsx
View file
Original file line number Diff line number Diff line change
@@ -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' ? (
Expand All @@ -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>
Expand All @@ -110,4 +113,4 @@ const Chartssection: React.FC<Params> = ({ user, data, categories, users }) => {
);
};

export default Chartssection;
export default Chartssection;

0 comments on commit 2ac0e20

Please sign in to comment.