[Plan] Audit Report

[godmmt]

Aim

實作 iSunFA 審計報告揭露頁面

Preparatory work

• [x] #131
• [x] #145

靜態 UI & data interfaces & dummy data

• [x] #197
• [x] #198
• [x] #201
• [x] #282
• [x] #362
• [x] #368
• [x] #371
• [x] #380
• [x] #383
• [x] #403
• [x] #412

Components

• [ ] #199
• [x] #200
• [ ] #202
• [x] #357

Optimize

• [ ] #393

Others

• [x] #1539

Design:

• Figma - Audit Report
• Mockup (dev mode)

Functions

Sort

1. Sort by Information Year : New to Old
2. Sort by Credit Rating : AAA to CCC

Date Picker

Filter by Date of Upload

Search

search for Company

Filter icons

1. Filter by Regional : US / HK / TW
2. Filter by Information Year : show daily reports → Y/N ?

Pagination

Pagination for AuditReportList data. Pressing each button will call the API once. Every time API will return 10 datas.

[godmmt]

審計報告頁面 Mockup (dev mode)

[godmmt]

參與前端開發分工會議：會議記錄參考 #139 →(took 1 pt)

前端開發框架規劃 mindmap

---

開發流程

ref: wireframe｜mockup｜

1. 根據 mockup 區分通用 components 跟頁面自己的 components

   • 區分通用 component 是為了重用性
   • 區分頁面自己的 component 是為了方便維護，避免檔案過長；以及避免 re-render 整個頁面

2. 開始刻 component，包含 component 的 interfaces / dummy data。先開發桌面版，在沒有手機版設計稿的前提下，盡可能調整 RWD，或者先將手機版畫面隱藏一些功能以達成畫面協調

3. 補上 internationalization 文檔

4. 用 component 組成頁面，實作上資料要在 component 之間傳遞的話，可以使用 Context 方便讓 component 寫入、讀取資料

5. mock API & 寫 API 規格書

[godmmt]

took 3 hours planning (until 2024-04-19)

[godmmt]

Functions

Sort

1. Sort by Information Year : New to Old
2. Sort by Credit Rating : AAA to CCC

Date Picker

Filter by Date of Upload

Search

search for Company

Filter icons

1. Filter by Regional : US / HK / TW
2. Filter by Information Year : show daily reports → Y/N ?

Pagination

Pagination for AuditReportList data. Pressing each button will call the API once. Every time API will return 10 datas.