Add seasonal availability dates to product form modal

- Add available_from and available_until fields to ProductFormValues type
- Add date picker inputs for seasonal availability in ProductFormModal
- Wire availability dates through ProductsClient to modal initial values
- Create migration 149 for database columns (already applied)

src/components/admin/ElegantModal.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useEffect } from "react";
+
+type Props = {
+  title: string;
+  titleIcon?: React.ReactNode;
+  subtitle?: string;
+  onClose: () => void;
+  children: React.ReactNode;
+  maxWidth?: string;
+  variant?: "default" | "elegant";
+};
+
+export default function ElegantModal({ title, titleIcon, subtitle, onClose, children, maxWidth = "max-w-lg", variant = "default" }: Props) {
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+    return () => { document.body.style.overflow = ""; };
+  }, []);
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
+  }, [onClose]);
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) onClose();
+  };
+
+  const isElegant = variant === "elegant";
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 md:p-8"
+      onClick={handleBackdropClick}
+      style={{ backgroundColor: "rgba(60, 56, 37, 0.5)" }}
+    >
+      <div
+        className={`relative w-full ${maxWidth} max-h-[calc(100vh-2rem)] sm:max-h-[calc(100vh-3rem)] md:max-h-[calc(100vh-4rem)] rounded-2xl bg-white shadow-[0_25px_50px_-12px_rgba(0,0,0,0.15)] flex flex-col ${isElegant ? "border border-stone-200/60" : ""}`}
+      >
+        <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-amber-600 to-amber-500 rounded-t-2xl" />
+
+        <div className={`flex items-center justify-between px-6 sm:px-8 py-5 shrink-0 ${isElegant ? "border-b border-stone-100" : ""}`}>
+          <div className="flex items-center gap-3 min-w-0">
+            {titleIcon && (
+              <div className="flex h-8 w-8 sm:h-9 sm:w-9 items-center justify-center rounded-lg shrink-0 bg-amber-50">
+                {titleIcon}
+              </div>
+            )}
+            <div className="min-w-0">
+              {isElegant ? (
+                <h2 className="text-sm font-normal tracking-wide text-stone-500 uppercase" style={{ fontFamily: "Georgia, serif" }}>
+                  {title}
+                </h2>
+              ) : (
+                <h2 className="text-lg sm:text-xl font-semibold text-stone-800 truncate" style={{ letterSpacing: "-0.02em" }}>
+                  {title}
+                </h2>
+              )}
+              {subtitle && (
+                <p className={`mt-0.5 text-sm text-stone-400 hidden sm:block ${isElegant ? "font-normal" : ""}`}>{subtitle}</p>
+              )}
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="flex h-8 w-8 sm:h-9 sm:w-9 items-center justify-center rounded-full transition-all duration-150 shrink-0 ml-2 hover:bg-stone-100 text-stone-500"
+          >
+            <svg className="h-4 w-4 sm:h-5 sm:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="relative px-6 sm:px-8 py-6 overflow-y-auto flex-1">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/admin/ProductFormModal.tsx

@@ -32,6 +32,8 @@ export type ProductFormValues = {
   active: boolean;
   is_taxable: boolean;
   image_url: string | null;
+  available_from?: string | null;
+  available_until?: string | null;
 };
 
 const TYPE_OPTIONS: Array<{
@@ -99,6 +101,8 @@ export default function ProductFormModal({
   );
   const [active, setActive] = useState(initial?.active ?? true);
   const [isTaxable, setIsTaxable] = useState(initial?.is_taxable ?? true);
+  const [availableFrom, setAvailableFrom] = useState(initial?.available_from ? initial.available_from.split('T')[0] : "");
+  const [availableUntil, setAvailableUntil] = useState(initial?.available_until ? initial.available_until.split('T')[0] : "");
 
   // Image state
   const [imagePreview, setImagePreview] = useState<string | null>(initialImageUrl);
@@ -127,6 +131,8 @@ export default function ProductFormModal({
     setBrandId(initial?.brand_id ?? lockedBrandId ?? brands[0]?.id ?? "");
     setActive(initial?.active ?? true);
     setIsTaxable(initial?.is_taxable ?? true);
+    setAvailableFrom(initial?.available_from ? initial.available_from.split('T')[0] : "");
+    setAvailableUntil(initial?.available_until ? initial.available_until.split('T')[0] : "");
     setImagePreview(initialImageUrl);
     setImageUrl(initialImageUrl);
     setUploading(false);
@@ -211,6 +217,8 @@ export default function ProductFormModal({
       active,
       is_taxable: isTaxable,
       image_url: imageUrl,
+      available_from: availableFrom ? new Date(availableFrom).toISOString() : null,
+      available_until: availableUntil ? new Date(availableUntil).toISOString() : null,
     });
     setSaving(false);
 
@@ -611,6 +619,43 @@ export default function ProductFormModal({
                     Active products appear in the storefront. Taxable items add sales tax at checkout.
                   </p>
                 </div>
+
+                {/* Seasonal Availability */}
+                <div className="mt-6 pt-6 border-t border-stone-200/40">
+                  <span className="atelier-section-label block mb-3">Seasonal Availability</span>
+                  <p className="atelier-hint mb-4">Set when this product is available (e.g., mid-July through mid-September)</p>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <label htmlFor="atelier-available-from" className="block text-[11px] font-mono uppercase tracking-wider text-stone-500 mb-1.5">Start Date</label>
+                      <input
+                        id="atelier-available-from"
+                        type="date"
+                        value={availableFrom}
+                        onChange={(e) => setAvailableFrom(e.target.value)}
+                        className="atelier-input"
+                      />
+                    </div>
+                    <div>
+                      <label htmlFor="atelier-available-until" className="block text-[11px] font-mono uppercase tracking-wider text-stone-500 mb-1.5">End Date</label>
+                      <input
+                        id="atelier-available-until"
+                        type="date"
+                        value={availableUntil}
+                        onChange={(e) => setAvailableUntil(e.target.value)}
+                        className="atelier-input"
+                      />
+                    </div>
+                  </div>
+                  {(availableFrom || availableUntil) && (
+                    <button
+                      type="button"
+                      onClick={() => { setAvailableFrom(""); setAvailableUntil(""); }}
+                      className="mt-2 text-[11px] font-mono uppercase tracking-wider text-stone-400 hover:text-stone-600"
+                    >
+                      Clear dates
+                    </button>
+                  )}
+                </div>
               </section>
             </div>
           </div>

src/components/admin/ProductsClient.tsx

@@ -351,6 +351,8 @@ export default function ProductsClient({
                 brand_id: editingProduct.brand_id,
                 active: editingProduct.active,
                 is_taxable: editingProduct.is_taxable,
+                available_from: editingProduct.available_from ?? null,
+                available_until: editingProduct.available_until ?? null,
               }
             : undefined
         }

supabase/migrations/149_product_availability_dates.sql

@@ -0,0 +1,9 @@
+-- Add seasonal availability date fields to products table
+-- Allows products to have start/end availability dates (e.g., "Available mid-July through mid-September")
+
+ALTER TABLE products ADD COLUMN IF NOT EXISTS available_from TIMESTAMPTZ;
+ALTER TABLE products ADD COLUMN IF NOT EXISTS available_until TIMESTAMPTZ;
+
+-- Add comment for documentation
+COMMENT ON COLUMN products.available_from IS 'Start date for product availability (seasonal)';
+COMMENT ON COLUMN products.available_until IS 'End date for product availability (seasonal)';