BOD-71 Added dependencies and pages for kanban production board.

client/src/components/production-board-kanban/production-board-kanban.component.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import Board from "react-trello";
+import { Card } from "antd";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+
+export default function ProductionBoardKanbanComponent({
+  loading,
+  data,
+  columnState,
+}) {
+  console.log("data", data);
+  const data2 = {
+    lanes: [
+      {
+        id: "lane1",
+        title: "Planned Tasks",
+        label: "2/2",
+        cards: [
+          {
+            id: "Card1",
+            title: "Write Blog",
+            description: "Can AI make memes",
+            label: "30 mins",
+          },
+          {
+            id: "Card2",
+            title: "Pay Rent",
+            description: "Transfer via NEFT",
+            label: "5 mins",
+            metadata: { sha: "be312a1" },
+          },
+        ],
+      },
+      {
+        id: "lane2",
+        title: "Completed",
+        label: "0/0",
+        cards: [],
+      },
+    ],
+  };
+
+  const kanbanCard = (card) => <Card>{card.title}</Card>;
+
+  if (loading) return <LoadingSpinner />;
+
+  return (
+    <div>
+      <Board data={data2} components={{ Card: kanbanCard }} />
+    </div>
+  );
+}

client/src/components/production-board-kanban/production-board-kanban.container.jsx

@@ -0,0 +1,17 @@
+import { useSubscription } from "@apollo/react-hooks";
+import React from "react";
+import { SUBSCRIPTION_JOBS_IN_PRODUCTION } from "../../graphql/jobs.queries";
+import ProductionBoardKanbanComponent from "./production-board-kanban.component";
+
+export default function ProductionBoardKanbanContainer({ columnState }) {
+  const { loading, data } = useSubscription(SUBSCRIPTION_JOBS_IN_PRODUCTION);
+
+  return (
+    <ProductionBoardKanbanComponent
+      loading={loading}
+      data={data ? data.productionview : []}
+      refetch={null}
+      columnState={columnState}
+    />
+  );
+}