Page d'accueil producteur #35 (...suite...)

frontend/app/src/domains/dashboard/components/DashboardAccount.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react'
-import { Button, Typography } from "@mui/material"
+import { Button, Stack, Typography } from "@mui/material"
 import { Producer } from '@viandeendirect/api/dist/models/Producer.js'
 import { useKeycloak } from '@react-keycloak/web'
 import { ProducerService } from '../../commons/service/ProducerService.ts'
 import { useNavigate } from 'react-router-dom'
+import { PersonOutlineOutlined } from '@mui/icons-material'
 
 
 function DashboardAccount() {
@@ -19,8 +20,11 @@ function DashboardAccount() {
 
 
   return <>
-    <div>Bienvenue {producer?.user.firstName}</div>
-    <Button onClick={() => navigate('/account')}>Gérer mon compte</Button>
+    <Stack alignItems="center" direction="row" gap={2}>
+      <PersonOutlineOutlined/>
+      <Typography variant="subtitle1" component="span">Bienvenue {producer?.user.firstName}</Typography>
+    </Stack>
+    <Button size='small' onClick={() => navigate('/account')}>Gérer mon compte</Button>
   </>
 }
 

frontend/app/src/domains/dashboard/components/DashboardPayments.tsx

@@ -0,0 +1,22 @@
+import { SavingsOutlined } from '@mui/icons-material'
+import { Stack, Typography } from '@mui/material'
+import React, {  } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+
+function DashboardPayments() {
+  const navigate = useNavigate()
+
+  //TODO: implémenter un service pour récupérer ces informations
+  return <>
+        <Stack alignItems="center" direction="row" gap={2}><SavingsOutlined/><Typography variant="subtitle1" component="span"> Mes derniers versements</Typography></Stack>
+        <ul>
+            <li>Depuis 24h : 562,30 €</li>
+            <li>Depuis 1 semaine : 1230,00 € </li>
+            <li>Depuis 1 mois : 1630,00 € </li>
+            <li>Depuis 1 an : 3230,00 € </li>
+        </ul>
+    </>
+}
+
+export default DashboardPayments

frontend/app/src/domains/dashboard/components/DashboardProductions.tsx

@@ -1,20 +1,23 @@
 import React, { useEffect, useState } from 'react'
-import { Button, Typography } from "@mui/material"
+import { Button, Stack, Typography } from "@mui/material"
+import { Inventory2Outlined } from "@mui/icons-material"
 import {Producer} from '@viandeendirect/api/dist/models/Producer.js'
 import { useKeycloak } from '@react-keycloak/web'
 import { Production } from '@viandeendirect/api/dist/models/Production'
 import { ApiBuilder } from '../../../api/ApiBuilder.ts'
 import { ProducerService } from '../../commons/service/ProducerService.ts'
-import ProductionCard from '../../production/components/ProductionCard.tsx'
 import { ProductionService } from '../../production/service/ProductionService.ts'
 import { useNavigate } from 'react-router-dom'
+import dayjs from 'dayjs'
+import { ProductionTypeUtils } from '../../../enum/ProductionTypeUtils.ts'
 
 
 function DashboardProductions() {
   const {keycloak} = useKeycloak()
-  const [nextProduction, setNextProduction] = useState<Production | undefined>(undefined)
+  const [nextProductions, setNextProductions] = useState<Array<Production> | undefined>(undefined)
   const apiBuilder = new ApiBuilder()
   const navigate = useNavigate()
+  const productionTypeUtils = new ProductionTypeUtils()
 
   useEffect(() => {
     const loadNextProduction = async () => {
@@ -28,25 +31,32 @@ function DashboardProductions() {
         const productionEnd = await productionService.getProductionEnd(production)
         productionsWithEndDate.push({...production, productionEnd: productionEnd})
       }
-      const nextProduction = productionsWithEndDate
+      const nextProductions = productionsWithEndDate
         .filter(production => production.productionEnd && production.productionEnd > new Date())
-        .sort((production1, production2) => (production1.productionEnd > production2.productionEnd) ? 1 : -1)[0]
-      setNextProduction(nextProduction)
+        .sort((production1, production2) => (production1.productionEnd > production2.productionEnd) ? 1 : -1)
+      setNextProductions(nextProductions)
     }
     loadNextProduction()
   }, [keycloak])
 
   function displayNextProductionCard(): React.ReactNode {
-    if (nextProduction) {
-      return <ProductionCard production={nextProduction}
-                showActions={true} 
-                onClick={undefined} /> 
+    if (nextProductions?.length > 0) {
+      return <ul>{nextProductions.map(displayProduction)}</ul> 
     }
     return <div>Aucune production programmée pour le moment.</div>
   }
-    return <><div>Ma prochaine production</div>
+
+  function displayProduction(production: Production) {
+    return <li>{dayjs(production.productionEnd).format('DD/MM/YYYY')} : {productionTypeUtils.getLabel(production.productionType)}</li>
+  }
+
+  return <>
+      <Stack alignItems="center" direction="row" gap={2}>
+        <Inventory2Outlined/>
+        <Typography variant="subtitle1" component="span">Mes prochaines productions</Typography>
+      </Stack>
       {displayNextProductionCard()}
-      <Button onClick={() => navigate('/productions')}>Gérer mes productions</Button>
+      <Button variant='contained' size='small' onClick={() => navigate('/productions')}>Gérer mes productions</Button>
     </>
 }
 

frontend/app/src/domains/dashboard/components/DashboardSales.tsx

@@ -1,17 +1,19 @@
 import React, { useEffect, useState } from 'react'
 import { useKeycloak } from '@react-keycloak/web'
-import { Button } from "@mui/material"
+import { Button, Stack, Typography } from "@mui/material"
 import { Producer, Sale } from '@viandeendirect/api/dist/models'
 import SaleCard from '../../sale/components/SaleCard.tsx'
 import { ApiBuilder } from '../../../api/ApiBuilder.ts'
 import { ProducerService } from '../../commons/service/ProducerService.ts'
 import { useNavigate } from 'react-router-dom'
+import dayjs from 'dayjs'
+import { LocalShippingOutlined } from '@mui/icons-material'
 
 
 export default function DashboardSales() {
 
   const {keycloak} = useKeycloak()
-  const [nextSale, setNextSale] = useState<Sale | undefined>(undefined)
+  const [nextSales, setNextSales] = useState<Array<Sale> | undefined>(undefined)
   const apiBuilder = new ApiBuilder()
   const navigate = useNavigate()
 
@@ -21,25 +23,31 @@ export default function DashboardSales() {
       const producer: Producer = await producerService.loadProducer()
       const api = await apiBuilder.getAuthenticatedApi(keycloak)
       const producerSales = await api.getProducerSales({producerId: +producer.id})
-      const nextSale = producerSales
+      const nextSales = producerSales
         .filter(sale => sale.deliveryStart && sale.deliveryStart > new Date())
-        .sort((sale1, sale2) => (sale1.deliveryStart > sale2.deliveryStart) ? 1 : -1)[0]
-      setNextSale(nextSale)
+        .sort((sale1, sale2) => (sale1.deliveryStart > sale2.deliveryStart) ? 1 : -1)
+      setNextSales(nextSales)
     }
     loadNextSale()
   }, [keycloak])
 
-  function displayNextSaleCard(): React.ReactNode {
-    if (nextSale) {
-      return <SaleCard sale={nextSale}/>
+  function displayNextSales(): React.ReactNode {
+    if (nextSales?.length > 0) {
+      return <ul>{nextSales?.map(displaySale)}</ul>
     }
     return <div>Aucune vente programmée pour le moment.</div>
   }
 
-  return <><div>Ma prochaine vente</div>
-  <div className='card-list'>
-    {displayNextSaleCard()}
-  </div>
-    <Button onClick={() => navigate('/sales')}>Gérer mes ventes</Button>
+  function displaySale(sale: Sale) {
+    return <li>{dayjs(sale.deliveryStart).format('DD/MM/YYYY')} : vente {sale.deliveryAddressName}</li>
+  }
+
+  return <>
+    <Stack alignItems="center" direction="row" gap={2}>
+      <LocalShippingOutlined/>
+      <Typography variant="subtitle1" component="span">Mes prochaines ventes</Typography>
+    </Stack>
+    {displayNextSales()}  
+    <Button variant='contained' size='small' onClick={() => navigate('/sales')}>Gérer mes ventes</Button>
   </>
 }

frontend/app/src/domains/dashboard/views/Dashboard.css

@@ -1,9 +1,13 @@
 .dashboard-container {
     display: flex;
     flex-wrap: wrap;
+    background-color: lightgrey;
+    gap: 1px;
 }
 
 .dashboard-item {
+    padding: 0.5rem;
     min-width: 20rem;
-    flex: 1 1 50%;
+    flex: 1 1 45%;
+    background-color: white;
 }

frontend/app/src/domains/dashboard/views/Dashboard.tsx

@@ -1,16 +1,17 @@
 import React from 'react'
-import { Typography } from "@mui/material"
+import { Divider, Typography } from "@mui/material"
 import './Dashboard.css'
 import DashboardAccount from '../components/DashboardAccount.tsx'
 import DashboardProductions from '../components/DashboardProductions.tsx'
 import DashboardSales from '../components/DashboardSales.tsx'
+import DashboardPayments from '../components/DashboardPayments.tsx'
 
 function Dashboard() {
     return <>
         <Typography variant="h6">Tableau de bord</Typography>
         <div className="dashboard-container">
             <div className="dashboard-item"><DashboardAccount/></div>
-            <div className="dashboard-item">Mes derniers versements</div>
+            <div className="dashboard-item"><DashboardPayments/></div>
             <div className="dashboard-item"><DashboardProductions/></div>
             <div className="dashboard-item"><DashboardSales/></div>
         </div>

frontend/app/src/enum/AnimalTypeUtils.ts

@@ -1,4 +1,5 @@
 import { BeefProductionAnimalTypeEnum } from "@viandeendirect/api/dist/models/BeefProduction";
+import { EnumUtils } from "./EnumUtils";
 
 export class AnimalTypeUtils implements EnumUtils<BeefProductionAnimalTypeEnum> {
 

frontend/app/src/enum/CattleBreedUtils.ts

@@ -1,4 +1,5 @@
 import { BeefProductionCattleBreedEnum } from "@viandeendirect/api/dist/models/BeefProduction"
+import { EnumUtils } from "./EnumUtils"
 
 export class CattleBreedUtils implements EnumUtils<BeefProductionCattleBreedEnum> {
 

frontend/app/src/enum/EnumUtils.ts

@@ -1,4 +1,4 @@
-interface EnumUtils<Enum> {
+export interface EnumUtils<Enum> {
     getLabel(enumValue: Enum | undefined, capitalized: boolean): string
 
     getLabels(): Array<{id, label}>

frontend/app/src/enum/OrderStatusUtils.ts

@@ -1,4 +1,5 @@
 import { OrderStatus } from "@viandeendirect/api/dist/models/OrderStatus";
+import { EnumUtils } from "./EnumUtils";
 
 export class OrderStatusUtils implements EnumUtils<OrderStatus>{
   getLabel(orderStatus: OrderStatus | undefined, capitalized: boolean = false): string {

frontend/app/src/enum/ProductionTypeUtils.ts

@@ -0,0 +1,22 @@
+import { ProductionProductionTypeEnum } from "@viandeendirect/api/dist/models";
+import { EnumUtils } from "./EnumUtils.ts";
+
+export class ProductionTypeUtils implements EnumUtils<ProductionProductionTypeEnum>{
+  getLabel(productionType: ProductionProductionTypeEnum | undefined, capitalized: boolean = false): string {
+    switch (productionType) {
+      case ProductionProductionTypeEnum.BeefProduction:
+        return capitalized ? 'Colis de viande de boeuf' : 'colis de viande de boeuf'
+      case ProductionProductionTypeEnum.HonneyProduction:
+        return capitalized ? 'Miel' : 'miel'
+      default:
+        return ''
+    }
+  }
+  getLabels(): Array<{ id: any; label: any; }> {
+    let labels: Array<{id, label}> = []
+    for (const [, value] of Object.entries(ProductionProductionTypeEnum)) {
+      labels.push({id: value, label: this.getLabel(value)})
+    }
+    return labels
+  }
+}