Dynamic variant builder

Build a ui, where i can add item details, keep that as a item template on save,.
Create another form where i can create variants based on the item-template data. the variant creation form should have two dropdowns(size andn color seperately), fill random values in them, and on form submission create a listing page where variants are listed.

also add a logic to generate there SKU code, after the variant creattion.
Use default shadcn ui

461d ago

I've created a complete UI for managing item templates and variants using shadcn/ui components. The application consists of three main sections:

Item Template Form: Create and save item templates with details like name, description, price, brand, and category.
Variant Creation Form: Select a saved template and create multiple variants by choosing colors and sizes. You can also add a price adjustment that will be applied to the base price.
Variant Listing: View all created variants with their SKU codes, and filter them by template, size, or color.

Key Features:

Template Management: Create and save item templates that serve as the base for variants
Multi-select Variants: Select multiple colors and sizes to generate all possible combinations at once
SKU Generation: Automatically generates unique SKU codes for each variant using the format [PRODUCT_CODE]-[COLOR_CODE][SIZE_CODE]-[RANDOM_NUMBER]
Filtering and Searching: Search variants by name or SKU, and filter by template, size, or color
Persistent Storage: All data is saved to localStorage using Zustand with the persist middleware

The UI is fully responsive and uses shadcn/ui components throughout for a consistent look and feel. The state management is handled by Zustand, making it easy to share data between components.

To use this application, simply navigate through the tabs to create templates, generate variants, and view the listing.

461d ago

also add a logic to generate there SKU code, after the variant creattion.
Use default shadcn ui

461d ago

I've created a complete UI for managing item templates and variants using shadcn/ui components. The application consists of three main sections:

Item Template Form: Create and save item templates with details like name, description, price, brand, and category.
Variant Creation Form: Select a saved template and create multiple variants by choosing colors and sizes. You can also add a price adjustment that will be applied to the base price.
Variant Listing: View all created variants with their SKU codes, and filter them by template, size, or color.

Key Features:

Template Management: Create and save item templates that serve as the base for variants
Multi-select Variants: Select multiple colors and sizes to generate all possible combinations at once
SKU Generation: Automatically generates unique SKU codes for each variant using the format [PRODUCT_CODE]-[COLOR_CODE][SIZE_CODE]-[RANDOM_NUMBER]
Filtering and Searching: Search variants by name or SKU, and filter by template, size, or color
Persistent Storage: All data is saved to localStorage using Zustand with the persist middleware

The UI is fully responsive and uses shadcn/ui components throughout for a consistent look and feel. The state management is handled by Zustand, making it easy to share data between components.

To use this application, simply navigate through the tabs to create templates, generate variants, and view the listing.