協賛活動の進捗報告ページのフロントエンド

[nakatashingo]

対応Issue

resolve #0

概要

進捗報告ページのフロントエンド部分を作成

画面スクリーンショット等

• URL
  スクリーンショット

テスト項目

• • 協賛活動で自信が担当者として指定された協賛活動が進捗報告ページに表示されること
  • 進捗報告モーダルでのステータスの変更が反映される
  • 進捗報告モーダルでのデザインの変更が反映される
  • 領収書発行ボタン、請求書発行ボタンにより、「領収書」「請求書」が発行される
  • 手書きで領収書発行ボタン、手書きで請求書発行ボタンにより、「領収書」「請求書」が発行される
  • 企業名・代表者名が長い場合に省略され、ホバーでフル表示されること

備考

---

Summary by CodeRabbit

• New Features

  • Added a Progress Report page with a responsive activities table, selection-driven modal editor, and header actions for creating blank documents.
  • Added modal-driven edit workflow to update progress, status, sponsor-style details, and remarks with validation and save feedback.
  • Added document actions to generate/download receipts and invoices as PDFs with live preview and date/field controls.

• Improvements

  • Replaced per-item style dropdown with free-text input plus suggestions.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2633755a-94cc-41a3-98ab-129fc8a5b53a

📥 Commits

Reviewing files that changed from the base of the PR and between 435ec98 and ce657fe.

📒 Files selected for processing (1)

• view/next-project/src/components/progress-report/ProgressReportReceiptPdfModal.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• view/next-project/src/components/progress-report/ProgressReportReceiptPdfModal.tsx

---

📝 Walkthrough

Walkthrough

Adds a new progress-report feature: page, layout, activity table, modal edit flow with react-hook-form, receipt/invoice PDF modals with preview and generation, PDF/data builder utilities, form utilities/types, navigation label update, and a legacy invoice item input change.

Changes

Cohort / File(s)	Summary
Page & Layout view/next-project/src/pages/progress_report/index.tsx, view/next-project/src/components/progress-report/ProgressReportLayout.tsx	New Next.js page and layout: data fetching, selection, modal open/close, react-hook-form wiring, submit handler, and SWR revalidation.
Modal & Form Components view/next-project/src/components/progress-report/ProgressReportModal.tsx, view/next-project/src/components/progress-report/ProgressReportFieldRow.tsx, view/next-project/src/components/progress-report/ProgressReportHeader.tsx, view/next-project/src/components/progress-report/ProgressReportDocumentButtons.tsx	Add edit modal with controlled fields, form-row wrapper, header with blank-document modals, and document action buttons; includes validation banner and Controller usage.
Table & Interaction UI view/next-project/src/components/progress-report/ProgressReportTable.tsx	New responsive activities table, label mappings, sponsor-style formatting, truncation tooltips using DOM measurements, and Edit selection flow.
PDF Modals & Preview view/next-project/src/components/progress-report/ProgressReportReceiptPdfModal.tsx, view/next-project/src/components/progress-report/ProgressReportInvoicePdfModal.tsx, view/next-project/src/components/progress-report/PreviewPDF.tsx	Receipt/invoice modals with editable fields/dates, live PreviewPDF, async PDF generation with guards and error handling, and state reset on open.
PDF/Data Utilities view/next-project/src/components/progress-report/progressReportPdfUtils.ts	Builders converting SponsorshipActivity → legacy SponsorActivityView and Invoice, plus total amount calculation; filters to monetary sponsor styles and applies fallbacks/defaults.
Form/Data Utilities view/next-project/src/utils/sponsorshipActivityProgressReport.ts	Form value/types, label maps, extraction/merge helpers for sponsor-style options, default value builder, and payload creator for update requests (validates required IDs).
Legacy invoice UI change view/next-project/src/components/sponsor-activities/legacy-documents/invoice/AddBlankInvoiceModal.tsx	Replace per-item Select with free-text Input + datalist, add matching helper, and update handler to derive price from matched option.
Navigation, OpenAPI & Types view/next-project/src/constants/linkItem.tsx, openapi/openapi.yaml, view/next-project/next-env.d.ts	Rename nav parent label 渉外局 → 産学局, add 進捗報告 nav entry; change GET /sponsorstyles response schema to array of sponsorStyle; adjust next-env type import path.
Small components/util additions view/next-project/src/components/progress-report/ProgressReportDocumentButtons.tsx, .../ProgressReportFieldRow.tsx	New components exported for document buttons and form field row wrapper.

Sequence Diagram

sequenceDiagram
    participant User as User
    participant Page as ProgressReportPage
    participant API as Backend API
    participant Table as ProgressReportTable
    participant Modal as ProgressReportModal
    participant PDFModal as Receipt/Invoice Modal
    participant PDFGen as PDF generator

    User->>Page: open /progress_report
    Page->>API: fetch activities
    API-->>Page: activities
    Page->>Table: render list
    User->>Table: click Edit
    Table->>Page: onSelectActivity(id)
    Page->>API: fetch activity detail & sponsor styles
    API-->>Page: activity detail, styles
    Page->>Modal: open with activity + form defaults
    User->>Modal: edit fields / open document buttons
    Modal->>PDFModal: open receipt or invoice modal
    User->>PDFModal: set dates/fields, click download
    PDFModal->>PDFGen: create PDF (async)
    PDFGen-->>User: download file
    PDFModal-->>Modal: close on success
    User->>Modal: submit form
    Modal->>Page: onSubmit(values)
    Page->>API: update activity
    API-->>Page: update result
    Page->>Table: revalidate activities

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Poem

🐇 ポチッと押して、モーダル開くよ、
領収書と請求書、ふわりPDF。
テーブルで並べて、スタイルひらり、
バニーが跳ねて、データは整う。
みんなで祝おう、進捗の朝！ 🥕📄

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly describes the main implementation: a frontend for the sponsorship activity progress report page, which is the core focus of the changeset.
Description check	✅ Passed	The description includes the issue reference, a clear overview of the implementation, test items with specific validation criteria, and screenshots placeholder. All key template sections are present and reasonably complete.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/walt/sponsorship-progress-report-frontend

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cloudflare-workers-and-pages]

Deploying finansu with    Cloudflare Pages

Latest commit:	ce657fe
Status:	✅  Deploy successful!
Preview URL:	https://bcd6037a.finansu.pages.dev
Branch Preview URL:	https://feat-walt-sponsorship-progre.finansu.pages.dev

View logs

[devin-ai-integration]

Devin Review found 1 new potential issue.

View 13 additional findings in Devin Review.

[TkymHrt]