Disable touch drag & drop, warn on car delete with reservations, configure backend URL

Co-authored-by: h <57948770+h@users.noreply.github.com>
Agent-Logs-Url: https://github.com/h/CarReservation/sessions/cd194ca1-b339-4f2f-b717-31a0ba193964

backend/server.js

@@ -7,10 +7,6 @@ const path = require('path');
 const app = express();
 const PORT = process.env.PORT || 3001;
 
-// Trust the first proxy (nginx) so that express-rate-limit can correctly
-// identify clients by their real IP from the X-Forwarded-For header.
-app.set('trust proxy', 1);
-
 app.use(cors());
 app.use(express.json());
 

frontend/src/App.jsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import ScheduleView from './components/ScheduleView.jsx';
 import CarManagement from './components/CarManagement.jsx';
-import TimelineView from './components/TimelineView.jsx';
 import styles from './App.module.css';
 
 export default function App() {
@@ -18,12 +17,6 @@ export default function App() {
           >
             📅 スケジュール
           </button>
-          <button
-            className={`${styles.navBtn} ${page === 'timeline' ? styles.active : ''}`}
-            onClick={() => setPage('timeline')}
-          >
-            📊 タイムライン
-          </button>
           <button
             className={`${styles.navBtn} ${page === 'cars' ? styles.active : ''}`}
             onClick={() => setPage('cars')}
@@ -33,9 +26,7 @@ export default function App() {
         </nav>
       </header>
       <main className={styles.main}>
-        {page === 'schedule' && <ScheduleView />}
+        {page === 'schedule' ? <ScheduleView /> : <CarManagement />}
-        {page === 'timeline' && <TimelineView />}
-        {page === 'cars' && <CarManagement />}
       </main>
     </div>
   );

frontend/src/components/ScheduleView.jsx

@@ -58,10 +58,6 @@ export default function ScheduleView() {
   const [modal, setModal] = useState(null);
   // null | { mode: 'create', prefill: {...} } | { mode: 'edit', reservation: {...} }
 
-  // Context menu state (right-click on reservation)
-  const [contextMenu, setContextMenu] = useState(null);
-  // null | { x, y, reservation }
-
   const gridRef = useRef(null);
   const movingRef = useRef(null); // keeps latest moving state for event handlers
 
@@ -242,19 +238,6 @@ export default function ScheduleView() {
     };
   }, [handleGridMouseMove, handleGridMouseUp]);
 
-  // Close context menu on any click or Escape
-  useEffect(() => {
-    if (!contextMenu) return;
-    const close = () => setContextMenu(null);
-    const onKey = (e) => { if (e.key === 'Escape') close(); };
-    window.addEventListener('click', close);
-    window.addEventListener('keydown', onKey);
-    return () => {
-      window.removeEventListener('click', close);
-      window.removeEventListener('keydown', onKey);
-    };
-  }, [contextMenu]);
-
   // --- Reservation drag to move ---
   const handleReservationMouseDown = (e, reservation) => {
     e.stopPropagation();
@@ -525,11 +508,6 @@ export default function ScheduleView() {
                             setModal({ mode: 'edit', reservation: r });
                           }
                         }}
-                        onContextMenu={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          setContextMenu({ x: e.clientX, y: e.clientY, reservation: r });
-                        }}
                         title={`${r.customer_name || '予約'}\n${r.start_date} 〜 ${r.end_date}${r.notes ? '\n' + r.notes : ''}`}
                       >
                         <span className={styles.blockText}>
@@ -566,34 +544,6 @@ export default function ScheduleView() {
           onClose={() => setModal(null)}
         />
       )}
-
-      {/* Right-click context menu */}
-      {contextMenu && (
-        <div
-          className={styles.contextMenu}
-          style={{ left: contextMenu.x, top: contextMenu.y }}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <button
-            className={styles.contextMenuItem}
-            onClick={() => {
-              setModal({ mode: 'edit', reservation: contextMenu.reservation });
-              setContextMenu(null);
-            }}
-          >
-            ✏️ 編集
-          </button>
-          <button
-            className={`${styles.contextMenuItem} ${styles.contextMenuItemDelete}`}
-            onClick={async () => {
-              setContextMenu(null);
-              await handleModalDelete(contextMenu.reservation.id);
-            }}
-          >
-            🗑️ 削除
-          </button>
-        </div>
-      )}
     </div>
   );
 }

frontend/src/components/ScheduleView.module.css

@@ -268,41 +268,3 @@
   color: #6b7280;
   font-size: 14px;
 }
-
-/* Right-click context menu */
-.contextMenu {
-  position: fixed;
-  background: white;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
-  z-index: 1000;
-  min-width: 140px;
-  overflow: hidden;
-  padding: 4px 0;
-}
-
-.contextMenuItem {
-  display: block;
-  width: 100%;
-  text-align: left;
-  background: none;
-  border: none;
-  padding: 9px 16px;
-  font-size: 13px;
-  color: #374151;
-  cursor: pointer;
-  transition: background 0.1s;
-}
-
-.contextMenuItem:hover {
-  background: #f3f4f6;
-}
-
-.contextMenuItemDelete {
-  color: #dc2626;
-}
-
-.contextMenuItemDelete:hover {
-  background: #fee2e2;
-}

frontend/src/components/TimelineView.jsx

@@ -1,347 +0,0 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
-import { format, addDays, addMonths, startOfMonth, endOfMonth, parseISO, differenceInDays } from 'date-fns';
-import { ja } from 'date-fns/locale';
-import { api } from '../api.js';
-import ReservationModal from './ReservationModal.jsx';
-import styles from './TimelineView.module.css';
-
-const ROW_HEIGHT = 48; // px per reservation row
-const LABEL_WIDTH = 180; // px for reservation info column
-const HEADER_HEIGHT = 60; // px for date header
-const DAY_WIDTH = 36; // px per day column
-const BAR_PADDING = 4; // px gap between bar and row edge
-
-// Same colour palette as ScheduleView
-const COLORS = [
-  { bg: '#dbeafe', border: '#3b82f6', text: '#1e3a8a' },
-  { bg: '#dcfce7', border: '#22c55e', text: '#14532d' },
-  { bg: '#fef9c3', border: '#eab308', text: '#713f12' },
-  { bg: '#fce7f3', border: '#ec4899', text: '#831843' },
-  { bg: '#ede9fe', border: '#8b5cf6', text: '#3b0764' },
-  { bg: '#ffedd5', border: '#f97316', text: '#7c2d12' },
-  { bg: '#e0f2fe', border: '#0ea5e9', text: '#0c4a6e' },
-  { bg: '#f0fdf4', border: '#16a34a', text: '#14532d' },
-];
-
-function getColor(index) {
-  return COLORS[index % COLORS.length];
-}
-
-function dateToStr(date) {
-  return format(date, 'yyyy-MM-dd');
-}
-
-export default function TimelineView() {
-  const [cars, setCars] = useState([]);
-  const [reservations, setReservations] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const [modal, setModal] = useState(null);
-  const [contextMenu, setContextMenu] = useState(null);
-
-  // View window: show the current month by default
-  const [viewStart, setViewStart] = useState(() => startOfMonth(new Date()));
-  const [viewEnd, setViewEnd] = useState(() => endOfMonth(new Date()));
-
-  const gridRef = useRef(null);
-
-  const days = (() => {
-    const result = [];
-    let d = viewStart;
-    while (d <= viewEnd) {
-      result.push(d);
-      d = addDays(d, 1);
-    }
-    return result;
-  })();
-
-  const totalWidth = LABEL_WIDTH + days.length * DAY_WIDTH;
-  const todayStr = dateToStr(new Date());
-
-  // --- Data loading ---
-  const loadData = useCallback(async () => {
-    try {
-      setLoading(true);
-      const [carsData, resData] = await Promise.all([api.getCars(), api.getReservations()]);
-      setCars(carsData);
-      setReservations(resData);
-      setError(null);
-    } catch (e) {
-      setError(e.message);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    loadData();
-  }, [loadData]);
-
-  // Close context menu on click / Escape
-  useEffect(() => {
-    if (!contextMenu) return;
-    const close = () => setContextMenu(null);
-    const onKey = (e) => { if (e.key === 'Escape') close(); };
-    window.addEventListener('click', close);
-    window.addEventListener('keydown', onKey);
-    return () => {
-      window.removeEventListener('click', close);
-      window.removeEventListener('keydown', onKey);
-    };
-  }, [contextMenu]);
-
-  // --- Navigation ---
-  const prevMonth = () => {
-    const start = addMonths(viewStart, -1);
-    setViewStart(startOfMonth(start));
-    setViewEnd(endOfMonth(start));
-  };
-  const nextMonth = () => {
-    const start = addMonths(viewStart, 1);
-    setViewStart(startOfMonth(start));
-    setViewEnd(endOfMonth(start));
-  };
-  const goThisMonth = () => {
-    setViewStart(startOfMonth(new Date()));
-    setViewEnd(endOfMonth(new Date()));
-  };
-
-  // --- Handlers ---
-  const handleModalSave = async (data) => {
-    try {
-      if (modal.mode === 'edit') {
-        await api.updateReservation(modal.reservation.id, data);
-      } else {
-        await api.createReservation(data);
-      }
-      setModal(null);
-      await loadData();
-    } catch (e) {
-      setError(`予約の保存に失敗しました: ${e.message}`);
-    }
-  };
-
-  const handleModalDelete = async (id) => {
-    try {
-      await api.deleteReservation(id);
-      setModal(null);
-      await loadData();
-    } catch (e) {
-      setError(`予約の削除に失敗しました: ${e.message}`);
-    }
-  };
-
-  // Build car colour map
-  const carColorMap = {};
-  cars.forEach((car, i) => { carColorMap[car.id] = getColor(i); });
-
-  // Sort reservations by start_date then car
-  const sortedReservations = [...reservations].sort((a, b) => {
-    if (a.start_date !== b.start_date) return a.start_date < b.start_date ? -1 : 1;
-    return a.car_id - b.car_id;
-  });
-
-  const viewStartStr = dateToStr(viewStart);
-  const viewEndStr = dateToStr(viewEnd);
-
-  // Filter to reservations that overlap the view window
-  const visibleReservations = sortedReservations.filter(
-    (r) => r.end_date >= viewStartStr && r.start_date <= viewEndStr
-  );
-
-  function getBarLayout(r) {
-    const clampedStart = r.start_date < viewStartStr ? viewStartStr : r.start_date;
-    const clampedEnd = r.end_date > viewEndStr ? viewEndStr : r.end_date;
-    const startOffset = differenceInDays(parseISO(clampedStart), viewStart);
-    const endOffset = differenceInDays(parseISO(clampedEnd), viewStart);
-    const left = startOffset * DAY_WIDTH;
-    const width = (endOffset - startOffset + 1) * DAY_WIDTH;
-    return { left, width };
-  }
-
-  return (
-    <div className={styles.container}>
-      {/* Toolbar */}
-      <div className={styles.toolbar}>
-        <div className={styles.navGroup}>
-          <button className={styles.toolBtn} onClick={prevMonth}>‹ 前月</button>
-          <button className={styles.toolBtn} onClick={goThisMonth}>今月</button>
-          <button className={styles.toolBtn} onClick={nextMonth}>次月 ›</button>
-        </div>
-        <div className={styles.monthLabel}>
-          {format(viewStart, 'yyyy年M月', { locale: ja })}
-        </div>
-        <button
-          className={styles.addBtn}
-          disabled={cars.length === 0}
-          onClick={() =>
-            setModal({
-              mode: 'create',
-              prefill: {
-                car_id: cars[0]?.id,
-                start_date: todayStr,
-                end_date: todayStr,
-              },
-            })
-          }
-        >
-          + 予約を追加
-        </button>
-      </div>
-
-      {error && <div className={styles.error}>エラー: {error}</div>}
-      {loading && <div className={styles.loading}>読み込み中...</div>}
-
-      {/* Timeline grid */}
-      <div className={styles.gridWrapper} ref={gridRef}>
-        <div className={styles.grid} style={{ width: totalWidth }}>
-          {/* Sticky header: month/day labels */}
-          <div className={styles.headerRow} style={{ height: HEADER_HEIGHT }}>
-            {/* Corner */}
-            <div
-              className={styles.cornerCell}
-              style={{ width: LABEL_WIDTH, height: HEADER_HEIGHT }}
-            >
-              <span className={styles.cornerText}>予約一覧</span>
-            </div>
-            {/* Day columns */}
-            {days.map((date) => {
-              const ds = dateToStr(date);
-              const isToday = ds === todayStr;
-              const dow = format(date, 'E', { locale: ja });
-              const isWeekend = dow === '土' || dow === '日';
-              const isSun = dow === '日';
-              const isSat = dow === '土';
-              return (
-                <div
-                  key={ds}
-                  className={`${styles.dayHeader} ${isToday ? styles.todayHeader : ''} ${isWeekend ? styles.weekendHeader : ''}`}
-                  style={{ width: DAY_WIDTH, height: HEADER_HEIGHT }}
-                >
-                  <span className={styles.dayNum}>{format(date, 'd')}</span>
-                  <span className={`${styles.dayDow} ${isSun ? styles.sunDow : ''} ${isSat ? styles.satDow : ''}`}>{dow}</span>
-                </div>
-              );
-            })}
-          </div>
-
-          {/* Reservation rows */}
-          {visibleReservations.map((r) => {
-            const car = cars.find((c) => c.id === r.car_id);
-            const color = carColorMap[r.car_id] || COLORS[0];
-            const { left, width } = getBarLayout(r);
-
-            return (
-              <div key={r.id} className={styles.resRow} style={{ height: ROW_HEIGHT }}>
-                {/* Label: car + customer */}
-                <div
-                  className={styles.resLabel}
-                  style={{ width: LABEL_WIDTH, height: ROW_HEIGHT }}
-                >
-                  <span className={styles.carDot} style={{ background: color.border }} />
-                  <div className={styles.labelText}>
-                    <span className={styles.labelCar}>{car?.name ?? '—'}</span>
-                    <span className={styles.labelCustomer}>{r.customer_name || '(名前なし)'}</span>
-                  </div>
-                </div>
-
-                {/* Day cells (background) */}
-                <div
-                  className={styles.cellArea}
-                  style={{ width: days.length * DAY_WIDTH, height: ROW_HEIGHT, position: 'relative' }}
-                >
-                  {days.map((date) => {
-                    const ds = dateToStr(date);
-                    const isToday = ds === todayStr;
-                    const dow = format(date, 'E', { locale: ja });
-                    const isWeekend = dow === '土' || dow === '日';
-                    return (
-                      <div
-                        key={ds}
-                        className={`${styles.cell} ${isToday ? styles.todayCell : ''} ${isWeekend ? styles.weekendCell : ''}`}
-                        style={{ width: DAY_WIDTH, height: ROW_HEIGHT }}
-                      />
-                    );
-                  })}
-
-                  {/* Bar */}
-                  <div
-                    className={styles.bar}
-                    style={{
-                      left,
-                      width: width - BAR_PADDING,
-                      background: color.bg,
-                      borderColor: color.border,
-                      color: color.text,
-                    }}
-                    onClick={() => setModal({ mode: 'edit', reservation: r })}
-                    onContextMenu={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      setContextMenu({ x: e.clientX, y: e.clientY, reservation: r });
-                    }}
-                    title={`${r.customer_name || '予約'}\n${r.start_date} 〜 ${r.end_date}${r.notes ? '\n' + r.notes : ''}`}
-                  >
-                    <span className={styles.barText}>
-                      {r.customer_name || '予約'}
-                    </span>
-                    {width > 80 && (
-                      <span className={styles.barDates}>
-                        {r.start_date.slice(5)} 〜 {r.end_date.slice(5)}
-                      </span>
-                    )}
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-
-          {visibleReservations.length === 0 && !loading && (
-            <div className={styles.empty}>
-              この月には予約がありません。
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Reservation Modal */}
-      {modal && (
-        <ReservationModal
-          cars={cars}
-          reservation={modal.mode === 'edit' ? modal.reservation : modal.prefill}
-          onSave={handleModalSave}
-          onDelete={handleModalDelete}
-          onClose={() => setModal(null)}
-        />
-      )}
-
-      {/* Right-click context menu */}
-      {contextMenu && (
-        <div
-          className={styles.contextMenu}
-          style={{ left: contextMenu.x, top: contextMenu.y }}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <button
-            className={styles.contextMenuItem}
-            onClick={() => {
-              setModal({ mode: 'edit', reservation: contextMenu.reservation });
-              setContextMenu(null);
-            }}
-          >
-            ✏️ 編集
-          </button>
-          <button
-            className={`${styles.contextMenuItem} ${styles.contextMenuItemDelete}`}
-            onClick={async () => {
-              setContextMenu(null);
-              await handleModalDelete(contextMenu.reservation.id);
-            }}
-          >
-            🗑️ 削除
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}

frontend/src/components/TimelineView.module.css

@@ -1,324 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - 56px);
-  overflow: hidden;
-}
-
-.toolbar {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 20px;
-  background: white;
-  border-bottom: 1px solid #e5e7eb;
-  flex-shrink: 0;
-  flex-wrap: wrap;
-}
-
-.navGroup {
-  display: flex;
-  gap: 4px;
-}
-
-.toolBtn {
-  background: #f3f4f6;
-  border: 1.5px solid #d1d5db;
-  color: #374151;
-  padding: 6px 14px;
-  border-radius: 6px;
-  font-size: 13px;
-  font-weight: 500;
-  transition: background 0.15s;
-  cursor: pointer;
-}
-
-.toolBtn:hover {
-  background: #e5e7eb;
-}
-
-.monthLabel {
-  font-size: 15px;
-  font-weight: 700;
-  color: #111827;
-  flex: 1;
-  text-align: center;
-}
-
-.addBtn {
-  background: #1a56db;
-  color: white;
-  border: none;
-  padding: 7px 18px;
-  border-radius: 6px;
-  font-size: 13px;
-  font-weight: 600;
-  transition: background 0.15s;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.addBtn:hover {
-  background: #1447c0;
-}
-
-.addBtn:disabled {
-  background: #9ca3af;
-  cursor: not-allowed;
-}
-
-.error {
-  background: #fee2e2;
-  color: #dc2626;
-  padding: 10px 20px;
-  font-size: 14px;
-}
-
-.loading {
-  padding: 20px;
-  text-align: center;
-  color: #6b7280;
-  font-size: 14px;
-}
-
-/* Grid */
-.gridWrapper {
-  flex: 1;
-  overflow: auto;
-  position: relative;
-  user-select: none;
-}
-
-.grid {
-  position: relative;
-  min-height: 100%;
-}
-
-/* Header row */
-.headerRow {
-  display: flex;
-  position: sticky;
-  top: 0;
-  z-index: 20;
-  background: white;
-  border-bottom: 2px solid #d1d5db;
-}
-
-.cornerCell {
-  flex-shrink: 0;
-  background: #f9fafb;
-  border-right: 2px solid #d1d5db;
-  position: sticky;
-  left: 0;
-  z-index: 30;
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-}
-
-.cornerText {
-  font-size: 12px;
-  font-weight: 600;
-  color: #6b7280;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.dayHeader {
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-right: 1px solid #e5e7eb;
-  gap: 2px;
-  background: white;
-}
-
-.todayHeader {
-  background: #eff6ff;
-}
-
-.weekendHeader {
-  background: #fafafa;
-}
-
-.dayNum {
-  font-size: 13px;
-  font-weight: 700;
-  color: #111827;
-  line-height: 1;
-}
-
-.dayDow {
-  font-size: 10px;
-  color: #9ca3af;
-  line-height: 1;
-}
-
-.sunDow {
-  color: #ef4444;
-}
-
-.satDow {
-  color: #3b82f6;
-}
-
-/* Reservation rows */
-.resRow {
-  display: flex;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.resRow:hover .cellArea {
-  background: #fafafa;
-}
-
-.resLabel {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0 12px;
-  border-right: 2px solid #d1d5db;
-  background: white;
-  position: sticky;
-  left: 0;
-  z-index: 10;
-  box-shadow: 2px 0 4px rgba(0,0,0,0.04);
-}
-
-.carDot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.labelText {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.labelCar {
-  font-size: 11px;
-  color: #6b7280;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.labelCustomer {
-  font-size: 13px;
-  font-weight: 600;
-  color: #111827;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Cell area */
-.cellArea {
-  display: flex;
-  position: relative;
-  flex-shrink: 0;
-}
-
-.cell {
-  flex-shrink: 0;
-  border-right: 1px solid #f0f0f0;
-}
-
-.todayCell {
-  background: rgba(59, 130, 246, 0.06);
-}
-
-.weekendCell {
-  background: rgba(0,0,0,0.015);
-}
-
-/* Bar */
-.bar {
-  position: absolute;
-  top: 6px;
-  height: calc(100% - 12px);
-  border-radius: 6px;
-  border: 1.5px solid;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 2px 8px;
-  cursor: pointer;
-  z-index: 5;
-  overflow: hidden;
-  transition: box-shadow 0.1s;
-}
-
-.bar:hover {
-  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-  z-index: 6;
-}
-
-.barText {
-  font-size: 12px;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 1.3;
-}
-
-.barDates {
-  font-size: 10px;
-  opacity: 0.75;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 1.2;
-}
-
-.empty {
-  padding: 40px 20px;
-  text-align: center;
-  color: #6b7280;
-  font-size: 14px;
-}
-
-/* Right-click context menu */
-.contextMenu {
-  position: fixed;
-  background: white;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
-  z-index: 1000;
-  min-width: 140px;
-  overflow: hidden;
-  padding: 4px 0;
-}
-
-.contextMenuItem {
-  display: block;
-  width: 100%;
-  text-align: left;
-  background: none;
-  border: none;
-  padding: 9px 16px;
-  font-size: 13px;
-  color: #374151;
-  cursor: pointer;
-  transition: background 0.1s;
-}
-
-.contextMenuItem:hover {
-  background: #f3f4f6;
-}
-
-.contextMenuItemDelete {
-  color: #dc2626;
-}
-
-.contextMenuItemDelete:hover {
-  background: #fee2e2;
-}