first commit

app/src/components/ui/realTimeVis/charts/BarGraphComponent.tsx

@@ -0,0 +1,94 @@
+import {  useMemo } from "react";
+
+import { Bar } from "react-chartjs-2";
+
+interface ChartComponentProps {
+  type: any;
+  title: string;
+  fontFamily?: string;
+  fontSize?: string;
+  fontWeight?: "Light" | "Regular" | "Bold";
+  data: any;
+}
+
+const LineGraphComponent = ({
+  title,
+  fontFamily,
+  fontSize,
+  fontWeight = "Regular",
+}: ChartComponentProps) => {
+  // Memoize Font Weight Mapping
+  const chartFontWeightMap = useMemo(
+    () => ({
+      Light: "lighter" as const,
+      Regular: "normal" as const,
+      Bold: "bold" as const,
+    }),
+    []
+  );
+
+  // Parse and Memoize Font Size
+  const fontSizeValue = useMemo(
+    () => (fontSize ? parseInt(fontSize) : 12),
+    [fontSize]
+  );
+
+  // Determine and Memoize Font Weight
+  const fontWeightValue = useMemo(
+    () => chartFontWeightMap[fontWeight],
+    [fontWeight, chartFontWeightMap]
+  );
+
+  // Memoize Chart Font Style
+  const chartFontStyle = useMemo(
+    () => ({
+      family: fontFamily || "Arial",
+      size: fontSizeValue,
+      weight: fontWeightValue,
+    }),
+    [fontFamily, fontSizeValue, fontWeightValue]
+  );
+
+  const options = useMemo(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: true,
+          text: title,
+          font: chartFontStyle,
+        },
+        legend: {
+          display: false,
+        },
+      },
+      scales: {
+        x: {
+          ticks: {
+            display: false, // This hides the x-axis labels
+          },
+        },
+      },
+    }),
+    [title, chartFontStyle]
+  );
+
+  const chartData = {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+      {
+        label: "My First Dataset",
+        data: [65, 59, 80, 81, 56, 55, 40],
+        backgroundColor: "#6f42c1",
+        borderColor: "#ffffff",
+        borderWidth: 2,
+        fill: false,
+      },
+    ],
+  };
+
+  return <Bar data={chartData} options={options} />;
+};
+
+export default LineGraphComponent;

app/src/components/ui/realTimeVis/charts/DoughnutGraphComponent.tsx

@@ -0,0 +1,93 @@
+import { useMemo } from "react";
+import { Doughnut, Line } from "react-chartjs-2";
+
+interface ChartComponentProps {
+  type: any;
+  title: string;
+  fontFamily?: string;
+  fontSize?: string;
+  fontWeight?: "Light" | "Regular" | "Bold";
+  data: any;
+}
+
+const DoughnutGraphComponent = ({
+  title,
+  fontFamily,
+  fontSize,
+  fontWeight = "Regular",
+}: ChartComponentProps) => {
+  // Memoize Font Weight Mapping
+  const chartFontWeightMap = useMemo(
+    () => ({
+      Light: "lighter" as const,
+      Regular: "normal" as const,
+      Bold: "bold" as const,
+    }),
+    []
+  );
+
+  // Parse and Memoize Font Size
+  const fontSizeValue = useMemo(
+    () => (fontSize ? parseInt(fontSize) : 12),
+    [fontSize]
+  );
+
+  // Determine and Memoize Font Weight
+  const fontWeightValue = useMemo(
+    () => chartFontWeightMap[fontWeight],
+    [fontWeight, chartFontWeightMap]
+  );
+
+  // Memoize Chart Font Style
+  const chartFontStyle = useMemo(
+    () => ({
+      family: fontFamily || "Arial",
+      size: fontSizeValue,
+      weight: fontWeightValue,
+    }),
+    [fontFamily, fontSizeValue, fontWeightValue]
+  );
+
+  const options = useMemo(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: true,
+          text: title,
+          font: chartFontStyle,
+        },
+        legend: {
+          display: false,
+        },
+      },
+      scales: {
+        x: {
+          ticks: {
+            display: false, // This hides the x-axis labels
+          },
+        },
+      },
+    }),
+    [title, chartFontStyle]
+  );
+
+  const chartData = {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+      {
+        label: "My First Dataset",
+        data: [65, 59, 80, 81, 56, 55, 40],
+        backgroundColor: "#6f42c1", // Updated to #6f42c1 (Purple)
+        borderColor: "#ffffff", // Keeping border color white
+        borderWidth: 2,
+        fill: false,
+      },
+    ],
+  };
+
+  return <Doughnut data={chartData} options={options} />;
+};
+
+export default DoughnutGraphComponent;

app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx

@@ -0,0 +1,96 @@
+import { useMemo } from "react";
+import { Line } from "react-chartjs-2";
+
+interface ChartComponentProps {
+  type: any;
+  title: string;
+  fontFamily?: string;
+  fontSize?: string;
+  fontWeight?: "Light" | "Regular" | "Bold";
+  data: any;
+}
+
+const LineGraphComponent = ({
+  title,
+  fontFamily,
+  fontSize,
+  fontWeight = "Regular",
+}: ChartComponentProps) => {
+  // Memoize Font Weight Mapping
+  const chartFontWeightMap = useMemo(
+    () => ({
+      Light: "lighter" as const,
+      Regular: "normal" as const,
+      Bold: "bold" as const,
+    }),
+    []
+  );
+
+  // Parse and Memoize Font Size
+  const fontSizeValue = useMemo(
+    () => (fontSize ? parseInt(fontSize) : 12),
+    [fontSize]
+  );
+
+  // Determine and Memoize Font Weight
+  const fontWeightValue = useMemo(
+    () => chartFontWeightMap[fontWeight],
+    [fontWeight, chartFontWeightMap]
+  );
+
+  // Memoize Chart Font Style
+  const chartFontStyle = useMemo(
+    () => ({
+      family: fontFamily || "Arial",
+      size: fontSizeValue,
+      weight: fontWeightValue,
+    }),
+    [fontFamily, fontSizeValue, fontWeightValue]
+  );
+
+  const options = useMemo(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: true,
+          text: title,
+          font: chartFontStyle,
+        },
+        legend: {
+          display: false,
+        },
+      },
+      scales: {
+        x: {
+          ticks: {
+            display: true, // This hides the x-axis labels
+          },
+        },
+      },
+    }),
+    [title, chartFontStyle]
+  );
+
+  const chartData = {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+      {
+        label: "My First Dataset",
+        data: [65, 59, 80, 81, 56, 55, 40],
+        backgroundColor: "#6f42c1", // Updated to #6f42c1 (Purple)
+        borderColor: "#ffffff", // Keeping border color white
+        borderWidth: 2,
+        fill: false,
+      },
+    ],
+  };
+
+  return <Line data={chartData} options={options} />;
+};
+
+export default LineGraphComponent;
+
+
+// like this

app/src/components/ui/realTimeVis/charts/PieGraphComponent.tsx

@@ -0,0 +1,91 @@
+import { useMemo } from "react";
+import { Pie } from "react-chartjs-2";
+
+interface ChartComponentProps {
+  type: any;
+  title: string;
+  fontFamily?: string;
+  fontSize?: string;
+  fontWeight?: "Light" | "Regular" | "Bold";
+  data: any;
+}
+
+const PieChartComponent = ({
+  title,
+  fontFamily,
+  fontSize,
+  fontWeight = "Regular",
+}: ChartComponentProps) => {
+  // Memoize Font Weight Mapping
+  const chartFontWeightMap = useMemo(
+    () => ({
+      Light: "lighter" as const,
+      Regular: "normal" as const,
+      Bold: "bold" as const,
+    }),
+    []
+  );
+
+  // Parse and Memoize Font Size
+  const fontSizeValue = useMemo(
+    () => (fontSize ? parseInt(fontSize) : 12),
+    [fontSize]
+  );
+
+  // Determine and Memoize Font Weight
+  const fontWeightValue = useMemo(
+    () => chartFontWeightMap[fontWeight],
+    [fontWeight, chartFontWeightMap]
+  );
+
+  // Memoize Chart Font Style
+  const chartFontStyle = useMemo(
+    () => ({
+      family: fontFamily || "Arial",
+      size: fontSizeValue,
+      weight: fontWeightValue,
+    }),
+    [fontFamily, fontSizeValue, fontWeightValue]
+  );
+
+  // Access the CSS variable for the primary accent color
+  const accentColor = getComputedStyle(document.documentElement)
+    .getPropertyValue("--accent-color")
+    .trim();
+
+  console.log("accentColor: ", accentColor);
+  const options = useMemo(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: true,
+          text: title,
+          font: chartFontStyle,
+        },
+        legend: {
+          display: false,
+        },
+      },
+    }),
+    [title, chartFontStyle]
+  );
+
+  const chartData = {
+    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+    datasets: [
+      {
+        label: "Dataset",
+        data: [12, 19, 3, 5, 2, 3],
+        backgroundColor: ["#6f42c1"],
+        borderColor: "#ffffff",
+        borderWidth: 2,
+      },
+    ],
+  };
+
+  return <Pie data={chartData} options={options} />;
+};
+
+export default PieChartComponent;

app/src/components/ui/realTimeVis/charts/PolarAreaGraphComponent.tsx

@@ -0,0 +1,93 @@
+import { useMemo } from "react";
+import { Line, PolarArea } from "react-chartjs-2";
+
+interface ChartComponentProps {
+  type: any;
+  title: string;
+  fontFamily?: string;
+  fontSize?: string;
+  fontWeight?: "Light" | "Regular" | "Bold";
+  data: any;
+}
+
+const PolarAreaGraphComponent = ({
+  title,
+  fontFamily,
+  fontSize,
+  fontWeight = "Regular",
+}: ChartComponentProps) => {
+  // Memoize Font Weight Mapping
+  const chartFontWeightMap = useMemo(
+    () => ({
+      Light: "lighter" as const,
+      Regular: "normal" as const,
+      Bold: "bold" as const,
+    }),
+    []
+  );
+
+  // Parse and Memoize Font Size
+  const fontSizeValue = useMemo(
+    () => (fontSize ? parseInt(fontSize) : 12),
+    [fontSize]
+  );
+
+  // Determine and Memoize Font Weight
+  const fontWeightValue = useMemo(
+    () => chartFontWeightMap[fontWeight],
+    [fontWeight, chartFontWeightMap]
+  );
+
+  // Memoize Chart Font Style
+  const chartFontStyle = useMemo(
+    () => ({
+      family: fontFamily || "Arial",
+      size: fontSizeValue,
+      weight: fontWeightValue,
+    }),
+    [fontFamily, fontSizeValue, fontWeightValue]
+  );
+
+  const options = useMemo(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: true,
+          text: title,
+          font: chartFontStyle,
+        },
+        legend: {
+          display: false,
+        },
+      },
+      scales: {
+        x: {
+          ticks: {
+            display: false, // This hides the x-axis labels
+          },
+        },
+      },
+    }),
+    [title, chartFontStyle]
+  );
+
+  const chartData = {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+      {
+        label: "My First Dataset",
+        data: [65, 59, 80, 81, 56, 55, 40],
+        backgroundColor: "#6f42c1", // Updated to #6f42c1 (Purple)
+        borderColor: "#ffffff", // Keeping border color white
+        borderWidth: 2,
+        fill: false,
+      },
+    ],
+  };
+
+  return <PolarArea data={chartData} options={options} />;
+};
+
+export default PolarAreaGraphComponent;

app/src/components/ui/realTimeVis/charts/ProgressCard.tsx

@@ -0,0 +1,25 @@
+const ProgressCard = ({
+  title,
+  data,
+}: {
+  title: string;
+  data: { stocks: Array<{ key: string; value: number; description: string }> };
+}) => (
+  <div className="chart progressBar">
+    <div className="header">{title}</div>
+    {data?.stocks.map((stock, index) => (
+      <div key={index} className="stock">
+        <span className="stock-item">
+          <span className="stockValues">
+            <div className="key">{stock.key}</div>
+            <div className="value">{stock.value}</div>
+          </span>
+          <div className="stock-description">{stock.description}</div>
+        </span>
+        <div className="icon">Icon</div>
+      </div>
+    ))}
+  </div>
+);
+
+export default ProgressCard;

app/src/components/ui/realTimeVis/charts/RadarGraphComponent.tsx

@@ -0,0 +1,104 @@
+import React, { useMemo } from "react";
+import { Radar } from "react-chartjs-2";
+import {
+  ChartOptions,
+  ChartData,
+  RadialLinearScaleOptions,
+} from "chart.js";
+
+interface ChartComponentProps {
+  title: string;
+  fontFamily?: string;
+  fontSize?: string;
+  fontWeight?: "Light" | "Regular" | "Bold";
+  data: number[]; // Expecting an array of numbers for radar chart data
+}
+
+const RadarGraphComponent = ({
+  title,
+  fontFamily,
+  fontSize,
+  fontWeight = "Regular",
+  data,
+}: ChartComponentProps) => {
+  // Memoize Font Weight Mapping
+  const chartFontWeightMap = useMemo(
+    () => ({
+      Light: "lighter" as const,
+      Regular: "normal" as const,
+      Bold: "bold" as const,
+    }),
+    []
+  );
+
+  const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [
+    fontSize,
+  ]);
+
+  const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [
+    fontWeight,
+    chartFontWeightMap,
+  ]);
+
+  const chartFontStyle = useMemo(
+    () => ({
+      family: fontFamily || "Arial",
+      size: fontSizeValue,
+      weight: fontWeightValue,
+    }),
+    [fontFamily, fontSizeValue, fontWeightValue]
+  );
+
+  const options: ChartOptions<"radar"> = useMemo(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: true,
+          text: title,
+          font: chartFontStyle,
+        },
+        legend: {
+          display: false,
+          position: "top",
+        },
+      },
+      scales: {
+        r: {
+          min: 0,
+          max: 100,
+          angleLines: {
+            display: true,
+          },
+          ticks: {
+            display: true,
+            stepSize: 20,
+          },
+        } as RadialLinearScaleOptions,
+      },
+    }),
+    [title, chartFontStyle]
+  );
+
+  const chartData: ChartData<"radar"> = useMemo(
+    () => ({
+      labels: ["January", "February", "March", "April", "May", "June", "July"],
+      datasets: [
+        {
+          label: "Dataset 1",
+          data, // Use the data passed as a prop
+          backgroundColor: "rgba(111, 66, 193, 0.2)",
+          borderColor: "#6f42c1",
+          borderWidth: 2,
+          fill: true,
+        },
+      ],
+    }),
+    [data]
+  );
+
+  return <Radar data={chartData} options={options} />;
+};
+
+export default RadarGraphComponent;

app/src/components/ui/realTimeVis/floating/FleetEfficiency.tsx

@@ -0,0 +1,35 @@
+const FleetEfficiency = () => {
+  const progress = 75; // Example progress value (0-100)
+
+  // Calculate the rotation angle for the progress bar
+  const rotationAngle = -90 + progress * 3.6; // Progress starts from the left (-90°)
+
+  return (
+    <div className="fleetEfficiency floating">
+      <h2 className="header">Fleet Efficiency</h2>
+
+      <div className="progressContainer">
+        <div className="progress">
+          <div className="barOverflow">
+            {/* Apply dynamic rotation to the bar */}
+            <div
+              className="bar"
+              style={{ transform: `rotate(${rotationAngle}deg)` }}
+            ></div>
+          </div>
+        </div>
+      </div>
+
+      <div className="scaleLabels">
+        <span>0%</span>
+        <div className="centerText">
+          <div className="percentage">{progress}%</div>
+          <div className="status">Optimal</div>
+        </div>
+        <span>100%</span>
+      </div>
+    </div>
+  );
+};
+
+export default FleetEfficiency;

app/src/components/ui/realTimeVis/floating/ProductivityDashboard.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+
+
+interface ProductivityData {
+  distancePerTask: number;
+  spaceUtilization: number;
+  taskCompletionTime: string;
+}
+
+const ProductivityDashboard: React.FC = () => {
+  const data: ProductivityData = {
+    distancePerTask: 45,
+    spaceUtilization: 72,
+    taskCompletionTime: "7:44",
+  };
+
+  // Function to calculate the stroke dash offset for the circular progress
+  const calculateDashOffset = (percentage: number, circumference: number) => {
+    return circumference - (percentage / 100) * circumference;
+  };
+
+  // Constants for the circular progress chart
+  const radius = 60; // Radius of the circle
+  const strokeWidth = 10; // Thickness of the stroke
+  const diameter = radius * 2; // Diameter of the circle
+  const circumference = Math.PI * (radius * 2); // Circumference of the circle
+
+  return (
+    <div className="productivity-dashboard">
+      <header>
+        <h2>Productivity</h2>
+        <div className="options">...</div>
+      </header>
+      <main>
+        <section className="metrics">
+          <div className="metric">
+            <p className="label">Distance per Task</p>
+            <p className="value">{data.distancePerTask} m</p>
+          </div>
+          <div className="metric">
+            <p className="label">Space Utilization</p>
+            <p className="value">{data.spaceUtilization}%</p>
+          </div>
+        </section>
+        <section className="chart-section">
+          <svg
+            className="progress-circle"
+            width={diameter}
+            height={diameter}
+            viewBox={`0 0 ${diameter} ${diameter}`}
+          >
+            {/* Background Circle */}
+            <circle
+              cx={radius}
+              cy={radius}
+              r={radius - strokeWidth / 2}
+              fill="transparent"
+              stroke="#6c757d"
+              strokeWidth={strokeWidth}
+            />
+            {/* Progress Circle */}
+            <circle
+              cx={radius}
+              cy={radius}
+              r={radius - strokeWidth / 2}
+              fill="transparent"
+              stroke="#2ecc71"
+              strokeWidth={strokeWidth}
+              strokeDasharray={circumference}
+              strokeDashoffset={calculateDashOffset(data.spaceUtilization, circumference)}
+              strokeLinecap="round"
+              transform={`rotate(-90 ${radius} ${radius})`}
+            />
+          </svg>
+          <div className="chart-details">
+            <p className="title">Task Completion Time</p>
+            <p className="time">{data.taskCompletionTime}</p>
+            <p className="subtitle">Total Score</p>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+};
+
+export default ProductivityDashboard;

app/src/components/ui/realTimeVis/floating/SimpleCard.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+interface SimpleCardProps {
+  header: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>; // React component for SVG icon
+  value: string;
+  per: string; // Percentage change
+}
+
+const SimpleCard: React.FC<SimpleCardProps> = ({
+  header,
+  icon: Icon,
+  value,
+  per,
+}) => {
+  return (
+    <div className="floating total-card" draggable>
+      <div className="header-wrapper">
+        <div className="header">{header}</div>
+        <div className="data-values">
+          <div className="value">{value}</div>
+          <div className="per">{per}</div>
+        </div>
+      </div>
+
+      <div className="icon">
+        <Icon />
+      </div>
+    </div>
+  );
+};
+
+export default SimpleCard;

app/src/components/ui/realTimeVis/floating/WarehouseThroughput.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+import { Line } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler, // Import Filler for area fill
+} from "chart.js";
+
+// Register ChartJS components
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler
+);
+
+const WarehouseThroughput = () => {
+  // Line graph data for a year (monthly throughput)
+  const lineGraphData = {
+    labels: [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec",
+    ], // Months of the year
+    datasets: [
+      {
+        label: "Throughput (units/month)",
+        data: [500, 400, 300, 450, 350, 250, 200, 300, 250, 150, 100, 150], // Example monthly data
+        borderColor: "#6f42c1", // Use the desired color for the line (purple)
+        backgroundColor: "rgba(111, 66, 193, 0.2)", // Use a semi-transparent purple for the fill
+        borderWidth: 2, // Line thickness
+        fill: true, // Enable fill for this dataset
+        pointRadius: 0, // Remove dots at each data point
+        tension: 0.5, // Smooth interpolation for the line
+      },
+    ],
+  };
+
+  // Line graph options
+  const lineGraphOptions = {
+    responsive: true,
+    maintainAspectRatio: false, // Allow custom height/width adjustments
+    plugins: {
+      legend: {
+        display: false, // Hide legend
+      },
+      title: {
+        display: false, // No chart title needed
+      },
+      tooltip: {
+        callbacks: {
+          label: (context: any) => {
+            const value = context.parsed.y;
+            return `${value} units`; // Customize tooltip to display "units"
+          },
+        },
+      },
+    },
+    scales: {
+      x: {
+        grid: {
+          display: false, // Hide x-axis grid lines
+        },
+        ticks: {
+          maxRotation: 0, // Prevent label rotation
+          autoSkip: false, // Display all months
+          font: {
+            size: 8, // Adjust font size for readability
+            color: "#ffffff", // Light text color for labels
+          },
+        },
+      },
+      y: {
+        display: true, // Show y-axis
+        grid: {
+          drawBorder: false, // Remove border line
+          color: "rgba(255, 255, 255, 0.2)", // Light gray color for grid lines
+          borderDash: [5, 5], // Dotted line style (array defines dash and gap lengths)
+        },
+        ticks: {
+          font: {
+            size: 8, // Adjust font size for readability
+            color: "#ffffff", // Light text color for ticks
+          },
+        },
+      },
+    },
+    elements: {
+      line: {
+        tension: 0.5, // Smooth interpolation for the line
+      },
+    },
+  };
+
+  return (
+    <div className="warehouseThroughput floating" draggable>
+      <div className="header">
+        <h2>Warehouse Throughput</h2>
+        <p>
+          <span>(+5) more</span> in 2025
+        </p>
+      </div>
+      <div className="lineGraph" style={{ height: "100%" }}>
+        {/* Line Graph */}
+        <Line data={lineGraphData} options={lineGraphOptions} />
+      </div>
+    </div>
+  );
+};
+
+export default WarehouseThroughput;