Merge pull request #7 from pdf114514/copilot/fix-morning-afternoon-specification

Fix AM/PM period loss on reservation drag-move; add drag & drop car reordering

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 {
@@ -116,11 +118,7 @@ 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]];
+  const applyReorder = async (newCars) => {
     setCars(newCars);
     try {
       await api.reorderCars(newCars.map((c) => c.id));
@@ -130,6 +128,40 @@ export default function CarManagement({ reloadKey = 0 }) {
     }
   };
 
+  const handleReorder = async (index, direction) => {
+    const swapIndex = index + direction;
+    if (swapIndex < 0 || swapIndex >= cars.length) return;
+    const newCars = [...cars];
+    [newCars[index], newCars[swapIndex]] = [newCars[swapIndex], newCars[index]];
+    await applyReorder(newCars);
+  };
+
+  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);
+    await applyReorder(newCars);
+  };
+
   return (
     <div className={styles.container}>
       <h2 className={styles.heading}>代車管理</h2>
@@ -217,7 +249,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) {