Skip to content

feat: implement Products List, Add Product, and Category pages - #82

Open
giorgigordiashvili wants to merge 1 commit into
Qualiora:mainfrom
giorgigordiashvili:feat/products-pages
Open

giorgigordiashvili wants to merge 1 commit into
Qualiora:mainfrom
giorgigordiashvili:feat/products-pages

Conversation

@giorgigordiashvili

Copy link
Copy Markdown

Summary

  • Products List (/pages/products/list): TanStack React Table with 18 seed products, product image + name column, SKU, category, price (formatted currency), stock, status badges (In Stock/Low Stock/Out of Stock), search by name, status filter dropdown, column sorting, pagination, row selection, and functional delete action
  • Add Product (/pages/products/add): Form with 4 card sections — General Information (title, SKU, description, category select, tags), Media (FileDropzone), Pricing (price, compare-at price), Inventory (stock, status). Uses react-hook-form + Zod validation
  • Categories (/pages/products/category): Data table with 10 seed categories, add/edit via Dialog forms, delete action, search, sort, and pagination. Full local CRUD via useState

All three pages follow existing project patterns (TanStack Table, Shadcn/ui, Zod + react-hook-form). 25 new files.

Test plan

  • Navigate via sidebar: Pages > Products > List / Add / Category
  • Products List: search, filter by status, sort columns, paginate, select rows, delete a product
  • Add Product: fill all fields, validate, submit (demo only — logs to console)
  • Categories: add a category via dialog, edit an existing one, delete one, search
  • Verify RTL layout at /ar/pages/products/list

Add three pages under Pages > Products:
- Products List: data table with 18 products, search, status filter,
  sort, pagination, row selection, and delete action
- Add Product: form with General Information, Media, Pricing, and
  Inventory cards using react-hook-form + Zod validation
- Categories: data table with 10 categories, add/edit dialogs,
  delete action, search, and sort

Uses TanStack React Table, callback-based column factories for
functional row actions, and local state for CRUD operations.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant