Report by Area

Authorization: Bearer <token>

[
  {
    "name": "Ensamble",
    "cantidad": 15420,
    "costo": 45823.50
  },
  {
    "name": "Moldeo",
    "cantidad": 12305,
    "costo": 32150.75
  },
  {
    "name": "Inspección",
    "cantidad": 8934,
    "costo": 18640.20
  },
  {
    "name": "Empaque",
    "cantidad": 3215,
    "costo": 6420.80
  }
]

import { BarChart } from 'recharts';

const AreaCostChart: React.FC = () => {
  const [data, setData] = useState<AreaReport[]>([]);
  
  useEffect(() => {
    const fetchData = async () => {
      const report = await getByArea('2024-03-01', '2024-03-31');
      setData(report);
    };
    fetchData();
  }, []);
  
  return (
    <BarChart width={600} height={400} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Bar dataKey="costo" fill="#8884d8" />
    </BarChart>
  );
};

const TopAreasTable: React.FC = () => {
  const [areas, setAreas] = useState<AreaReport[]>([]);
  
  useEffect(() => {
    const fetchData = async () => {
      const data = await getByArea();
      setAreas(data.slice(0, 5)); // Top 5
    };
    fetchData();
  }, []);
  
  return (
    <table>
      <thead>
        <tr>
          <th>Area</th>
          <th>Quantity</th>
          <th>Cost</th>
          <th>Avg Cost/Unit</th>
        </tr>
      </thead>
      <tbody>
        {areas.map(area => (
          <tr key={area.name}>
            <td>{area.name}</td>
            <td>{area.cantidad.toLocaleString()}</td>
            <td>${area.costo.toFixed(2)}</td>
            <td>${(area.costo / area.cantidad).toFixed(2)}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

import { PieChart, Pie, Cell } from 'recharts';

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884D8'];

const AreaCostPie = ({ data }) => (
  <PieChart width={400} height={400}>
    <Pie
      data={data}
      dataKey="costo"
      nameKey="name"
      cx="50%"
      cy="50%"
      label={entry => `${entry.name}: $${entry.costo.toFixed(0)}`}
    >
      {data.map((entry, index) => (
        <Cell key={index} fill={COLORS[index % COLORS.length]} />
      ))}
    </Pie>
    <Tooltip />
  </PieChart>
);

const drillDownArea = async (areaName, startDate, endDate) => {
  // Get detailed records for specific area
  const response = await fetch(
    `http://localhost:3001/api/scrap?` +
    `area=${areaName}&desde=${startDate}&hasta=${endDate}`,
    {
      headers: { 'Authorization': `Bearer ${getToken()}` }
    }
  );
  
  return await response.json();
};

// Click handler for chart
const handleAreaClick = async (area) => {
  const details = await drillDownArea(area.name, '2024-03-01', '2024-03-31');
  showDetailsModal(details);
};

const rankAreas = (areas) => {
  return areas
    .map((area, index) => ({
      ...area,
      rank: index + 1,
      percentOfTotal: 0
    }))
    .map((area, _, arr) => {
      const totalCost = arr.reduce((sum, a) => sum + a.costo, 0);
      return {
        ...area,
        percentOfTotal: (area.costo / totalCost * 100).toFixed(1)
      };
    });
};

const rankedAreas = rankAreas(await getByArea());
console.log('Top area:', rankedAreas[0].name, 
            `(${rankedAreas[0].percentOfTotal}% of total cost)`);