#12 対応を入れました。

畔塗記録 API に total_area_tan を追加して、一覧の各記録に「圃場数 / 面積合計」が出るようにしました。あわせて、作成・編集フォームの「対象圃場一覧」にも、選択中の合計面積を表示しています。主な変更は serializers.py、tests.py、page.tsx、index.ts です。

確認できたこと:

docker compose -f docker-compose.develop.yml exec backend python manage.py test apps.levee_work OK
docker exec keinasystem_frontend npm run build OK
まだコミットはしていません。必要ならこのままコミットして push します。

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

@@ -203,6 +203,10 @@ function LeveeWorkPageContent() {
     return sortedCandidates.filter((candidate) => form.selectedFieldIds.has(candidate.field_id));
   }, [form, sortedCandidates]);
 
+  const selectedAreaTan = useMemo(() => {
+    return selectedCandidates.reduce((sum, candidate) => sum + Number(candidate.field_area_tan || '0'), 0);
+  }, [selectedCandidates]);
+
   const handleSort = (nextKey: SortKey) => {
     if (sortKey === nextKey) {
       setSortDirection((current) => (current === 'asc' ? 'desc' : 'asc'));
@@ -335,7 +339,9 @@ function LeveeWorkPageContent() {
                   >
                     <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>
+                    <div className="mt-1 text-xs text-gray-500">
+                      {session.item_count}圃場 / {Number(session.total_area_tan).toFixed(2)}反
+                    </div>
                   </button>
                 ))}
               </div>
@@ -388,7 +394,9 @@ function LeveeWorkPageContent() {
                   <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>
+                      <p className="text-xs text-gray-500">
+                        {selectedCount} / {candidates.length} 圃場を選択中 / 合計 {selectedAreaTan.toFixed(2)}反
+                      </p>
                     </div>
                     <div className="flex gap-2">
                       <button

frontend/src/types/index.ts

@@ -345,6 +345,7 @@ export interface LeveeWorkSession {
   notes: string;
   work_record_id: number | null;
   item_count: number;
+  total_area_tan: string;
   items: LeveeWorkSessionItem[];
   created_at: string;
   updated_at: string;