Admin AI Tools page: unified design system styling, provider selector with OpenAI turd emoji, free-text model input with exact ID warning

src/components/admin/OrderPickupAction.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { useState } from "react";
+import { useRouter } from "next/navigation";
 import { markPickupComplete } from "@/actions/pickup";
 
-type Props = {
+type OrderPickupActionProps = {
   orderId: string;
   brandId: string | null;
   currentlyPickedUp: boolean;
@@ -13,51 +14,33 @@ export default function OrderPickupAction({
   orderId,
   brandId,
   currentlyPickedUp,
-}: Props) {
-  const [pickingUp, setPickingUp] = useState(false);
-  const [toast, setToast] = useState<{ type: "success" | "error"; msg: string } | null>(null);
+}: OrderPickupActionProps) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [done, setDone] = useState(false);
 
-  async function handlePickup() {
-    setPickingUp(true);
+  async function handleMarkPickup() {
+    if (currentlyPickedUp) return;
+    setLoading(true);
     const result = await markPickupComplete(orderId, brandId);
-    setPickingUp(false);
+    setLoading(false);
     if (result.success) {
-      setToast({ type: "success", msg: "Order marked as picked up." });
-      setTimeout(() => window.location.reload(), 1200);
-    } else {
-      setToast({ type: "error", msg: result.error ?? "Failed to mark picked up." });
+      setDone(true);
+      router.refresh();
     }
   }
 
-  if (currentlyPickedUp) {
-    return (
-      <span className="inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-sm font-semibold text-green-700">
-        <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-        </svg>
-        Picked Up
-      </span>
-    );
+  if (currentlyPickedUp || done) {
+    return null;
   }
 
   return (
-    <div className="flex flex-col items-start gap-2">
-      <button
-        onClick={handlePickup}
-        disabled={pickingUp}
-        className="rounded-xl bg-green-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-green-700 disabled:opacity-50"
-      >
-        {pickingUp ? "Marking..." : "Mark Picked Up"}
-      </button>
-      {toast && (
-        <div
-          className={`rounded-lg px-3 py-2 text-sm font-medium ${
-            toast.type === "success" ? "bg-green-50 text-green-700" : "bg-red-50 text-red-700"
-          }`}
-        >
-          {toast.msg}
-        </div>
-      )}
-    </div>
+    <button
+      onClick={handleMarkPickup}
+      disabled={loading}
+      className="rounded-xl bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700 disabled:opacity-50"
+    >
+      {loading ? "Marking..." : "✓ Mark Picked Up"}
+    </button>
   );
 }