Responsive tables

app/(main)/administration/members/[userId]/page.tsx

@@ -46,7 +46,7 @@ export default async function TeamProfilePage({
         {user.first_name} {user.last_name}
       </h1>
       {/* same styling as profile page */}
-      <div>
+      <div className="content-body">
         <div className={`form-card ${styles.card}`}>
           <div className={`form-body ${styles.cardBody}`}>
             <div className={styles.avatarCircle}>

app/(main)/administration/members/components/UsersList.tsx

@@ -38,10 +38,10 @@ export default function UsersList({
           ))}
         </div>
       ) : (
-        <Table borderless>
+        <Table borderless responsive>
           <thead className="table-header">
             <tr>
-              <th>Requestor</th>
+              <th>Team Member</th>
               <th>Role</th>
               <th>Email</th>
             </tr>
@@ -56,21 +56,18 @@ export default function UsersList({
                     height={32}
                     width={32}
                     unoptimized
-                    className={styles.userPfp}
+                    className="rounded-circle me-2"
                   />
                   <Link
                     key={user.user_id}
-                    href={`/team/people/${user.user_id}`} // Where to navigate
-                    className={styles.userLink}
+                    href={`/administration/members/${user.user_id}`} // Where to navigate
                   >
                     {user.first_name + ' ' + user.last_name}
                   </Link>
                 </td>
-                <td className={styles.userRole}>{user.role}</td>
+                <td className="text-uppercase">{user.role}</td>
                 <td>
-                  <a className={styles.userEmail} href={`mailto:${user.email}`}>
-                    {user.email}
-                  </a>
+                  <a href={`mailto:${user.email}`}>{user.email}</a>
                 </td>
               </tr>
             ))}

app/(main)/components/StoresList.module.css

@@ -3,62 +3,3 @@
   justify-content: flex-end;
   margin-bottom: 1rem;
 }
-
-.table {
-  width: 100%;
-}
-
-.tableHeader {
-  width: 100%;
-  border-radius: 5px 5px 0 0;
-  background: #e0ecf7;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
-}
-
-.tableHeader th {
-  padding: 12px 16px;
-  color: #4a5568;
-  text-align: left;
-  padding-left: 50px;
-  font-family: Montserrat;
-  font-size: 16.933px;
-  font-weight: 600;
-}
-
-.tableRow td {
-  padding: 12px 16px;
-  text-align: left;
-  vertical-align: middle;
-  padding-left: 44.565px;
-}
-
-.tableRow {
-  height: 89.122px;
-  background: #fff;
-  border-bottom: 0.446px solid #e5f3ff;
-}
-
-.nameCell {
-  display: flex;
-  align-items: center;
-  padding: 8px;
-  margin-left: -44.565px;
-}
-
-.name {
-  color: #718096;
-  font-family: Montserrat;
-  font-size: 16.933px;
-  font-weight: 600;
-}
-
-.address {
-  color: #718096;
-  font-family: Montserrat;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.storePhoto {
-  border-radius: 50%;
-}

app/(main)/components/StoresList.tsx

@@ -7,6 +7,7 @@ import ViewToggle, { ViewMode } from '@/app/(main)/components/ViewToggle';
 import Image from 'next/image';
 import styles from '@/app/(main)/components/StoresList.module.css';
 import defaultStorePhoto from '@/public/image-placeholder.svg';
+import { Table } from 'react-bootstrap';
 
 export default function StoresList({ stores }: { stores: Store[] }) {
   const [view, setView] = useState<ViewMode>('grid');
@@ -27,8 +28,8 @@ export default function StoresList({ stores }: { stores: Store[] }) {
           ))}
         </div>
       ) : (
-        <table className={styles.table}>
-          <thead className={styles.tableHeader}>
+        <Table borderless responsive>
+          <thead className="table-header">
             <tr>
               <th>NAME</th>
               <th>ADDRESS</th>
@@ -38,24 +39,24 @@ export default function StoresList({ stores }: { stores: Store[] }) {
             {sortedStores?.map((store) => (
               <tr className={styles.tableRow} key={store.store_id}>
                 <td>
-                  <div className={styles.nameCell}>
+                  <div>
                     <Image
                       src={store.photo_url || defaultStorePhoto}
                       alt={`${store.name} photo`}
                       width={32}
                       height={32}
-                      className={styles.storePhoto}
+                      className="rounded-circle me-2"
                       unoptimized
                     />
 
-                    <span className={styles.name}>{store.name}</span>
+                    <span>{store.name}</span>
                   </div>
                 </td>
-                <td className={styles.address}>{store.street_address}</td>
+                <td>{store.street_address}</td>
               </tr>
             ))}
           </tbody>
-        </table>
+        </Table>
       )}
     </div>
   );

app/(main)/incoming-tickets/[storeId]/[ticketId]/page.tsx

@@ -24,7 +24,7 @@ export default async function IncomingTicketDetailsPage({
     <div>
       <Breadcrumbs
         labelMap={{
-          '/incoming-tickets': 'Incoming Tickets',
+          '/incoming-tickets': 'Store Tickets',
           [`/incoming-tickets/${storeId}`]: store?.name ?? 'Store',
           [`/incoming-tickets/${storeId}/${ticketId}`]: ticketId,
         }}

app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard.module.css

@@ -0,0 +1,28 @@
+.statusBubble {
+  font-weight: 600;
+  font-size: 16.93px;
+  line-height: 100%;
+  padding: 8.91px 22.28px;
+  border-radius: 4.46px;
+}
+
+.statusRequested {
+  background-color: #eeedff;
+  color: #6921c0;
+}
+.statusReady {
+  background-color: #e7ffee;
+  color: #24704a;
+}
+.statusRejected {
+  background-color: #ffefef;
+  color: #c53030;
+}
+.statusApproved {
+  background-color: #ffebf6;
+  color: #822c65;
+}
+.statusFulfilled {
+  background-color: #ebf8ff;
+  color: #2c5282;
+}

app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { usePathname, useRouter } from 'next/navigation';
-import styles from '@/app/(main)/incoming-tickets/[storeId]/components/IncomingTicket.module.css';
+import styles from '@/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard.module.css';
 
 type IncomingTicketCardProps = {
   ticketId: string;
@@ -21,6 +21,18 @@ export default function IncomingTicketCard({
   const pathname = usePathname();
   const router = useRouter();
 
+  /* Stuatus Class mapping for colors for different statuses */
+  const statusClassMap: Record<string, string> = {
+    requested: styles.statusRequested,
+    ready: styles.statusReady,
+    rejected: styles.statusRejected,
+    fulfilled: styles.statusFulfilled,
+    approved: styles.statusApproved,
+  };
+
+  const normalizedStatus = status.toLowerCase();
+  const statusClass = statusClassMap[normalizedStatus] ?? styles.statusDefault;
+
   // Display requestor's name, status, and date submitted
   return (
     <tr
@@ -33,7 +45,7 @@ export default function IncomingTicketCard({
       </td>
 
       <td>
-        <span className={styles.statusBubble}>
+        <span className={`${styles.statusBubble} ${statusClass}`}>
           {status.charAt(0).toUpperCase() + status.slice(1).toLowerCase()}
         </span>
       </td>

app/(main)/incoming-tickets/[storeId]/components/IncomingTicketsList.tsx

@@ -1,7 +1,7 @@
 'use client';
 import IncomingTicketCard from '@/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketCard';
 import { useState } from 'react';
-import styles from '@/app/(main)/incoming-tickets/[storeId]/components/IncomingTicket.module.css';
+import { Table, Form } from 'react-bootstrap';
 
 type IncomingTicketsListProps = {
   tickets: {
@@ -20,10 +20,10 @@ export default function IncomingTicketsList({
   const statusOptions = [
     'All',
     'Requested',
+    'Approved',
     'Ready',
-    'Rejected',
     'Fulfilled',
-    'Approved',
+    'Rejected',
   ];
 
   // Filter tickets to only show tickets with the selected status
@@ -38,34 +38,27 @@ export default function IncomingTicketsList({
   );
 
   return (
-    <div>
+    <div className="content-body">
       {/* Dropdown menu with status options */}
-      <div className="d-flex justify-content-end">
-        <select
-          className={`form-select w-auto ${styles.dropdown}`}
-          value={selectedStatus}
-          onChange={(e) => setSelectedStatus(e.target.value)}
-        >
-          {statusOptions.map((statusOption) => (
-            <option key={statusOption} value={statusOption}>
-              {statusOption}
-            </option>
-          ))}
-        </select>
+      <div className="d-flex">
+        <div>
+          <Form.Select
+            value={selectedStatus}
+            onChange={(e) => setSelectedStatus(e.target.value)}
+          >
+            {statusOptions.map((statusOption) => (
+              <option key={statusOption} value={statusOption}>
+                {statusOption}
+              </option>
+            ))}
+          </Form.Select>
+        </div>
       </div>
 
       {filteredTickets.length > 0 ? (
         <div>
-          <table
-            className={`table table-borderless text-center align-middle ${styles.table} ${styles.tableWrapper}`}
-          >
-            <colgroup>
-              <col className={styles.idCol} />
-              <col className={styles.requestorCol} />
-              <col className={styles.statusCol} />
-              <col className={styles.dateCol} />
-            </colgroup>
-            <thead>
+          <Table borderless responsive>
+            <thead className="table-header">
               <tr>
                 <th>ID</th>
                 <th>REQUESTOR</th>
@@ -86,7 +79,7 @@ export default function IncomingTicketsList({
                 />
               ))}
             </tbody>
-          </table>
+          </Table>
         </div>
       ) : (
         <p>No tickets found.</p>