feat: add levee work records

frontend/src/app/levee-work/page.tsx

@@ -0,0 +1,439 @@
+'use client';
+
+import { Suspense, useEffect, useMemo, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { ChevronLeft, PencilLine, Plus, Save, Trash2 } from 'lucide-react';
+
+import Navbar from '@/components/Navbar';
+import { api } from '@/lib/api';
+import { LeveeWorkCandidate, LeveeWorkSession } from '@/types';
+
+const CURRENT_YEAR = new Date().getFullYear();
+const YEAR_KEY = 'leveeWorkYear';
+
+type FormState = {
+  date: string;
+  title: string;
+  notes: string;
+  selectedFieldIds: Set<number>;
+};
+
+const extractErrorMessage = (error: any) => {
+  const data = error?.response?.data;
+  if (!data) return '保存に失敗しました。';
+  if (typeof data.detail === 'string') return data.detail;
+  if (Array.isArray(data.year) && data.year[0]) return data.year[0];
+  if (Array.isArray(data.items) && data.items[0]) return data.items[0];
+  if (typeof data.items === 'string') return data.items;
+  return '保存に失敗しました。';
+};
+
+const getDefaultDate = (year: number) => {
+  const today = new Date();
+  if (today.getFullYear() !== year) {
+    return `${year}-01-01`;
+  }
+  const month = String(today.getMonth() + 1).padStart(2, '0');
+  const day = String(today.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
+export default function LeveeWorkPage() {
+  return (
+    <Suspense fallback={<div className="min-h-screen bg-gray-50"><Navbar /><div className="mx-auto max-w-7xl px-4 py-8 text-gray-500">読み込み中...</div></div>}>
+      <LeveeWorkPageContent />
+    </Suspense>
+  );
+}
+
+function LeveeWorkPageContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [year, setYear] = useState<number>(() => {
+    if (typeof window !== 'undefined') {
+      return parseInt(localStorage.getItem(YEAR_KEY) || String(CURRENT_YEAR), 10);
+    }
+    return CURRENT_YEAR;
+  });
+  const [sessions, setSessions] = useState<LeveeWorkSession[]>([]);
+  const [candidates, setCandidates] = useState<LeveeWorkCandidate[]>([]);
+  const [form, setForm] = useState<FormState | null>(null);
+  const [editingSessionId, setEditingSessionId] = useState<number | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [formLoading, setFormLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [openedFromQuery, setOpenedFromQuery] = useState(false);
+
+  useEffect(() => {
+    localStorage.setItem(YEAR_KEY, String(year));
+    void fetchSessions();
+    setForm(null);
+    setEditingSessionId(null);
+    setOpenedFromQuery(false);
+  }, [year]);
+
+  useEffect(() => {
+    const sessionParam = Number(searchParams.get('session') || '0') || null;
+    if (!sessionParam || openedFromQuery || sessions.length === 0) {
+      return;
+    }
+    const target = sessions.find((session) => session.id === sessionParam);
+    if (target) {
+      void openEditor(target);
+      setOpenedFromQuery(true);
+    }
+  }, [openedFromQuery, searchParams, sessions]);
+
+  const fetchSessions = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await api.get(`/levee-work/sessions/?year=${year}`);
+      setSessions(res.data);
+    } catch (e) {
+      console.error(e);
+      setError('畔塗記録の読み込みに失敗しました。');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const loadCandidates = async () => {
+    const res = await api.get(`/levee-work/candidates/?year=${year}`);
+    setCandidates(res.data);
+    return res.data as LeveeWorkCandidate[];
+  };
+
+  const startCreate = async () => {
+    setFormLoading(true);
+    setError(null);
+    try {
+      const loaded = await loadCandidates();
+      setEditingSessionId(null);
+      setForm({
+        date: getDefaultDate(year),
+        title: '水稲畔塗',
+        notes: '',
+        selectedFieldIds: new Set(loaded.filter((candidate) => candidate.selected).map((candidate) => candidate.field_id)),
+      });
+    } catch (e) {
+      console.error(e);
+      setError('候補圃場の読み込みに失敗しました。');
+    } finally {
+      setFormLoading(false);
+    }
+  };
+
+  const openEditor = async (session: LeveeWorkSession) => {
+    setFormLoading(true);
+    setError(null);
+    try {
+      const loaded = await loadCandidates();
+      const selectedIds = new Set(session.items.map((item) => item.field));
+      const fallbackSelected = loaded.filter((candidate) => candidate.selected).map((candidate) => candidate.field_id);
+      setEditingSessionId(session.id);
+      setForm({
+        date: session.date,
+        title: session.title,
+        notes: session.notes,
+        selectedFieldIds: selectedIds.size > 0 ? selectedIds : new Set(fallbackSelected),
+      });
+    } catch (e) {
+      console.error(e);
+      setError('編集用データの読み込みに失敗しました。');
+    } finally {
+      setFormLoading(false);
+    }
+  };
+
+  const handleToggleField = (fieldId: number) => {
+    if (!form) return;
+    const next = new Set(form.selectedFieldIds);
+    if (next.has(fieldId)) {
+      next.delete(fieldId);
+    } else {
+      next.add(fieldId);
+    }
+    setForm({ ...form, selectedFieldIds: next });
+  };
+
+  const handleSelectAll = () => {
+    if (!form) return;
+    setForm({
+      ...form,
+      selectedFieldIds: new Set(candidates.map((candidate) => candidate.field_id)),
+    });
+  };
+
+  const handleClearAll = () => {
+    if (!form) return;
+    setForm({ ...form, selectedFieldIds: new Set() });
+  };
+
+  const selectedCount = form?.selectedFieldIds.size ?? 0;
+
+  const selectedCandidates = useMemo(() => {
+    if (!form) return [];
+    return candidates.filter((candidate) => form.selectedFieldIds.has(candidate.field_id));
+  }, [candidates, form]);
+
+  const handleSave = async () => {
+    if (!form) return;
+    if (selectedCount === 0) {
+      setError('対象圃場を1件以上選択してください。');
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      const payload = {
+        year,
+        date: form.date,
+        title: form.title,
+        notes: form.notes,
+        items: selectedCandidates.map((candidate) => ({
+          field: candidate.field_id,
+          plan: candidate.plan_id,
+        })),
+      };
+      if (editingSessionId) {
+        await api.put(`/levee-work/sessions/${editingSessionId}/`, payload);
+      } else {
+        await api.post('/levee-work/sessions/', payload);
+      }
+      await fetchSessions();
+      await startCreate();
+    } catch (e: any) {
+      console.error(e);
+      setError(extractErrorMessage(e));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!editingSessionId) return;
+    if (!window.confirm('この畔塗記録を削除しますか？')) return;
+    setSaving(true);
+    setError(null);
+    try {
+      await api.delete(`/levee-work/sessions/${editingSessionId}/`);
+      await fetchSessions();
+      setEditingSessionId(null);
+      setForm(null);
+    } catch (e) {
+      console.error(e);
+      setError('削除に失敗しました。');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const years = Array.from({ length: 5 }, (_, i) => CURRENT_YEAR + 1 - i);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Navbar />
+      <main className="mx-auto max-w-7xl px-4 py-8">
+        <div className="mb-6 flex items-center justify-between gap-4">
+          <div className="flex items-center gap-3">
+            <button onClick={() => router.push('/workrecords')} className="text-gray-500 hover:text-gray-700">
+              <ChevronLeft className="h-5 w-5" />
+            </button>
+            <PencilLine className="h-6 w-6 text-amber-700" />
+            <h1 className="text-2xl font-bold text-gray-900">畔塗記録</h1>
+          </div>
+          <div className="flex items-center gap-3">
+            <label className="text-sm font-medium text-gray-700">年度:</label>
+            <select
+              value={year}
+              onChange={(e) => setYear(Number(e.target.value))}
+              className="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500"
+            >
+              {years.map((y) => (
+                <option key={y} value={y}>
+                  {y}年度
+                </option>
+              ))}
+            </select>
+            <button
+              onClick={() => void startCreate()}
+              className="inline-flex items-center gap-2 rounded-lg bg-amber-600 px-4 py-2 text-sm font-medium text-white hover:bg-amber-700"
+            >
+              <Plus className="h-4 w-4" />
+              新規作成
+            </button>
+          </div>
+        </div>
+
+        {error && (
+          <div className="mb-4 rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700">
+            {error}
+          </div>
+        )}
+
+        <div className="grid gap-6 lg:grid-cols-[360px_minmax(0,1fr)]">
+          <section className="overflow-hidden rounded-lg bg-white shadow-sm">
+            <div className="border-b bg-gray-50 px-4 py-3 text-sm font-medium text-gray-700">記録一覧</div>
+            {loading ? (
+              <div className="px-4 py-8 text-sm text-gray-500">読み込み中...</div>
+            ) : sessions.length === 0 ? (
+              <div className="px-4 py-8 text-sm text-gray-400">この年度の畔塗記録はまだありません。</div>
+            ) : (
+              <div className="divide-y divide-gray-100">
+                {sessions.map((session) => (
+                  <button
+                    key={session.id}
+                    onClick={() => void openEditor(session)}
+                    className={`block w-full px-4 py-4 text-left hover:bg-amber-50 ${
+                      editingSessionId === session.id ? 'bg-amber-50' : ''
+                    }`}
+                  >
+                    <div className="text-sm font-medium text-gray-900">{session.title}</div>
+                    <div className="mt-1 text-sm text-gray-600">{session.date}</div>
+                    <div className="mt-1 text-xs text-gray-500">{session.item_count}圃場</div>
+                  </button>
+                ))}
+              </div>
+            )}
+          </section>
+
+          <section className="rounded-lg bg-white shadow-sm">
+            <div className="border-b bg-gray-50 px-5 py-3 text-sm font-medium text-gray-700">
+              {editingSessionId ? '畔塗記録を編集' : '畔塗記録を作成'}
+            </div>
+
+            {!form ? (
+              <div className="px-5 py-10 text-sm text-gray-500">
+                {formLoading ? 'フォームを準備中...' : '「新規作成」または既存記録の選択で編集を始められます。'}
+              </div>
+            ) : (
+              <div className="space-y-6 px-5 py-5">
+                <div className="grid gap-4 md:grid-cols-2">
+                  <label className="block">
+                    <div className="mb-1 text-sm font-medium text-gray-700">日付</div>
+                    <input
+                      type="date"
+                      value={form.date}
+                      onChange={(e) => setForm({ ...form, date: e.target.value })}
+                      className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500"
+                    />
+                  </label>
+                  <label className="block">
+                    <div className="mb-1 text-sm font-medium text-gray-700">タイトル</div>
+                    <input
+                      type="text"
+                      value={form.title}
+                      onChange={(e) => setForm({ ...form, title: e.target.value })}
+                      className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500"
+                    />
+                  </label>
+                </div>
+
+                <label className="block">
+                  <div className="mb-1 text-sm font-medium text-gray-700">備考</div>
+                  <textarea
+                    value={form.notes}
+                    onChange={(e) => setForm({ ...form, notes: e.target.value })}
+                    rows={3}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500"
+                  />
+                </label>
+
+                <div>
+                  <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
+                    <div>
+                      <h2 className="text-sm font-medium text-gray-900">対象圃場一覧</h2>
+                      <p className="text-xs text-gray-500">{selectedCount} / {candidates.length} 圃場を選択中</p>
+                    </div>
+                    <div className="flex gap-2">
+                      <button
+                        onClick={handleSelectAll}
+                        className="rounded border border-gray-300 px-3 py-1.5 text-xs text-gray-700 hover:bg-gray-100"
+                      >
+                        全選択
+                      </button>
+                      <button
+                        onClick={handleClearAll}
+                        className="rounded border border-gray-300 px-3 py-1.5 text-xs text-gray-700 hover:bg-gray-100"
+                      >
+                        全解除
+                      </button>
+                    </div>
+                  </div>
+
+                  {formLoading ? (
+                    <div className="rounded-lg border border-dashed border-gray-300 px-4 py-8 text-sm text-gray-500">
+                      候補圃場を読み込み中...
+                    </div>
+                  ) : candidates.length === 0 ? (
+                    <div className="rounded-lg border border-dashed border-gray-300 px-4 py-8 text-sm text-gray-400">
+                      この年度の水稲作付け圃場がありません。
+                    </div>
+                  ) : (
+                    <div className="overflow-hidden rounded-lg border border-gray-200">
+                      <table className="w-full text-sm">
+                        <thead className="bg-gray-50">
+                          <tr>
+                            <th className="px-4 py-3 text-left font-medium text-gray-700">選択</th>
+                            <th className="px-4 py-3 text-left font-medium text-gray-700">圃場</th>
+                            <th className="px-4 py-3 text-left font-medium text-gray-700">面積</th>
+                            <th className="px-4 py-3 text-left font-medium text-gray-700">グループ</th>
+                            <th className="px-4 py-3 text-left font-medium text-gray-700">品種</th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-gray-100">
+                          {candidates.map((candidate) => {
+                            const checked = form.selectedFieldIds.has(candidate.field_id);
+                            return (
+                              <tr key={candidate.field_id} className={checked ? 'bg-amber-50/40' : ''}>
+                                <td className="px-4 py-3">
+                                  <input
+                                    type="checkbox"
+                                    checked={checked}
+                                    onChange={() => handleToggleField(candidate.field_id)}
+                                    className="h-4 w-4 rounded border-gray-300 text-amber-600 focus:ring-amber-500"
+                                  />
+                                </td>
+                                <td className="px-4 py-3 font-medium text-gray-900">{candidate.field_name}</td>
+                                <td className="px-4 py-3 text-gray-700">{candidate.field_area_tan}反</td>
+                                <td className="px-4 py-3 text-gray-700">{candidate.group_name || '-'}</td>
+                                <td className="px-4 py-3 text-gray-700">{candidate.variety_name || '（未設定）'}</td>
+                              </tr>
+                            );
+                          })}
+                        </tbody>
+                      </table>
+                    </div>
+                  )}
+                </div>
+
+                <div className="flex flex-wrap items-center gap-3">
+                  <button
+                    onClick={() => void handleSave()}
+                    disabled={saving || formLoading}
+                    className="inline-flex items-center gap-2 rounded-lg bg-amber-600 px-4 py-2 text-sm font-medium text-white hover:bg-amber-700 disabled:cursor-not-allowed disabled:opacity-60"
+                  >
+                    <Save className="h-4 w-4" />
+                    保存
+                  </button>
+                  {editingSessionId && (
+                    <button
+                      onClick={() => void handleDelete()}
+                      disabled={saving}
+                      className="inline-flex items-center gap-2 rounded-lg border border-red-300 px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-60"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                      削除
+                    </button>
+                  )}
+                </div>
+              </div>
+            )}
+          </section>
+        </div>
+      </main>
+    </div>
+  );
+}