Dashboard facturable ggx

[Doom666nk]

import React, { useState } from 'react';
import {
PieChart, Pie, Cell, BarChart, Bar, XAxis, YAxis,
CartesianGrid, Tooltip, Legend, ResponsiveContainer,
LineChart, Line, Area, AreaChart
} from 'recharts';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';

const WarehouseAnalytics = () => {
const COLORS = ['#1e40af', '#3b82f6', '#60a5fa', '#93c5fd', '#bfdbfe', '#dbeafe'];

const storageZones = [
{ name: 'Zone Drive-in', value: 384, percentage: 38.6 },
{ name: 'Zone Double-deep', value: 280, percentage: 28.2 },
{ name: 'Racks Sélectifs', value: 220, percentage: 22.1 },
{ name: 'Espaces au-dessus des portes', value: 30, percentage: 3.0 },
{ name: 'Zone tunnel', value: 15, percentage: 1.5 },
{ name: 'Racks simples extrémités', value: 65, percentage: 6.6 }
];

const detailedCosts = [
{ category: "Réception", details: [
{ name: "Déchargement", value: 16800 },
{ name: "Inspection", value: 4200 },
{ name: "Scan/Intégration", value: 2520 }
]},
{ category: "Stockage", details: [
{ name: "Stockage Mensuel", value: 23920 }
]},
{ category: "Préparation", details: [
{ name: "Préparation/Expédition", value: 1800 },
{ name: "Préparation Magasins", value: 400 },
{ name: "Emballage/Étiquetage", value: 320 }
]},
{ category: "Main-d'œuvre", details: [
{ name: "Manutention", value: 4410 }
]}
];

const skuConsumption = [
{ name: 'FP1', daily: 10, monthly: 300, cost: 19125 },
{ name: 'FP1-C', daily: 4, monthly: 120, cost: 7650 },
{ name: 'FP2', daily: 10, monthly: 300, cost: 19125 },
{ name: 'FP2-C', daily: 4, monthly: 120, cost: 7650 }
];

return (

Analyse Détaillée GGX - Total Facturable: 54,050 $



{/* Métriques principales */}

Capacité Totale

994 palettes

Consommation Mensuelle

840 palettes

Coût Moyen/Palette

64.35 $

Taux d'Utilisation

84.5%

      {/* Section 1: Organisation de l'Entrepôt */}
      <div className="mb-8">
        <h3 className="text-xl font-semibold mb-4">1. Organisation de l'Entrepôt</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="h-96">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={storageZones}
                  cx="50%"
                  cy="50%"
                  labelLine={true}
                  outerRadius={120}
                  fill="#8884d8"
                  dataKey="value"
                  label={({name, percentage}) => `${name} (${percentage}%)`}
                >
                  {storageZones.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip formatter={(value) => `${value} palettes`} />
              </PieChart>
            </ResponsiveContainer>
          </div>
          
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              {storageZones.map((zone, index) => (
                <div key={index} className="bg-blue-50 p-4 rounded-lg">
                  <div className="text-sm text-blue-800">{zone.name}</div>
                  <div className="text-xl font-bold text-primary">{zone.value} palettes</div>
                  <div className="text-sm text-blue-600">{zone.percentage}% du total</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Section 2: Consommation SKU */}
      <div className="mb-8">
        <h3 className="text-xl font-semibold mb-4">2. Consommation SKU</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="h-96">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={skuConsumption}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis yAxisId="left" orientation="left" stroke="#1e40af" />
                <YAxis yAxisId="right" orientation="right" stroke="#3b82f6" />
                <Tooltip />
                <Legend />
                <Bar yAxisId="left" dataKey="monthly" name="Palettes/Mois" fill="#1e40af" />
                <Bar yAxisId="right" dataKey="cost" name="Coût Mensuel ($)" fill="#3b82f6" />
              </BarChart>
            </ResponsiveContainer>
          </div>

          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              {skuConsumption.map((sku, index) => (
                <div key={index} className="bg-blue-50 p-4 rounded-lg">
                  <div className="text-lg font-semibold text-primary">{sku.name}</div>
                  <div className="text-sm text-blue-800">Quotidien: {sku.daily} palettes</div>
                  <div className="text-sm text-blue-800">Mensuel: {sku.monthly} palettes</div>
                  <div className="text-sm font-bold text-primary">Coût: {sku.cost.toLocaleString()} $</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Section 3: Détail des Coûts */}
      <div>
        <h3 className="text-xl font-semibold mb-4">3. Détail des Coûts</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="h-96">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={detailedCosts.map(cat => ({
                    name: cat.category,
                    value: cat.details.reduce((sum, item) => sum + item.value, 0)
                  }))}
                  cx="50%"
                  cy="50%"
                  labelLine={true}
                  outerRadius={120}
                  fill="#8884d8"
                  dataKey="value"
                  label={({name, value}) => `${name} (${((value/54050)*100).toFixed(1)}%)`}
                >
                  {detailedCosts.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip formatter={(value) => `${value.toLocaleString()} $`} />
              </PieChart>
            </ResponsiveContainer>
          </div>

          <div className="space-y-4">
            {detailedCosts.map((category, index) => (
              <div key={index} className="bg-blue-50 p-4 rounded-lg">
                <div className="text-lg font-semibold text-primary mb-2">
                  {category.category}
                </div>
                {category.details.map((detail, idx) => (
                  <div key={idx} className="flex justify-between text-sm">
                    <span className="text-blue-800">{detail.name}</span>
                    <span className="font-bold text-primary">{detail.value.toLocaleString()} $</span>
                  [</div>](### url)
                ))}
                <div className="mt-2 pt-2 border-t border-blue-200 flex justify-between">
                  <span className="font-semibold">Total {category.category}</span>
                  <span className="font-bold text-primary">
                    {category.details.reduce((sum, item) => sum + item.value, 0).toLocaleString()} $
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </CardContent>
  </Card>
</div>

);
};

export default WarehouseAnalytics;