Added graphs, fixed rps total calculation

src/components/atoms/jobs-parts-graph/jobs-parts-graph.atom.jsx

@@ -0,0 +1,79 @@
+import { Skeleton, Typography } from "antd";
+import React, { useMemo } from "react";
+import { Cell, Pie, PieChart, ResponsiveContainer } from "recharts";
+import ErrorResultAtom from "../error-result/error-result.atom";
+import Dinero from "dinero.js";
+export default function JobPartsGraphAtom({
+  job,
+  loading,
+  price = "act_price",
+}) {
+  const data = useMemo(() => {
+    if (!job) return [];
+
+    const sums = job.joblines.reduce((acc, val) => {
+      if (!acc[val.part_type]) {
+        acc[val.part_type] = Dinero();
+      }
+
+      acc[val.part_type] = acc[val.part_type].add(
+        Dinero({ amount: Math.round((val[price] || 0) * 100) })
+      );
+
+      return acc;
+    }, {});
+
+    return Object.keys(sums).map((key) => {
+      return {
+        name: key,
+        value: sums[key].getAmount() / 100,
+        label: sums[key].toFormat(),
+        color: getColor(key),
+      };
+    });
+  }, [job, price]);
+
+  if (loading) return <Skeleton active />;
+  if (!job) return <ErrorResultAtom title="Error displaying job data." />;
+
+  return (
+    <div
+      style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
+    >
+      <Typography.Title level={4}>
+        {price === "act_price" ? "Actual Price" : "Database Price"}
+      </Typography.Title>
+      <ResponsiveContainer width="100%" height={250}>
+        <PieChart>
+          <Pie
+            data={data}
+            innerRadius={40}
+            outerRadius={50}
+            fill="#8884d8"
+            paddingAngle={5}
+            dataKey="value"
+            label={(entry) => `${entry.name} - ${entry.label}`}
+            labelLine
+          >
+            {data.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={entry.color} />
+            ))}
+          </Pie>
+        </PieChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+const getColor = (key) => {
+  switch (key) {
+    case "PAA":
+      return "tomato";
+    case "PAL":
+      return "dodgeblue";
+    case "PAN":
+      return "seagreen";
+    default:
+      return "slategray";
+  }
+};