fix: preserve AM/PM when dragging reservation; add drag & drop car reordering

Agent-Logs-Url: https://github.com/pdf114514/CarReservation/sessions/c5f8f1a2-8a8b-4951-8442-76ce37d906ae

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

frontend/src/components/CarManagement.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { api } from '../api.js';
 import { isInspectionExpirySoon } from '../utils/carUtils.js';
 import styles from './CarManagement.module.css';
@@ -20,6 +20,8 @@ export default function CarManagement({ reloadKey = 0 }) {
   const [editEtc, setEditEtc] = useState(false);
   const [editTire, setEditTire] = useState('ノーマル');
   const [submitting, setSubmitting] = useState(false);
+  const [dragOverIdx, setDragOverIdx] = useState(null);
+  const dragSrcIdx = useRef(null);
 
   const loadCars = useCallback(async () => {
     try {
@@ -130,6 +132,38 @@ export default function CarManagement({ reloadKey = 0 }) {
     }
   };
 
+  const handleDragStart = (index) => {
+    dragSrcIdx.current = index;
+  };
+
+  const handleDragOver = (e, index) => {
+    e.preventDefault();
+    setDragOverIdx(index);
+  };
+
+  const handleDragEnd = () => {
+    setDragOverIdx(null);
+    dragSrcIdx.current = null;
+  };
+
+  const handleDrop = async (e, dropIndex) => {
+    e.preventDefault();
+    const srcIndex = dragSrcIdx.current;
+    setDragOverIdx(null);
+    dragSrcIdx.current = null;
+    if (srcIndex === null || srcIndex === dropIndex) return;
+    const newCars = [...cars];
+    const [moved] = newCars.splice(srcIndex, 1);
+    newCars.splice(dropIndex, 0, moved);
+    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>
@@ -217,7 +251,15 @@ export default function CarManagement({ reloadKey = 0 }) {
                 </tr>
               )}
               {cars.map((car, carIdx) => (
-                <tr key={car.id}>
+                <tr
+                  key={car.id}
+                  draggable
+                  onDragStart={() => handleDragStart(carIdx)}
+                  onDragOver={(e) => handleDragOver(e, carIdx)}
+                  onDragEnd={handleDragEnd}
+                  onDrop={(e) => handleDrop(e, carIdx)}
+                  className={dragOverIdx === carIdx ? styles.dragOver : ''}
+                >
                   <td className={styles.idCell}>
                     <div className={styles.orderBtns}>
                       <button

frontend/src/components/CarManagement.module.css

@@ -111,6 +111,16 @@
   background: #fafafa;
 }
 
+.table tbody tr[draggable] {
+  cursor: grab;
+}
+
+.dragOver {
+  background: #eff6ff !important;
+  outline: 2px dashed #1a56db;
+  outline-offset: -2px;
+}
+
 .idCell {
   color: #9ca3af;
   width: 80px;

frontend/src/components/ScheduleView.jsx

@@ -224,6 +224,8 @@ export default function ScheduleView({ reloadKey = 0 }) {
             end_date: newEndDate,
             customer_name: reservation.customer_name,
             notes: reservation.notes,
+            start_period: reservation.start_period,
+            end_period: reservation.end_period,
           });
           await loadData();
         } catch (err) {