feat(stops): add edit modal, sorting, pagination, and stats bar

- Add EditStopModal for unified add/edit stop workflow
- Enhance StopTableClient with sortable columns (date, city, location, status)
- Add stats bar showing total, active, upcoming, and draft counts
- Improve pagination with 'Showing X-Y of Z' indicator
- Add 'Today' badge for current-day stops
- Dim past stops visually
- Add Edit action to row menu with icons
- Reduce page size to 25 for better UX

src/components/admin/EditStopModal.tsx

@@ -0,0 +1,466 @@
+"use client";
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import { createStop } from "@/actions/stops/create-stop";
+import { updateStop } from "@/actions/stops/update-stop";
+import GlassModal from "@/components/admin/GlassModal";
+
+type Stop = {
+  id: string;
+  city: string;
+  state: string;
+  location: string;
+  date: string;
+  time: string;
+  address?: string | null;
+  zip?: string | null;
+  cutoff_time?: string | null;
+  active: boolean;
+  brand_id: string;
+};
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  brandId: string;
+  stop?: Stop | null;
+  onSuccess?: (stopId: string) => void;
+};
+
+/* Pin icon for the modal header */
+const PinIcon = () => (
+  <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
+    <circle cx="12" cy="10" r="3" />
+  </svg>
+);
+
+export default function EditStopModal({ isOpen, onClose, brandId, stop, onSuccess }: Props) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [city, setCity] = useState("");
+  const [stateField, setStateField] = useState("");
+  const [location, setLocation] = useState("");
+  const [date, setDate] = useState("");
+  const [time, setTime] = useState("");
+  const [address, setAddress] = useState("");
+  const [zip, setZip] = useState("");
+  const [cutoffTime, setCutoffTime] = useState("");
+  const [status, setStatus] = useState<"draft" | "active">("draft");
+
+  const cityRef = useRef<HTMLInputElement>(null);
+  const isEditing = Boolean(stop);
+
+  useEffect(() => {
+    if (isOpen) {
+      if (stop) {
+        // Edit mode - populate from existing stop
+        setCity(stop.city);
+        setStateField(stop.state);
+        setLocation(stop.location);
+        setDate(stop.date);
+        setTime(stop.time || "");
+        setAddress(stop.address ?? "");
+        setZip(stop.zip ?? "");
+        setCutoffTime(stop.cutoff_time ? stop.cutoff_time.slice(0, 16) : "");
+        setStatus(stop.active ? "active" : "draft");
+      } else {
+        // Add mode - reset form
+        setCity("");
+        setStateField("");
+        setLocation("");
+        setDate("");
+        setTime("");
+        setAddress("");
+        setZip("");
+        setCutoffTime("");
+        setStatus("draft");
+      }
+      setError(null);
+      requestAnimationFrame(() => cityRef.current?.focus());
+    }
+  }, [isOpen, stop]);
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      setError(null);
+
+      if (!city.trim() || !stateField.trim() || !location.trim() || !date) {
+        setError("City, state, location, and date are required.");
+        return;
+      }
+
+      setLoading(true);
+      try {
+        let result;
+        if (isEditing && stop) {
+          result = await updateStop(stop.id, brandId, {
+            city: city.trim(),
+            state: stateField.trim(),
+            location: location.trim(),
+            date,
+            time: time || "08:00",
+            address: address || null,
+            zip: zip || null,
+            cutoff_time: cutoffTime || null,
+            active: status === "active",
+          });
+        } else {
+          result = await createStop(brandId, {
+            city: city.trim(),
+            state: stateField.trim(),
+            location: location.trim(),
+            date,
+            time: time || "08:00",
+            address: address || undefined,
+            zip: zip || undefined,
+            cutoff_time: cutoffTime || undefined,
+            active: status === "active",
+          });
+        }
+
+        if (result.success) {
+          const newStopId = isEditing ? stop!.id : (result as { success: true; id: string }).id;
+          onSuccess?.(newStopId);
+          onClose();
+        } else {
+          setError(result.error ?? `Failed to ${isEditing ? "update" : "create"} stop`);
+        }
+      } catch {
+        setError("Network error. Please try again.");
+      } finally {
+        setLoading(false);
+      }
+    },
+    [
+      brandId,
+      city,
+      stateField,
+      location,
+      date,
+      time,
+      address,
+      zip,
+      cutoffTime,
+      status,
+      isEditing,
+      stop,
+      onSuccess,
+      onClose,
+    ]
+  );
+
+  const title = isEditing ? "Edit Stop" : "Add Stop";
+  const eyebrow = isEditing
+    ? `${stop?.city}, ${stop?.state}`
+    : "New stop on the route";
+  const submitLabel = loading
+    ? isEditing ? "Saving…" : "Creating…"
+    : isEditing
+      ? "Save Changes"
+      : status === "active"
+        ? "Create & Publish"
+        : "Save as Draft";
+
+  if (!isOpen) return null;
+
+  return (
+    <GlassModal
+      title={title}
+      eyebrow={eyebrow}
+      onClose={onClose}
+      maxWidth="max-w-xl"
+      compact
+    >
+      <form onSubmit={handleSubmit} className="space-y-3" noValidate>
+        {error && (
+          <div
+            role="alert"
+            className="flex items-start gap-2 rounded-lg px-3 py-2 text-xs text-red-700"
+            style={{ background: "rgba(220, 38, 38, 0.06)", border: "1px solid rgba(220, 38, 38, 0.15)" }}
+          >
+            <svg className="h-3.5 w-3.5 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
+              <circle cx="12" cy="12" r="10" />
+              <path d="M12 8v4M12 16h.01" strokeLinecap="round" />
+            </svg>
+            <span>{error}</span>
+          </div>
+        )}
+
+        {/* Row 1 — Where: City + State */}
+        <div className="grid grid-cols-[1fr_5.5rem] gap-3">
+          <div className="ha-field">
+            <label htmlFor="stop-city" className="ha-field-label">
+              <PinIcon />
+              <span>City</span>
+              <span className="ha-field-label-required">*</span>
+            </label>
+            <input
+              ref={cityRef}
+              id="stop-city"
+              type="text"
+              value={city}
+              onChange={(e) => setCity(e.target.value)}
+              placeholder="Denver"
+              className="ha-field-input"
+              required
+              autoComplete="address-level2"
+            />
+          </div>
+          <div className="ha-field">
+            <label htmlFor="stop-state" className="ha-field-label">
+              <span>State</span>
+              <span className="ha-field-label-required">*</span>
+            </label>
+            <input
+              id="stop-state"
+              type="text"
+              value={stateField}
+              onChange={(e) => setStateField(e.target.value.toUpperCase())}
+              placeholder="CO"
+              maxLength={2}
+              className="ha-field-input ha-field-input-mono text-center"
+              style={{ textTransform: "uppercase" }}
+              required
+              autoComplete="address-level1"
+            />
+          </div>
+        </div>
+
+        {/* Row 2 — Where at: Location (full) */}
+        <div className="ha-field">
+          <label htmlFor="stop-location" className="ha-field-label">
+            <span>Location / Venue</span>
+            <span className="ha-field-label-required">*</span>
+          </label>
+          <input
+            id="stop-location"
+            type="text"
+            value={location}
+            onChange={(e) => setLocation(e.target.value)}
+            placeholder="Whole Foods Market — Highlands"
+            className="ha-field-input"
+            required
+          />
+        </div>
+
+        {/* Row 3 — When: Date + Time */}
+        <div className="grid grid-cols-[1fr_1fr] gap-3">
+          <div className="ha-field">
+            <label htmlFor="stop-date" className="ha-field-label">
+              <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}>
+                <rect x="3" y="4" width="18" height="18" rx="2" />
+                <path d="M16 2v4M8 2v4M3 10h18" strokeLinecap="round" />
+              </svg>
+              <span>Pickup Date</span>
+              <span className="ha-field-label-required">*</span>
+            </label>
+            <input
+              id="stop-date"
+              type="date"
+              value={date}
+              onChange={(e) => setDate(e.target.value)}
+              className="ha-field-input ha-field-input-mono"
+              required
+            />
+          </div>
+          <div className="ha-field">
+            <label htmlFor="stop-time" className="ha-field-label">
+              <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}>
+                <circle cx="12" cy="12" r="10" />
+                <path d="M12 6v6l4 2" strokeLinecap="round" />
+              </svg>
+              <span>Pickup Time</span>
+            </label>
+            <input
+              id="stop-time"
+              type="time"
+              value={time}
+              onChange={(e) => setTime(e.target.value)}
+              className="ha-field-input ha-field-input-mono"
+            />
+          </div>
+        </div>
+
+        {/* Row 4 — Address + ZIP + Cutoff */}
+        <div className="grid grid-cols-[1fr_5.5rem_6.5rem] gap-3">
+          <div className="ha-field">
+            <label htmlFor="stop-address" className="ha-field-label">
+              <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}>
+                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" strokeLinejoin="round" />
+                <path d="M9 22V12h6v10" strokeLinejoin="round" />
+              </svg>
+              <span>Street Address</span>
+            </label>
+            <input
+              id="stop-address"
+              type="text"
+              value={address}
+              onChange={(e) => setAddress(e.target.value)}
+              placeholder="123 Main St"
+              className="ha-field-input"
+              autoComplete="street-address"
+            />
+          </div>
+          <div className="ha-field">
+            <label htmlFor="stop-zip" className="ha-field-label">
+              <span>ZIP</span>
+            </label>
+            <input
+              id="stop-zip"
+              type="text"
+              value={zip}
+              onChange={(e) => setZip(e.target.value)}
+              placeholder="80202"
+              maxLength={10}
+              className="ha-field-input ha-field-input-mono"
+              autoComplete="postal-code"
+            />
+          </div>
+          <div className="ha-field">
+            <label htmlFor="stop-cutoff" className="ha-field-label">
+              <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}>
+                <circle cx="12" cy="12" r="9" />
+                <path d="M12 7v5l3 2" strokeLinecap="round" />
+              </svg>
+              <span>Cutoff</span>
+            </label>
+            <input
+              id="stop-cutoff"
+              type="time"
+              value={cutoffTime}
+              onChange={(e) => setCutoffTime(e.target.value)}
+              className="ha-field-input ha-field-input-mono"
+            />
+          </div>
+        </div>
+
+        {/* Row 5 — Status: segmented control */}
+        <div className="ha-field pt-0.5">
+          <div className="flex items-center justify-between">
+            <label className="ha-field-label">
+              <span>Visibility</span>
+            </label>
+            <span className="text-[10px] text-[var(--admin-text-muted)] leading-none">
+              Draft is hidden from customers
+            </span>
+          </div>
+          <div className="ha-segment mt-1" role="radiogroup" aria-label="Stop status">
+            <button
+              type="button"
+              role="radio"
+              aria-checked={status === "draft"}
+              onClick={() => setStatus("draft")}
+              className={`ha-segment-btn ${status === "draft" ? "ha-segment-btn--active ha-segment-active-draft" : ""}`}
+            >
+              <span className="ha-segment-dot" />
+              <span>Save as Draft</span>
+            </button>
+            <button
+              type="button"
+              role="radio"
+              aria-checked={status === "active"}
+              onClick={() => setStatus("active")}
+              className={`ha-segment-btn ${status === "active" ? "ha-segment-btn--active ha-segment-active-active" : ""}`}
+            >
+              <span className="ha-segment-dot" />
+              <span>Publish Now</span>
+            </button>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="ha-modal-footer">
+          <span className="ha-modal-footer-hint">
+            <kbd>Esc</kbd>
+            to close
+          </span>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="ha-btn-ghost"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={loading}
+              className="ha-btn-primary"
+            >
+              {loading ? (
+                <>
+                  <svg className="h-3.5 w-3.5 animate-spin" viewBox="0 0 24 24" fill="none">
+                    <circle cx="12" cy="12" r="10" stroke="currentColor" strokeOpacity="0.25" strokeWidth="3" />
+                    <path d="M22 12a10 10 0 0 0-10-10" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+                  </svg>
+                  <span>{submitLabel}</span>
+                </>
+              ) : (
+                <>
+                  {isEditing ? (
+                    <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
+                      <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z" strokeLinejoin="round" />
+                      <path d="M17 21v-8H7v8M7 3v5h8" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
+                  ) : status === "active" ? (
+                    <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
+                      <path d="M5 12l5 5L20 7" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
+                  ) : (
+                    <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
+                      <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z" strokeLinejoin="round" />
+                      <path d="M17 21v-8H7v8M7 3v5h8" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
+                  )}
+                  <span>{submitLabel}</span>
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+      </form>
+    </GlassModal>
+  );
+}
+
+// Hook for easy integration
+export function useEditStopModal(brandId: string) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [editingStop, setEditingStop] = useState<{
+    id: string;
+    city: string;
+    state: string;
+    location: string;
+    date: string;
+    time: string;
+    address?: string | null;
+    zip?: string | null;
+    cutoff_time?: string | null;
+    active: boolean;
+    brand_id: string;
+  } | null>(null);
+
+  const open = useCallback((stop?: typeof editingStop) => {
+    setEditingStop(stop ?? null);
+    setIsOpen(true);
+  }, []);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+    setEditingStop(null);
+  }, []);
+
+  const Modal = useCallback(() => (
+    <EditStopModal
+      isOpen={isOpen}
+      onClose={close}
+      brandId={brandId}
+      stop={editingStop}
+    />
+  ), [isOpen, close, brandId, editingStop]);
+
+  return { open, close, Modal, editingStop };
+}