Changes before error encountered

Co-authored-by: h <57948770+h@users.noreply.github.com>
Agent-Logs-Url: https://github.com/h/CarReservation/sessions/a42d4e36-a3cf-4ff7-b1cb-f076e601b1b8

backend/server.js

@@ -64,28 +64,14 @@ if (!carCols.includes('has_etc')) {
 if (!carCols.includes('tire_type')) {
   db.exec("ALTER TABLE cars ADD COLUMN tire_type TEXT DEFAULT 'ノーマル'");
 }
-if (!carCols.includes('sort_order')) {
-  db.exec('ALTER TABLE cars ADD COLUMN sort_order INTEGER DEFAULT 0');
-  db.exec('UPDATE cars SET sort_order = id');
-}
-db.prepare("UPDATE cars SET tire_type = 'スタッドレス' WHERE tire_type = 'スタットレス'").run();
-
-// Migrate: add period fields to reservations if they don't exist yet
-const resCols = db.prepare("PRAGMA table_info(reservations)").all().map((c) => c.name);
-if (!resCols.includes('start_period')) {
-  db.exec("ALTER TABLE reservations ADD COLUMN start_period TEXT DEFAULT ''");
-}
-if (!resCols.includes('end_period')) {
-  db.exec("ALTER TABLE reservations ADD COLUMN end_period TEXT DEFAULT ''");
-}
 
 // Seed some initial cars if none exist
 const carCount = db.prepare('SELECT COUNT(*) as cnt FROM cars').get();
 if (carCount.cnt === 0) {
-  const insertCar = db.prepare('INSERT INTO cars (name, description, sort_order) VALUES (?, ?, ?)');
+  const insertCar = db.prepare('INSERT INTO cars (name, description) VALUES (?, ?)');
-  insertCar.run('代車 A', '', 1);
+  insertCar.run('代車 A', '');
-  insertCar.run('代車 B', '', 2);
+  insertCar.run('代車 B', '');
-  insertCar.run('代車 C', '', 3);
+  insertCar.run('代車 C', '');
 }
 
 // --- WebSocket Server ---
@@ -100,27 +86,13 @@ function broadcast(message) {
   });
 }
 
-function normalizeTireType(value) {
-  return value === 'スタットレス' ? 'スタッドレス' : value;
-}
-
-function normalizeCar(car) {
-  if (!car) {
-    return car;
-  }
-  return {
-    ...car,
-    tire_type: normalizeTireType(car.tire_type),
-  };
-}
-
 wss.on('connection', (ws) => {
   ws.on('error', () => {}); // suppress unhandled error events
 });
 
 // --- Cars API ---
 app.get('/api/cars', (req, res) => {
-  const cars = db.prepare('SELECT * FROM cars ORDER BY sort_order, id').all().map(normalizeCar);
+  const cars = db.prepare('SELECT * FROM cars ORDER BY id').all();
   res.json(cars);
 });
 
@@ -129,31 +101,14 @@ app.post('/api/cars', (req, res) => {
   if (!name || !name.trim()) {
     return res.status(400).json({ error: '車名は必須です' });
   }
-  const maxOrder = db.prepare('SELECT MAX(sort_order) as m FROM cars').get().m ?? 0;
   const result = db.prepare(
-    'INSERT INTO cars (name, description, inspection_expiry, has_etc, tire_type, sort_order) VALUES (?, ?, ?, ?, ?, ?)'
+    'INSERT INTO cars (name, description, inspection_expiry, has_etc, tire_type) VALUES (?, ?, ?, ?, ?)'
-  ).run(name.trim(), description, inspection_expiry, has_etc ? 1 : 0, tire_type, maxOrder + 1);
+  ).run(name.trim(), description, inspection_expiry, has_etc ? 1 : 0, tire_type);
-  const car = normalizeCar(db.prepare('SELECT * FROM cars WHERE id = ?').get(result.lastInsertRowid));
+  const car = db.prepare('SELECT * FROM cars WHERE id = ?').get(result.lastInsertRowid);
   broadcast({ type: 'data_changed', entity: 'cars' });
   res.status(201).json(car);
 });
 
-app.put('/api/cars/reorder', (req, res) => {
-  const { ids } = req.body;
-  if (!Array.isArray(ids) || ids.length === 0) {
-    return res.status(400).json({ error: 'ids は配列で指定してください' });
-  }
-  const updateOrder = db.prepare('UPDATE cars SET sort_order = ? WHERE id = ?');
-  const transaction = db.transaction((orderedIds) => {
-    orderedIds.forEach((id, index) => {
-      updateOrder.run(index + 1, id);
-    });
-  });
-  transaction(ids);
-  broadcast({ type: 'data_changed', entity: 'cars' });
-  res.json({ success: true });
-});
-
 app.put('/api/cars/:id', (req, res) => {
   const { name, description, inspection_expiry, has_etc, tire_type } = req.body;
   if (!name || !name.trim()) {
@@ -165,7 +120,7 @@ app.put('/api/cars/:id', (req, res) => {
   if (result.changes === 0) {
     return res.status(404).json({ error: '車が見つかりません' });
   }
-  const car = normalizeCar(db.prepare('SELECT * FROM cars WHERE id = ?').get(req.params.id));
+  const car = db.prepare('SELECT * FROM cars WHERE id = ?').get(req.params.id);
   broadcast({ type: 'data_changed', entity: 'cars' });
   res.json(car);
 });
@@ -186,7 +141,7 @@ app.get('/api/reservations', (req, res) => {
 });
 
 app.post('/api/reservations', (req, res) => {
-  const { car_id, start_date, end_date, customer_name = '', notes = '', start_period = '', end_period = '' } = req.body;
+  const { car_id, start_date, end_date, customer_name = '', notes = '' } = req.body;
   if (!car_id || !start_date || !end_date) {
     return res.status(400).json({ error: 'car_id, start_date, end_date は必須です' });
   }
@@ -194,15 +149,15 @@ app.post('/api/reservations', (req, res) => {
     return res.status(400).json({ error: '開始日は終了日以前である必要があります' });
   }
   const result = db.prepare(
-    'INSERT INTO reservations (car_id, start_date, end_date, customer_name, notes, start_period, end_period) VALUES (?, ?, ?, ?, ?, ?, ?)'
+    'INSERT INTO reservations (car_id, start_date, end_date, customer_name, notes) VALUES (?, ?, ?, ?, ?)'
-  ).run(car_id, start_date, end_date, customer_name, notes, start_period, end_period);
+  ).run(car_id, start_date, end_date, customer_name, notes);
   const reservation = db.prepare('SELECT * FROM reservations WHERE id = ?').get(result.lastInsertRowid);
   broadcast({ type: 'data_changed', entity: 'reservations' });
   res.status(201).json(reservation);
 });
 
 app.put('/api/reservations/:id', (req, res) => {
-  const { car_id, start_date, end_date, customer_name, notes, start_period, end_period } = req.body;
+  const { car_id, start_date, end_date, customer_name, notes } = req.body;
   if (!car_id || !start_date || !end_date) {
     return res.status(400).json({ error: 'car_id, start_date, end_date は必須です' });
   }
@@ -210,8 +165,8 @@ app.put('/api/reservations/:id', (req, res) => {
     return res.status(400).json({ error: '開始日は終了日以前である必要があります' });
   }
   const result = db.prepare(
-    'UPDATE reservations SET car_id = ?, start_date = ?, end_date = ?, customer_name = ?, notes = ?, start_period = ?, end_period = ? WHERE id = ?'
+    'UPDATE reservations SET car_id = ?, start_date = ?, end_date = ?, customer_name = ?, notes = ? WHERE id = ?'
-  ).run(car_id, start_date, end_date, customer_name ?? '', notes ?? '', start_period ?? '', end_period ?? '', req.params.id);
+  ).run(car_id, start_date, end_date, customer_name ?? '', notes ?? '', req.params.id);
   if (result.changes === 0) {
     return res.status(404).json({ error: '予約が見つかりません' });
   }

car-login.html

@@ -1,112 +0,0 @@
-<!DOCTYPE html> <!-- Gemini ありがとう -->
-<html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ログイン</title>
-    <style>
-        /* CSS（見た目）の設定 */
-        body {
-            font-family: 'Helvetica Neue', Arial, 'Hiragino Sans', sans-serif;
-            background-color: #f3f4f6;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-        }
-        .login-box {
-            background-color: #ffffff;
-            padding: 40px;
-            border-radius: 8px;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-            width: 100%;
-            max-width: 320px;
-            text-align: center;
-        }
-        .login-box h2 {
-            margin: 0 0 20px;
-            color: #333;
-        }
-        .input-group {
-            margin-bottom: 20px;
-            text-align: left;
-        }
-        .input-group label {
-            display: block;
-            font-size: 14px;
-            color: #666;
-            margin-bottom: 8px;
-        }
-        .input-group input {
-            width: 100%;
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-            box-sizing: border-box;
-            font-size: 16px;
-        }
-        .login-btn {
-            width: 100%;
-            padding: 12px;
-            background-color: #2563eb;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            font-size: 16px;
-            cursor: pointer;
-            transition: background-color 0.2s;
-        }
-        .login-btn:hover {
-            background-color: #1d4ed8;
-        }
-        .error-msg {
-            color: #ef4444;
-            font-size: 14px;
-            margin-top: 15px;
-            display: none; /* 初期状態は隠しておく */
-        }
-    </style>
-</head>
-<body>
-
-<div class="login-box">
-    <h2>システムログイン</h2>
-    <form id="loginForm">
-        <div class="input-group">
-            <label for="password">パスワード</label>
-            <input type="password" id="password" required placeholder="パスワードを入力">
-        </div>
-        <button type="submit" class="login-btn">ログイン</button>
-        <div id="errorMsg" class="error-msg">パスワードが違います</div>
-    </form>
-</div>
-
-<script>
-    // 【おまけのUX向上】
-    // もしログイン画面を開いた時点で「site_auth」クッキーが残っている場合、
-    // それは「Nginxにパスワードが違うと弾かれて戻ってきた」証拠です。
-    // エラーメッセージを出して、間違ったクッキーはお掃除しておきます。
-    if (document.cookie.includes('site_auth=')) {
-        document.getElementById('errorMsg').style.display = 'block';
-        document.cookie = "site_auth=; path=/; max-age=0"; // クッキーを削除
-    }
-
-    // フォーム送信時の処理
-    document.getElementById('loginForm').addEventListener('submit', function(e) {
-        e.preventDefault(); 
-
-        // 入力されたパスワードを取得
-        const passwordInput = document.getElementById('password').value;
-
-        // 入力値をそのままCookie（site_auth）としてセットする
-        // encodeURIComponent を挟むことで、記号などが入力されても安全にCookie化します
-        document.cookie = "site_auth=" + encodeURIComponent(passwordInput) + "; path=/; max-age=86400";
-        
-        // Nginx（トップページ）へリクエストを送る
-        window.location.href = "/";
-    });
-</script>
-
-</body>
-</html>

frontend/src/api.js

@@ -1,13 +1,8 @@
 const API_BASE = (import.meta.env.VITE_API_BASE_URL ?? '') + '/api';
 
 async function request(path, options = {}) {
-  const hasBody = options.body !== undefined;
   const res = await fetch(`${API_BASE}${path}`, {
-    credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
-    headers: {
-      ...(hasBody ? { 'Content-Type': 'application/json' } : {}),
-      ...(options.headers ?? {}),
-    },
     ...options,
   });
   if (!res.ok) {
@@ -23,7 +18,6 @@ export const api = {
   createCar: (data) => request('/cars', { method: 'POST', body: JSON.stringify(data) }),
   updateCar: (id, data) => request(`/cars/${id}`, { method: 'PUT', body: JSON.stringify(data) }),
   deleteCar: (id) => request(`/cars/${id}`, { method: 'DELETE' }),
-  reorderCars: (ids) => request('/cars/reorder', { method: 'PUT', body: JSON.stringify({ ids }) }),
 
   // Reservations
   getReservations: () => request('/reservations'),

frontend/src/components/CarManagement.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { api } from '../api.js';
 import { isInspectionExpirySoon } from '../utils/carUtils.js';
 import styles from './CarManagement.module.css';
@@ -20,8 +20,6 @@ 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 {
@@ -118,50 +116,6 @@ export default function CarManagement({ reloadKey = 0 }) {
     }
   };
 
-  const applyReorder = async (newCars) => {
-    setCars(newCars);
-    try {
-      await api.reorderCars(newCars.map((c) => c.id));
-    } catch (e) {
-      setError(e.message);
-      await loadCars();
-    }
-  };
-
-  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>
@@ -215,7 +169,7 @@ export default function CarManagement({ reloadKey = 0 }) {
                 onChange={(e) => setNewCarTire(e.target.value)}
               >
                 <option value="ノーマル">ノーマル</option>
-                <option value="スタッドレス">スタッドレス</option>
+                <option value="スタットレス">スタットレス</option>
               </select>
             </label>
             <button type="submit" className={styles.btnPrimary} disabled={submitting || !newCarName.trim()}>
@@ -233,7 +187,7 @@ export default function CarManagement({ reloadKey = 0 }) {
           <table className={styles.table}>
             <thead>
               <tr>
-                <th>順番</th>
+                <th>ID</th>
                 <th>車名</th>
                 <th>備考</th>
                 <th>車検満了日</th>
@@ -248,34 +202,9 @@ export default function CarManagement({ reloadKey = 0 }) {
                   <td colSpan={7} className={styles.empty}>代車がありません</td>
                 </tr>
               )}
-              {cars.map((car, carIdx) => (
+              {cars.map((car) => (
-                <tr
+                <tr key={car.id}>
-                  key={car.id}
+                  <td className={styles.idCell}>{car.id}</td>
-                  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
-                        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>
@@ -319,7 +248,7 @@ export default function CarManagement({ reloadKey = 0 }) {
                           onChange={(e) => setEditTire(e.target.value)}
                         >
                           <option value="ノーマル">ノーマル</option>
-                          <option value="スタッドレス">スタッドレス</option>
+                          <option value="スタットレス">スタットレス</option>
                         </select>
                       </td>
                       <td className={styles.actions}>
@@ -347,7 +276,7 @@ export default function CarManagement({ reloadKey = 0 }) {
                           : '-'}
                       </td>
                       <td>{car.has_etc ? <span className={styles.badgeEtc}>ETC</span> : 'なし'}</td>
-                      <td>{car.tire_type === 'スタッドレス' ? <span className={styles.badgeStudless}>スタッドレス</span> : 'ノーマル'}</td>
+                      <td>{car.tire_type === 'スタットレス' ? <span className={styles.badgeStudless}>スタッドレス</span> : 'ノーマル'}</td>
                       <td className={styles.actions}>
                         <button className={styles.btnEdit} onClick={() => startEdit(car)}>
                           編集

frontend/src/components/CarManagement.module.css

@@ -111,46 +111,9 @@
   background: #fafafa;
 }
 
-.table tbody tr[draggable] {
-  cursor: grab;
-}
-
-.dragOver {
-  background: #eff6ff !important;
-  outline: 2px dashed #1a56db;
-  outline-offset: -2px;
-}
-
 .idCell {
   color: #9ca3af;
-  width: 80px;
+  width: 50px;
-}
-
-.orderBtns {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  align-items: center;
-}
-
-.btnOrder {
-  background: #f3f4f6;
-  border: 1px solid #d1d5db;
-  color: #374151;
-  padding: 1px 8px;
-  border-radius: 4px;
-  font-size: 10px;
-  line-height: 1.4;
-  transition: background 0.15s;
-}
-
-.btnOrder:hover:not(:disabled) {
-  background: #e5e7eb;
-}
-
-.btnOrder:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
 }
 
 .descCell {

frontend/src/components/ReservationModal.jsx

@@ -2,20 +2,12 @@ import { useState, useEffect } from 'react';
 import { format } from 'date-fns';
 import styles from './ReservationModal.module.css';
 
-const PERIOD_OPTIONS = [
-  { value: '', label: '指定なし' },
-  { value: '午前', label: '午前' },
-  { value: '午後', label: '午後' },
-];
-
 export default function ReservationModal({ cars, reservation, onSave, onDelete, onClose }) {
   const isEdit = !!reservation?.id;
 
   const [carId, setCarId] = useState('');
   const [startDate, setStartDate] = useState('');
-  const [startPeriod, setStartPeriod] = useState('');
   const [endDate, setEndDate] = useState('');
-  const [endPeriod, setEndPeriod] = useState('');
   const [customerName, setCustomerName] = useState('');
   const [notes, setNotes] = useState('');
   const [submitting, setSubmitting] = useState(false);
@@ -24,9 +16,7 @@ export default function ReservationModal({ cars, reservation, onSave, onDelete,
     if (reservation) {
       setCarId(String(reservation.car_id || (cars[0]?.id ?? '')));
       setStartDate(reservation.start_date || format(new Date(), 'yyyy-MM-dd'));
-      setStartPeriod(reservation.start_period || '');
       setEndDate(reservation.end_date || format(new Date(), 'yyyy-MM-dd'));
-      setEndPeriod(reservation.end_period || '');
       setCustomerName(reservation.customer_name || '');
       setNotes(reservation.notes || '');
     }
@@ -44,9 +34,7 @@ export default function ReservationModal({ cars, reservation, onSave, onDelete,
       await onSave({
         car_id: Number(carId),
         start_date: startDate,
-        start_period: startPeriod,
         end_date: endDate,
-        end_period: endPeriod,
         customer_name: customerName,
         notes,
       });
@@ -102,21 +90,6 @@ export default function ReservationModal({ cars, reservation, onSave, onDelete,
                 required
               />
             </div>
-            <div className={styles.field}>
-              <label className={styles.label}>開始時間帯</label>
-              <select
-                className={styles.select}
-                value={startPeriod}
-                onChange={(e) => setStartPeriod(e.target.value)}
-              >
-                {PERIOD_OPTIONS.map((o) => (
-                  <option key={o.value} value={o.value}>{o.label}</option>
-                ))}
-              </select>
-            </div>
-          </div>
-
-          <div className={styles.fieldRow}>
             <div className={styles.field}>
               <label className={styles.label}>終了日 <span className={styles.required}>*</span></label>
               <input
@@ -128,18 +101,6 @@ export default function ReservationModal({ cars, reservation, onSave, onDelete,
                 required
               />
             </div>
-            <div className={styles.field}>
-              <label className={styles.label}>終了時間帯</label>
-              <select
-                className={styles.select}
-                value={endPeriod}
-                onChange={(e) => setEndPeriod(e.target.value)}
-              >
-                {PERIOD_OPTIONS.map((o) => (
-                  <option key={o.value} value={o.value}>{o.label}</option>
-                ))}
-              </select>
-            </div>
           </div>
 
           <div className={styles.field}>

frontend/src/components/ScheduleView.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef, useCallback } from 'react';
 import { format, addDays, startOfWeek, parseISO, differenceInDays, isSameDay } from 'date-fns';
 import { ja } from 'date-fns/locale';
 import { api } from '../api.js';
-import { isInspectionExpirySoon, formatDateRange, formatReservationTooltip } from '../utils/carUtils.js';
+import { isInspectionExpirySoon } from '../utils/carUtils.js';
 import ReservationModal from './ReservationModal.jsx';
 import styles from './ScheduleView.module.css';
 
@@ -224,8 +224,6 @@ 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) {
@@ -375,6 +373,7 @@ export default function ScheduleView({ reloadKey = 0 }) {
       </div>
 
       {error && <div className={styles.error}>エラー: {error}</div>}
+      {loading && <div className={styles.loading}>読み込み中...</div>}
 
       {/* Grid */}
       <div
@@ -384,14 +383,6 @@ export default function ScheduleView({ reloadKey = 0 }) {
           // don't cancel on leave — handled by global events
         }}
       >
-        {loading && (
-          <div
-            className={styles.loadingOverlay}
-            style={{ height: HEADER_HEIGHT }}
-          >
-            読み込み中...
-          </div>
-        )}
         <div
           className={styles.grid}
           style={{ width: LABEL_WIDTH + DAYS_SHOWN * CELL_WIDTH }}
@@ -457,15 +448,10 @@ export default function ScheduleView({ reloadKey = 0 }) {
                     <span className={styles.carBadges}>
                       {car.has_etc ? <span className={styles.badgeEtc}>ETC</span> : null}
                       {car.tire_type === 'スタッドレス' ? <span className={styles.badgeStudless}>スタッドレス</span> : null}
+                      {isInspectionExpirySoon(car.inspection_expiry) ? (
+                        <span className={styles.badgeWarn} title={`車検満了日: ${car.inspection_expiry}（まもなく期限切れ）`}>車検</span>
+                      ) : null}
                     </span>
-                    {isInspectionExpirySoon(car.inspection_expiry) ? (
-                      <span
-                        className={`${styles.badgeWarn} ${styles.badgeWarnWide}`}
-                        title={`車検満了日: ${car.inspection_expiry}（まもなく期限切れ）`}
-                      >
-                        ⚠️ 車検
-                      </span>
-                    ) : null}
                   </span>
                 </div>
 
@@ -554,14 +540,14 @@ export default function ScheduleView({ reloadKey = 0 }) {
                           e.stopPropagation();
                           setContextMenu({ x: e.clientX, y: e.clientY, reservation: r });
                         }}
-                        title={formatReservationTooltip(r)}
+                        title={`${r.customer_name || '予約'}\n${r.start_date} 〜 ${r.end_date}${r.notes ? '\n' + r.notes : ''}`}
                       >
                         <span className={styles.blockText}>
                           {r.customer_name || '予約'}
                         </span>
                         {width > 80 && (
                           <span className={styles.blockDates}>
-                            {formatDateRange(r.start_date, r.start_period, r.end_date, r.end_period)}
+                            {r.start_date.slice(5)} 〜 {r.end_date.slice(5)}
                           </span>
                         )}
                       </div>

frontend/src/components/ScheduleView.module.css

@@ -74,23 +74,6 @@
   font-size: 14px;
 }
 
-.loadingOverlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 40;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #4b5563;
-  font-size: 14px;
-  font-weight: 600;
-  background: rgba(255, 255, 255, 0.92);
-  border-bottom: 2px solid #d1d5db;
-  pointer-events: none;
-}
-
 /* Grid wrapper - scrollable */
 .gridWrapper {
   flex: 1;
@@ -174,9 +157,9 @@
 .carLabel {
   flex-shrink: 0;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 8px;
-  padding: 6px 12px;
+  padding: 0 12px;
   border-right: 2px solid #d1d5db;
   background: white;
   position: sticky;
@@ -190,13 +173,12 @@
   height: 10px;
   border-radius: 50%;
   flex-shrink: 0;
-  align-self: center;
 }
 
 .carLabelContent {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 3px;
   min-width: 0;
   flex: 1;
 }
@@ -205,11 +187,9 @@
   font-size: 13px;
   font-weight: 600;
   color: #374151;
-  width: 100%;
+  white-space: nowrap;
-  white-space: normal;
+  overflow: hidden;
-  overflow-wrap: anywhere;
+  text-overflow: ellipsis;
-  word-break: break-word;
-  line-height: 1.2;
 }
 
 .carBadges {
@@ -252,13 +232,6 @@
   cursor: default;
 }
 
-.badgeWarnWide {
-  display: flex;
-  width: 108%;
-  justify-content: center;
-  box-sizing: border-box;
-}
-
 /* Cell area */
 .cellArea {
   display: flex;

frontend/src/components/TimelineView.jsx

@@ -2,7 +2,6 @@ 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 { formatDateRange, formatReservationTooltip } from '../utils/carUtils.js';
 import ReservationModal from './ReservationModal.jsx';
 import styles from './TimelineView.module.css';
 
@@ -191,17 +190,10 @@ export default function TimelineView({ reloadKey = 0 }) {
       </div>
 
       {error && <div className={styles.error}>エラー: {error}</div>}
+      {loading && <div className={styles.loading}>読み込み中...</div>}
 
       {/* Timeline grid */}
       <div className={styles.gridWrapper} ref={gridRef}>
-        {loading && (
-          <div
-            className={styles.loadingOverlay}
-            style={{ height: HEADER_HEIGHT }}
-          >
-            読み込み中...
-          </div>
-        )}
         <div className={styles.grid} style={{ width: totalWidth }}>
           {/* Sticky header: month/day labels */}
           <div className={styles.headerRow} style={{ height: HEADER_HEIGHT }}>
@@ -288,14 +280,14 @@ export default function TimelineView({ reloadKey = 0 }) {
                       e.stopPropagation();
                       setContextMenu({ x: e.clientX, y: e.clientY, reservation: r });
                     }}
-                    title={formatReservationTooltip(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}>
-                        {formatDateRange(r.start_date, r.start_period, r.end_date, r.end_period)}
+                        {r.start_date.slice(5)} 〜 {r.end_date.slice(5)}
                       </span>
                     )}
                   </div>

frontend/src/components/TimelineView.module.css

@@ -81,23 +81,6 @@
   font-size: 14px;
 }
 
-.loadingOverlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 40;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #4b5563;
-  font-size: 14px;
-  font-weight: 600;
-  background: rgba(255, 255, 255, 0.92);
-  border-bottom: 2px solid #d1d5db;
-  pointer-events: none;
-}
-
 /* Grid */
 .gridWrapper {
   flex: 1;

frontend/src/utils/carUtils.js

@@ -11,28 +11,3 @@ export function isInspectionExpirySoon(inspectionExpiry) {
   oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);
   return expiry <= oneMonthLater;
 }
-
-/**
- * Formats a date range with optional AM/PM periods into a display string.
- * @param {string} startDate - ISO date string (YYYY-MM-DD)
- * @param {string} startPeriod - '午前', '午後', or ''
- * @param {string} endDate - ISO date string (YYYY-MM-DD)
- * @param {string} endPeriod - '午前', '午後', or ''
- * @returns {string}
- */
-export function formatDateRange(startDate, startPeriod, endDate, endPeriod) {
-  const start = startDate.slice(5) + (startPeriod ? ' ' + startPeriod : '');
-  const end = endDate.slice(5) + (endPeriod ? ' ' + endPeriod : '');
-  return `${start} 〜 ${end}`;
-}
-
-/**
- * Formats a reservation tooltip string with full dates and optional periods.
- * @param {object} r - reservation object
- * @returns {string}
- */
-export function formatReservationTooltip(r) {
-  const start = r.start_date + (r.start_period ? ' ' + r.start_period : '');
-  const end = r.end_date + (r.end_period ? ' ' + r.end_period : '');
-  return `${r.customer_name || '予約'}\n${start} 〜 ${end}${r.notes ? '\n' + r.notes : ''}`;
-}

frontend/vite.config.js

@@ -49,7 +49,6 @@ export default defineConfig({
   plugins: [react(), wsProxyPlugin()],
   server: {
     port: 5173,
-    allowedHosts: ["car.33-4.party"],
     proxy: {
       '/api': {
         target: backendOrigin,

package.json

@@ -4,8 +4,8 @@
   "description": "代車スケジュール管理システム",
   "private": true,
   "scripts": {
-    "dev:backend": "cd backend && node server.js --port 3007",
+    "dev:backend": "cd backend && node server.js",
-    "dev:frontend": "cd frontend && npx vite --port 3006",
+    "dev:frontend": "cd frontend && npx vite",
     "dev": "concurrently \"npm run dev:backend\" \"npm run dev:frontend\"",
     "build": "cd frontend && npx vite build"
   },