diff --git a/app/(main)/administration/members/[userId]/page.tsx b/app/(main)/administration/members/[userId]/page.tsx index 036a83ce..dbb40cb2 100644 --- a/app/(main)/administration/members/[userId]/page.tsx +++ b/app/(main)/administration/members/[userId]/page.tsx @@ -46,7 +46,7 @@ export default async function TeamProfilePage({ {user.first_name} {user.last_name} {/* same styling as profile page */} -
+
diff --git a/app/(main)/administration/members/components/UsersList.tsx b/app/(main)/administration/members/components/UsersList.tsx index 23683a66..4d07a444 100644 --- a/app/(main)/administration/members/components/UsersList.tsx +++ b/app/(main)/administration/members/components/UsersList.tsx @@ -38,10 +38,10 @@ export default function UsersList({ ))}
) : ( - +
- + @@ -56,21 +56,18 @@ export default function UsersList({ height={32} width={32} unoptimized - className={styles.userPfp} + className="rounded-circle me-2" /> {user.first_name + ' ' + user.last_name} - + ))} diff --git a/app/(main)/components/StoresList.module.css b/app/(main)/components/StoresList.module.css index e37d2b55..47d78857 100644 --- a/app/(main)/components/StoresList.module.css +++ b/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%; -} diff --git a/app/(main)/components/StoresList.tsx b/app/(main)/components/StoresList.tsx index 1f43bc20..57ace2da 100644 --- a/app/(main)/components/StoresList.tsx +++ b/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('grid'); @@ -27,8 +28,8 @@ export default function StoresList({ stores }: { stores: Store[] }) { ))} ) : ( -
RequestorTeam Member Role Email
{user.role}{user.role} - - {user.email} - + {user.email}
- +
+ @@ -38,24 +39,24 @@ export default function StoresList({ stores }: { stores: Store[] }) { {sortedStores?.map((store) => ( - + ))} -
NAME ADDRESS
-
+
{`${store.name} - {store.name} + {store.name}
{store.street_address}{store.street_address}
+ )}
); diff --git a/app/(main)/incoming-tickets/[storeId]/[ticketId]/page.tsx b/app/(main)/incoming-tickets/[storeId]/[ticketId]/page.tsx index e8a016c9..45336d7d 100644 --- a/app/(main)/incoming-tickets/[storeId]/[ticketId]/page.tsx +++ b/app/(main)/incoming-tickets/[storeId]/[ticketId]/page.tsx @@ -24,7 +24,7 @@ export default async function IncomingTicketDetailsPage({
= { + 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 ( - + {status.charAt(0).toUpperCase() + status.slice(1).toLowerCase()} diff --git a/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketsList.tsx b/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketsList.tsx index d94548cf..2f3155ca 100644 --- a/app/(main)/incoming-tickets/[storeId]/components/IncomingTicketsList.tsx +++ b/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 ( -
+
{/* Dropdown menu with status options */} -
- +
+
+ setSelectedStatus(e.target.value)} + > + {statusOptions.map((statusOption) => ( + + ))} + +
{filteredTickets.length > 0 ? (
- - - - - - - - +
+ @@ -86,7 +79,7 @@ export default function IncomingTicketsList({ /> ))} -
ID REQUESTOR
+
) : (

No tickets found.

diff --git a/app/(main)/incoming-tickets/[storeId]/page.tsx b/app/(main)/incoming-tickets/[storeId]/page.tsx index 551ca933..260245d8 100644 --- a/app/(main)/incoming-tickets/[storeId]/page.tsx +++ b/app/(main)/incoming-tickets/[storeId]/page.tsx @@ -72,11 +72,11 @@ export default async function IncomingTicketsStorePage({
-

Incoming Tickets

+

Store Tickets

); diff --git a/app/(main)/outgoing-tickets/[ticketId]/page.tsx b/app/(main)/outgoing-tickets/[ticketId]/page.tsx index 4c146e07..3bca25f7 100644 --- a/app/(main)/outgoing-tickets/[ticketId]/page.tsx +++ b/app/(main)/outgoing-tickets/[ticketId]/page.tsx @@ -12,7 +12,7 @@ export default async function OutgoingTicketDetailsPage({
diff --git a/app/(main)/outgoing-tickets/components/OutgoingTicket.module.css b/app/(main)/outgoing-tickets/components/OutgoingTicket.module.css deleted file mode 100644 index 65aa1fd3..00000000 --- a/app/(main)/outgoing-tickets/components/OutgoingTicket.module.css +++ /dev/null @@ -1,79 +0,0 @@ -.tableWrapper { - border-radius: 12px; - overflow: hidden; -} - -.table { - width: 100%; - border-collapse: collapse; - margin-top: 28px; -} - -.table th { - padding: 22.28px 44.56px; - color: #4a5568; - background-color: #e5f3ff; - font-weight: 600; - font-size: 16.93px; - line-height: 100%; -} - -.table td { - padding: 22.28px 26.74px; - color: #718096; - border-bottom: 0.45px solid #e5f3ff; -} - -.table tr:last-child td { - border-bottom: none; -} - -.table td:nth-child(1) { - font-weight: 600; - font-size: 16.93px; - line-height: 100%; -} - -.idCol { - width: 32.69%; -} - -.storeCol { - width: 20.7%; -} - -.statusCol { - width: 23.44%; -} - -.dateCol { - width: 23.17%; -} - -.statusBubble { - background-color: #3182ce; - color: #ffffff; - font-weight: 600; - font-size: 16.93px; - line-height: 100%; - padding: 8.91px 22.28px; - border-radius: 4.46px; -} - -.cursor { - cursor: pointer; -} - -.dropdown { - padding: 8px 36px 8px 16px; - width: auto; - border: 0.5px solid #cbd5e0; - border-radius: 5px; - - font-size: 16px; - font-weight: 400; - line-height: 1; - - color: #000000; - cursor: pointer; -} diff --git a/app/(main)/outgoing-tickets/components/OutgoingTicketCard.module.css b/app/(main)/outgoing-tickets/components/OutgoingTicketCard.module.css new file mode 100644 index 00000000..66f1c0e8 --- /dev/null +++ b/app/(main)/outgoing-tickets/components/OutgoingTicketCard.module.css @@ -0,0 +1,32 @@ +.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; +} + +.cursor { + cursor: pointer; +} diff --git a/app/(main)/outgoing-tickets/components/OutgoingTicketCard.tsx b/app/(main)/outgoing-tickets/components/OutgoingTicketCard.tsx index 4919ec36..e9712e01 100644 --- a/app/(main)/outgoing-tickets/components/OutgoingTicketCard.tsx +++ b/app/(main)/outgoing-tickets/components/OutgoingTicketCard.tsx @@ -1,7 +1,7 @@ 'use client'; import { usePathname, useRouter } from 'next/navigation'; -import styles from '@/app/(main)/outgoing-tickets/components/OutgoingTicket.module.css'; +import styles from '@/app/(main)/outgoing-tickets/components/OutgoingTicketCard.module.css'; type OutgoingTicketCardProps = { ticketId: string; @@ -19,6 +19,18 @@ export default function OutgoingTicketCard({ const pathname = usePathname(); const router = useRouter(); + /* Stuatus Class mapping for colors for different statuses */ + const statusClassMap: Record = { + 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; + return ( router.push(`${pathname}/${ticketId}`)} @@ -27,7 +39,7 @@ export default function OutgoingTicketCard({ {ticketId} {storeName} - + {status.charAt(0).toUpperCase() + status.slice(1).toLowerCase()} diff --git a/app/(main)/outgoing-tickets/components/OutgoingTicketsList.tsx b/app/(main)/outgoing-tickets/components/OutgoingTicketsList.tsx index 90c18f53..c7bd12a8 100644 --- a/app/(main)/outgoing-tickets/components/OutgoingTicketsList.tsx +++ b/app/(main)/outgoing-tickets/components/OutgoingTicketsList.tsx @@ -1,7 +1,7 @@ 'use client'; import OutgoingTicketCard from '@/app/(main)/outgoing-tickets/components/OutgoingTicketCard'; import { useState } from 'react'; -import styles from '@/app/(main)/outgoing-tickets/components/OutgoingTicket.module.css'; +import { Table, Form } from 'react-bootstrap'; type Ticket = { ticket_id: string; @@ -20,10 +20,10 @@ export default function OutgoingTicketsList({ const statusOptions = [ 'All', 'Requested', + 'Approved', 'Ready', - 'Rejected', 'Fulfilled', - 'Approved', + 'Rejected', ]; const filteredTickets = selectedStatus === 'All' @@ -37,33 +37,26 @@ export default function OutgoingTicketsList({ ); return ( -
+
{/* Dropdown menu with status options */} -
- +
+
+ setSelectedStatus(e.target.value)} + > + {statusOptions.map((statusOption) => ( + + ))} + +
{filteredTickets.length > 0 ? ( - - - - - - - - +
+ @@ -82,7 +75,7 @@ export default function OutgoingTicketsList({ /> ))} -
ID STORE NAME
+ ) : (

No tickets found.

)} diff --git a/app/(main)/test/components/TicketsTestComponent.tsx b/app/(main)/test/components/TicketsTestComponent.tsx index 5b4420b8..fbebf25d 100644 --- a/app/(main)/test/components/TicketsTestComponent.tsx +++ b/app/(main)/test/components/TicketsTestComponent.tsx @@ -53,7 +53,7 @@ export default function TicketsTestComponent() {

Ticket Testing

- +
  • Tickets you can read will appear here.
    • diff --git a/app/globals.css b/app/globals.css index 38d1b957..e62af9e4 100644 --- a/app/globals.css +++ b/app/globals.css @@ -41,20 +41,39 @@ p { th { text-transform: uppercase; + padding: 22.28px 44.56px; + color: #4a5568; + background-color: #e5f3ff; + font-weight: 600; + line-height: 100%; +} + +td { + padding: 1.25rem; + color: #718096; + border-bottom: 0.45px solid #e5f3ff; +} + +td a, +td Link { + color: #333; + text-decoration: none; } tr { height: 80px; - text-align: center; vertical-align: middle; } Table { - margin-top: 10px; width: 100%; border-collapse: collapse; + border-radius: 0.5rem; + overflow: hidden; + text-align: left; } +/* for tables, this ensures that it is blue*/ .table-header th { background-color: #e5f3ff; font-weight: 500; @@ -369,11 +388,6 @@ Table { align-self: flex-end; } -/* search bar layout */ -.search-filter-wrapper { - margin-bottom: 1rem; -} - /* clear filter button styling */ .btn-primary.search-filter-clear { padding-left: 2.25rem; @@ -396,51 +410,6 @@ Table { /* search bar layout */ .search-filter-wrapper { - margin-bottom: 1rem; -} - -/* clear filter button styling */ -.btn-primary.search-filter-clear { - padding-left: 2.25rem; - background: #fff url('/filter-icon.svg') no-repeat left 0.75rem center / 1rem; - border-color: #dee2e6; - color: #000; -} - -.btn-primary.search-filter-clear:hover { - background: #dee2e6 url('/filter-icon.svg') no-repeat left 0.75rem center / - 1rem; - border-color: #dee2e6; - color: #000; -} - -.search-bar { - background: #fff url('/search-icon.svg') no-repeat right 0.75rem center / 1rem; - margin-bottom: 0.5rem; -} - -/* search bar layout */ -.search-filter-wrapper { - margin-bottom: 0.5rem; -} - -/* clear filter button styling */ -.btn-primary.search-filter-clear { - padding-left: 2.25rem; - background: #fff url('/filter-icon.svg') no-repeat left 0.75rem center / 1rem; - border-color: #dee2e6; - color: #000; -} - -.btn-primary.search-filter-clear:hover { - background: #dee2e6 url('/filter-icon.svg') no-repeat left 0.75rem center / - 1rem; - border-color: #dee2e6; - color: #000; -} - -.search-bar { - background: #fff url('/search-icon.svg') no-repeat right 0.75rem center / 1rem; margin-bottom: 0.5rem; }