Actions
ClientProject #2948
openClientProject #2748: Issue : Full Layout Implementation for Mobile, Tablet, and Desktop Responsiveness
ClientProject #2751: [FE]: Common components
ClientProject #2753: [FE] Filter section
[FE] Ui design
Start date:
08/20/2025
Due date:
08/20/2025 (about 8 months late)
% Done:
100%
Estimated time:
4:00 h
Spent time:
Description
Summary of Key Changes
Responsive Filter UI:
- Added a new responsive filter search component (FilterSearch) with a grid of comboboxes and a filter toggle button.
- The filter supports expanding/collapsing to show more/less options, and adapts to screen size (2 columns on mobile, 4 on desktop).
New UI Components:
- Added Combobox (select with search), FilterCheck (checkbox), and FilterDropdown (dropdown placeholder) components under filter-search.
- Added a custom FilterIcon SVG and exported it in the icons index.
UI Library Integration:
- Integrated Radix UI's @radix-ui/react-dialog and @radix-ui/react-popover for popover/dialog functionality.
- Added cmdk for command palette/combobox UI.
- Created utility wrappers for command, dialog, and popover components in ui.
Dependencies:
- Updated package.json and pnpm-lock.yaml to include new dependencies: @radix-ui/react-dialog, @radix-ui/react-popover, cmdk, class-variance-authority, and others.
Miscellaneous:
- Added a components.json config for UI library settings and aliases.
Updated by Nazmul Hossain Shovon 8 months ago
- Status changed from In Progress to Complete
- % Done changed from 0 to 100
Updated by Nazmul Hossain Shovon 8 months ago
ref:
https://github.com/pqsjapan/frontendV1.1/commit/d34d181eb53eee77f403db23a56a920f84fe4435
Summary of changes in this commit:
- Integrated the FilterSearch UI component into the home page, placing it below the Breadcrumb.
- Adjusted layout and spacing in the home page and filter-search components for better responsiveness and alignment.
- Updated the Combobox width for improved appearance on different screen sizes.
- Modified the ProductSection container to adjust padding for consistency with the new layout.
Updated by Nazmul Hossain Shovon 8 months ago
ref:
https://github.com/pqsjapan/frontendV1.1/commit/3ffa168c966d1db49e5372048d6ac4fdfb98c8f9
Key changes:
- Adjusted spacing and UI details for the breadcrumb, filter, and product section components.
- Removed extra vertical gap in the breadcrumb/filter container and set a fixed height for the breadcrumb nav.
- Improved Combobox styling: added vertical padding to the selected value and hover effect for dropdown options.
- Added bottom margin to the filter checkbox for better spacing.
- Refactored FilterSearch: standardized combobox row height/gap, tweaked expand/collapse logic, and increased button/icon sizes for better touch targets.
- Added a small top margin to the ProductSection for improved separation from filters.
Updated by Nazmul Hossain Shovon 8 months ago
ref:
https://github.com/pqsjapan/frontendV1.1/commit/1aa7b91e1f170961e7e83211e7307788c06fdc1a
Summary of Key Changes
Added Input Field for Chassis Number/Code Filter:
- For the 7th filter (index 6, labeled "Chassis Number/Code"), replaced the Combobox component with an Input component.
- The input field allows users to enter a chassis number/code directly, instead of selecting from a dropdown.
- The new input uses a placeholder and styling consistent with the other filter fields.
Imports Updated:
- Imported the Input component from @/components/ui/Input to support the new input field.
Actions