yuris/garage
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages 1 Wiki Activity Actions

[Supplier] Phase 3: Responsive Supplier Directory UI (/suppliers) #197

New issue
Closed
opened 2026-10-03 23:22:23 +00:00 by yuris · 0 comments
yuris commented 2026-10-03 23:22:23 +00:00
Owner
Copy link

Overview

Deliver a responsive supplier directory page at /suppliers displaying vendor contacts, category filters, last check dates, review urgency badges (>30 days overdue), and direct WhatsApp contact actions.

Principles Applied

  • principle-experience-first: Dual-mode responsive layout tailored for quick workshop operations.
  • principle-minimize-reader-load: High-contrast metadata badges and clean visual hierarchy.

Scope & Tasks

  • Implement /suppliers server page fetching suppliers with aggregate item counts and overdue check statuses.
  • Build desktop data table with search filter, category pill filters (Semua, Pelumas, Ban, Filter & Part, Kimia & Coolant, Perlu Cek (>30 Hari)).
  • Build mobile touch-friendly card list displaying contact metadata, status badges, and phone shortcuts.
  • Add direct WhatsApp action button opening https://wa.me/... with pre-filled greeting.
  • Link supplier rows to their dedicated catalog page (/suppliers/[id]).

Acceptance Criteria

  • Desktop table and mobile cards render smoothly across 1280px and 375px viewports.
  • Category filter pills and text search filter rows in real-time.
  • Suppliers with last check >30 days show distinct amber warning badge.
  • Clicking a supplier opens their catalog page.
  • pnpm verify:management passes.
### Overview Deliver a responsive supplier directory page at `/suppliers` displaying vendor contacts, category filters, last check dates, review urgency badges (>30 days overdue), and direct WhatsApp contact actions. ### Principles Applied - `principle-experience-first`: Dual-mode responsive layout tailored for quick workshop operations. - `principle-minimize-reader-load`: High-contrast metadata badges and clean visual hierarchy. ### Scope & Tasks - Implement `/suppliers` server page fetching suppliers with aggregate item counts and overdue check statuses. - Build desktop data table with search filter, category pill filters (`Semua`, `Pelumas`, `Ban`, `Filter & Part`, `Kimia & Coolant`, `Perlu Cek (>30 Hari)`). - Build mobile touch-friendly card list displaying contact metadata, status badges, and phone shortcuts. - Add direct WhatsApp action button opening `https://wa.me/...` with pre-filled greeting. - Link supplier rows to their dedicated catalog page (`/suppliers/[id]`). ### Acceptance Criteria - [x] Desktop table and mobile cards render smoothly across 1280px and 375px viewports. - [x] Category filter pills and text search filter rows in real-time. - [x] Suppliers with last check >30 days show distinct amber warning badge. - [x] Clicking a supplier opens their catalog page. - [x] `pnpm verify:management` passes.
yuris changed title from [Pemasok] Phase 3: Responsive Supplier Directory UI (/pemasok) to [Supplier] Phase 3: Responsive Supplier Directory UI (/suppliers) 2026-10-03 23:23:17 +00:00
yuris closed this issue 2026-10-04 00:12:19 +00:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
feat/remove-supplier-category-and-terms
fix/suppliers-table-single-line
feat/phase-5-batch-price-update
feat/phase-4-supplier-catalog-pricing
feat/phase-3-supplier-directory
feat/phase-2-admin-auth-nav
feat/phase-1-supplier-schema
ci/166-prune-container-images
store/services-order
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
yuris/garage#197
No description provided.