ClientProject #3135
open[FE] Auto parts ui and api integration
100%
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.
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.
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.
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.
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.
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.
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.
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.
Updated by Md.Sajib Ahmed 7 months ago
- Status changed from In Progress to Complete