# TechShop Commerce OS — Premium UI / Rich Media Redesign V3

This revision replaces the earlier utility-first UI with a dark enterprise Commerce OS design language based on the supplied dashboard/cart references.

## Major corrections

- Premium dark dashboard shell, sidebar navigation, metric cards, status indicators, icons and responsive mobile layout.
- Font Awesome icon system and Inter typography aligned to the supplied references.
- Role-aware Commerce OS dashboard for Administrator, Product Manager, Marketer, Accountant, Dispatch Rider and Customer.
- Product Manager catalogue command centre redesigned around rich catalogue workflows.
- Removed the old `Primary image URL` and `Brand logo URL` dependence from product creation.
- Real multipart product media uploads:
  - up to 12 product images per product;
  - JPEG, PNG, WebP, AVIF and GIF validation;
  - up to 4 product videos per product;
  - MP4, WebM and MOV validation;
  - random server filenames and MIME verification with Fileinfo;
  - image and video previews before submission;
  - media stored under `public/uploads/products/YYYY/MM/`;
  - database rows stored in `product_media`;
  - first image becomes `products.primary_image`;
  - product page renders gallery thumbnails and uploaded product videos.
- Product catalogue table now displays media counts, stock, GTIN/SKU, variants and status.
- Mobile sidebar and responsive dashboard behavior added.

## PHP upload configuration

For the advertised video limits, your PHP 8.4 `php.ini` must allow requests large enough for the upload. For local development use values similar to:

```ini
file_uploads = On
upload_max_filesize = 128M
post_max_size = 520M
max_file_uploads = 30
max_execution_time = 180
memory_limit = 512M
```

Restart the PHP server after changing `php.ini`.

For production, tune these values together with Nginx/Apache request limits and storage/CDN policy.

## Reference UI

The six user-supplied reference scripts are preserved under `docs/reference-ui/` so future visual work can continue to use the exact supplied interaction/design direction.