From baff7b8c657b3adf9bb528a050b9af5703e366fe Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Tue, 23 Apr 2024 15:14:31 +0100
Subject: [PATCH] addressed comments #497

---
 src/api/systems.tsx                           |   2 +-
 .../itemsDetailsPanel.component.test.tsx.snap | 132 +++++++
 .../itemsTable.component.test.tsx.snap        | 342 ++++++++++++++++--
 src/items/itemsDetailsPanel.component.tsx     |  17 +
 src/items/itemsLandingPage.component.tsx      |   9 +-
 src/items/itemsTable.component.test.tsx       |   2 +-
 src/items/itemsTable.component.tsx            |   5 +-
 7 files changed, 468 insertions(+), 41 deletions(-)

diff --git a/src/api/systems.tsx b/src/api/systems.tsx
index d8a7feea5..f66e7e856 100644
--- a/src/api/systems.tsx
+++ b/src/api/systems.tsx
@@ -48,7 +48,7 @@ const fetchSystems = async (parent_id?: string): Promise<System[]> => {
 export const useSystemIds = (ids: string[]): UseQueryResult<System>[] => {
   return useQueries({
     queries: ids.map((id) => ({
-      queryKey: ['Systems', id],
+      queryKey: ['System', id],
       queryFn: () => fetchSystem(id),
     })),
   });
diff --git a/src/items/__snapshots__/itemsDetailsPanel.component.test.tsx.snap b/src/items/__snapshots__/itemsDetailsPanel.component.test.tsx.snap
index 9248fb34c..ca233fd06 100644
--- a/src/items/__snapshots__/itemsDetailsPanel.component.test.tsx.snap
+++ b/src/items/__snapshots__/itemsDetailsPanel.component.test.tsx.snap
@@ -219,6 +219,24 @@ exports[`Catalogue Items details panel > renders details panel correctly (None v
                         scrapped
                       </p>
                     </div>
+                    <div
+                      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
+                    >
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1gqyz35-MuiTypography-root"
+                      >
+                        System
+                      </p>
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1pnmrwp-MuiTypography-root"
+                      >
+                        <a
+                          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-11iau0r-MuiTypography-root-MuiLink-root"
+                          href="/systems/undefined"
+                          target="_blank"
+                        />
+                      </p>
+                    </div>
                     <div
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
                     >
@@ -739,6 +757,24 @@ exports[`Catalogue Items details panel > renders details panel correctly (no dat
                         inUse
                       </p>
                     </div>
+                    <div
+                      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
+                    >
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1gqyz35-MuiTypography-root"
+                      >
+                        System
+                      </p>
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1pnmrwp-MuiTypography-root"
+                      >
+                        <a
+                          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-11iau0r-MuiTypography-root-MuiLink-root"
+                          href="/systems/undefined"
+                          target="_blank"
+                        />
+                      </p>
+                    </div>
                     <div
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
                     >
@@ -1259,6 +1295,24 @@ exports[`Catalogue Items details panel > renders details panel correctly (when t
                         new
                       </p>
                     </div>
+                    <div
+                      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
+                    >
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1gqyz35-MuiTypography-root"
+                      >
+                        System
+                      </p>
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1pnmrwp-MuiTypography-root"
+                      >
+                        <a
+                          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-11iau0r-MuiTypography-root-MuiLink-root"
+                          href="/systems/undefined"
+                          target="_blank"
+                        />
+                      </p>
+                    </div>
                     <div
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
                     >
@@ -1779,6 +1833,24 @@ exports[`Catalogue Items details panel > renders details panel correctly 1`] = `
                         inUse
                       </p>
                     </div>
+                    <div
+                      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
+                    >
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1gqyz35-MuiTypography-root"
+                      >
+                        System
+                      </p>
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1pnmrwp-MuiTypography-root"
+                      >
+                        <a
+                          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-11iau0r-MuiTypography-root-MuiLink-root"
+                          href="/systems/undefined"
+                          target="_blank"
+                        />
+                      </p>
+                    </div>
                     <div
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
                     >
@@ -2309,6 +2381,26 @@ exports[`Catalogue Items details panel > renders manufacturer panel correctly 1`
                         inUse
                       </p>
                     </div>
+                    <div
+                      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
+                    >
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1gqyz35-MuiTypography-root"
+                      >
+                        System
+                      </p>
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1pnmrwp-MuiTypography-root"
+                      >
+                        <a
+                          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-11iau0r-MuiTypography-root-MuiLink-root"
+                          href="/systems/65328f34a40ff5301575a4e3"
+                          target="_blank"
+                        >
+                          Giant laser
+                        </a>
+                      </p>
+                    </div>
                     <div
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
                     >
@@ -2856,6 +2948,26 @@ exports[`Catalogue Items details panel > renders notes panel correctly 1`] = `
                         inUse
                       </p>
                     </div>
+                    <div
+                      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
+                    >
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1gqyz35-MuiTypography-root"
+                      >
+                        System
+                      </p>
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1pnmrwp-MuiTypography-root"
+                      >
+                        <a
+                          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-11iau0r-MuiTypography-root-MuiLink-root"
+                          href="/systems/65328f34a40ff5301575a4e3"
+                          target="_blank"
+                        >
+                          Giant laser
+                        </a>
+                      </p>
+                    </div>
                     <div
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
                     >
@@ -3403,6 +3515,26 @@ exports[`Catalogue Items details panel > renders properties panel correctly 1`]
                         inUse
                       </p>
                     </div>
+                    <div
+                      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
+                    >
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1gqyz35-MuiTypography-root"
+                      >
+                        System
+                      </p>
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1pnmrwp-MuiTypography-root"
+                      >
+                        <a
+                          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-11iau0r-MuiTypography-root-MuiLink-root"
+                          href="/systems/65328f34a40ff5301575a4e3"
+                          target="_blank"
+                        >
+                          Giant laser
+                        </a>
+                      </p>
+                    </div>
                     <div
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
                     >
diff --git a/src/items/__snapshots__/itemsTable.component.test.tsx.snap b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
index 1cf5454de..47a889397 100644
--- a/src/items/__snapshots__/itemsTable.component.test.tsx.snap
+++ b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
@@ -295,12 +295,12 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
                       Serial Number
                     </div>
                     <span
-                      aria-label="Sort by Serial Number descending"
+                      aria-label="Sort by Serial Number ascending"
                       class="MuiBadge-root css-1c32n2y-MuiBadge-root"
                       data-mui-internal-clone-element="true"
                     >
                       <span
-                        aria-label="Sort by Serial Number descending"
+                        aria-label="Sort by Serial Number ascending"
                         class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-118d58w-MuiButtonBase-root-MuiTableSortLabel-root"
                         role="button"
                         tabindex="0"
@@ -367,6 +367,9 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
                           d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
                         />
                       </svg>
+                      <span
+                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                      />
                     </button>
                   </div>
                   <div
@@ -529,6 +532,9 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
                           d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
                         />
                       </svg>
+                      <span
+                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                      />
                     </button>
                   </div>
                   <div
@@ -590,6 +596,9 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
                                     d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
                                   />
                                 </svg>
+                                <span
+                                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                                />
                               </button>
                             </div>
                           </div>
@@ -632,6 +641,9 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
                                     d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
                                   />
                                 </svg>
+                                <span
+                                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                                />
                               </button>
                             </div>
                           </div>
@@ -659,12 +671,12 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
                       Asset Number
                     </div>
                     <span
-                      aria-label="Sort by Asset Number descending"
+                      aria-label="Sort by Asset Number ascending"
                       class="MuiBadge-root css-1c32n2y-MuiBadge-root"
                       data-mui-internal-clone-element="true"
                     >
                       <span
-                        aria-label="Sort by Asset Number descending"
+                        aria-label="Sort by Asset Number ascending"
                         class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-118d58w-MuiButtonBase-root-MuiTableSortLabel-root"
                         role="button"
                         tabindex="0"
@@ -731,6 +743,9 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
                           d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
                         />
                       </svg>
+                      <span
+                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                      />
                     </button>
                   </div>
                   <div
@@ -821,12 +836,12 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
                       Purchase Order Number
                     </div>
                     <span
-                      aria-label="Sort by Purchase Order Number descending"
+                      aria-label="Sort by Purchase Order Number ascending"
                       class="MuiBadge-root css-1c32n2y-MuiBadge-root"
                       data-mui-internal-clone-element="true"
                     >
                       <span
-                        aria-label="Sort by Purchase Order Number descending"
+                        aria-label="Sort by Purchase Order Number ascending"
                         class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-118d58w-MuiButtonBase-root-MuiTableSortLabel-root"
                         role="button"
                         tabindex="0"
@@ -893,6 +908,9 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
                           d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
                         />
                       </svg>
+                      <span
+                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                      />
                     </button>
                   </div>
                   <div
@@ -971,21 +989,263 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
             </tr>
           </thead>
           <tbody
-            class="MuiTableBody-root css-19hv8cu-MuiTableBody-root"
+            class="MuiTableBody-root css-129p5vw-MuiTableBody-root"
           >
             <tr
-              style="display: grid;"
+              class="MuiTableRow-root css-1hdg57s-MuiTableRow-root"
+              data-index="0"
             >
               <td
-                colspan="18"
-                style="display: grid;"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1yl2icp-MuiTableCell-root"
+                data-index="0"
               >
-                <p
-                  class="MuiTypography-root MuiTypography-body1 css-dc4hy6-MuiTypography-root"
+                <button
+                  aria-label="Row Actions"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-mvfa5q-MuiButtonBase-root-MuiIconButton-root"
+                  data-mui-internal-clone-element="true"
+                  tabindex="0"
+                  type="button"
                 >
-                  No results found: Try adding an item by using the Add Item button on the top left of your screen
-                </p>
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                    data-testid="MoreHorizIcon"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
+                    />
+                  </svg>
+                  <span
+                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-4m1cvd-MuiTableCell-root"
+                data-index="1"
+              >
+                <a
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-11iau0r-MuiTypography-root-MuiLink-root"
+                  href="/KvT2Ox7n"
+                >
+                  5YUQDDjKpz2z
+                </a>
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2nncca-MuiTableCell-root"
+                data-index="2"
+              >
+                02 Jan 2024 13:10
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-13enbsi-MuiTableCell-root"
+                data-index="3"
+              >
+                LyH8yp1FHf
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1m3ias4-MuiTableCell-root"
+                data-index="4"
+              >
+                6JYHEjwN
+              </td>
+              <td
+                style="display: flex; width: 2600px;"
+              />
+            </tr>
+            <tr
+              class="MuiTableRow-root css-1hdg57s-MuiTableRow-root"
+              data-index="1"
+            >
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1yl2icp-MuiTableCell-root"
+                data-index="0"
+              >
+                <button
+                  aria-label="Row Actions"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-mvfa5q-MuiButtonBase-root-MuiIconButton-root"
+                  data-mui-internal-clone-element="true"
+                  tabindex="0"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                    data-testid="MoreHorizIcon"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
+                    />
+                  </svg>
+                  <span
+                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-4m1cvd-MuiTableCell-root"
+                data-index="1"
+              >
+                <a
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-11iau0r-MuiTypography-root-MuiLink-root"
+                  href="/G463gOIA"
+                >
+                  vYs9Vxx6yWbn
+                </a>
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2nncca-MuiTableCell-root"
+                data-index="2"
+              >
+                02 Jan 2024 13:10
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-13enbsi-MuiTableCell-root"
+                data-index="3"
+              >
+                03MXnOfP5C
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1m3ias4-MuiTableCell-root"
+                data-index="4"
+              >
+                tIWiCOow
+              </td>
+              <td
+                style="display: flex; width: 2600px;"
+              />
+            </tr>
+            <tr
+              class="MuiTableRow-root css-1hdg57s-MuiTableRow-root"
+              data-index="2"
+            >
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1yl2icp-MuiTableCell-root"
+                data-index="0"
+              >
+                <button
+                  aria-label="Row Actions"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-mvfa5q-MuiButtonBase-root-MuiIconButton-root"
+                  data-mui-internal-clone-element="true"
+                  tabindex="0"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                    data-testid="MoreHorizIcon"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
+                    />
+                  </svg>
+                  <span
+                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                  />
+                </button>
               </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-4m1cvd-MuiTableCell-root"
+                data-index="1"
+              >
+                <a
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-11iau0r-MuiTypography-root-MuiLink-root"
+                  href="/9yh39Mcg"
+                >
+                  PcfCM1jp0SUV
+                </a>
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2nncca-MuiTableCell-root"
+                data-index="2"
+              >
+                02 Jan 2024 13:10
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-13enbsi-MuiTableCell-root"
+                data-index="3"
+              >
+                dvI4GyEsFt
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1m3ias4-MuiTableCell-root"
+                data-index="4"
+              >
+                Qf65nCwO
+              </td>
+              <td
+                style="display: flex; width: 2600px;"
+              />
+            </tr>
+            <tr
+              class="MuiTableRow-root css-1hdg57s-MuiTableRow-root"
+              data-index="3"
+            >
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1yl2icp-MuiTableCell-root"
+                data-index="0"
+              >
+                <button
+                  aria-label="Row Actions"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-mvfa5q-MuiButtonBase-root-MuiIconButton-root"
+                  data-mui-internal-clone-element="true"
+                  tabindex="0"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                    data-testid="MoreHorizIcon"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
+                    />
+                  </svg>
+                  <span
+                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                  />
+                </button>
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-4m1cvd-MuiTableCell-root"
+                data-index="1"
+              >
+                <a
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-11iau0r-MuiTypography-root-MuiLink-root"
+                  href="/wKsFzrSq"
+                >
+                  Zf7P8Qu8TD8c
+                </a>
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-2nncca-MuiTableCell-root"
+                data-index="2"
+              >
+                02 Jan 2024 13:10
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-13enbsi-MuiTableCell-root"
+                data-index="3"
+              >
+                75YWiLwy54
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1m3ias4-MuiTableCell-root"
+                data-index="4"
+              >
+                hpGBgi0d
+              </td>
+              <td
+                style="display: flex; width: 2600px;"
+              />
             </tr>
           </tbody>
           <tfoot
@@ -1135,6 +1395,20 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
                       </svg>
                     </button>
                   </li>
+                  <li>
+                    <button
+                      aria-current="true"
+                      aria-label="page 1"
+                      class="MuiButtonBase-root MuiPaginationItem-root MuiPaginationItem-sizeMedium MuiPaginationItem-outlined MuiPaginationItem-rounded MuiPaginationItem-colorSecondary MuiPaginationItem-outlinedSecondary Mui-selected MuiPaginationItem-page css-iqeo3-MuiButtonBase-root-MuiPaginationItem-root"
+                      tabindex="0"
+                      type="button"
+                    >
+                      1
+                      <span
+                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                      />
+                    </button>
+                  </li>
                   <li>
                     <button
                       aria-label="Go to next page"
@@ -1278,7 +1552,7 @@ exports[`Items Table > renders correctly part 2 due column virtualisation 1`] =
                         aria-invalid="false"
                         autocomplete="new-password"
                         class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-12yjm75-MuiInputBase-input-MuiOutlinedInput-input"
-                        id=":rs:"
+                        id=":r10:"
                         placeholder="Search"
                         type="text"
                         value=""
@@ -1542,7 +1816,7 @@ exports[`Items Table > renders correctly part 2 due column virtualisation 1`] =
                             aria-label="Filter by Notes"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":r32:"
+                            id=":r36:"
                             placeholder="Filter by Notes"
                             title="Filter by Notes"
                             type="text"
@@ -1710,7 +1984,7 @@ exports[`Items Table > renders correctly part 2 due column virtualisation 1`] =
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":r3b:"
+                              id=":r3f:"
                               placeholder="Min"
                               title="Min"
                               type="text"
@@ -1758,7 +2032,7 @@ exports[`Items Table > renders correctly part 2 due column virtualisation 1`] =
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":r3d:"
+                              id=":r3h:"
                               placeholder="Max"
                               title="Max"
                               type="text"
@@ -1924,7 +2198,7 @@ exports[`Items Table > renders correctly part 2 due column virtualisation 1`] =
                             aria-label="Filter by Sensor Type "
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":r3i:"
+                            id=":r3m:"
                             placeholder="Filter by Sensor Type "
                             title="Filter by Sensor Type "
                             type="text"
@@ -2085,13 +2359,13 @@ exports[`Items Table > renders correctly part 2 due column virtualisation 1`] =
                           class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd css-953pxc-MuiInputBase-root-MuiInput-root"
                         >
                           <div
-                            aria-controls=":r3o:"
+                            aria-controls=":r3s:"
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Filter by Broken "
-                            aria-labelledby=":r3n:"
+                            aria-labelledby=":r3r:"
                             class="MuiSelect-select MuiSelect-standard MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-2jdjhv-MuiSelect-select-MuiInputBase-input-MuiInput-input"
-                            id=":r3n:"
+                            id=":r3r:"
                             role="combobox"
                             tabindex="0"
                           >
@@ -2507,7 +2781,7 @@ exports[`Items Table > renders correctly part 2 due column virtualisation 1`] =
                   class="MuiInputBase-root MuiInput-root MuiInputBase-colorPrimary  css-1mmm5cp-MuiInputBase-root-MuiInput-root-MuiSelect-root"
                 >
                   <div
-                    aria-controls=":r10:"
+                    aria-controls=":r14:"
                     aria-expanded="false"
                     aria-haspopup="listbox"
                     aria-label="Rows per page"
@@ -2783,7 +3057,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                             aria-label="Filter by Serial Number"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":rjn:"
+                            id=":rjr:"
                             placeholder="Filter by Serial Number"
                             title="Filter by Serial Number"
                             type="text"
@@ -2924,7 +3198,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rjr:"
+                              id=":rjv:"
                               inputmode="text"
                               placeholder="Min"
                               title="Min"
@@ -2969,7 +3243,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rjt:"
+                              id=":rk1:"
                               inputmode="text"
                               placeholder="Max"
                               title="Max"
@@ -3108,7 +3382,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rk1:"
+                              id=":rk5:"
                               inputmode="text"
                               placeholder="Min"
                               title="Min"
@@ -3153,7 +3427,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rk3:"
+                              id=":rk7:"
                               inputmode="text"
                               placeholder="Max"
                               title="Max"
@@ -3292,7 +3566,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rk7:"
+                              id=":rkb:"
                               inputmode="text"
                               placeholder="Min"
                               title="Min"
@@ -3337,7 +3611,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rk9:"
+                              id=":rkd:"
                               inputmode="text"
                               placeholder="Max"
                               title="Max"
@@ -3469,13 +3743,13 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                           class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd css-953pxc-MuiInputBase-root-MuiInput-root"
                         >
                           <div
-                            aria-controls=":rke:"
+                            aria-controls=":rki:"
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Filter by Is Defective"
-                            aria-labelledby=":rkd:"
+                            aria-labelledby=":rkh:"
                             class="MuiSelect-select MuiSelect-standard MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-2jdjhv-MuiSelect-select-MuiInputBase-input-MuiInput-input"
-                            id=":rkd:"
+                            id=":rkh:"
                             role="combobox"
                             tabindex="0"
                           >
@@ -3994,7 +4268,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                   class="MuiInputBase-root MuiInput-root MuiInputBase-colorPrimary  css-1mmm5cp-MuiInputBase-root-MuiInput-root-MuiSelect-root"
                 >
                   <div
-                    aria-controls=":rkg:"
+                    aria-controls=":rkk:"
                     aria-expanded="false"
                     aria-haspopup="listbox"
                     aria-label="Rows per page"
diff --git a/src/items/itemsDetailsPanel.component.tsx b/src/items/itemsDetailsPanel.component.tsx
index 8b684535c..1642954fe 100644
--- a/src/items/itemsDetailsPanel.component.tsx
+++ b/src/items/itemsDetailsPanel.component.tsx
@@ -12,6 +12,7 @@ import { Link } from 'react-router-dom';
 import { CatalogueItem, Item, UsageStatusType } from '../app.types';
 import { useManufacturer } from '../api/manufacturers';
 import { formatDateTimeStrings } from '../utils';
+import { useSystem } from '../api/systems';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function TabPanel(props: any) {
@@ -45,6 +46,8 @@ function ItemsDetailsPanel(props: ItemsDetailsPanelProps) {
   const { data: manufacturerData } = useManufacturer(
     catalogueItemIdData.manufacturer_id
   );
+  const { data: systemData } = useSystem(itemData.system_id);
+
   const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
     setTabValue(newValue);
   };
@@ -132,6 +135,20 @@ function ItemsDetailsPanel(props: ItemsDetailsPanelProps) {
                 </Typography>
               </Grid>
 
+              <Grid item xs={12} sm={6} key={1}>
+                <Typography color="text.primary">System</Typography>
+                <Typography color="text.secondary">
+                  <MuiLink
+                    component={Link}
+                    underline="hover"
+                    target="_blank"
+                    to={'/systems/' + systemData?.id}
+                  >
+                    {systemData?.name}
+                  </MuiLink>
+                </Typography>
+              </Grid>
+
               <Grid item xs={12} sm={6} key={7}>
                 <Typography color="text.primary">Last Modified</Typography>
                 <Typography color="text.secondary">
diff --git a/src/items/itemsLandingPage.component.tsx b/src/items/itemsLandingPage.component.tsx
index 46b95756a..1442a4dcc 100644
--- a/src/items/itemsLandingPage.component.tsx
+++ b/src/items/itemsLandingPage.component.tsx
@@ -26,6 +26,7 @@ import Breadcrumbs from '../view/breadcrumbs.component';
 import ItemDialog from './itemDialog.component';
 import { useNavigateToCatalogue } from '../catalogue/catalogue.component';
 import { formatDateTimeStrings } from '../utils';
+import { useSystem } from '../api/systems';
 
 function ItemsLandingPage() {
   // Navigation
@@ -47,6 +48,8 @@ function ItemsLandingPage() {
     catalogueItemData?.catalogue_category_id
   );
 
+  const { data: systemData } = useSystem(itemData?.system_id);
+
   const [itemLandingBreadcrumbs, setItemLandingBreadcrumbs] = React.useState<
     BreadcrumbsInfo | undefined
   >(catalogueBreadcrumbs);
@@ -261,15 +264,15 @@ function ItemsLandingPage() {
                   </Grid>
                   <Grid item xs={12} sm={6} md={4}>
                     <Typography align="left" color="text.primary">
-                      System ID
+                      System
                     </Typography>
                     <Typography align="left" color="text.secondary">
                       <MuiLink
                         underline="hover"
                         component={Link}
-                        to={'/systems/' + itemData.system_id}
+                        to={'/systems/' + systemData?.id}
                       >
-                        {itemData.system_id}
+                        {systemData?.name}
                       </MuiLink>
                     </Typography>
                   </Grid>
diff --git a/src/items/itemsTable.component.test.tsx b/src/items/itemsTable.component.test.tsx
index 8063dd10f..505ed9bfa 100644
--- a/src/items/itemsTable.component.test.tsx
+++ b/src/items/itemsTable.component.test.tsx
@@ -56,7 +56,7 @@ describe('Items Table', () => {
     const view = createView();
 
     await waitFor(() => {
-      expect(screen.getByText('Serial Number')).toBeInTheDocument();
+      expect(screen.getByText('5YUQDDjKpz2z')).toBeInTheDocument();
     });
     expect(view.asFragment()).toMatchSnapshot();
   });
diff --git a/src/items/itemsTable.component.tsx b/src/items/itemsTable.component.tsx
index 6cc78e56f..ed422ed1c 100644
--- a/src/items/itemsTable.component.tsx
+++ b/src/items/itemsTable.component.tsx
@@ -85,7 +85,6 @@ export function ItemsTable(props: ItemTableProps) {
   });
 
   //Once loading finished - use same logic as catalogueItemsTable to pair up data
-  //Purposefully leave out systemList from dependencies for same reasons as catalogueItemsTable
   React.useEffect(() => {
     if (!isLoading && itemsData) {
       setTableRows(
@@ -97,6 +96,7 @@ export function ItemsTable(props: ItemTableProps) {
         }))
       );
     }
+    //Purposefully leave out systemList from dependencies for same reasons as catalogueItemsTable
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [itemsData, isLoading]);
 
@@ -236,7 +236,8 @@ export function ItemsTable(props: ItemTableProps) {
       },
       {
         header: 'System',
-        accessorFn: (row) => row.system?.name,
+        accessorFn: (row) => row.system?.name ?? '',
+        getGroupingValue: (row) => row.system?.id ?? '',
         id: 'system.name',
         size: 250,
         Cell: ({ row }) => (