column headers and text color

Author: eeen17

src/ui/pages/siglead/ManageSigLeads.page.tsx

@@ -11,7 +11,7 @@ import { getRunEnvironmentConfig } from '@ui/config';
 import { useApi } from '@ui/util/api';
 import { OrganizationList as orgList } from '@common/orgs';
 import { AppRoles } from '@common/roles';
-import { ScreenComponent } from './SigScreenComponents';
+import { ScreenComponent, SigTable } from './SigScreenComponents';
 
 export function capitalizeFirstLetter(string: string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
@@ -158,6 +158,7 @@ export const ManageSigLeadsPage: React.FC = () => {
     <AuthGuard resourceDef={{ service: 'core', validRoles: [AppRoles.IAM_ADMIN] }}>
       <Title order={2}>SigLead Management System</Title>
       <ScreenComponent />
+      {/* <SigTable /> */}
     </AuthGuard>
   );
 };

src/ui/pages/siglead/SigScreenComponents.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { z } from 'zod';
 import { OrganizationList } from '@common/orgs';
-import { NavLink } from '@mantine/core';
+import { NavLink, Paper } from '@mantine/core';
 import { AuthGuard } from '@ui/components/AuthGuard';
 import { AppRoles } from '@common/roles';
 import { IconUsersGroup } from '@tabler/icons-react';
@@ -31,7 +31,14 @@ const renderSigLink = (org: string, index: number) => {
     <NavLink
       href={`${useLocation().pathname}/${org}`}
       label={org}
+      variant="filled"
       active={index % 2 === 0}
+      // color="blue"
+      // style={{
+      //   // color: "lightgray",
+      //   backgroundColor: "DodgerBlue",
+      //   opacity: 0.5
+      // }}
       rightSection={
         <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
           <span>MemberCount[{index}]</span>
@@ -43,5 +50,103 @@ const renderSigLink = (org: string, index: number) => {
 };
 
 export const ScreenComponent: React.FC = () => {
-  return <>{OrganizationList.map(renderSigLink)}</>;
+  return (
+    <>
+      <Paper
+        shadow="xs"
+        p="sm"
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          fontWeight: 'bold',
+          // backgroundColor: "#f8f9fa",
+          borderRadius: '8px',
+          padding: '10px 16px',
+          marginBottom: '8px',
+        }}
+      >
+        <span>Organization</span>
+        <span>Member Count</span>
+      </Paper>
+      {OrganizationList.map(renderSigLink)}
+    </>
+  );
 };
+
+import { Table } from '@mantine/core';
+
+export const SigTable = () => {
+  const location = useLocation();
+  return (
+    <Table highlightOnHover>
+      {/* Headers */}
+      <thead>
+        <tr>
+          <th>Organization</th>
+          <th>Member Count</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        {OrganizationList.map((org, index) => (
+          <tr key={index}>
+            {/* Organization Column */}
+            <td>
+              <NavLink
+                href={`${location.pathname}/${org}`}
+                label={org}
+                variant="filled"
+                active={index % 2 === 0}
+              />
+            </td>
+
+            {/* Member Count Column */}
+            <td style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <span>MemberCount[{index}]</span>
+              <IconUsersGroup />
+            </td>
+          </tr>
+        ))}
+      </tbody>
+      {/* <tbody>
+        {OrganizationList.map((org, index) => (
+          <tr key={index}>
+            <td>{renderSigLink(org, index)}</td>
+          </tr>
+        ))}
+      </tbody> */}
+    </Table>
+  );
+};
+
+// const navLinks = [
+//   { label: "Home", icon: <IconHome size={16} />, path: "/" },
+//   { label: "Profile", icon: <IconUser size={16} />, path: "/profile" },
+//   { label: "Settings", icon: <IconSettings size={16} />, path: "/settings" },
+// ];
+
+// export const NavLinkTable = () => {
+//   return (
+//     <Table highlightOnHover>
+//       <thead>
+//         <tr>
+//           <th>Navigation</th>
+//         </tr>
+//       </thead>
+//       <tbody>
+//         {navLinks.map((link, index) => (
+//           <tr key={index}>
+//             <td>
+//               <NavLink
+//                 label={link.label}
+//                 component={Link} // Integrates with React Router
+//                 to={link.path}
+//               />
+//             </td>
+//           </tr>
+//         ))}
+//       </tbody>
+//     </Table>
+//   );
+// }