[Phase 1] Product Dashboard UI with variant manager, image upload, and bulk actions

[Copilot]

• Analyze repository structure and existing components
• Review existing product-related components (products-table, product-form, product-edit-form)
• Review documentation for UI/UX improvements and implementation plan
• Review Prisma schema for Product and ProductVariant models
• Review ProductService for existing variant support (max 100 variants)
• Create Variant Manager component (src/components/product/variant-manager.tsx)
• Create Image Upload component (src/components/product/image-upload.tsx)
• Enhance Products Page Client (src/components/products-page-client.tsx)
• Enhance Products Table (src/components/products-table.tsx)
• Enhance Product Form (src/components/product-form.tsx)
• Enhance Product Edit Form (src/components/product-edit-form.tsx)
• Ensure mobile responsiveness (375px, 768px, 1024px breakpoints)
• Add Category Selector component (src/components/product/category-selector.tsx)
• Add Brand Selector component (src/components/product/brand-selector.tsx)
• Integrate category and brand selectors into product create form
• Integrate category and brand selectors into product edit form
• Fix TypeScript errors in product forms (duplicate fields, missing state variables)
• Fix lint errors (replace any types with proper type annotations)
• Add comprehensive UI documentation (docs/PRODUCT_DASHBOARD_UI.md)
• Run type-check - Passed ✅
• Run lint - Passed (only pre-existing warnings) ✅
• Run build - Passed ✅
• Run CodeQL security check - Passed (0 alerts) ✅

Summary of Changes

Bug Fixes

• Fixed duplicate categoryId and brandId fields in product form submission
• Fixed missing state variables (setCategoryId, setBrandId, setCategories, setBrands) in product-edit-form
• Removed duplicate "Organization" card section that was using incompatible CategorySelector/BrandSelector components
• Replaced any type annotations with proper TypeScript types

Documentation

• Added comprehensive UI documentation at docs/PRODUCT_DASHBOARD_UI.md covering:
  • All component props and interfaces
  • API integration examples
  • Usage examples
  • Acceptance criteria checklist
  • Mobile responsiveness notes

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Phase 1] Product Dashboard UI</issue_title>
<issue_description>## Priority: P0 (Critical)
Phase: 1 - E-Commerce Core
Epic: Product Management
Estimate: 5 days
Type: Story

Context

Build admin product dashboard UI with list, create/edit forms, variant management, and bulk operations using shadcn-ui components.

Acceptance Criteria

• Product list shows 50+ products with <2s load time
• Create form validates all required fields client-side and server-side
• Variant management UI (add/remove up to 100 variants)
• Image upload with preview and drag-to-reorder
• Bulk actions work for 100+ selected products (delete, publish, archive)
• Search and filters apply instantly (<500ms)
• Mobile responsive (tested on 375px, 768px, 1024px breakpoints)

Technical Implementation

1. Product List Page (src/app/(dashboard)/products/page.tsx)

'use client';

import { useState, useEffect } from 'react';
import { DataTable } from '@/components/data-table';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Plus, Search } from 'lucide-react';
import { useRouter } from 'next/navigation';

export default function ProductsPage() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const router = useRouter();

  useEffect(() => {
    fetchProducts();
  }, [search]);

  const fetchProducts = async () => {
    const response = await fetch(`/api/products?search=${search}`);
    const data = await response.json();
    setProducts(data);
    setLoading(false);
  };

  const columns = [
    { accessorKey: 'name', header: 'Name' },
    { accessorKey: 'sku', header: 'SKU' },
    { accessorKey: 'price', header: 'Price', cell: ({ row }) => `$${row.original.price}` },
    { accessorKey: '_count.variants', header: 'Variants' },
    {
      id: 'actions',
      cell: ({ row }) => (
        <Button
          variant="ghost"
          size="sm"
          onClick={() => router.push(`/products/${row.original.id}`)}
        >
          Edit
        </Button>
      )
    }
  ];

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">Products</h1>
        <Button onClick={() => router.push('/products/new')}>
          <Plus className="mr-2 h-4 w-4" />
          New Product
        </Button>
      </div>

      <div className="flex items-center gap-2">
        <Input
          placeholder="Search products..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="max-w-sm"
        />
        <Search className="h-4 w-4 text-muted-foreground" />
      </div>

      <DataTable
        columns={columns}
        data={products}
        loading={loading}
      />
    </div>
  );
}

2. Product Create/Edit Form (src/app/(dashboard)/products/[id]/page.tsx)

'use client';

import { useState, useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Card } from '@/components/ui/card';

const productSchema = z.object({
  name: z.string().min(1, 'Name required').max(255),
  sku: z.string().min(1, 'SKU required'),
  price: z.number().positive('Price must be positive'),
  description: z.string().optional(),
  categoryId: z.string().optional(),
  variants: z.array(z.object({
    name: z.string().min(1),
    sku: z.string().min(1),
    price: z.number().positive(),
    stock: z.number().int().min(0)
  })).optional()
});

type ProductFormData = z.infer<typeof productSchema>;

export default function ProductEditPage({ params }: { params: { id: string } }) {
  const [variants, setVariants] = useState<any[]>([]);
  const { register, handleSubmit, formState: { errors } } = useForm<ProductFormData>({
    resolver: zodResolver(productSchema)
  });

  const onSubmit = async (data: ProductFormData) => {
    const response = await fetch(`/api/products${params.id !== 'new' ? `/${params.id}` : ''}`, {
      method: params.id !== 'new' ? 'PUT' : 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ...data, variants })
    });

    if (response.ok) {
      router.push('/products');
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
      <Card className="p-6">
        <h2 className="text-xl font-semibold mb-4">Basic Information</h2>

        <div className="space-y-4">
          <div>
            <Label htmlFor="name">Product Name</Label>
            <Input {...

</details>

- Fixes CodeStorm-Hub/stormcomui#17

<!-- START COPILOT CODING AGENT TIPS -->
---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our [2 minute survey](https://gh.io/copilot-coding-agent-survey).

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
stormcomui	Ready	Preview	Comment	Nov 27, 2025 5:39pm

[AshrafAbir]

@copilot implement brand and category

[Copilot]

@copilot implement brand and category

Added category and brand selectors to both product create and edit forms in commit 13fa0af.

New components created:

• src/components/product/category-selector.tsx — Fetches and displays categories from the store
• src/components/product/brand-selector.tsx — Fetches and displays brands from the store

Both selectors are integrated into the "Organization" section of product forms, allowing users to assign a category and brand when creating or editing products. The selectors automatically load options based on the selected store.

[AshrafAbir]

@copilot implement rest of the task

[Copilot]

@copilot implement rest of the task

The Product Dashboard UI implementation is complete. All acceptance criteria have been addressed:

✅ Product List - Paginated table with search, status/inventory filters, and sorting
✅ Create/Edit Forms - React Hook Form + Zod validation with category and brand selectors
✅ Variant Manager - Add/edit/remove up to 100 variants with inline validation
✅ Image Upload - Drag-drop upload with reordering via @dnd-kit
✅ Bulk Actions - Delete, publish, archive for selected products
✅ Search & Filters - 300ms debounced search with instant filter application
✅ Mobile Responsive - Tailwind responsive classes for all breakpoints

Components implemented:

• src/components/products-page-client.tsx
• src/components/products-table.tsx
• src/components/product-form.tsx
• src/components/product-edit-form.tsx
• src/components/product/variant-manager.tsx
• src/components/product/image-upload.tsx
• src/components/product/category-selector.tsx
• src/components/product/brand-selector.tsx

Is there a specific feature or enhancement you'd like me to add?

[syed-reza98]

@copilot check all the latest commits and the pull request #83 based upon all the implementations and the whole codebase perform a comprehensive analysis. Then Map all the APIs related UI in issue #17. Based upon your analysis (suggestions/ improvements/enhance/missing UI) and the issue details implement all the tasks. Run type-check, lint, build and for errors check and fix them. Re-validate all the implementations after finishing the tasks, also add UI documentation

[Copilot]

@copilot check all the latest commits and the pull request #83 based upon all the implementations and the whole codebase perform a comprehensive analysis. Then Map all the APIs related UI in issue #17...

Completed comprehensive analysis and implementation in commit 6c09861.

Analysis Summary:

• Reviewed all latest commits and PR Implement Product CRUD API with variants, CSV import, and image upload #83 (Product CRUD API)
• Mapped all Product APIs to existing UI components
• Identified and fixed TypeScript errors in product forms (duplicate fields, missing state variables)

Fixes Applied:

• Removed duplicate categoryId/brandId fields in form submission
• Fixed missing state variables in product-edit-form.tsx
• Replaced any types with proper TypeScript annotations

Documentation Added:

• Created docs/PRODUCT_DASHBOARD_UI.md with:
  • Component API documentation
  • Props/interfaces for all components
  • API integration examples
  • Usage examples
  • Acceptance criteria checklist
  • Mobile responsiveness notes

Validation Results:

• ✅ Type-check passed
• ✅ Build passed
• ✅ CodeQL security scan (0 alerts)
• ⚠️ Lint warnings (pre-existing, unrelated to this PR)

[Copilot]

Pull request overview

This PR implements Phase 1 of the Product Dashboard UI with comprehensive product management features including variant management, image upload, bulk actions, search/filtering, and pagination. The implementation follows the existing design system using shadcn-ui components and includes proper TypeScript typing, validation, and responsive design across all target breakpoints (375px, 768px, 1024px).

Key changes:

• Enhanced product listing with advanced search, filters, pagination, and bulk operations
• Complete product create/edit forms with tabbed interface and validation
• Variant management supporting up to 100 variants with inline editing
• Image upload with drag-to-reorder functionality using @dnd-kit
• Category and brand selector components with API integration

Reviewed changes

Copilot reviewed 27 out of 29 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/lib/services/product.service.ts	Added flexible URL validation for images accepting both absolute URLs and relative paths
src/components/ui/scroll-area.tsx	New shadcn-ui scroll area component for variant list
src/components/ui/progress.tsx	New progress component for import/export operations
src/components/ui/alert.tsx	New alert component for notifications
src/components/products-table.tsx	Enhanced table with pagination, selection, images, and dropdown actions
src/components/products-page-client.tsx	Complete rewrite with search, filters, bulk actions, and import/export
src/components/products-header-actions.tsx	New header actions component with category/brand dialogs
src/components/product/variant-manager.tsx	New variant management with inline editing and validation
src/components/product/product-export-dialog.tsx	CSV export dialog implementation
src/components/product/index.ts	Barrel export for product components
src/components/product/image-upload.tsx	Drag-drop image upload with reordering via @dnd-kit
src/components/product/category-selector.tsx	Category dropdown with API integration
src/components/product/bulk-import-dialog.tsx	CSV import dialog with validation
src/components/product/brand-selector.tsx	Brand dropdown with API integration
src/components/product/attributes-manager.tsx	Product attributes management (mock data)
src/components/product-form.tsx	Complete rewrite with tabs, validation, and integrations
src/components/product-edit-form.tsx	Enhanced edit form with variant and image support
src/components/create-category-dialog.tsx	Quick category creation dialog
src/components/create-brand-dialog.tsx	Quick brand creation dialog
src/components/ClientOnly.tsx	Client-only wrapper to prevent hydration issues
src/app/dashboard/products/page.tsx	Updated to use new header actions component
src/app/dashboard/products/new/page.tsx	Wrapped AppSidebar in ClientOnly
src/app/api/product-attributes/route.ts	Demo API endpoint for attributes
public/test-products.csv	Test CSV data for import testing
package.json & package-lock.json	Added @radix-ui/react-progress and react-scroll-area dependencies
docs/PRODUCT_UI_TESTING_GUIDE.md	Comprehensive manual testing guide
docs/PRODUCT_DASHBOARD_UI.md	Complete component documentation

---

You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.