Production APP

import React, { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, BarChart, Bar, ResponsiveContainer } from "recharts";

export default function ProductionOptimizerApp() {
  const [arrivalRate, setArrivalRate] = useState(10);
  const [serviceRate, setServiceRate] = useState(15);
  const [servers, setServers] = useState(1);
  const [bufferSize, setBufferSize] = useState(10);
  const [downtime, setDowntime] = useState(0);
  const [result, setResult] = useState(null);
  const [chartData, setChartData] = useState([]);

  function calculateQueueMetrics() {
    const lambda = parseFloat(arrivalRate);
    const mu = parseFloat(serviceRate);
    const c = parseInt(servers);
    const downtimeFactor = parseFloat(downtime) / 100;

    if (lambda >= c * mu * (1 - downtimeFactor)) {
      setResult({
        error: "System is unstable. Arrival rate must be less than effective service rate."
      });
      return;
    }

    const effectiveMu = mu * (1 - downtimeFactor);
    const rho = lambda / (c * effectiveMu);
    const Lq = (Math.pow(lambda / effectiveMu, c) * rho) / (factorial(c) * Math.pow(1 - rho, 2));
    const Wq = Lq / lambda;
    const W = Wq + 1 / effectiveMu;
    const L = lambda * W;

    const bottleneck = rho > 0.85 ? "Potential Bottleneck Detected" : "No Bottleneck";

    const data = [
      { name: "Utilization", value: rho },
      { name: "Queue Length", value: Lq },
      { name: "Wait Time", value: Wq },
      { name: "Total Time", value: W },
      { name: "Jobs in System", value: L }
    ];

    setChartData(data);
    setResult({ rho, Lq, Wq, W, L, bottleneck });
  }

  function factorial(n) {
    if (n === 0 || n === 1) return 1;
    return n * factorial(n - 1);
  }

  return (
    <div className="p-6 space-y-6 max-w-xl mx-auto">
      <h1 className="text-2xl font-bold text-center">Production Queue Optimizer</h1>
      <Card>
        <CardContent className="space-y-4">
          <div>
            <label>Arrival Rate (λ)</label>
            <Input type="number" value={arrivalRate} onChange={(e) => setArrivalRate(e.target.value)} />
          </div>
          <div>
            <label>Service Rate (μ)</label>
            <Input type="number" value={serviceRate} onChange={(e) => setServiceRate(e.target.value)} />
          </div>
          <div>
            <label>Number of Servers (c)</label>
            <Input type="number" value={servers} onChange={(e) => setServers(e.target.value)} />
          </div>
          <div>
            <label>Buffer Size</label>
            <Input type="number" value={bufferSize} onChange={(e) => setBufferSize(e.target.value)} />
          </div>
          <div>
            <label>Downtime (% of time system is unavailable)</label>
            <Input type="number" value={downtime} onChange={(e) => setDowntime(e.target.value)} />
          </div>
          <Button onClick={calculateQueueMetrics}>Calculate</Button>
        </CardContent>
      </Card>

      {result && result.error && <p className="text-red-500">{result.error}</p>}

      {result && !result.error && (
        <>
          <Card>
            <CardContent className="space-y-2">
              <h2 className="text-xl font-semibold">Results</h2>
              <p>Utilization (ρ): {result.rho.toFixed(2)}</p>
              <p>Average Queue Length (Lq): {result.Lq.toFixed(2)}</p>
              <p>Average Wait Time in Queue (Wq): {result.Wq.toFixed(2)} time units</p>
              <p>Total Time in System (W): {result.W.toFixed(2)} time units</p>
              <p>Total Jobs in System (L): {result.L.toFixed(2)}</p>
              <p className={result.rho > 0.85 ? "text-yellow-600 font-semibold" : "text-green-600"}>{result.bottleneck}</p>
            </CardContent>
          </Card>

          <Card>
            <CardContent>
              <h2 className="text-xl font-semibold mb-4">Graphical Representation</h2>
              <ResponsiveContainer width="100%" height={300}>
                <BarChart data={chartData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <YAxis />
                  <Tooltip />
                  <Legend />
                  <Bar dataKey="value" fill="#8884d8" />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </>
      )}
    </div>
  );
}