Update store page

app/dashboard/storefront/page.tsx

@@ -6,16 +6,31 @@ import Layout from "@/components/layout/layout";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { Save, Send, Key, MessageSquare, Shield } from "lucide-react";
+import { Save, Send, Key, MessageSquare, Shield, Globe } from "lucide-react";
 import { apiRequest } from "@/lib/storeHelper";
 import { toast, Toaster } from "sonner";
 import BroadcastDialog from "@/components/modals/broadcast-dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+const SHIPPING_REGIONS = [
+  { value: "UK", label: "United Kingdom", emoji: "🇬🇧" },
+  { value: "EU", label: "European Union", emoji: "🇪🇺" },
+  { value: "USA", label: "United States", emoji: "🇺🇸" },
+  { value: "WW", label: "Worldwide", emoji: "🌍" },
+] as const;
 
-// ✅ Define the Storefront Type
 interface Storefront {
   pgpKey: string;
   welcomeMessage: string;
   telegramToken: string;
+  shipsFrom: typeof SHIPPING_REGIONS[number]["value"];
+  shipsTo: typeof SHIPPING_REGIONS[number]["value"];
 }
 
 export default function StorefrontPage() {
@@ -24,13 +39,14 @@ export default function StorefrontPage() {
     pgpKey: "",
     welcomeMessage: "",
     telegramToken: "",
+    shipsFrom: "UK",
+    shipsTo: "WW",
   });
 
   const [broadcastOpen, setBroadcastOpen] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(true);
   const [saving, setSaving] = useState<boolean>(false);
 
-  // ✅ Fetch Storefront Data
   useEffect(() => {
     const authToken = document.cookie
       .split("; ")
@@ -140,6 +156,78 @@ export default function StorefrontPage() {
           </div>
         </div>
 
+        <div className="bg-white dark:bg-[#0F0F12] rounded-xl shadow-lg p-6 border dark:border-zinc-700">
+          <div className="flex items-center gap-3 mb-4">
+            <Globe className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-zinc-100">
+              Shipping Locations
+            </h2>
+          </div>
+          <div className="grid grid-cols-2 gap-6">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Ships From</label>
+              <Select
+                value={storefront.shipsFrom}
+                onValueChange={(value: typeof SHIPPING_REGIONS[number]["value"]) => 
+                  setStorefront(prev => ({ ...prev, shipsFrom: value }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue>
+                    {storefront.shipsFrom && (
+                      <div className="flex items-center gap-2">
+                        <span>{SHIPPING_REGIONS.find(r => r.value === storefront.shipsFrom)?.emoji}</span>
+                        <span>{SHIPPING_REGIONS.find(r => r.value === storefront.shipsFrom)?.label}</span>
+                      </div>
+                    )}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {SHIPPING_REGIONS.map((region) => (
+                    <SelectItem key={region.value} value={region.value}>
+                      <div className="flex items-center gap-2">
+                        <span>{region.emoji}</span>
+                        <span>{region.label}</span>
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Ships To</label>
+              <Select
+                value={storefront.shipsTo}
+                onValueChange={(value: typeof SHIPPING_REGIONS[number]["value"]) => 
+                  setStorefront(prev => ({ ...prev, shipsTo: value }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue>
+                    {storefront.shipsTo && (
+                      <div className="flex items-center gap-2">
+                        <span>{SHIPPING_REGIONS.find(r => r.value === storefront.shipsTo)?.emoji}</span>
+                        <span>{SHIPPING_REGIONS.find(r => r.value === storefront.shipsTo)?.label}</span>
+                      </div>
+                    )}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {SHIPPING_REGIONS.map((region) => (
+                    <SelectItem key={region.value} value={region.value}>
+                      <div className="flex items-center gap-2">
+                        <span>{region.emoji}</span>
+                        <span>{region.label}</span>
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+
         <div className="sticky bottom-6 mt-8 flex justify-between">
           <Button
             onClick={() => setBroadcastOpen(true)}