Add car reordering and AM/PM period for reservations

Agent-Logs-Url: https://github.com/pdf114514/CarReservation/sessions/c0a4b7dc-228e-4e7d-a985-61b9a17de159

Co-authored-by: pdf114514 <57948770+pdf114514@users.noreply.github.com>

frontend/src/components/CarManagement.jsx

@@ -116,6 +116,20 @@ export default function CarManagement({ reloadKey = 0 }) {
     }
   };
 
+  const handleReorder = async (index, direction) => {
+    const newCars = [...cars];
+    const swapIndex = index + direction;
+    if (swapIndex < 0 || swapIndex >= newCars.length) return;
+    [newCars[index], newCars[swapIndex]] = [newCars[swapIndex], newCars[index]];
+    setCars(newCars);
+    try {
+      await api.reorderCars(newCars.map((c) => c.id));
+    } catch (e) {
+      setError(e.message);
+      await loadCars();
+    }
+  };
+
   return (
     <div className={styles.container}>
       <h2 className={styles.heading}>代車管理</h2>
@@ -187,7 +201,7 @@ export default function CarManagement({ reloadKey = 0 }) {
           <table className={styles.table}>
             <thead>
               <tr>
-                <th>ID</th>
+                <th>順番</th>
                 <th>車名</th>
                 <th>備考</th>
                 <th>車検満了日</th>
@@ -202,9 +216,26 @@ export default function CarManagement({ reloadKey = 0 }) {
                   <td colSpan={7} className={styles.empty}>代車がありません</td>
                 </tr>
               )}
-              {cars.map((car) => (
+              {cars.map((car, carIdx) => (
                 <tr key={car.id}>
-                  <td className={styles.idCell}>{car.id}</td>
+                  <td className={styles.idCell}>
+                    <div className={styles.orderBtns}>
+                      <button
+                        className={styles.btnOrder}
+                        onClick={() => handleReorder(carIdx, -1)}
+                        disabled={carIdx === 0}
+                        title="上に移動"
+                        aria-label="上に移動"
+                      >▲</button>
+                      <button
+                        className={styles.btnOrder}
+                        onClick={() => handleReorder(carIdx, 1)}
+                        disabled={carIdx === cars.length - 1}
+                        title="下に移動"
+                        aria-label="下に移動"
+                      >▼</button>
+                    </div>
+                  </td>
                   {editingId === car.id ? (
                     <>
                       <td>