Add customer and business user-product flows across dashboards.

Ship my-products / customer-products UI with gallery uploads, status controls, module gating, and related shared UI polish.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/customer/src/components/ImageCropper.tsx

@@ -0,0 +1,175 @@
+import { useCallback, useEffect, useState } from 'react'
+import Cropper, { type Area } from 'react-easy-crop'
+import { ImagePlus, X } from 'lucide-react'
+import { getCroppedImage } from '../utils/cropImage'
+import { useT } from '../i18n/useT'
+import styles from './ImageCropper.module.css'
+
+interface ImageCropperProps {
+  value: string | null
+  onChange: (value: string | null) => void
+  aspect?: number
+  outputFormat?: 'jpeg' | 'png'
+  accept?: string
+  uploadLabel?: string
+  hint?: string
+  changeLabel?: string
+}
+
+export function ImageCropper({
+  value,
+  onChange,
+  aspect = 1,
+  outputFormat = 'jpeg',
+  accept = 'image/*',
+  uploadLabel,
+  hint,
+  changeLabel,
+}: ImageCropperProps) {
+  const t = useT()
+  const resolvedUploadLabel = uploadLabel ?? t('myProducts.images.thumbnailUpload')
+  const resolvedHint = hint ?? t('myProducts.images.thumbnailHint')
+  const resolvedChangeLabel = changeLabel ?? t('myProducts.images.thumbnailChange')
+  const [imageSrc, setImageSrc] = useState<string | null>(null)
+  const [crop, setCrop] = useState({ x: 0, y: 0 })
+  const [zoom, setZoom] = useState(1)
+  const [croppedArea, setCroppedArea] = useState<Area | null>(null)
+
+  useEffect(() => {
+    setCrop({ x: 0, y: 0 })
+    setZoom(1)
+    setCroppedArea(null)
+  }, [aspect])
+
+  const onCropComplete = useCallback((_: Area, pixels: Area) => {
+    setCroppedArea(pixels)
+  }, [])
+
+  function handleFile(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0]
+    if (!file) return
+    const reader = new FileReader()
+    reader.onload = () => {
+      setImageSrc(reader.result as string)
+      setCrop({ x: 0, y: 0 })
+      setZoom(1)
+      setCroppedArea(null)
+    }
+    reader.readAsDataURL(file)
+    e.target.value = ''
+  }
+
+  async function applyCrop() {
+    if (!imageSrc || !croppedArea) return
+    const cropped = await getCroppedImage(imageSrc, croppedArea, outputFormat)
+    onChange(cropped)
+    setImageSrc(null)
+    setZoom(1)
+    setCrop({ x: 0, y: 0 })
+  }
+
+  function cancelCrop() {
+    setImageSrc(null)
+    setZoom(1)
+    setCrop({ x: 0, y: 0 })
+  }
+
+  function removeThumbnail() {
+    onChange(null)
+  }
+
+  const isPortrait = aspect < 1
+  const frameStyle: React.CSSProperties = isPortrait
+    ? {
+        aspectRatio: `${aspect}`,
+        height: 'min(480px, 65vh)',
+        width: 'auto',
+        maxWidth: '100%',
+        marginInline: 'auto',
+      }
+    : {
+        aspectRatio: String(aspect),
+        width: '100%',
+        height: 'auto',
+      }
+
+  return (
+    <div className={styles.wrapper}>
+      {value && !imageSrc && (
+        <div className={styles.preview} style={{ aspectRatio: String(aspect) }}>
+          <img src={value} alt={resolvedUploadLabel} className={styles.previewImg} />
+          <button
+            type="button"
+            className={styles.removeBtn}
+            onClick={removeThumbnail}
+            aria-label={t('myProducts.images.thumbnailRemove')}
+          >
+            <X size={16} />
+          </button>
+        </div>
+      )}
+
+      {!value && !imageSrc && (
+        <label className={styles.uploadZone} style={frameStyle}>
+          <ImagePlus size={28} />
+          <span>{resolvedUploadLabel}</span>
+          <span className={styles.hint}>{resolvedHint}</span>
+          <input type="file" accept={accept} onChange={handleFile} hidden />
+        </label>
+      )}
+
+      {imageSrc && (
+        <div className={styles.cropPanel}>
+          <div
+            className={`${styles.cropArea} ${isPortrait ? styles.cropAreaPortrait : ''}`}
+            style={frameStyle}
+          >
+            <Cropper
+              key={String(aspect)}
+              image={imageSrc}
+              crop={crop}
+              zoom={zoom}
+              aspect={aspect}
+              onCropChange={setCrop}
+              onZoomChange={setZoom}
+              onCropComplete={onCropComplete}
+            />
+          </div>
+          <div className={styles.cropControls}>
+            <label className={styles.zoomLabel}>
+              {t('myProducts.images.zoom')}
+              <input
+                type="range"
+                min={1}
+                max={3}
+                step={0.05}
+                value={zoom}
+                onChange={(e) => setZoom(Number(e.target.value))}
+              />
+            </label>
+            <div className={styles.cropActions}>
+              <button type="button" className={styles.cancelBtn} onClick={cancelCrop}>
+                {t('myProducts.cancel')}
+              </button>
+              <button
+                type="button"
+                className={styles.applyBtn}
+                onClick={() => void applyCrop()}
+                disabled={!croppedArea}
+              >
+                {t('myProducts.images.applyCrop')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {value && !imageSrc && (
+        <label className={styles.changeBtn}>
+          {resolvedChangeLabel}
+          <input type="file" accept={accept} onChange={handleFile} hidden />
+        </label>
+      )}
+    </div>
+  )
+}