fix(ui): clicking on side links refreshed page and dismissed banner

src/services/ui/src/features/package/admin-changes/index.tsx

@@ -137,7 +137,7 @@ export const AdminChanges = () => {
 
   return (
     <DetailsSection
-      id="administrative_package_changess"
+      id="administrative_package_changes"
       title={`Administrative Package Changes (${data?.length})`}
       description="Administrative changes reflect updates to specific data fields. If you have additional questions, please contact the assigned CPOC."
     >

src/services/ui/src/features/package/hooks.tsx

@@ -1,5 +1,4 @@
 import { useGetItem } from "@/api";
-import { removeUnderscoresAndCapitalize } from "@/utils";
 import { useLayoutEffect, useState } from "react";
 
 export type DetailsSidebarLink = {
@@ -16,19 +15,22 @@ export const useDetailsSidebarLinks = (
 
   useLayoutEffect(() => {
     const ids = [
-      "package_detailss",
-      "package_activity",
-      "administrative_package_changess",
+      { id: "package_details", label: "Package Details" },
+      { id: "package_activity", label: "Package Activity" },
+      {
+        id: "administrative_package_changes",
+        label: "Administrative Package Changes",
+      },
     ];
 
     // Check if dataId is not undefined before proceeding
     if (data?._id) {
       const links = ids
-        .filter((id) => document.getElementById(id) != null)
-        .map((id) => ({
-          id,
-          href: `?id=${encodeURIComponent(dataId)}#${id}`,
-          displayName: removeUnderscoresAndCapitalize(id),
+        .filter(({ id }) => document.getElementById(id) !== null)
+        .map((link) => ({
+          id: link.id,
+          href: `#${link.id}`,
+          displayName: link.label,
         }));
 
       setSideBarLinks(links);

src/services/ui/src/features/package/package-details/index.tsx

@@ -45,15 +45,9 @@ export const PackageDetails: FC<{
   title: string;
 }> = (props) => {
   const { data } = usePackageDetailsCache();
-  // const title = props.title || `${data.authority} Package Details`;
 
-  // andies thoughts:
-  //     abstract out the grid container from the Details Item Grid components
-  //     instead make the items just the "cells in the grid"
-  //     add some sort of logic for the description to conditionally make it take up 2 cells
-  //    ^ if it takes up 2 cells it must be on its own row
   return (
-    <DetailsSection id="package_detailss" title={props.title}>
+    <DetailsSection id="package_details" title={props.title}>
       <div className="flex-col gap-4 max-w-2xl">
         <DetailItemsGrid
           displayItems={[
@@ -63,7 +57,6 @@ export const PackageDetails: FC<{
           ]}
           containerStyle="py-4"
         />
-        {/* <DetailItemsGrid displayItems={descriptionDetails(data)} fullWidth /> */}
         <hr className="my-4" />
         <DetailItemsGrid displayItems={submissionDetails(data)} />
         <AppK />