From 31642ffe1d9e8a94bdc682ed6323dd6f24ca99e7 Mon Sep 17 00:00:00 2001
From: brysonjbest <103070659+brysonjbest@users.noreply.github.com>
Date: Wed, 9 Oct 2024 15:12:14 -0700
Subject: [PATCH 01/12] Initialize frontend search and filter.

---
 app/page.tsx | 218 +++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 158 insertions(+), 60 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index a4dac71..fde672f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,8 +1,9 @@
 "use client";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo, Fragment } from "react";
 import Link from "next/link";
-import { Button, Flex, Spin, Table } from "antd";
-import type { Breakpoint } from "antd";
+import { Button, Flex, Spin, Table, Input, Tag } from "antd";
+import type { Breakpoint, TablePaginationConfig, TableColumnsType } from "antd";
+import type { FilterValue, SorterResult } from "antd/es/table/interface";
 import { EyeOutlined, EditOutlined, CheckCircleOutlined, DownSquareOutlined } from "@ant-design/icons";
 import { RuleInfo } from "./types/ruleInfo";
 import { getAllRuleData } from "./utils/api";
@@ -11,6 +12,12 @@ import styles from "./styles/home.module.css";
 export default function Home() {
   const [rules, setRules] = useState<RuleInfo[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredInfo, setFilteredInfo] = useState<Record<string, FilterValue | null>>({});
+  const [pagination, setPagination] = useState<TablePaginationConfig>({
+    current: 1,
+    pageSize: 15,
+  });
 
   useEffect(() => {
     const getRules = async () => {
@@ -25,75 +32,155 @@ export default function Home() {
     getRules();
   }, []);
 
-  const mappedRules = rules.map(({ _id, title, filepath, reviewBranch, isPublished }) => {
-    const ruleLink = `/rule/${_id}`;
-    const draftLink = `${ruleLink}?version=draft`;
-    return {
-      key: _id,
-      titleLink: (
-        <b>
-          <a href={isPublished ? ruleLink : draftLink} className={styles.mainLink}>
-            {title || filepath}
-          </a>
-        </b>
-      ),
-      versions: (
-        <Flex gap="small" justify="end">
-          <Button
-            href={draftLink}
-            icon={<EditOutlined />}
-            type="dashed"
-            size="small"
-            danger
-            className={styles.draftBtn}
-          >
-            Draft
-          </Button>
-          {reviewBranch && (
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+    setPagination((prev) => ({ ...prev, current: 1 }));
+  };
+
+  const formatFilePathTags = (filepath: string) => {
+    const parts = filepath.split("/");
+    return parts.map((part, index) => (
+      <Fragment key={index}>{index < parts.length - 1 && <Tag color="blue">{part}</Tag>}</Fragment>
+    ));
+  };
+
+  // Generate filters for filepaths based on the full filepath of each rule
+  const getFilepathFilters = useMemo(() => {
+    const directories = new Set<string>();
+
+    rules.forEach((rule) => {
+      const parts = rule.filepath.split("/");
+      let currentPath = "";
+
+      parts.forEach((part, index) => {
+        if (index < parts.length - 1) {
+          currentPath += (currentPath ? "/" : "") + part;
+          directories.add(currentPath);
+        }
+      });
+    });
+
+    return Array.from(directories).map((path) => ({
+      text: path.split("/").pop() || "",
+      value: path,
+    }));
+  }, [rules]);
+
+  // Filter rules based on search terms and filepath filters
+  const filteredRules = useMemo(() => {
+    let result = rules;
+    if (searchTerm) {
+      result = result.filter(
+        (rule) =>
+          rule?.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          rule.filepath.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+    }
+    if (filteredInfo.filepath) {
+      const filepathFilters = filteredInfo.filepath as string[];
+      result = result.filter((rule) => filepathFilters.some((path) => rule.filepath.startsWith(path)));
+    }
+
+    return result;
+  }, [rules, searchTerm, filteredInfo]);
+
+  const columns: TableColumnsType<RuleInfo> = [
+    {
+      title: "Rule",
+      dataIndex: "title",
+      key: "title",
+      sorter: (a, b) => (a.title || "").localeCompare(b.title || ""),
+      render: (_, record) => {
+        const ruleLink = `/rule/${record._id}`;
+        const draftLink = `${ruleLink}?version=draft`;
+        return (
+          <b>
+            <a href={record.isPublished ? ruleLink : draftLink} className={styles.mainLink}>
+              {record.title || record.filepath}
+            </a>
+          </b>
+        );
+      },
+    },
+    {
+      title: "Categories",
+      dataIndex: "filepath",
+      key: "filepath",
+      filters: getFilepathFilters,
+      filteredValue: filteredInfo.filepath || null,
+      onFilter: (value, record) => record.filepath.startsWith(value as string),
+      filterMode: "tree",
+      filterSearch: true,
+      sorter: (a, b) => a.filepath.localeCompare(b.filepath),
+      render: (_, record) => <span>{formatFilePathTags(record.filepath)}</span>,
+    },
+    {
+      title: "Versions",
+      key: "versions",
+      responsive: ["md" as Breakpoint],
+      render: (_, record) => {
+        const ruleLink = `/rule/${record._id}`;
+        const draftLink = `${ruleLink}?version=draft`;
+        return (
+          <Flex gap="small" justify="end">
             <Button
-              href={`${ruleLink}?version=inReview`}
-              icon={<EyeOutlined />}
+              href={draftLink}
+              icon={<EditOutlined />}
               type="dashed"
               size="small"
-              className={styles.inReviewBtn}
+              danger
+              className={styles.draftBtn}
             >
-              In Review
+              Draft
             </Button>
-          )}
-          {isPublished && (
-            <>
-              <Button
-                href={ruleLink}
-                icon={<CheckCircleOutlined />}
-                type="dashed"
-                size="small"
-                className={styles.publishedBtn}
-              >
-                Published
-              </Button>
+            {record.reviewBranch && (
               <Button
-                href={`${ruleLink}/embedded`}
-                icon={<DownSquareOutlined />}
+                href={`${ruleLink}?version=inReview`}
+                icon={<EyeOutlined />}
                 type="dashed"
                 size="small"
-                className={styles.embeddedBtn}
+                className={styles.inReviewBtn}
               >
-                Embeddable
+                In Review
               </Button>
-            </>
-          )}
-        </Flex>
-      ),
-    };
-  });
-
-  const columns = [
-    {
-      dataIndex: "titleLink",
+            )}
+            {record.isPublished && (
+              <>
+                <Button
+                  href={ruleLink}
+                  icon={<CheckCircleOutlined />}
+                  type="dashed"
+                  size="small"
+                  className={styles.publishedBtn}
+                >
+                  Published
+                </Button>
+                <Button
+                  href={`${ruleLink}/embedded`}
+                  icon={<DownSquareOutlined />}
+                  type="dashed"
+                  size="small"
+                  className={styles.embeddedBtn}
+                >
+                  Embeddable
+                </Button>
+              </>
+            )}
+          </Flex>
+        );
+      },
     },
-    { dataIndex: "versions", responsive: ["md" as Breakpoint] },
   ];
 
+  const handleTableChange = (
+    newPagination: TablePaginationConfig,
+    filters: Record<string, FilterValue | null>,
+    sorter: SorterResult<RuleInfo> | SorterResult<RuleInfo>[]
+  ) => {
+    setPagination(newPagination);
+    setFilteredInfo(filters);
+  };
+
   return (
     <>
       <Flex justify="space-between" align="center" className={styles.headerWrapper}>
@@ -107,12 +194,23 @@ export default function Home() {
           </Link>
         </Flex>
       </Flex>
+      <Input.Search placeholder="Search rules..." onChange={handleSearch} style={{ marginBottom: 16 }} allowClear />
       {isLoading ? (
         <Spin tip="Loading rules..." className="spinner">
           <div className="content" />
         </Spin>
       ) : (
-        <Table columns={columns} dataSource={mappedRules} showHeader={false} pagination={{ pageSize: 15 }} />
+        <Table
+          columns={columns}
+          dataSource={filteredRules}
+          pagination={{
+            ...pagination,
+            total: filteredRules.length,
+            showSizeChanger: true,
+          }}
+          onChange={handleTableChange}
+          rowKey="_id"
+        />
       )}
     </>
   );

From 8e27ddfb305f671e7247f04272996ac6e5fc5d85 Mon Sep 17 00:00:00 2001
From: brysonjbest <103070659+brysonjbest@users.noreply.github.com>
Date: Wed, 9 Oct 2024 16:49:32 -0700
Subject: [PATCH 02/12] Init server-side search and filter.

---
 app/page.tsx             | 166 ++++++++++++++++++++-------------------
 app/types/ruleInfo.d.ts  |   6 ++
 app/types/rulequery.d.ts |  10 +++
 app/utils/api.ts         |   7 +-
 4 files changed, 104 insertions(+), 85 deletions(-)
 create mode 100644 app/types/rulequery.d.ts

diff --git a/app/page.tsx b/app/page.tsx
index fde672f..ad3c51b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,95 +1,94 @@
 "use client";
-import { useState, useEffect, useMemo, Fragment } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import Link from "next/link";
 import { Button, Flex, Spin, Table, Input, Tag } from "antd";
 import type { Breakpoint, TablePaginationConfig, TableColumnsType } from "antd";
-import type { FilterValue, SorterResult } from "antd/es/table/interface";
+import type { ColumnFilterItem, FilterValue, SorterResult } from "antd/es/table/interface";
 import { EyeOutlined, EditOutlined, CheckCircleOutlined, DownSquareOutlined } from "@ant-design/icons";
 import { RuleInfo } from "./types/ruleInfo";
 import { getAllRuleData } from "./utils/api";
 import styles from "./styles/home.module.css";
 
+interface TableParams {
+  pagination?: TablePaginationConfig;
+  sortField?: string;
+  sortOrder?: string;
+  filters?: Record<string, FilterValue | null>;
+  searchTerm?: string;
+}
+
 export default function Home() {
   const [rules, setRules] = useState<RuleInfo[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [filteredInfo, setFilteredInfo] = useState<Record<string, FilterValue | null>>({});
-  const [pagination, setPagination] = useState<TablePaginationConfig>({
-    current: 1,
-    pageSize: 15,
+  const [loading, setLoading] = useState(true);
+  const [categories, setCategories] = useState<ColumnFilterItem[]>([]);
+  const [tableParams, setTableParams] = useState<TableParams>({
+    pagination: {
+      current: 1,
+      pageSize: 15,
+      total: 0,
+    },
+    filters: {},
+    searchTerm: "",
   });
 
-  useEffect(() => {
-    const getRules = async () => {
-      try {
-        const ruleData = await getAllRuleData();
-        setRules(ruleData);
-        setIsLoading(false);
-      } catch (error) {
-        console.error(`Error loading rules: ${error}`);
-      }
-    };
-    getRules();
-  }, []);
+  const fetchData = async () => {
+    setLoading(true);
+    try {
+      // Update this to match your API structure
+      const response = await getAllRuleData({
+        page: tableParams.pagination?.current || 1,
+        pageSize: tableParams.pagination?.pageSize,
+        sortField: tableParams.sortField,
+        sortOrder: tableParams.sortOrder,
+        filters: tableParams.filters,
+        searchTerm: tableParams.searchTerm,
+      });
+
+      setRules(response.data);
+      setCategories(response.categories.map((category: string) => ({ text: category, value: category })));
+      setTableParams({
+        ...tableParams,
+        pagination: {
+          ...tableParams.pagination,
+          total: response.total, // Assuming your API returns the total count
+        },
+      });
+    } catch (error) {
+      console.error(`Error loading rules: ${error}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(
+    () => {
+      fetchData();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(tableParams)]
+  );
 
-  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchTerm(e.target.value);
-    setPagination((prev) => ({ ...prev, current: 1 }));
+  const handleSearch = (value: string) => {
+    setTableParams({
+      ...tableParams,
+      searchTerm: value,
+      pagination: { ...tableParams.pagination, current: 1 },
+    });
   };
 
   const formatFilePathTags = (filepath: string) => {
     const parts = filepath.split("/");
     return parts.map((part, index) => (
-      <Fragment key={index}>{index < parts.length - 1 && <Tag color="blue">{part}</Tag>}</Fragment>
+      <React.Fragment key={index}>{index < parts.length - 1 && <Tag color="blue">{part}</Tag>}</React.Fragment>
     ));
   };
 
-  // Generate filters for filepaths based on the full filepath of each rule
-  const getFilepathFilters = useMemo(() => {
-    const directories = new Set<string>();
-
-    rules.forEach((rule) => {
-      const parts = rule.filepath.split("/");
-      let currentPath = "";
-
-      parts.forEach((part, index) => {
-        if (index < parts.length - 1) {
-          currentPath += (currentPath ? "/" : "") + part;
-          directories.add(currentPath);
-        }
-      });
-    });
-
-    return Array.from(directories).map((path) => ({
-      text: path.split("/").pop() || "",
-      value: path,
-    }));
-  }, [rules]);
-
-  // Filter rules based on search terms and filepath filters
-  const filteredRules = useMemo(() => {
-    let result = rules;
-    if (searchTerm) {
-      result = result.filter(
-        (rule) =>
-          rule?.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          rule.filepath.toLowerCase().includes(searchTerm.toLowerCase())
-      );
-    }
-    if (filteredInfo.filepath) {
-      const filepathFilters = filteredInfo.filepath as string[];
-      result = result.filter((rule) => filepathFilters.some((path) => rule.filepath.startsWith(path)));
-    }
-
-    return result;
-  }, [rules, searchTerm, filteredInfo]);
-
   const columns: TableColumnsType<RuleInfo> = [
     {
       title: "Rule",
       dataIndex: "title",
       key: "title",
-      sorter: (a, b) => (a.title || "").localeCompare(b.title || ""),
+      sorter: true,
       render: (_, record) => {
         const ruleLink = `/rule/${record._id}`;
         const draftLink = `${ruleLink}?version=draft`;
@@ -106,12 +105,9 @@ export default function Home() {
       title: "Categories",
       dataIndex: "filepath",
       key: "filepath",
-      filters: getFilepathFilters,
-      filteredValue: filteredInfo.filepath || null,
-      onFilter: (value, record) => record.filepath.startsWith(value as string),
-      filterMode: "tree",
-      filterSearch: true,
-      sorter: (a, b) => a.filepath.localeCompare(b.filepath),
+      filters: categories,
+      filteredValue: tableParams.filters?.filepath || null,
+      sorter: true,
       render: (_, record) => <span>{formatFilePathTags(record.filepath)}</span>,
     },
     {
@@ -173,12 +169,21 @@ export default function Home() {
   ];
 
   const handleTableChange = (
-    newPagination: TablePaginationConfig,
+    pagination: TablePaginationConfig,
     filters: Record<string, FilterValue | null>,
     sorter: SorterResult<RuleInfo> | SorterResult<RuleInfo>[]
   ) => {
-    setPagination(newPagination);
-    setFilteredInfo(filters);
+    console.log(pagination, "this is pagination");
+    console.log(filters, "this is filters");
+    console.log(sorter, "this is sorter");
+    setTableParams({
+      pagination,
+      filters,
+      ...(!Array.isArray(sorter) && {
+        sortField: sorter.field as string,
+        sortOrder: sorter.order ? sorter.order : undefined,
+      }),
+    });
   };
 
   return (
@@ -194,20 +199,17 @@ export default function Home() {
           </Link>
         </Flex>
       </Flex>
-      <Input.Search placeholder="Search rules..." onChange={handleSearch} style={{ marginBottom: 16 }} allowClear />
-      {isLoading ? (
+      <Input.Search placeholder="Search rules..." onSearch={handleSearch} style={{ marginBottom: 16 }} allowClear />
+      {loading ? (
         <Spin tip="Loading rules..." className="spinner">
           <div className="content" />
         </Spin>
       ) : (
         <Table
           columns={columns}
-          dataSource={filteredRules}
-          pagination={{
-            ...pagination,
-            total: filteredRules.length,
-            showSizeChanger: true,
-          }}
+          dataSource={rules}
+          pagination={tableParams.pagination}
+          loading={loading}
           onChange={handleTableChange}
           rowKey="_id"
         />
diff --git a/app/types/ruleInfo.d.ts b/app/types/ruleInfo.d.ts
index 3ca19b5..31cee70 100644
--- a/app/types/ruleInfo.d.ts
+++ b/app/types/ruleInfo.d.ts
@@ -15,3 +15,9 @@ export interface RuleInfo extends RuleInfoBasic {
   reviewBranch?: string;
   isPublished?: boolean;
 }
+
+export interface RuleDataResponse {
+  data: RuleInfo[];
+  total: number;
+  categories: Array<string>;
+}
diff --git a/app/types/rulequery.d.ts b/app/types/rulequery.d.ts
new file mode 100644
index 0000000..3cc5d27
--- /dev/null
+++ b/app/types/rulequery.d.ts
@@ -0,0 +1,10 @@
+import { FilterValue } from "antd/es/table/interface";
+
+export interface RuleQuery {
+  page?: number;
+  pageSize?: number;
+  sortField?: string;
+  sortOrder?: string;
+  filters?: Record<string, FilterValue, null> | undefined;
+  searchTerm?: string;
+}
diff --git a/app/utils/api.ts b/app/utils/api.ts
index 327289e..2570b2e 100644
--- a/app/utils/api.ts
+++ b/app/utils/api.ts
@@ -1,10 +1,11 @@
 import { DecisionGraphType } from "@gorules/jdm-editor";
 import axios from "axios";
-import { RuleDraft, RuleInfo } from "../types/ruleInfo";
+import { RuleDataResponse, RuleDraft, RuleInfo } from "../types/ruleInfo";
 import { RuleMap } from "../types/rulemap";
 import { KlammBREField } from "../types/klamm";
 import { downloadFileBlob, generateDescriptiveName, getShortFilenameOnly } from "./utils";
 import { valueType } from "antd/es/statistic/utils";
+import { RuleQuery } from "../types/rulequery";
 
 const axiosAPIInstance = axios.create({
   // For server side calls, need full URL, otherwise can just use /api
@@ -51,9 +52,9 @@ export const getRuleDraft = async (ruleId: string): Promise<RuleDraft> => {
  * @returns The rule data list.
  * @throws If an error occurs while fetching the rule data.
  */
-export const getAllRuleData = async (): Promise<RuleInfo[]> => {
+export const getAllRuleData = async (params: RuleQuery): Promise<RuleDataResponse> => {
   try {
-    const { data } = await axiosAPIInstance.get("/ruleData/list");
+    const { data } = await axiosAPIInstance.get<RuleDataResponse>("/ruleData/list", { params });
     return data;
   } catch (error) {
     console.error(`Error fetching rule data: ${error}`);

From 49a55e9ea775412da71f86eaa921acb6eacb7e3e Mon Sep 17 00:00:00 2001
From: brysonjbest <103070659+brysonjbest@users.noreply.github.com>
Date: Thu, 10 Oct 2024 15:20:45 -0700
Subject: [PATCH 03/12] Add server-side search and update descriptive
 components.

---
 app/admin/page.tsx                            | 83 +++++++++++++++----
 .../InputOutputTable/InputOutputTable.tsx     |  6 +-
 .../InputStyler/subcomponents/FieldStyler.tsx | 24 ++++++
 .../subcomponents/InputComponents.tsx         | 15 +++-
 app/components/RuleManager/RuleManager.tsx    |  2 +-
 .../subcomponents/LinkRuleComponent.tsx       |  2 +-
 .../ScenarioFormatter/ScenarioFormatter.tsx   | 10 ++-
 app/page.tsx                                  | 28 +++++--
 app/types/ruleInfo.d.ts                       |  7 +-
 app/utils/api.ts                              |  8 +-
 10 files changed, 148 insertions(+), 37 deletions(-)
 create mode 100644 app/components/InputStyler/subcomponents/FieldStyler.tsx

diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index baed6fb..2f6a3a2 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -2,7 +2,8 @@
 import { useState, useEffect } from "react";
 import Link from "next/link";
 import { Table, Input, Button, Flex } from "antd";
-import { ColumnsType } from "antd/es/table";
+import { ColumnsType, TablePaginationConfig } from "antd/es/table";
+import { FilterValue } from "antd/es/table/interface";
 import { HomeOutlined } from "@ant-design/icons";
 import { RuleInfo, RuleInfoBasic } from "../types/ruleInfo";
 import { getAllRuleData, postRuleData, updateRuleData, deleteRuleData } from "../utils/api";
@@ -15,23 +16,56 @@ enum ACTION_STATUS {
 
 const PAGE_SIZE = 15;
 
+interface TableParams {
+  pagination?: TablePaginationConfig;
+  searchTerm?: string;
+}
+
 export default function Admin() {
   const [isLoading, setIsLoading] = useState(true);
   const [initialRules, setInitialRules] = useState<RuleInfo[]>([]);
   const [rules, setRules] = useState<RuleInfo[]>([]);
-  const [currentPage, setCurrentPage] = useState(0);
+  const [tableParams, setTableParams] = useState<TableParams>({
+    pagination: {
+      current: 1,
+      pageSize: 15,
+      total: 0,
+    },
+    searchTerm: "",
+  });
 
   const getOrRefreshRuleList = async () => {
-    // Get rules that are already defined in the DB
-    const existingRules = await getAllRuleData();
-    setInitialRules(existingRules);
-    setRules(JSON.parse(JSON.stringify([...existingRules]))); // JSON.parse(JSON.stringify(data)) is a hacky way to deep copy the data - needed for comparison later
-    setIsLoading(false);
+    setIsLoading(true);
+    try {
+      const ruleData = await getAllRuleData({
+        page: tableParams.pagination?.current || 1,
+        pageSize: tableParams.pagination?.pageSize || 15,
+        searchTerm: tableParams.searchTerm || "",
+      });
+      const existingRules = ruleData?.data || [];
+      setInitialRules(existingRules);
+      setRules(JSON.parse(JSON.stringify([...existingRules])));
+      setTableParams({
+        ...tableParams,
+        pagination: {
+          ...tableParams.pagination,
+          total: ruleData?.total || 0,
+        },
+      });
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
-  useEffect(() => {
-    getOrRefreshRuleList();
-  }, []);
+  useEffect(
+    () => {
+      getOrRefreshRuleList();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(tableParams)]
+  );
 
   const updateRule = (e: React.ChangeEvent<HTMLInputElement>, index: number, property: keyof RuleInfoBasic) => {
     const newRules = [...rules];
@@ -40,7 +74,8 @@ export default function Admin() {
   };
 
   const deleteRule = async (index: number) => {
-    const deletionIndex = (currentPage - 1) * PAGE_SIZE + index;
+    const deletionIndex =
+      ((tableParams?.pagination?.current || 1) - 1) * (tableParams?.pagination?.pageSize || PAGE_SIZE) + index;
     const newRules = [...rules.slice(0, deletionIndex), ...rules.slice(deletionIndex + 1, rules.length)];
     setRules(newRules);
   };
@@ -67,11 +102,6 @@ export default function Admin() {
     return [...updatedEntries, ...deletedEntries];
   };
 
-  const updateCurrPage = (page: number, pageSize: number) => {
-    // Keep track of current page so we can delete via splice properly
-    setCurrentPage(page);
-  };
-
   // Save all rule updates to the API/DB
   const saveAllRuleUpdates = async () => {
     setIsLoading(true);
@@ -136,6 +166,21 @@ export default function Admin() {
     },
   ];
 
+  const handleTableChange = (pagination: TablePaginationConfig, filters: Record<string, FilterValue | null>) => {
+    setTableParams((prevParams) => ({
+      pagination,
+      filters,
+      searchTerm: prevParams.searchTerm,
+    }));
+  };
+  const handleSearch = (value: string) => {
+    setTableParams({
+      ...tableParams,
+      searchTerm: value,
+      pagination: { ...tableParams.pagination, current: 1 },
+    });
+  };
+
   return (
     <>
       <Flex justify="space-between" align="center">
@@ -149,12 +194,16 @@ export default function Admin() {
           </Button>
         )}
       </Flex>
+      <Input.Search placeholder="Search rules..." onSearch={handleSearch} style={{ marginBottom: 16 }} allowClear />
+
       {isLoading ? (
         <p>Loading...</p>
       ) : (
         <Table
           columns={columns}
-          pagination={{ pageSize: PAGE_SIZE, onChange: updateCurrPage }}
+          pagination={tableParams.pagination}
+          onChange={handleTableChange}
+          loading={isLoading}
           dataSource={rules.map((rule, key) => ({ key, ...rule }))}
         />
       )}
diff --git a/app/components/InputOutputTable/InputOutputTable.tsx b/app/components/InputOutputTable/InputOutputTable.tsx
index 65bb8a3..a450f4b 100644
--- a/app/components/InputOutputTable/InputOutputTable.tsx
+++ b/app/components/InputOutputTable/InputOutputTable.tsx
@@ -4,6 +4,7 @@ import { MinusCircleOutlined } from "@ant-design/icons";
 import { RuleMap } from "@/app/types/rulemap";
 import styles from "./InputOutputTable.module.css";
 import { dollarFormat } from "@/app/utils/utils";
+import FieldStyler from "../InputStyler/subcomponents/FieldStyler";
 
 const COLUMNS = [
   {
@@ -142,7 +143,10 @@ export default function InputOutputTable({
         .filter(([field]) => !PROPERTIES_TO_IGNORE.includes(field))
         .sort(([propertyA], [propertyB]) => propertyA.localeCompare(propertyB))
         .map(([field, value], index) => ({
-          field: propertyRuleMap?.find((item) => item.field === field)?.name || field,
+          field: FieldStyler(
+            propertyRuleMap?.find((item) => item.field === field)?.name || field,
+            propertyRuleMap?.find((item) => item.field === field)?.description
+          ),
           value: convertAndStyleValue(value, field, editable),
           key: index,
         }));
diff --git a/app/components/InputStyler/subcomponents/FieldStyler.tsx b/app/components/InputStyler/subcomponents/FieldStyler.tsx
new file mode 100644
index 0000000..8f3c760
--- /dev/null
+++ b/app/components/InputStyler/subcomponents/FieldStyler.tsx
@@ -0,0 +1,24 @@
+import { Tooltip, Popover } from "antd";
+import { InfoCircleOutlined } from "@ant-design/icons";
+
+export default function FieldStyler(fieldName: string, description?: string) {
+  const popOverInformation = (
+    <Popover placement="top" content={description} title={fieldName} trigger={"click"}>
+      <span>
+        {" "}
+        <InfoCircleOutlined />
+      </span>
+    </Popover>
+  );
+  const helpDialog = "View Description";
+  return (
+    <label>
+      {fieldName}
+      {description && (
+        <Tooltip title={helpDialog} placement="top">
+          {popOverInformation}
+        </Tooltip>
+      )}
+    </label>
+  );
+}
diff --git a/app/components/InputStyler/subcomponents/InputComponents.tsx b/app/components/InputStyler/subcomponents/InputComponents.tsx
index adba5e0..d4b63b1 100644
--- a/app/components/InputStyler/subcomponents/InputComponents.tsx
+++ b/app/components/InputStyler/subcomponents/InputComponents.tsx
@@ -238,7 +238,20 @@ export const ReadOnlyBooleanDisplay = ({ show, value }: ReadOnlyProps) => {
 
 export const ReadOnlyStringDisplay = ({ show, value }: ReadOnlyProps) => {
   if (!show) return null;
-  return value.toString();
+  const stringList = value.split(",");
+  if (stringList.length > 1) {
+    return (
+      <>
+        {stringList.map((string: string, index: number) => (
+          <Tag color="blue" key={index}>
+            {string.trim()}
+          </Tag>
+        ))}
+      </>
+    );
+  }
+
+  return <Tag color="blue">{value}</Tag>;
 };
 
 export const ReadOnlyNumberDisplay = ({ show, value, field }: ReadOnlyNumberDisplayProps) => {
diff --git a/app/components/RuleManager/RuleManager.tsx b/app/components/RuleManager/RuleManager.tsx
index ac009ff..9d6eb3a 100644
--- a/app/components/RuleManager/RuleManager.tsx
+++ b/app/components/RuleManager/RuleManager.tsx
@@ -54,7 +54,7 @@ export default function RuleManager({
   const [resultsOfSimulation, setResultsOfSimulation] = useState<Record<string, any> | null>();
   const { setHasUnsavedChanges } = useLeaveScreenPopup();
   const canEditGraph = editing === "draft" || editing === true;
-  const canEditScenarios = editing === "draft" || editing === "inreview" || editing === true;
+  const canEditScenarios = editing === "draft" || editing === "inReview" || editing === true;
 
   const updateRuleContent = (updatedRuleContent: DecisionGraphType) => {
     if (ruleContent !== updatedRuleContent) {
diff --git a/app/components/RuleViewerEditor/subcomponents/LinkRuleComponent.tsx b/app/components/RuleViewerEditor/subcomponents/LinkRuleComponent.tsx
index b78fe87..8f8d61c 100644
--- a/app/components/RuleViewerEditor/subcomponents/LinkRuleComponent.tsx
+++ b/app/components/RuleViewerEditor/subcomponents/LinkRuleComponent.tsx
@@ -30,7 +30,7 @@ export default function LinkRuleComponent({ specification, id, isSelected, name,
     const getRuleOptions = async () => {
       const ruleData = await getAllRuleData();
       setRuleOptions(
-        ruleData.map(({ title, filepath }) => ({
+        ruleData?.data.map(({ title, filepath }) => ({
           label: title || filepath,
           value: filepath,
         }))
diff --git a/app/components/ScenariosManager/ScenarioFormatter/ScenarioFormatter.tsx b/app/components/ScenariosManager/ScenarioFormatter/ScenarioFormatter.tsx
index 672201b..f60b366 100644
--- a/app/components/ScenariosManager/ScenarioFormatter/ScenarioFormatter.tsx
+++ b/app/components/ScenariosManager/ScenarioFormatter/ScenarioFormatter.tsx
@@ -5,6 +5,7 @@ import styles from "./ScenarioFormatter.module.css";
 import { RuleMap } from "@/app/types/rulemap";
 import InputStyler from "../../InputStyler/InputStyler";
 import { parseSchemaTemplate } from "../../InputStyler/InputStyler";
+import FieldStyler from "../../InputStyler/subcomponents/FieldStyler";
 
 const COLUMNS = [
   {
@@ -62,10 +63,13 @@ export default function ScenarioFormatter({ title, rawData, setRawData, scenario
         .filter(([field]) => !PROPERTIES_TO_IGNORE.includes(field))
         .sort(([propertyA], [propertyB]) => propertyA.localeCompare(propertyB))
         .map(([field, value], index) => ({
-          field:
+          field: FieldStyler(
             propertyRuleMap?.find((item) => item.field === field)?.name ||
-            parseSchemaTemplate(field)?.arrayName ||
-            field,
+              parseSchemaTemplate(field)?.arrayName ||
+              field,
+            propertyRuleMap?.find((item) => item.field === field)?.description
+          ),
+
           value: InputStyler(
             value,
             field,
diff --git a/app/page.tsx b/app/page.tsx
index ad3c51b..552e370 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import { Button, Flex, Spin, Table, Input, Tag } from "antd";
 import type { Breakpoint, TablePaginationConfig, TableColumnsType } from "antd";
@@ -34,7 +34,6 @@ export default function Home() {
   const fetchData = async () => {
     setLoading(true);
     try {
-      // Update this to match your API structure
       const response = await getAllRuleData({
         page: tableParams.pagination?.current || 1,
         pageSize: tableParams.pagination?.pageSize,
@@ -45,12 +44,12 @@ export default function Home() {
       });
 
       setRules(response.data);
-      setCategories(response.categories.map((category: string) => ({ text: category, value: category })));
+      setCategories(response.categories);
       setTableParams({
         ...tableParams,
         pagination: {
           ...tableParams.pagination,
-          total: response.total, // Assuming your API returns the total count
+          total: response.total,
         },
       });
     } catch (error) {
@@ -173,16 +172,24 @@ export default function Home() {
     filters: Record<string, FilterValue | null>,
     sorter: SorterResult<RuleInfo> | SorterResult<RuleInfo>[]
   ) => {
-    console.log(pagination, "this is pagination");
-    console.log(filters, "this is filters");
-    console.log(sorter, "this is sorter");
-    setTableParams({
+    setTableParams((prevParams) => ({
       pagination,
       filters,
+      searchTerm: prevParams.searchTerm,
       ...(!Array.isArray(sorter) && {
         sortField: sorter.field as string,
         sortOrder: sorter.order ? sorter.order : undefined,
       }),
+    }));
+  };
+
+  const clearAll = () => {
+    setTableParams({
+      pagination: { current: 1, pageSize: 15, total: 0 },
+      filters: {},
+      searchTerm: "",
+      sortField: "",
+      sortOrder: undefined,
     });
   };
 
@@ -199,7 +206,10 @@ export default function Home() {
           </Link>
         </Flex>
       </Flex>
-      <Input.Search placeholder="Search rules..." onSearch={handleSearch} style={{ marginBottom: 16 }} allowClear />
+      <Flex gap="small">
+        <Input.Search placeholder="Search rules..." onSearch={handleSearch} style={{ marginBottom: 16 }} allowClear />
+        <Button onClick={clearAll}>Reset Filters ↻</Button>
+      </Flex>
       {loading ? (
         <Spin tip="Loading rules..." className="spinner">
           <div className="content" />
diff --git a/app/types/ruleInfo.d.ts b/app/types/ruleInfo.d.ts
index 31cee70..cb85904 100644
--- a/app/types/ruleInfo.d.ts
+++ b/app/types/ruleInfo.d.ts
@@ -16,8 +16,13 @@ export interface RuleInfo extends RuleInfoBasic {
   isPublished?: boolean;
 }
 
+export interface CategoryObject {
+  text: string;
+  value: string;
+}
+
 export interface RuleDataResponse {
   data: RuleInfo[];
   total: number;
-  categories: Array<string>;
+  categories: Array<CategoryObject>;
 }
diff --git a/app/utils/api.ts b/app/utils/api.ts
index 2570b2e..deaeabf 100644
--- a/app/utils/api.ts
+++ b/app/utils/api.ts
@@ -52,7 +52,7 @@ export const getRuleDraft = async (ruleId: string): Promise<RuleDraft> => {
  * @returns The rule data list.
  * @throws If an error occurs while fetching the rule data.
  */
-export const getAllRuleData = async (params: RuleQuery): Promise<RuleDataResponse> => {
+export const getAllRuleData = async (params?: RuleQuery): Promise<RuleDataResponse> => {
   try {
     const { data } = await axiosAPIInstance.get<RuleDataResponse>("/ruleData/list", { params });
     return data;
@@ -302,6 +302,7 @@ export const runDecisionsForScenarios = async (filepath: string, ruleContent?: D
 /**
  * Downloads a CSV file containing scenarios for a rule run.
  * @param filepath The filename for the JSON rule.
+ * @param ruleVersion The version of the rule to run.
  * @param ruleContent The rule decision graph to evaluate.
  * @returns The processed CSV content as a string.
  * @throws If an error occurs during file upload or processing.
@@ -321,7 +322,7 @@ export const getCSVForRuleRun = async (
       }
     );
 
-    const filename = `${(ruleVersion + "_" + filepath).replace(/\.json$/, ".csv")}`;
+    const filename = `${filepath.replace(/\.json$/, ".csv")}`;
     downloadFileBlob(response.data, "text/csv", filename);
 
     return "CSV downloaded successfully";
@@ -407,8 +408,9 @@ export const getBREFieldFromName = async (fieldName: string): Promise<KlammBREFi
 /**
  * Generate CSV Tests for scenarios
  * @param filepath The filename for the JSON rule.
- * @param filepath The filename for the JSON rule.
  * @param ruleContent The rule decision graph to evaluate.
+ * @param simulationContext The simulation context to use for the tests.
+ * @param testScenarioCount The number of scenarios to generate.
  * @returns The processed CSV content as a string.
  * @throws If an error occurs during file upload or processing.
  */

From e73a4556b1e4afac746128e84349f56b89e83155 Mon Sep 17 00:00:00 2001
From: brysonjbest <103070659+brysonjbest@users.noreply.github.com>
Date: Thu, 10 Oct 2024 15:21:36 -0700
Subject: [PATCH 04/12] Add klamm refresh button for manual input/output
 information update.

---
 .../RuleInputOutputFieldsComponent.tsx        | 61 ++++++++++++++++++-
 1 file changed, 59 insertions(+), 2 deletions(-)

diff --git a/app/components/RuleViewerEditor/subcomponents/RuleInputOutputFieldsComponent.tsx b/app/components/RuleViewerEditor/subcomponents/RuleInputOutputFieldsComponent.tsx
index 53bd3dc..441b7a0 100644
--- a/app/components/RuleViewerEditor/subcomponents/RuleInputOutputFieldsComponent.tsx
+++ b/app/components/RuleViewerEditor/subcomponents/RuleInputOutputFieldsComponent.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
-import { Button, List, Select, Spin, Tooltip } from "antd";
-import { DeleteOutlined } from "@ant-design/icons";
+import { Button, List, Select, Spin, Tooltip, message } from "antd";
+import { DeleteOutlined, SyncOutlined } from "@ant-design/icons";
 import type { DefaultOptionType } from "antd/es/select";
 import type { FlattenOptionData } from "rc-select/lib/interface";
 import { GraphNode, useDecisionGraphActions, useDecisionGraphState } from "@gorules/jdm-editor";
@@ -190,6 +190,53 @@ export default function RuleInputOutputFieldsComponent({
     );
   };
 
+  const refreshFromKlamm = async () => {
+    setIsLoading(true);
+    try {
+      const updatedFields = await Promise.all(
+        inputOutputFields.map(async (field) => {
+          if (field.field) {
+            const klammData: KlammBREField = await getBREFieldFromName(field.field);
+            return {
+              id: klammData.id,
+              field: klammData.name,
+              name: klammData.label,
+              description: klammData.description,
+              dataType: klammData?.data_type?.name,
+              validationCriteria: klammData?.data_validation?.validation_criteria,
+              validationType: klammData?.data_validation?.bre_validation_type?.value,
+              childFields:
+                klammData?.data_type?.name === "object-array"
+                  ? klammData?.child_fields?.map((child) => ({
+                      id: child.id,
+                      name: child.label,
+                      field: child.name,
+                      description: child.description,
+                      dataType: child?.bre_data_type?.name,
+                      validationCriteria: child?.bre_data_validation?.validation_criteria,
+                      validationType: child?.bre_data_validation?.bre_validation_type?.value,
+                    }))
+                  : [],
+            };
+          }
+          return field;
+        })
+      );
+
+      updateNode(id, (draft) => {
+        draft.content.fields = updatedFields;
+        return draft;
+      });
+
+      message.success("Fields refreshed successfully from Klamm");
+    } catch (error) {
+      console.error("Error refreshing fields from Klamm:", error);
+      message.error("Failed to refresh fields from Klamm");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <GraphNode
       id={id}
@@ -202,6 +249,16 @@ export default function RuleInputOutputFieldsComponent({
               <Button key="add row" type="link" onClick={addInputField} disabled={!isEditable}>
                 Add {fieldsTypeLabel} +
               </Button>,
+              <Button key="refresh fields" type="link" onClick={refreshFromKlamm} disabled={!isEditable || isLoading}>
+                {isLoading ? (
+                  <Spin size="small" />
+                ) : (
+                  <>
+                    <span>Refresh Klamm </span>
+                    <SyncOutlined />
+                  </>
+                )}
+              </Button>,
             ]
           : []
       }

From 73d10c6021a7ccdc712d49ccfe3f106b2d32d0e5 Mon Sep 17 00:00:00 2001
From: brysonjbest <103070659+brysonjbest@users.noreply.github.com>
Date: Fri, 11 Oct 2024 13:20:45 -0700
Subject: [PATCH 05/12] Fix title metadata update on navigation.

---
 app/page.tsx               |  1 +
 app/rule/[ruleId]/page.tsx | 26 ++++++++++++++++----------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 552e370..62cd826 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -106,6 +106,7 @@ export default function Home() {
       key: "filepath",
       filters: categories,
       filteredValue: tableParams.filters?.filepath || null,
+      filterSearch: true,
       sorter: true,
       render: (_, record) => <span>{formatFilePathTags(record.filepath)}</span>,
     },
diff --git a/app/rule/[ruleId]/page.tsx b/app/rule/[ruleId]/page.tsx
index 1aaf640..5d10aba 100644
--- a/app/rule/[ruleId]/page.tsx
+++ b/app/rule/[ruleId]/page.tsx
@@ -8,15 +8,24 @@ import { RULE_VERSION } from "@/app/constants/ruleVersion";
 import { GithubAuthProvider } from "@/app/components/GithubAuthProvider";
 import useGithubAuth from "@/app/hooks/useGithubAuth";
 
-export let metadata: Metadata;
-
-export default async function Rule({
-  params: { ruleId },
-  searchParams,
-}: {
+type Props = {
   params: { ruleId: string };
   searchParams: { version?: string };
-}) {
+};
+
+// Update page title with rule name
+export async function generateMetadata({ params, searchParams }: Props): Promise<Metadata> {
+  const { ruleId } = params;
+  const { version } = searchParams;
+
+  const { ruleInfo } = await getRuleDataForVersion(ruleId, version);
+
+  return {
+    title: ruleInfo.title,
+  };
+}
+
+export default async function Rule({ params: { ruleId }, searchParams }: Props) {
   // Get version of rule to use
   const { version } = searchParams;
 
@@ -32,9 +41,6 @@ export default async function Rule({
     return <h1>Rule not found</h1>;
   }
 
-  // Update page title with rule name
-  metadata = { title: ruleInfo.title };
-
   // Get scenario information
   const scenarios: Scenario[] = await getScenariosByFilename(ruleInfo.filepath);
 

From 101d76067e80747fb7513115e1563aa063726535 Mon Sep 17 00:00:00 2001
From: brysonjbest <103070659+brysonjbest@users.noreply.github.com>
Date: Tue, 15 Oct 2024 08:37:23 -0700
Subject: [PATCH 06/12] Add loading after selecting generate tests button.

---
 .../IsolationTester/IsolationTester.tsx        | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/app/components/ScenariosManager/IsolationTester/IsolationTester.tsx b/app/components/ScenariosManager/IsolationTester/IsolationTester.tsx
index 0d16bb9..db190d3 100644
--- a/app/components/ScenariosManager/IsolationTester/IsolationTester.tsx
+++ b/app/components/ScenariosManager/IsolationTester/IsolationTester.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Flex, Button, message, InputNumber, Collapse } from "antd";
+import { Flex, Button, message, InputNumber, Collapse, Spin } from "antd";
 import { Scenario } from "@/app/types/scenario";
 import { getCSVTests } from "@/app/utils/api";
 import { RuleMap } from "@/app/types/rulemap";
@@ -30,15 +30,19 @@ export default function IsolationTester({
   ruleVersion,
 }: IsolationTesterProps) {
   const [testScenarioCount, setTestScenarioCount] = useState<valueType | null>(10);
+  const [loading, setLoading] = useState(false);
 
   const handleCSVTests = async () => {
     const ruleName = ruleVersion === "draft" ? "Draft" : ruleVersion === "inreview" ? "In Review" : "Published";
     try {
+      setLoading(true);
       const csvContent = await getCSVTests(jsonFile, ruleName, ruleContent, simulationContext, testScenarioCount);
       message.success(`Scenario Tests: ${csvContent}`);
     } catch (error) {
       message.error("Error downloading scenarios.");
       console.error("Error:", error);
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -102,9 +106,15 @@ export default function IsolationTester({
             </li>
             <li>
               Generate a CSV file with your created tests:{" "}
-              <Button onClick={handleCSVTests} size="large" type="primary">
-                Generate Tests
-              </Button>
+              {loading ? (
+                <Spin tip="Generating test scenarios..." className="spinner">
+                  <div className="content" />
+                </Spin>
+              ) : (
+                <Button onClick={handleCSVTests} size="large" type="primary">
+                  Generate Tests
+                </Button>
+              )}
             </li>
           </ol>
         </Flex>

From c1b19d9394109e3a0d9b0d9edd9239b666efddf4 Mon Sep 17 00:00:00 2001
From: brysonjbest <103070659+brysonjbest@users.noreply.github.com>
Date: Wed, 16 Oct 2024 15:19:56 -0700
Subject: [PATCH 07/12] Style and refactoring updates.

---
 app/admin/page.tsx                               |  4 ++--
 .../InputOutputTable/InputOutputTable.tsx        | 16 ++++++++--------
 app/components/RuleManager/RuleManager.tsx       |  5 +++--
 .../IsolationTester/IsolationTester.tsx          |  5 +----
 .../ScenariosManager/ScenarioCSV/ScenarioCSV.tsx |  6 ++----
 .../ScenariosManager/ScenariosManager.tsx        |  3 +--
 app/page.tsx                                     | 13 ++++++++++---
 app/utils/api.ts                                 |  8 +-------
 8 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 2f6a3a2..17ec803 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -74,8 +74,8 @@ export default function Admin() {
   };
 
   const deleteRule = async (index: number) => {
-    const deletionIndex =
-      ((tableParams?.pagination?.current || 1) - 1) * (tableParams?.pagination?.pageSize || PAGE_SIZE) + index;
+    const { current, pageSize } = tableParams?.pagination || {};
+    const deletionIndex = ((current || 1) - 1) * (pageSize || PAGE_SIZE) + index;
     const newRules = [...rules.slice(0, deletionIndex), ...rules.slice(deletionIndex + 1, rules.length)];
     setRules(newRules);
   };
diff --git a/app/components/InputOutputTable/InputOutputTable.tsx b/app/components/InputOutputTable/InputOutputTable.tsx
index a450f4b..2c5d2c2 100644
--- a/app/components/InputOutputTable/InputOutputTable.tsx
+++ b/app/components/InputOutputTable/InputOutputTable.tsx
@@ -142,14 +142,14 @@ export default function InputOutputTable({
       const newData = Object.entries(rawData)
         .filter(([field]) => !PROPERTIES_TO_IGNORE.includes(field))
         .sort(([propertyA], [propertyB]) => propertyA.localeCompare(propertyB))
-        .map(([field, value], index) => ({
-          field: FieldStyler(
-            propertyRuleMap?.find((item) => item.field === field)?.name || field,
-            propertyRuleMap?.find((item) => item.field === field)?.description
-          ),
-          value: convertAndStyleValue(value, field, editable),
-          key: index,
-        }));
+        .map(([field, value], index) => {
+          const propertyRule = propertyRuleMap?.find((item) => item.field === field);
+          return {
+            field: FieldStyler(propertyRule?.name || field, propertyRule?.description),
+            value: convertAndStyleValue(value, field, editable),
+            key: index,
+          };
+        });
       setDataSource(newData);
       const newColumns = COLUMNS.filter((column) => showColumn(newData, column.dataIndex));
       setColumns(newColumns);
diff --git a/app/components/RuleManager/RuleManager.tsx b/app/components/RuleManager/RuleManager.tsx
index 9d6eb3a..cf21fdc 100644
--- a/app/components/RuleManager/RuleManager.tsx
+++ b/app/components/RuleManager/RuleManager.tsx
@@ -9,6 +9,7 @@ import { RuleMap } from "@/app/types/rulemap";
 import { Scenario } from "@/app/types/scenario";
 import useLeaveScreenPopup from "@/app/hooks/useLeaveScreenPopup";
 import { DEFAULT_RULE_CONTENT } from "@/app/constants/defaultRuleContent";
+import { RULE_VERSION } from "@/app/constants/ruleVersion";
 import SavePublish from "../SavePublish";
 import ScenariosManager from "../ScenariosManager";
 import styles from "./RuleManager.module.css";
@@ -53,8 +54,8 @@ export default function RuleManager({
   const [simulationContext, setSimulationContext] = useState<Record<string, any>>();
   const [resultsOfSimulation, setResultsOfSimulation] = useState<Record<string, any> | null>();
   const { setHasUnsavedChanges } = useLeaveScreenPopup();
-  const canEditGraph = editing === "draft" || editing === true;
-  const canEditScenarios = editing === "draft" || editing === "inReview" || editing === true;
+  const canEditGraph = editing === RULE_VERSION.draft || editing === true;
+  const canEditScenarios = editing === RULE_VERSION.draft || editing === RULE_VERSION.inReview || editing === true;
 
   const updateRuleContent = (updatedRuleContent: DecisionGraphType) => {
     if (ruleContent !== updatedRuleContent) {
diff --git a/app/components/ScenariosManager/IsolationTester/IsolationTester.tsx b/app/components/ScenariosManager/IsolationTester/IsolationTester.tsx
index db190d3..4b638e3 100644
--- a/app/components/ScenariosManager/IsolationTester/IsolationTester.tsx
+++ b/app/components/ScenariosManager/IsolationTester/IsolationTester.tsx
@@ -16,7 +16,6 @@ interface IsolationTesterProps {
   jsonFile: string;
   rulemap: RuleMap;
   ruleContent?: DecisionGraphType;
-  ruleVersion?: string | boolean;
 }
 
 export default function IsolationTester({
@@ -27,16 +26,14 @@ export default function IsolationTester({
   jsonFile,
   rulemap,
   ruleContent,
-  ruleVersion,
 }: IsolationTesterProps) {
   const [testScenarioCount, setTestScenarioCount] = useState<valueType | null>(10);
   const [loading, setLoading] = useState(false);
 
   const handleCSVTests = async () => {
-    const ruleName = ruleVersion === "draft" ? "Draft" : ruleVersion === "inreview" ? "In Review" : "Published";
     try {
       setLoading(true);
-      const csvContent = await getCSVTests(jsonFile, ruleName, ruleContent, simulationContext, testScenarioCount);
+      const csvContent = await getCSVTests(jsonFile, ruleContent, simulationContext, testScenarioCount);
       message.success(`Scenario Tests: ${csvContent}`);
     } catch (error) {
       message.error("Error downloading scenarios.");
diff --git a/app/components/ScenariosManager/ScenarioCSV/ScenarioCSV.tsx b/app/components/ScenariosManager/ScenarioCSV/ScenarioCSV.tsx
index f5570c6..bcc219d 100644
--- a/app/components/ScenariosManager/ScenarioCSV/ScenarioCSV.tsx
+++ b/app/components/ScenariosManager/ScenarioCSV/ScenarioCSV.tsx
@@ -8,10 +8,9 @@ import { uploadCSVAndProcess, getCSVForRuleRun } from "@/app/utils/api";
 interface ScenarioCSVProps {
   jsonFile: string;
   ruleContent?: DecisionGraphType;
-  ruleVersion?: string | boolean;
 }
 
-export default function ScenarioCSV({ jsonFile, ruleContent, ruleVersion = "" }: ScenarioCSVProps) {
+export default function ScenarioCSV({ jsonFile, ruleContent }: ScenarioCSVProps) {
   const [file, setFile] = useState<File | null>(null);
   const [uploadedFile, setUploadedFile] = useState(false);
 
@@ -30,9 +29,8 @@ export default function ScenarioCSV({ jsonFile, ruleContent, ruleVersion = "" }:
   };
 
   const handleDownloadScenarios = async () => {
-    const ruleName = ruleVersion === "draft" ? "Draft" : ruleVersion === "inreview" ? "In Review" : "Published";
     try {
-      const csvContent = await getCSVForRuleRun(jsonFile, ruleName, ruleContent);
+      const csvContent = await getCSVForRuleRun(jsonFile, ruleContent);
       message.success(`Scenario Testing Template: ${csvContent}`);
     } catch (error) {
       message.error("Error downloading scenarios.");
diff --git a/app/components/ScenariosManager/ScenariosManager.tsx b/app/components/ScenariosManager/ScenariosManager.tsx
index 4369517..120e399 100644
--- a/app/components/ScenariosManager/ScenariosManager.tsx
+++ b/app/components/ScenariosManager/ScenariosManager.tsx
@@ -121,7 +121,7 @@ export default function ScenariosManager({
 
   const csvTab = (
     <Flex gap="small">
-      <ScenarioCSV jsonFile={jsonFile} ruleContent={ruleContent} ruleVersion={isEditing} />
+      <ScenarioCSV jsonFile={jsonFile} ruleContent={ruleContent} />
     </Flex>
   );
 
@@ -135,7 +135,6 @@ export default function ScenariosManager({
         jsonFile={jsonFile}
         rulemap={rulemap}
         ruleContent={ruleContent}
-        ruleVersion={isEditing}
       />
       <Button onClick={handleReset} size="large" type="primary">
         Reset ↻
diff --git a/app/page.tsx b/app/page.tsx
index 68ad60c..47424c9 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -83,9 +83,13 @@ export default function Home() {
 
   const formatFilePathTags = (filepath: string) => {
     const parts = filepath.split("/");
-    return parts.map((part, index) => (
-      <React.Fragment key={index}>{index < parts.length - 1 && <Tag color="blue">{part}</Tag>}</React.Fragment>
-    ));
+    return (
+      <Flex gap="small" align="center" wrap={true}>
+        {parts.map((part, index) => (
+          <React.Fragment key={index}>{index < parts.length - 1 && <Tag color="blue">{part}</Tag>}</React.Fragment>
+        ))}
+      </Flex>
+    );
   };
 
   const columns: TableColumnsType<RuleInfo> = [
@@ -114,12 +118,15 @@ export default function Home() {
       filteredValue: tableParams.filters?.filepath || null,
       filterSearch: true,
       sorter: true,
+      width: "25%",
+      responsive: ["lg" as Breakpoint],
       render: (_, record) => <span>{formatFilePathTags(record.filepath)}</span>,
     },
     {
       title: "Versions",
       key: "versions",
       responsive: ["md" as Breakpoint],
+      width: "auto",
       render: (_, record) => {
         const ruleLink = `/rule/${record._id}`;
         const draftLink = `${ruleLink}?version=draft`;
diff --git a/app/utils/api.ts b/app/utils/api.ts
index deaeabf..34b11f6 100644
--- a/app/utils/api.ts
+++ b/app/utils/api.ts
@@ -302,16 +302,11 @@ export const runDecisionsForScenarios = async (filepath: string, ruleContent?: D
 /**
  * Downloads a CSV file containing scenarios for a rule run.
  * @param filepath The filename for the JSON rule.
- * @param ruleVersion The version of the rule to run.
  * @param ruleContent The rule decision graph to evaluate.
  * @returns The processed CSV content as a string.
  * @throws If an error occurs during file upload or processing.
  */
-export const getCSVForRuleRun = async (
-  filepath: string,
-  ruleVersion: string,
-  ruleContent?: DecisionGraphType
-): Promise<string> => {
+export const getCSVForRuleRun = async (filepath: string, ruleContent?: DecisionGraphType): Promise<string> => {
   try {
     const response = await axiosAPIInstance.post(
       "/scenario/evaluation",
@@ -417,7 +412,6 @@ export const getBREFieldFromName = async (fieldName: string): Promise<KlammBREFi
 
 export const getCSVTests = async (
   filepath: string,
-  ruleVersion: string,
   ruleContent?: DecisionGraphType,
   simulationContext?: Record<string, any>,
   testScenarioCount?: valueType | number | null

From d3c29af28a7f7a9b65be3ede8727558fae8e6da2 Mon Sep 17 00:00:00 2001
From: brysonjbest <103070659+brysonjbest@users.noreply.github.com>
Date: Wed, 16 Oct 2024 11:45:22 -0700
Subject: [PATCH 08/12] Update error handling display.

---
 app/components/RuleManager/RuleManager.tsx |  3 ++-
 app/utils/api.ts                           | 10 ++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/components/RuleManager/RuleManager.tsx b/app/components/RuleManager/RuleManager.tsx
index cf21fdc..3f2fa36 100644
--- a/app/components/RuleManager/RuleManager.tsx
+++ b/app/components/RuleManager/RuleManager.tsx
@@ -103,6 +103,7 @@ export default function RuleManager({
     if (runContext) {
       console.info("Simulate:", runContext);
       try {
+        message.destroy();
         const data = await postDecision(ruleContent, runContext);
         console.info("Simulation Results:", data, data?.result);
         // Check if data.result is an array and throw error as object is required
@@ -114,7 +115,7 @@ export default function RuleManager({
         // Set the results of the simulation
         setResultsOfSimulation(data?.result);
       } catch (e: any) {
-        message.error("Error during simulation run: " + e);
+        message.error("Error during simulation run: " + e, 10);
         console.error("Error during simulation run:", e);
       }
     } else {
diff --git a/app/utils/api.ts b/app/utils/api.ts
index 34b11f6..9ecb3bd 100644
--- a/app/utils/api.ts
+++ b/app/utils/api.ts
@@ -112,8 +112,14 @@ export const postDecision = async (ruleContent: DecisionGraphType, context: unkn
     });
     return data;
   } catch (error) {
-    console.error(`Error simulating decision: ${error}`);
-    throw error;
+    if (axios.isAxiosError(error) && error.response) {
+      const errorMessage = error.response.data.message;
+      console.error(errorMessage);
+      throw new Error(errorMessage);
+    } else {
+      console.error(`Error simulating decision: ${error}`);
+      throw error;
+    }
   }
 };
 

From d41a8b2dd620504481bc5823198e4196d107f1a4 Mon Sep 17 00:00:00 2001
From: brysonjbest <103070659+brysonjbest@users.noreply.github.com>
Date: Mon, 21 Oct 2024 10:56:22 -0700
Subject: [PATCH 09/12] Fix deletion handling in admin page.

---
 app/admin/page.tsx | 60 +++++++++++++++++++++++++++++++++-------------
 1 file changed, 43 insertions(+), 17 deletions(-)

diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 17ec803..d5823e7 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { useState, useEffect } from "react";
 import Link from "next/link";
-import { Table, Input, Button, Flex } from "antd";
+import { Table, Input, Button, Flex, Tooltip } from "antd";
 import { ColumnsType, TablePaginationConfig } from "antd/es/table";
 import { FilterValue } from "antd/es/table/interface";
 import { HomeOutlined } from "@ant-design/icons";
@@ -14,8 +14,6 @@ enum ACTION_STATUS {
   DELETE = "delete",
 }
 
-const PAGE_SIZE = 15;
-
 interface TableParams {
   pagination?: TablePaginationConfig;
   searchTerm?: string;
@@ -73,10 +71,20 @@ export default function Admin() {
     setRules(newRules);
   };
 
-  const deleteRule = async (index: number) => {
-    const { current, pageSize } = tableParams?.pagination || {};
-    const deletionIndex = ((current || 1) - 1) * (pageSize || PAGE_SIZE) + index;
-    const newRules = [...rules.slice(0, deletionIndex), ...rules.slice(deletionIndex + 1, rules.length)];
+  const resetDraft = async (rule: RuleInfo) => {
+    setIsLoading(true);
+    try {
+      await updateRuleData(rule._id, rule);
+    } catch (error) {
+      console.error(`Error reseting draft for rule ${rule._id}: ${error}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const deleteRule = (index: number) => {
+    const newRules = [...rules];
+    newRules.splice(index, 1);
     setRules(newRules);
   };
 
@@ -149,20 +157,38 @@ export default function Admin() {
     {
       dataIndex: "delete",
       width: "60px",
-      render: (value: string, _: RuleInfo, index: number) => (
-        <Button danger onClick={() => deleteRule(index)}>
-          Delete
-        </Button>
-      ),
+      render: (value: string, _: RuleInfo, index: number) => {
+        return (
+          <>
+            {_.isPublished ? (
+              <Tooltip title="To delete a published rule, please review the Github Rules Repo.">
+                <Button danger disabled={!_.ruleDraft} onClick={() => resetDraft(_)}>
+                  Reset Draft
+                </Button>
+              </Tooltip>
+            ) : (
+              <Tooltip title="Caution: Unpublished draft rules cannot be recovered once deleted.">
+                <Button danger onClick={() => deleteRule(index)}>
+                  Delete Rule{" "}
+                </Button>
+              </Tooltip>
+            )}
+          </>
+        );
+      },
     },
     {
       dataIndex: "view",
       width: "60px",
-      render: (_: string, { _id }: RuleInfo) => (
-        <Link href={`/rule/${_id}`}>
-          <Button>View</Button>
-        </Link>
-      ),
+      render: (_: string, { _id, isPublished }: RuleInfo) => {
+        const ruleLink = `/rule/${_id}`;
+        const draftLink = `${ruleLink}?version=draft`;
+        return (
+          <Link href={isPublished ? ruleLink : draftLink}>
+            <Button>View</Button>
+          </Link>
+        );
+      },
     },
   ];
 

From 8c96444c6acc07ea42c0079f419ea30912eefc28 Mon Sep 17 00:00:00 2001
From: timwekkenbc <tim.vanderwekken@gov.bc.ca>
Date: Tue, 22 Oct 2024 12:30:12 -0700
Subject: [PATCH 10/12] Fixed issue that caused errors when creating a new rule
 (was generating schema with no data), Fixed up styling of main page so that
 all the versions are less squished, Increased max layout size to 1300px

---
 app/components/SavePublish/SavePublishWarnings.tsx | 2 ++
 app/page.tsx                                       | 7 ++++---
 app/styles/home.module.css                         | 9 +++++----
 app/styles/layout.module.css                       | 2 +-
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/components/SavePublish/SavePublishWarnings.tsx b/app/components/SavePublish/SavePublishWarnings.tsx
index 0360979..f8759d6 100644
--- a/app/components/SavePublish/SavePublishWarnings.tsx
+++ b/app/components/SavePublish/SavePublishWarnings.tsx
@@ -28,6 +28,8 @@ export default function SavePublishWarnings({ filePath, ruleContent, isSaving }:
     const existingKlammInputs = inputOutputSchemaMap.inputs.map(({ field }) => field as string);
     const existingKlammOutputs = inputOutputSchemaMap.resultOutputs.map(({ field }) => field as string);
 
+    if (!ruleContent?.nodes || ruleContent.nodes.length < 2) return;
+
     // Get map the old way for comparrison
     const generatedSchemaMap = await generateSchemaFromRuleContent(ruleContent);
     const generatedInputs = generatedSchemaMap.inputs.map(({ field }) => field as string);
diff --git a/app/page.tsx b/app/page.tsx
index 47424c9..2fb96c8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -98,6 +98,8 @@ export default function Home() {
       dataIndex: "title",
       key: "title",
       sorter: true,
+      width: "35%",
+      minWidth: 350,
       render: (_, record) => {
         const ruleLink = `/rule/${record._id}`;
         const draftLink = `${ruleLink}?version=draft`;
@@ -131,7 +133,7 @@ export default function Home() {
         const ruleLink = `/rule/${record._id}`;
         const draftLink = `${ruleLink}?version=draft`;
         return (
-          <Flex gap="small" justify="end">
+          <Flex gap="small" justify="end" wrap="wrap">
             <Button
               href={draftLink}
               icon={<EditOutlined />}
@@ -170,13 +172,12 @@ export default function Home() {
                     size="small"
                     className={styles.inProductionBtn}
                   >
-                    In Production
+                    In Prod
                   </Button>
                 )}
                 <Button
                   href={`${ruleLink}/embedded`}
                   icon={<DownSquareOutlined />}
-                  type="dashed"
                   size="small"
                   className={styles.embeddedBtn}
                 >
diff --git a/app/styles/home.module.css b/app/styles/home.module.css
index 1825bde..5b2cb44 100644
--- a/app/styles/home.module.css
+++ b/app/styles/home.module.css
@@ -31,13 +31,14 @@
   color: #389e0d !important;
   border-color: #389e0d !important;
 }
-.draftBtn:hover, .inDevBtn:hover, .inReviewBtn:hover, .inProductionBtn:hover {
-  border-style: inset;
-}
 .embeddedBtn {
   color: #666 !important;
-  border-color: #666 !important;
+  border-color: #d9d9d9 !important;
 }
 .embeddedBtn:hover {
   border: 1px solid !important;
+  border-color: #d9d9d9 !important;
+}
+.draftBtn:hover, .inDevBtn:hover, .inReviewBtn:hover, .inProductionBtn:hover, .embeddedBtn:hover {
+  border-style: inset;
 }
\ No newline at end of file
diff --git a/app/styles/layout.module.css b/app/styles/layout.module.css
index 71161fe..dd10827 100644
--- a/app/styles/layout.module.css
+++ b/app/styles/layout.module.css
@@ -1,5 +1,5 @@
 .layoutWrapper {
-  max-width: 1200px;
+  max-width: 1300px;
   min-height: 400px;
   margin: auto;
 }

From 6853dcd662f652c8350f3f072498e9b260efbcd7 Mon Sep 17 00:00:00 2001
From: timwekkenbc <tim.vanderwekken@gov.bc.ca>
Date: Tue, 22 Oct 2024 17:01:05 -0700
Subject: [PATCH 11/12] Update jdm-editor sha for changes

---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index bfe113e..940c432 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1041,7 +1041,7 @@
     "node_modules/@gorules/jdm-editor": {
       "version": "1.15.0",
       "resolved": "https://gitpkg.vercel.app/bcgov/jdm-editor/packages/jdm-editor?master",
-      "integrity": "sha512-96ug0zOtius9fYTpX2kRPJ65QBH4+I3VMMYcnEvsrkn/OF70RSTFQQ7MirfYp1/1Bp0CqVNA0Tdv9xSwas9snA==",
+      "integrity": "sha512-pOiCaih1GccILTaBU5yWFohaxH+gl9Bg6gmPaoRCSwoQf0NGcanNvEmhN8VV2U/otVVeOabxGXl5p70rjf9Y6g==",
       "license": "MIT",
       "dependencies": {
         "@ant-design/icons": "5.3.7",

From 9161025c9834d9b83e55fd6bf708ca238675d1d2 Mon Sep 17 00:00:00 2001
From: timwekkenbc <tim.vanderwekken@gov.bc.ca>
Date: Thu, 24 Oct 2024 09:17:18 -0700
Subject: [PATCH 12/12] Fixed issue with eslint

---
 .github/workflows/eslint.yml                  |   9 +-
 app/page.tsx                                  |   9 +-
 app/rule/[ruleId]/page.tsx                    |  12 +-
 app/rule/new/page.tsx                         |   4 +-
 .../getGithubAuth.ts}                         |   4 +-
 package-lock.json                             | 224 ++++++------------
 package.json                                  |   8 +-
 7 files changed, 94 insertions(+), 176 deletions(-)
 rename app/{hooks/useGithubAuth.ts => utils/getGithubAuth.ts} (87%)

diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
index 1bb7bcb..3afb433 100644
--- a/.github/workflows/eslint.yml
+++ b/.github/workflows/eslint.yml
@@ -28,11 +28,4 @@ jobs:
           npm install eslint@8.56.0 --no-strict-ssl --no-shrinkwrap
 
       - name: Run ESLint
-        run: npm run lint:pipeline
-        continue-on-error: true
-
-      - name: Upload ESLint report
-        uses: actions/upload-artifact@v4
-        with:
-          name: eslint-report
-          path: eslint-report.html
+        run: npm run lint:pipeline
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 2fb96c8..0f1f9c0 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -65,13 +65,10 @@ export default function Home() {
     }
   };
 
-  useEffect(
-    () => {
-      fetchData();
-    },
+  useEffect(() => {
+    fetchData();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [JSON.stringify(tableParams)]
-  );
+  }, [JSON.stringify(tableParams)]);
 
   const handleSearch = (value: string) => {
     setTableParams({
diff --git a/app/rule/[ruleId]/page.tsx b/app/rule/[ruleId]/page.tsx
index 5d10aba..92c06b2 100644
--- a/app/rule/[ruleId]/page.tsx
+++ b/app/rule/[ruleId]/page.tsx
@@ -1,12 +1,12 @@
 import { Metadata } from "next";
+import { RULE_VERSION } from "@/app/constants/ruleVersion";
+import getGithubAuth from "@/app/utils/getGithubAuth";
+import getRuleDataForVersion from "@/app/hooks/getRuleDataForVersion";
+import { Scenario } from "@/app/types/scenario";
 import { getScenariosByFilename } from "@/app/utils/api";
+import { GithubAuthProvider } from "@/app/components/GithubAuthProvider";
 import RuleHeader from "@/app/components/RuleHeader";
 import RuleManager from "@/app/components/RuleManager";
-import { Scenario } from "@/app/types/scenario";
-import getRuleDataForVersion from "@/app/hooks/getRuleDataForVersion";
-import { RULE_VERSION } from "@/app/constants/ruleVersion";
-import { GithubAuthProvider } from "@/app/components/GithubAuthProvider";
-import useGithubAuth from "@/app/hooks/useGithubAuth";
 
 type Props = {
   params: { ruleId: string };
@@ -32,7 +32,7 @@ export default async function Rule({ params: { ruleId }, searchParams }: Props)
   const oAuthRequired = version === RULE_VERSION.draft; // only require oauth if editing a draft
   // Ensure user is first logged into github so they can save what they edit
   // If they are not, redirect them to the oauth flow
-  const githubAuthInfo = await useGithubAuth(`rule/${ruleId}?version=${version}`, oAuthRequired);
+  const githubAuthInfo = await getGithubAuth(`rule/${ruleId}?version=${version}`, oAuthRequired);
 
   // Get rule details and json content for the rule id
   const { ruleInfo, ruleContent } = await getRuleDataForVersion(ruleId, version);
diff --git a/app/rule/new/page.tsx b/app/rule/new/page.tsx
index b9cae6f..a9bfb4b 100644
--- a/app/rule/new/page.tsx
+++ b/app/rule/new/page.tsx
@@ -1,12 +1,12 @@
 import { Metadata } from "next";
+import getGithubAuth from "@/app/utils/getGithubAuth";
 import { GithubAuthProvider } from "@/app/components/GithubAuthProvider";
-import useGithubAuth from "@/app/hooks/useGithubAuth";
 import NewRule from "./NewRule";
 
 export default async function NewRuleWrapper() {
   // Ensure user is first logged into github so they can save what they edit
   // If they are not, redirect them to the oauth flow
-  const githubAuthInfo = await useGithubAuth("rule/new");
+  const githubAuthInfo = await getGithubAuth("rule/new");
 
   return (
     <GithubAuthProvider authInfo={githubAuthInfo}>
diff --git a/app/hooks/useGithubAuth.ts b/app/utils/getGithubAuth.ts
similarity index 87%
rename from app/hooks/useGithubAuth.ts
rename to app/utils/getGithubAuth.ts
index 58b9c2a..758cb2d 100644
--- a/app/hooks/useGithubAuth.ts
+++ b/app/utils/getGithubAuth.ts
@@ -1,9 +1,9 @@
 import { redirect } from "next/navigation";
 import { headers, cookies } from "next/headers";
-import { isGithubAuthTokenValid, AuthFailureReasons } from "../utils/githubApi";
+import { isGithubAuthTokenValid, AuthFailureReasons } from "./githubApi";
 import { GithubAuthContextType } from "../components/GithubAuthProvider";
 
-export default async function useGithubAuth(
+export default async function getGithubAuth(
   redirectPath: string,
   required: boolean = true
 ): Promise<GithubAuthContextType | null> {
diff --git a/package-lock.json b/package-lock.json
index 940c432..8f2f3a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,7 +29,7 @@
         "@types/react": "^18",
         "@types/react-dom": "^18",
         "autoprefixer": "^10.4.18",
-        "eslint": "^8",
+        "eslint": "^8.57.1",
         "eslint-config-next": "14.1.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
@@ -944,7 +944,6 @@
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
       "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
@@ -968,7 +967,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -984,15 +982,13 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true,
-      "license": "MIT"
+      "dev": true
     },
     "node_modules/@eslint/js": {
       "version": "8.57.1",
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
       "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
@@ -1720,7 +1716,6 @@
       "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
       "deprecated": "Use @eslint/config-array instead",
       "dev": true,
-      "license": "Apache-2.0",
       "dependencies": {
         "@humanwhocodes/object-schema": "^2.0.3",
         "debug": "^4.3.1",
@@ -1749,8 +1744,7 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
       "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
       "deprecated": "Use @eslint/object-schema instead",
-      "dev": true,
-      "license": "BSD-3-Clause"
+      "dev": true
     },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
@@ -2564,7 +2558,6 @@
       "resolved": "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz",
       "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=12.4.0"
       }
@@ -2910,8 +2903,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
       "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
-      "dev": true,
-      "license": "MIT"
+      "dev": true
     },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.10.4",
@@ -3519,8 +3511,7 @@
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
-      "dev": true,
-      "license": "MIT"
+      "dev": true
     },
     "node_modules/@types/lodash": {
       "version": "4.17.9",
@@ -3595,41 +3586,11 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@typescript-eslint/parser": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz",
-      "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "@typescript-eslint/scope-manager": "6.21.0",
-        "@typescript-eslint/types": "6.21.0",
-        "@typescript-eslint/typescript-estree": "6.21.0",
-        "@typescript-eslint/visitor-keys": "6.21.0",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^7.0.0 || ^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@typescript-eslint/scope-manager": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz",
       "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@typescript-eslint/types": "6.21.0",
         "@typescript-eslint/visitor-keys": "6.21.0"
@@ -3647,7 +3608,6 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz",
       "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
       },
@@ -3661,7 +3621,6 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz",
       "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==",
       "dev": true,
-      "license": "BSD-2-Clause",
       "dependencies": {
         "@typescript-eslint/types": "6.21.0",
         "@typescript-eslint/visitor-keys": "6.21.0",
@@ -3690,7 +3649,6 @@
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
       "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -3700,7 +3658,6 @@
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
       "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
       "dev": true,
-      "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -3716,7 +3673,6 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz",
       "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@typescript-eslint/types": "6.21.0",
         "eslint-visitor-keys": "^3.4.1"
@@ -3733,8 +3689,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
-      "dev": true,
-      "license": "ISC"
+      "dev": true
     },
     "node_modules/abab": {
       "version": "2.0.6",
@@ -3779,7 +3734,6 @@
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
       "dev": true,
-      "license": "MIT",
       "peerDependencies": {
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
@@ -4100,8 +4054,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
-      "license": "Python-2.0"
+      "dev": true
     },
     "node_modules/aria-query": {
       "version": "5.3.0",
@@ -4162,7 +4115,6 @@
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -4193,7 +4145,6 @@
       "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz",
       "integrity": "sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
@@ -5549,7 +5500,6 @@
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
       "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "path-type": "^4.0.0"
       },
@@ -5569,16 +5519,15 @@
       }
     },
     "node_modules/doctrine": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
       "dev": true,
-      "license": "Apache-2.0",
       "dependencies": {
         "esutils": "^2.0.2"
       },
       "engines": {
-        "node": ">=6.0.0"
+        "node": ">=0.10.0"
       }
     },
     "node_modules/dom-accessibility-api": {
@@ -5695,7 +5644,6 @@
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
       "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -5963,8 +5911,8 @@
       "version": "8.57.1",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
       "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
+      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -6042,6 +5990,46 @@
         }
       }
     },
+    "node_modules/eslint-config-next/node_modules/@typescript-eslint/parser": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz",
+      "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "6.21.0",
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/typescript-estree": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-next/node_modules/eslint-plugin-react-hooks": {
+      "version": "5.0.0-canary-7118f5dd7-20230705",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0-canary-7118f5dd7-20230705.tgz",
+      "integrity": "sha512-AZYbMo/NW9chdL7vk6HQzQhT+PvTAEVqWk9ziruUoW2kAOcN5qNyelv70e0F1VNQAbvutOC9oc+xfWycI9FxDw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+      }
+    },
     "node_modules/eslint-import-resolver-node": {
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
@@ -6069,7 +6057,6 @@
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.3.tgz",
       "integrity": "sha512-ud9aw4szY9cCT1EWWdGv1L1XR6hh2PaRWif0j2QjQ0pgTY/69iw+W0Z4qZv5wHahOl8isEr+k/JnyAqNQkLkIA==",
       "dev": true,
-      "license": "ISC",
       "dependencies": {
         "@nolyfill/is-core-module": "1.0.39",
         "debug": "^4.3.5",
@@ -6101,11 +6088,10 @@
       }
     },
     "node_modules/eslint-module-utils": {
-      "version": "2.11.1",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.11.1.tgz",
-      "integrity": "sha512-EwcbfLOhwVMAfatfqLecR2yv3dE5+kQ8kx+Rrt0DvDXEVwW86KQ/xbMDQhtp5l42VXukD5SOF8mQQHbaNtO0CQ==",
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz",
+      "integrity": "sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "debug": "^3.2.7"
       },
@@ -6129,11 +6115,10 @@
       }
     },
     "node_modules/eslint-plugin-import": {
-      "version": "2.30.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.30.0.tgz",
-      "integrity": "sha512-/mHNE9jINJfiD2EKkg1BKyPyUk4zdnT54YgbOgfjSakWT5oyX/qQLVNTkehyfpcMxZXMy1zyonZ2v7hZTX43Yw==",
+      "version": "2.31.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz",
+      "integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.8",
@@ -6143,7 +6128,7 @@
         "debug": "^3.2.7",
         "doctrine": "^2.1.0",
         "eslint-import-resolver-node": "^0.3.9",
-        "eslint-module-utils": "^2.9.0",
+        "eslint-module-utils": "^2.12.0",
         "hasown": "^2.0.2",
         "is-core-module": "^2.15.1",
         "is-glob": "^4.0.3",
@@ -6152,13 +6137,14 @@
         "object.groupby": "^1.0.3",
         "object.values": "^1.2.0",
         "semver": "^6.3.1",
+        "string.prototype.trimend": "^1.0.8",
         "tsconfig-paths": "^3.15.0"
       },
       "engines": {
         "node": ">=4"
       },
       "peerDependencies": {
-        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9"
       }
     },
     "node_modules/eslint-plugin-import/node_modules/debug": {
@@ -6166,30 +6152,15 @@
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
       "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "ms": "^2.1.1"
       }
     },
-    "node_modules/eslint-plugin-import/node_modules/doctrine": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
-      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "esutils": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/eslint-plugin-import/node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true,
-      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -6268,32 +6239,6 @@
         "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
       }
     },
-    "node_modules/eslint-plugin-react-hooks": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
-      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
-      }
-    },
-    "node_modules/eslint-plugin-react/node_modules/doctrine": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
-      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "esutils": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/eslint-plugin-react/node_modules/resolve": {
       "version": "2.0.0-next.5",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
@@ -6327,7 +6272,6 @@
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
       "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
       "dev": true,
-      "license": "BSD-2-Clause",
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^5.2.0"
@@ -6369,6 +6313,18 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/eslint/node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/eslint/node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -6381,7 +6337,6 @@
       "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
       "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
       "dev": true,
-      "license": "BSD-2-Clause",
       "dependencies": {
         "acorn": "^8.9.0",
         "acorn-jsx": "^5.3.2",
@@ -6426,7 +6381,6 @@
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
       "dev": true,
-      "license": "BSD-2-Clause",
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -6625,7 +6579,6 @@
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
       "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "flat-cache": "^3.0.4"
       },
@@ -6668,7 +6621,6 @@
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
       "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "flatted": "^3.2.9",
         "keyv": "^4.5.3",
@@ -6682,8 +6634,7 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
-      "dev": true,
-      "license": "ISC"
+      "dev": true
     },
     "node_modules/follow-redirects": {
       "version": "1.15.9",
@@ -6962,7 +6913,6 @@
       "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.8.1.tgz",
       "integrity": "sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "resolve-pkg-maps": "^1.0.0"
       },
@@ -7037,7 +6987,6 @@
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
       "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "type-fest": "^0.20.2"
       },
@@ -7070,7 +7019,6 @@
       "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
       "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "array-union": "^2.1.0",
         "dir-glob": "^3.0.1",
@@ -7109,8 +7057,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-      "dev": true,
-      "license": "MIT"
+      "dev": true
     },
     "node_modules/has-bigints": {
       "version": "1.0.2",
@@ -7338,7 +7285,6 @@
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -7514,7 +7460,6 @@
       "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-1.2.1.tgz",
       "integrity": "sha512-AmidtEM6D6NmUiLOvvU7+IePxjEjOzra2h0pSrsfSAcXwl/83zLLXDByafUJy9k/rKK0pvXMLdwKwGHlX2Ke6Q==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "semver": "^7.6.3"
       }
@@ -7709,7 +7654,6 @@
       "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
       "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -8907,7 +8851,6 @@
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -8991,8 +8934,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-      "dev": true,
-      "license": "MIT"
+      "dev": true
     },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
@@ -9136,7 +9078,6 @@
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
       "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "json-buffer": "3.0.1"
       }
@@ -9848,7 +9789,6 @@
       "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
       "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
@@ -9972,7 +9912,6 @@
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -10077,7 +10016,6 @@
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -11315,7 +11253,6 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
@@ -11325,7 +11262,6 @@
       "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
       "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
       "dev": true,
-      "license": "MIT",
       "funding": {
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
@@ -11357,7 +11293,6 @@
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
       "deprecated": "Rimraf versions prior to v4 are no longer supported",
       "dev": true,
-      "license": "ISC",
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -11374,7 +11309,6 @@
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
       "deprecated": "Glob versions prior to v9 are no longer supported",
       "dev": true,
-      "license": "ISC",
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -12081,7 +12015,6 @@
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
       "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -12243,7 +12176,6 @@
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
       "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=16"
       },
@@ -12306,7 +12238,6 @@
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
       "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@types/json5": "^0.0.29",
         "json5": "^1.0.2",
@@ -12319,7 +12250,6 @@
       "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
       "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "minimist": "^1.2.0"
       },
@@ -12332,7 +12262,6 @@
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
       "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
@@ -12371,7 +12300,6 @@
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "dev": true,
-      "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=10"
       },
diff --git a/package.json b/package.json
index 0d17a29..00a13f4 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "engines": {
-   "node": "20.16.0",
-   "npm": "10.8.1"  
+    "node": "20.16.0",
+    "npm": "10.8.1"
   },
   "engine-strict": true,
   "scripts": {
@@ -12,7 +12,7 @@
     "build": "next build",
     "start": "next start -p 8080",
     "lint": "next lint",
-    "lint:pipeline": "next lint --fix --format=html --output-file=eslint-report.html",
+    "lint:pipeline": "next lint --max-warnings=0",
     "test": "jest",
     "test:watch": "jest --watch"
   },
@@ -38,7 +38,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.4.18",
-    "eslint": "^8",
+    "eslint": "^8.57.1",
     "eslint-config-next": "14.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",