Skip to content
Extraits de code Groupes Projets
Valider 54093d58 rédigé par Mohamed Lemine BAILLAHI's avatar Mohamed Lemine BAILLAHI
Parcourir les fichiers

Merge branch 'feature/MYD-343' into 'develop'

Update

Closes MYD-343

See merge request !118
parents ce3c1b61 85567032
Branches
1 requête de fusion!118Update
Pipeline #2175 réussi avec les étapes
in 4 minutes et 14 secondes
"use client";
import { useChart } from "@/components/chart";
import Container from "@mui/material/Container";
import { paths } from "@/routes/paths";
import { useSettingsContext } from "@/shared/components/settings";
import CustomBreadcrumbs from "@/components/custom-breadcrumbs";
import { Grid } from "@mui/material";
import { useMemo, useState } from "react";
import { useGetLivesStatistic } from "@/shared/api/live";
import OrderFilters from "./statistics-filters";
import OrderChartReturns from "./order-chart-returns";
import OrderMontantChart from "./order-chart";
import OrderCommandChart from "./OrderCommandChart";
import AnalyticsRefundReason from "./analytics-refund-reason";
import AppWidgetSummary from "./statistics-widget-summary";
import { useTheme } from "@mui/material/styles";
import BestSalesProduct from "../../cart/statistics/Best-salesProduct";
import { _BestSalesProduct } from "@/shared/_mock";
import AnalyticsAbandonedCarts from "../../cart/statistics/Analytics-AbandonedCarts";
import AnalyticsNetSales from "../../cart/statistics/ProductRateChart";
export default function AllStatisticsView() {
const settings = useSettingsContext();
const [startDate, setStartDate] = useState<Date>(new Date("2023-03-21"));
const [endDate, setEndDate] = useState<Date>(new Date("2023-03-23"));
const [selectedOrders, setSelectedOrders] = useState<string[]>([]);
const {
statsData: { stats },
} = useGetLivesStatistic(startDate, endDate, selectedOrders);
const theme = useTheme();
const statsFiltersProps = {
startDate,
endDate,
onChangeStartDate: (startDate: Date) => {
setStartDate(startDate);
},
onChangeEndDate: (endDate: Date) => {
setEndDate(endDate);
},
selectedOrders,
setSelectedOrders,
};
return (
<Container
sx={{ gap: 3, display: "flex", flexDirection: "column" }}
maxWidth={settings.themeStretch ? false : "lg"}
>
<OrderFilters {...statsFiltersProps} />
<Grid container spacing={3}>
<Grid item xs={12} sm={6} md={4}>
<AppWidgetSummary
title="Taux de transformation"
percent={2.6}
total={92}
color={theme.palette.error.light}
chart={{
colors: [theme.palette.primary.main, theme.palette.primary.dark],
series: [5, 18, 12, 51, 68, 11, 39, 37, 27, 20],
}}
showPercentage={true}
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<AppWidgetSummary
title="Nombre Total de Commandes"
percent={0.2}
total={4876}
color={theme.palette.info.dark}
chart={{
colors: [theme.palette.warning.dark, theme.palette.warning.dark],
series: [20, 41, 63, 33, 28, 35, 50, 46, 11, 26],
}}
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<AppWidgetSummary
title="Chiffre d'Affaires des Commandes"
percent={2.6}
total={18765}
color={theme.palette.error.light}
chart={{
colors: [theme.palette.primary.dark, theme.palette.primary.dark],
series: [5, 18, 12, 51, 68, 11, 39, 37, 27, 20],
}}
showEuroSymbol={true}
/>
</Grid>
</Grid>
<Grid container spacing={1}>
<Grid item xs={4} md={4} lg={4}>
<AnalyticsRefundReason
title="Pourcentage de Types de Commandes"
chart={{
series: [
{ label: "Commandes retournées ", value: 4344 },
{ label: "Commandes en cours ", value: 5435 },
{ label: "Commandes terminées ", value: 5435 },
],
}}
/>
</Grid>
<Grid item xs={8} md={6} lg={8}>
<OrderCommandChart
title="Histoique des commandes"
chart={{
labels: [
"04/01/2024",
"04/06/2024",
"04/09/2024",
"04/10/2024",
"04/15/2024",
"04/17/2024",
"04/20/2024",
"04/29/2024",
],
series: [
{
name: "Période précédente",
type: "line",
fill: "solid",
data: [230, 110, 220, 270, 130, 220, 370, 210],
},
{
name: "Année précédente",
type: "line",
fill: "solid",
data: [440, 550, 410, 670, 220, 430, 210, 970],
},
{
name: "Mois en cours",
type: "line",
fill: "solid",
data: [300, 250, 360, 300, 450, 350, 640, 520],
},
],
}}
/>
</Grid>
</Grid>
<OrderMontantChart
title="Montant total des ventes"
chart={{
categories: [
"01 avr",
"05 avr",
"15 avr",
"20 avr",
"25 avr",
"27 avr",
"29 avr",
"30 avr",
],
series: [
{
type: "Période précédente",
data: [
{
name: "Montant de la période précédente",
data: [
10000, 41000, 35000, 151000, 49000, 62000, 69000, 91000,
],
},
],
},
{
type: "Année précédente",
data: [
{
name: "Montant de l'année précédente ",
data: [
148000, 91000, 69000, 62000, 49000, 51000, 35000, 41000,
],
},
],
},
{
type: "Mois en cours",
data: [
{
name: "Montant total en cours",
data: [
76000, 42000, 29000, 41000, 27000, 138000, 117000, 86000,
],
},
],
},
],
options: {
yaxis: {
title: {
text: "Mantant",
},
min: 0,
max: 100000,
labels: {
formatter: (value: number) => {
if (value >= 1000) {
return `${(value / 1000).toFixed(0)}K€`;
} else {
return `${value}€`;
}
},
},
},
},
}}
/>
<Grid container spacing={1}>
<Grid item xs={4} md={4} lg={4}>
<AnalyticsAbandonedCarts
title="Paniers Abandonnés"
chart={{
series: [
{ label: "paniers créés", value: 600 },
{ label: "paniers abandonnés", value: 100 },
],
}}
/>
</Grid>
<Grid item xs={8} md={6} lg={8}>
<AnalyticsNetSales
title="Taux d’ajout des produits au panier pendant le live ou sur le site"
chart={{
labels: [
"04/01/2024",
"04/06/2024",
"04/09/2024",
"04/10/2024",
"04/15/2024",
"04/17/2024",
"04/20/2024",
"04/29/2024",
],
series: [
{
name: "Période précédente",
type: "line",
fill: "solid",
data: [230, 110, 220, 270, 130, 220, 370, 210],
},
{
name: "Année précédente",
type: "line",
fill: "solid",
data: [440, 550, 410, 670, 220, 430, 210, 970],
},
{
name: "Mois en cours",
type: "line",
fill: "solid",
data: [300, 250, 360, 300, 450, 350, 640, 520],
},
],
}}
/>
</Grid>
</Grid>
<Grid xs={12} md={6} lg={8}>
<BestSalesProduct
title="Les Produits les plus vendus"
tableData={_BestSalesProduct}
tableLabels={[
{ id: "name", label: "Produits" },
{ id: "category", label: "Catégorie" },
{ id: "totalAmount", label: "Chiffre D'affaire", align: "right" },
{ id: "rank", label: "Rank", align: "right" },
]}
/>
</Grid>
</Container>
);
}
...@@ -23,6 +23,7 @@ interface Props extends CardProps { ...@@ -23,6 +23,7 @@ interface Props extends CardProps {
}; };
color: string; color: string;
showEuroSymbol?: boolean; showEuroSymbol?: boolean;
showPercentage?: boolean;
} }
export default function AppWidgetSummary({ export default function AppWidgetSummary({
......
...@@ -6,7 +6,7 @@ import Container from '@mui/material/Container'; ...@@ -6,7 +6,7 @@ import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import { useSettingsContext } from '@/shared/components/settings'; import { useSettingsContext } from '@/shared/components/settings';
import AllStatisticsView from "@/shared/sections/home/statistics/All-Statistics-View"; import AllStatisticsView from "@/shared/sections/home/statistics/All-Statistics-View-Admin";
import OrderList from "@/shared/sections/home/view/order-list-view"; import OrderList from "@/shared/sections/home/view/order-list-view";
import CustomBreadcrumbs from '@/components/custom-breadcrumbs/custom-breadcrumbs'; import CustomBreadcrumbs from '@/components/custom-breadcrumbs/custom-breadcrumbs';
export default function HomeView() { export default function HomeView() {
...@@ -16,7 +16,7 @@ export default function HomeView() { ...@@ -16,7 +16,7 @@ export default function HomeView() {
<Container maxWidth={settings.themeStretch ? false : 'xl'}> <Container maxWidth={settings.themeStretch ? false : 'xl'}>
<CustomBreadcrumbs <CustomBreadcrumbs
heading="Gestionnaire de vente " heading="ADMIN "
links={[ links={[
{ {
name: "dashboard", name: "dashboard",
...@@ -27,37 +27,17 @@ export default function HomeView() { ...@@ -27,37 +27,17 @@ export default function HomeView() {
}, },
{ {
name: "Gestionnaire de vente ", name: "ADMIN",
}, },
]} ]}
sx={{ sx={{
mb: { xs: 3, md: 5 }, mb: { xs: 3, md: 5 },
}} }}
/> />
<Box
sx={{
mt: 5,
width: 1,
height: 340,
borderRadius: 2,
marginBottom:3,
bgcolor: (theme) => alpha(theme.palette.grey[500], 0.04),
border: (theme) => `dashed 1px ${theme.palette.divider}`,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
overflow: 'hidden',
}}
>
<img
src="assets/image.png"
alt="Example"
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
/>
</Box>
<AllStatisticsView /> <AllStatisticsView />
<OrderList/>
</Container> </Container>
); );
} }
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter