Ticket polish

app/(main)/components/DeleteTicketButton.tsx

@@ -2,6 +2,7 @@
 
 import { deleteTicket } from '@/app/actions/ticket';
 import { usePathname, useRouter } from 'next/navigation';
+import { Button } from 'react-bootstrap';
 
 export default function DeleteTicketButton({ ticketId }: { ticketId: string }) {
   const pathname = usePathname();
@@ -20,8 +21,12 @@ export default function DeleteTicketButton({ ticketId }: { ticketId: string }) {
   }
 
   return (
-    <button type="button" onClick={handleDelete}>
+    <Button
+      variant="outline-danger"
+      className="btn-remove"
+      onClick={handleDelete}
+    >
       Delete ticket
-    </button>
+    </Button>
   );
 }

app/(main)/components/InStockTicketItemCard.tsx

@@ -93,10 +93,14 @@ export default function InStockTicketItemCard({
         </div>
         {errorMessage && <p role="alert">{errorMessage}</p>}
         {hasChanged && (
-          <>
-            <button onClick={handleSave}>Save</button>
-            <button onClick={handleCancel}>Cancel</button>
-          </>
+          <div className="d-flex flex-wrap gap-2 mt-2">
+            <button className="btn-submit py-1 px-3" onClick={handleSave}>
+              Save
+            </button>
+            <button className="btn-cancel py-1 px-3" onClick={handleCancel}>
+              Cancel
+            </button>
+          </div>
         )}
       </div>
     </div>

app/(main)/components/OutOfStockTicketItemCard.tsx

@@ -38,8 +38,12 @@ export default function OutOfStockTicketItemCard({
       />
       {isChanged && (
         <div className={styles.actionsRow}>
-          <button onClick={handleSave}>Save</button>
-          <button onClick={handleCancel}>Cancel</button>
+          <button className="btn-submit py-1 px-3" onClick={handleSave}>
+            Save
+          </button>
+          <button className="btn-cancel py-1 px-3" onClick={handleCancel}>
+            Cancel
+          </button>
         </div>
       )}
     </div>

app/(main)/components/RemoveTicketItemButton.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { deleteTicketItem } from '@/app/actions/ticket';
+import { Button } from 'react-bootstrap';
 
 type RemoveTicketItemButtonProps = {
   ticketItemId: string;
@@ -18,8 +19,13 @@ export default function RemoveTicketItemButton({
   };
 
   return (
-    <button type="button" onClick={handleDelete}>
+    <Button
+      variant="outline-danger"
+      size="sm"
+      className="btn-remove"
+      onClick={handleDelete}
+    >
       Remove
-    </button>
+    </Button>
   );
 }

app/(main)/components/TicketDestStoreDropdown.tsx

@@ -2,6 +2,7 @@
 import { updateTicketDestStore } from '@/app/actions/ticket';
 import { Store } from '@/app/types/store';
 import { useState } from 'react';
+import { Form } from 'react-bootstrap';
 
 export default function TicketDestStoreDropdown({
   ticketId,
@@ -41,7 +42,7 @@ export default function TicketDestStoreDropdown({
 
   return (
     <div>
-      <select
+      <Form.Select
         value={selectedDestStore?.store_id || ''}
         onChange={(e) => {
           const selectedStoreId = e.target.value;
@@ -59,21 +60,31 @@ export default function TicketDestStoreDropdown({
         }}
       >
         <option value="">No Destination Store</option>
-        {destStoreOptions.map(({ store }) => (
-          <option key={store.store_id} value={store.store_id}>
-            {store.name}
-          </option>
-        ))}
-      </select>
+        {[...destStoreOptions]
+          .sort((a, b) => a.store.name.localeCompare(b.store.name))
+          .map(({ store }) => (
+            <option key={store.store_id} value={store.store_id}>
+              {store.name}
+            </option>
+          ))}
+      </Form.Select>
       {selectedDestStore != originalDestStore && (
-        <div>
-          <button type="button" onClick={handleSave}>
+        <div className="d-flex flex-wrap gap-2 mt-2">
+          <button
+            type="button"
+            className="btn-submit py-1 px-3"
+            onClick={handleSave}
+          >
             Save
           </button>
-          <button type="button" onClick={handleCancel}>
+          <button
+            type="button"
+            className="btn-cancel py-1 px-3"
+            onClick={handleCancel}
+          >
             Cancel
           </button>
-          {error && <div>{error}</div>}
+          {error && <div className="w-100">{error}</div>}
         </div>
       )}
     </div>

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

@@ -162,6 +162,9 @@
     width: auto;
     margin-top: 0;
   }
+  .headerEndAtLarge {
+    align-self: flex-end;
+  }
   .ticketContentMain {
     flex: 0 0 auto;
     width: 66.66666667%;

app/(main)/components/TicketDetails.tsx

@@ -176,11 +176,14 @@ export default async function TicketDetails({
                   <h2>Ticket #{userTicket.ticket_id}</h2>
                 </div>
               </Col>
-              {!outgoing ? (
-                <Col xs={12} className={styles.headerCardContact}>
+              <Col
+                xs={12}
+                className={`${styles.headerCardContact} d-flex flex-column align-items-start gap-2`}
+              >
+                {!outgoing && (
                   <Button
                     as="a"
-                    className={styles.contactButton}
+                    className={`${styles.contactButton} ${styles.headerEndAtLarge}`}
                     href={
                       requestor?.email ? `mailto:${requestor.email}` : undefined
                     }
@@ -190,32 +193,19 @@ export default async function TicketDetails({
                   >
                     Contact
                   </Button>
-                </Col>
-              ) : null}
+                )}
+                <TicketStatusDropdown
+                  ticketId={userTicket.ticket_id}
+                  currentStatus={userTicket.status as TicketStatus}
+                  statusOptions={statusOptions}
+                />
+                <div className={styles.headerEndAtLarge}>
+                  <DeleteTicketButton ticketId={userTicket.ticket_id} />
+                </div>
+              </Col>
             </Row>
           </Card>
 
-          <div>
-            <p>Status: </p>
-            <TicketStatusDropdown
-              ticketId={userTicket.ticket_id}
-              currentStatus={userTicket.status as TicketStatus}
-              statusOptions={statusOptions}
-            />
-          </div>
-          <div>
-            <p>Ticket Destination Store: </p>
-            <TicketDestStoreDropdown
-              ticketId={ticketId}
-              currentDestStore={(currentDestStore as Store) || null}
-              destStoreOptions={(destStoreOptions ?? []).map((store) => ({
-                store,
-              }))}
-            />
-          </div>
-
-          <DeleteTicketButton ticketId={userTicket.ticket_id} />
-
           <Row className={styles.ticketContentLayout}>
             <Col xs={12} className={styles.ticketContentMain}>
               <TicketItemsList ticketId={userTicket.ticket_id} />
@@ -246,6 +236,17 @@ export default async function TicketDetails({
                   <p>
                     <strong>Store Address:</strong> {store.street_address}
                   </p>
+                  <div className="mt-3">
+                    <TicketDestStoreDropdown
+                      ticketId={ticketId}
+                      currentDestStore={(currentDestStore as Store) || null}
+                      destStoreOptions={(destStoreOptions ?? []).map(
+                        (store) => ({
+                          store,
+                        }),
+                      )}
+                    />
+                  </div>
                 </div>
               </div>
             </Col>

app/(main)/components/TicketStatusDropdown.tsx

@@ -1,6 +1,7 @@
 'use client';
 import { useState } from 'react';
 import { updateTicketStatus } from '@/app/actions/ticket';
+import { Form } from 'react-bootstrap';
 
 type TicketStatus =
   | 'draft'
@@ -43,26 +44,35 @@ export default function TicketStatusDropdown({
 
   return (
     <div>
-      <select
+      <Form.Select
         value={selectedStatus}
         onChange={(e) => setSelectedStatus(e.target.value as TicketStatus)}
+        style={{ textTransform: 'capitalize' }}
       >
         {statusOptions.map((status) => (
           <option key={status} value={status}>
             {status}
           </option>
         ))}
-      </select>
+      </Form.Select>
 
       {selectedStatus !== originalStatus && (
-        <div>
-          <button type="button" onClick={handleSave}>
+        <div className="d-flex flex-wrap gap-2 mt-2">
+          <button
+            type="button"
+            className="btn-submit py-1 px-3"
+            onClick={handleSave}
+          >
             Save
           </button>
-          <button type="button" onClick={handleCancel}>
+          <button
+            type="button"
+            className="btn-cancel py-1 px-3"
+            onClick={handleCancel}
+          >
             Cancel
           </button>
-          {error && <div>{error}</div>}
+          {error && <div className="w-100">{error}</div>}
         </div>
       )}
     </div>