Project

General

Profile

Actions

ClientProject #3135

open

[FE] Auto parts ui and api integration

Added by Nazmul Hossain Shovon 7 months ago. Updated 7 months ago.

Status:
Complete
Priority:
High
Target version:
Start date:
09/08/2025
Due date:
09/09/2025 (about 7 months late)
% Done:

100%

Estimated time:
6:00 h
Spent time:

Description

  • Added a new route /auto-parts with a page component displaying auto parts listings.
  • Introduced AutoSection and AutoListCard components to render product cards with dummy data.
  • Implemented detailed product card layout, including specifications and an enquiry button.
  • Set up structure for future integration with real product data and pagination.
  • AutoListCard: Refactored to use new auto parts fields (e.g., parts_name, sub_ref_no, chassis_code, etc.), removed car-specific fields, and updated the table to display relevant auto parts info.
  • AutoSection: Now fetches and displays auto parts products from the new API (getAutoPartsProducts), removing dummy data and adapting pagination.
  • Types: Exported AutoPartsProductDataList for type safety in components.
  • Breadcrumb: Updated breadcrumb label from "Stock List" to "Auto Parts" for clarity.
  • Added a reusable useFetchCountries hook to centralize country fetching logic.
  • Replaced direct country fetching in EnquireModal with the new hook.
  • Introduced a new PartsInquiryForm component for auto parts inquiries, using the new hook and form validation.
  • Updated AutoListCard to show the new inquiry form and "Ask for Price!" message.
  • Replaced enquireSchema with a new enquireModalSchema for modal-specific validation.
  • Updated API route to use the new schema and removed unused Name field.
  • Refactored PartsInquiryForm to accept product props and submit them to the API.
  • Added loading state and toast notifications for form submission feedback.
  • Improved form styling and input handling for better UX.
Actions #1

Updated by Nazmul Hossain Shovon 7 months ago

  • % Done changed from 0 to 50

ref:
https://github.com/pqsjapan/frontendV1.1/commit/3ffff2035798cc3b96c84401768ec11b7a8c62c3

Summary of Key Changes:

  • Added a new route /auto-parts with a page component displaying auto parts listings.
  • Introduced AutoSection and AutoListCard components to render product cards with dummy data.
  • Implemented detailed product card layout, including specifications and an enquiry button.
  • Set up structure for future integration with real product data and pagination.
Actions #2

Updated by Nazmul Hossain Shovon 7 months ago

  • % Done changed from 50 to 90

ref:
https://github.com/pqsjapan/frontendV1.1/commit/11f5b1cb15dafc3177d56f88b6118ad55354a229

Summary of Key Changes:

  • AutoListCard: Refactored to use new auto parts fields (e.g., parts_name, sub_ref_no, chassis_code, etc.), removed car-specific fields, and updated the table to display relevant auto parts info.
  • AutoSection: Now fetches and displays auto parts products from the new API (getAutoPartsProducts), removing dummy data and adapting pagination.
  • Types: Exported AutoPartsProductDataList for type safety in components.
  • Breadcrumb: Updated breadcrumb label from "Stock List" to "Auto Parts" for clarity.
Actions #3

Updated by Nazmul Hossain Shovon 7 months ago

ref:
https://github.com/pqsjapan/frontendV1.1/commit/f768a4bbed0bc649e4cf038a1e8d18b919407b8a

Short Summary of Key Changes:

  • Added a reusable useFetchCountries hook to centralize country fetching logic.
  • Replaced direct country fetching in EnquireModal with the new hook.
  • Introduced a new PartsInquiryForm component for auto parts inquiries, using the new hook and form validation.
  • Updated AutoListCard to show the new inquiry form and "Ask for Price!" message.
Actions #4

Updated by Nazmul Hossain Shovon 7 months ago

  • % Done changed from 90 to 100

ref:
https://github.com/pqsjapan/frontendV1.1/commit/1de785d4d0a7c03c82aca267037c1d3d6c7327e7

Summary of Key Changes:

  • Replaced enquireSchema with a new enquireModalSchema for modal-specific validation.
  • Updated API route to use the new schema and removed unused Name field.
  • Refactored PartsInquiryForm to accept product props and submit them to the API.
  • Added loading state and toast notifications for form submission feedback.
  • Improved form styling and input handling for better UX.
Actions #5

Updated by Nazmul Hossain Shovon 7 months ago

  • Description updated (diff)
Actions #6

Updated by Md.Sajib Ahmed 7 months ago

I’ve reviewed the PR and provided both positive and constructive feedback. While the implementation works, I noticed some design-related issues and a few cases where coding best practices were not followed.

I’ve highlighted these points along with suggestions for improvement and best practices to follow going forward.

Here is the PR link

Actions #7

Updated by Nazmul Hossain Shovon 7 months ago

ref:
https://github.com/pqsjapan/frontendV1.1/commit/9bf12964b761fd14ae46f89139348a8f0fd0b34d

Summary of Key Changes:

  • Refactored the auto parts inquiry form logic into a dedicated modal component (PartsInquiryModal) for better separation and maintainability.
  • Moved Zod validation schema to a separate file (inquiryScehma.ts).
  • Added a new mobile info component (AutoListCardMobileInfo) for improved mobile display of auto parts card details.
  • Renamed AutoSection to ProductSection and updated imports accordingly.
  • Cleaned up unused code and props in several components for clarity and performance.
Actions #9

Updated by Nazmul Hossain Shovon 7 months ago

ref:
https://github.com/pqsjapan/frontendV1.1/commit/d65c718c385220c56ac4064cc5f3f4c45fc27941

Summary of Key Changes:

  • Enhanced responsive styles for auto parts list cards, including font sizes and widths.
  • Improved button text sizing in the inquiry form for better mobile readability.
  • Refined error handling in the inquiry modal to use axios error checks.
  • Updated product section to use proper type for product mapping.
Actions #12

Updated by Md.Sajib Ahmed 7 months ago

  • Status changed from In Progress to Complete
Actions

Also available in: Atom PDF