From 3deeda407548843e6fdf5772d54f7b6020444e07 Mon Sep 17 00:00:00 2001
From: NotII <46204250+NotII@users.noreply.github.com>
Date: Wed, 9 Apr 2025 14:23:23 +0100
Subject: [PATCH] Update page.tsx

---
 app/dashboard/storefront/page.tsx | 395 +++++++++++++++---------------
 1 file changed, 191 insertions(+), 204 deletions(-)

diff --git a/app/dashboard/storefront/page.tsx b/app/dashboard/storefront/page.tsx
index 41c46c9..3918316 100644
--- a/app/dashboard/storefront/page.tsx
+++ b/app/dashboard/storefront/page.tsx
@@ -158,220 +158,207 @@ export default function StorefrontPage() {
 
   return (
     <Layout>
-      <div className="max-w-4xl mx-auto p-6 space-y-6">
-        <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">
-            <Key className="h-6 w-6 text-purple-600 dark:text-purple-400" />
-            <h2 className="text-xl font-semibold text-gray-900 dark:text-zinc-100">
-              PGP Encryption Key
-            </h2>
-          </div>
-          <Textarea
-            value={storefront.pgpKey}
-            onChange={(e) => setStorefront(prev => ({ ...prev, pgpKey: e.target.value }))}
-            placeholder="Enter your PGP public key"
-            className="font-mono text-sm h-40"
-          />
-        </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">
-            <MessageSquare className="h-6 w-6 text-emerald-600 dark:text-emerald-400" />
-            <h2 className="text-xl font-semibold text-gray-900 dark:text-zinc-100">
-              Telegram Bot Token
-            </h2>
-          </div>
-          <Input
-            type="password"
-            value={storefront.telegramToken}
-            onChange={(e) => setStorefront(prev => ({ ...prev, telegramToken: e.target.value }))}
-            placeholder="Enter your Telegram bot token"
-          />
-        </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">
-            <MessageSquare 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">
-              /start Welcome Message
-            </h2>
-          </div>
-          <Textarea
-            value={storefront.welcomeMessage}
-            onChange={(e) => setStorefront(prev => ({ ...prev, welcomeMessage: e.target.value }))}
-            placeholder="Enter your welcome message"
-            className="h-[104px]"
-          />
-        </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 className="flex items-center justify-between border-b border-zinc-800 px-4 py-4">
+          <h1 className="text-xl font-medium">Storefront Settings</h1>
+          <div className="flex gap-3">
+            <Button
+              variant="outline"
+              onClick={() => setBroadcastOpen(true)}
+              className="gap-2"
+            >
+              <Send className="h-4 w-4" />
+              Broadcast
+            </Button>
+            <Button 
+              onClick={saveStorefront} 
+              disabled={saving}
+              className="gap-2"
+            >
+              <Save className="h-4 w-4" />
+              {saving ? "Saving..." : "Save Changes"}
+            </Button>
           </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">
-            <Wallet className="h-6 w-6 text-yellow-600 dark:text-yellow-400" />
-            <h2 className="text-xl font-semibold text-gray-900 dark:text-zinc-100">
-              Cryptocurrency Wallets
-            </h2>
-          </div>
-          <div className="space-y-4">
-            {WALLET_OPTIONS.map((wallet) => (
-              <div 
-                key={wallet.id}
-                className={`p-4 rounded-lg border dark:border-zinc-700 
-                  ${wallet.disabled ? 'opacity-60' : ''}`}
-              >
-                <div className="flex items-center justify-between mb-2">
-                  <div className="flex items-center gap-2">
-                    <span className="text-lg font-mono">{wallet.emoji}</span>
-                    <span className="font-medium">{wallet.name}</span>
-                    {wallet.comingSoon && (
-                      <span className="text-xs bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 px-2 py-0.5 rounded">
-                        Coming Soon
-                      </span>
-                    )}
-                  </div>
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <div>
-                          <Switch
-                            checked={storefront.enabledWallets[wallet.id]}
-                            onCheckedChange={(checked) => 
-                              setStorefront(prev => ({
-                                ...prev,
-                                enabledWallets: {
-                                  ...prev.enabledWallets,
-                                  [wallet.id]: checked
-                                }
-                              }))
-                            }
-                            disabled={wallet.disabled}
-                          />
-                        </div>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        {wallet.disabled 
-                          ? `${wallet.name} payments coming soon`
-                          : `Enable ${wallet.name} payments`
-                        }
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
+        <div className="p-4">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            {/* Security Settings */}
+            <div className="space-y-4">
+              <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
+                <div className="flex items-center gap-3 mb-4">
+                  <Shield className="h-5 w-5 text-purple-400" />
+                  <h2 className="text-lg font-medium text-zinc-100">
+                    Security
+                  </h2>
                 </div>
-                <Input
-                  type="text"
-                  placeholder={wallet.placeholder}
-                  value={storefront.wallets[wallet.id] || ''}
-                  onChange={(e) => 
-                    setStorefront(prev => ({
-                      ...prev,
-                      wallets: {
-                        ...prev.wallets,
-                        [wallet.id]: e.target.value
+                <div className="space-y-4">
+                  <div>
+                    <label className="text-sm font-medium mb-2 block text-zinc-400">PGP Public Key</label>
+                    <Textarea
+                      value={storefront.pgpKey}
+                      onChange={(e) => setStorefront(prev => ({ ...prev, pgpKey: e.target.value }))}
+                      placeholder="Enter your PGP public key"
+                      className="font-mono text-sm h-32 bg-[#1C1C1C] border-zinc-800"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-sm font-medium mb-2 block text-zinc-400">Telegram Bot Token</label>
+                    <Input
+                      type="password"
+                      value={storefront.telegramToken}
+                      onChange={(e) => setStorefront(prev => ({ ...prev, telegramToken: e.target.value }))}
+                      placeholder="Enter your Telegram bot token"
+                      className="bg-[#1C1C1C] border-zinc-800"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Shipping Settings */}
+              <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
+                <div className="flex items-center gap-3 mb-4">
+                  <Globe className="h-5 w-5 text-blue-400" />
+                  <h2 className="text-lg font-medium text-zinc-100">
+                    Shipping
+                  </h2>
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="text-sm font-medium mb-2 block text-zinc-400">Ships From</label>
+                    <Select
+                      value={storefront.shipsFrom}
+                      onValueChange={(value) =>
+                        setStorefront((prev) => ({ ...prev, shipsFrom: value as any }))
                       }
-                    }))
-                  }
-                  disabled={wallet.disabled || !storefront.enabledWallets[wallet.id]}
-                  className="font-mono text-sm"
+                    >
+                      <SelectTrigger className="bg-[#1C1C1C] border-zinc-800">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {SHIPPING_REGIONS.map((region) => (
+                          <SelectItem key={region.value} value={region.value}>
+                            {region.emoji} {region.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div>
+                    <label className="text-sm font-medium mb-2 block text-zinc-400">Ships To</label>
+                    <Select
+                      value={storefront.shipsTo}
+                      onValueChange={(value) =>
+                        setStorefront((prev) => ({ ...prev, shipsTo: value as any }))
+                      }
+                    >
+                      <SelectTrigger className="bg-[#1C1C1C] border-zinc-800">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {SHIPPING_REGIONS.map((region) => (
+                          <SelectItem key={region.value} value={region.value}>
+                            {region.emoji} {region.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Messaging and Payments */}
+            <div className="space-y-4">
+              <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
+                <div className="flex items-center gap-3 mb-4">
+                  <MessageSquare className="h-5 w-5 text-emerald-400" />
+                  <h2 className="text-lg font-medium text-zinc-100">
+                    Welcome Message
+                  </h2>
+                </div>
+                <Textarea
+                  value={storefront.welcomeMessage}
+                  onChange={(e) => setStorefront(prev => ({ ...prev, welcomeMessage: e.target.value }))}
+                  placeholder="Enter the welcome message for new customers"
+                  className="h-32 bg-[#1C1C1C] border-zinc-800"
                 />
               </div>
-            ))}
+
+              <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
+                <div className="flex items-center gap-3 mb-4">
+                  <Wallet className="h-5 w-5 text-yellow-400" />
+                  <h2 className="text-lg font-medium text-zinc-100">
+                    Payment Methods
+                  </h2>
+                </div>
+                <div className="space-y-4">
+                  {WALLET_OPTIONS.map((wallet) => (
+                    <div key={wallet.id} className="space-y-2">
+                      <div className="flex items-center justify-between">
+                        <label className="text-sm font-medium flex items-center gap-2 text-zinc-400">
+                          <span>{wallet.emoji}</span>
+                          {wallet.name}
+                          {wallet.comingSoon && (
+                            <span className="text-xs bg-purple-900/50 text-purple-400 px-2 py-0.5 rounded">
+                              Coming Soon
+                            </span>
+                          )}
+                        </label>
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <div>
+                                <Switch
+                                  checked={storefront.enabledWallets[wallet.id]}
+                                  onCheckedChange={(checked) =>
+                                    setStorefront((prev) => ({
+                                      ...prev,
+                                      enabledWallets: {
+                                        ...prev.enabledWallets,
+                                        [wallet.id]: checked,
+                                      },
+                                    }))
+                                  }
+                                  disabled={wallet.disabled}
+                                />
+                              </div>
+                            </TooltipTrigger>
+                            {wallet.disabled && (
+                              <TooltipContent>
+                                <p>Coming soon</p>
+                              </TooltipContent>
+                            )}
+                          </Tooltip>
+                        </TooltipProvider>
+                      </div>
+                      {storefront.enabledWallets[wallet.id] && !wallet.disabled && (
+                        <Input
+                          value={storefront.wallets[wallet.id]}
+                          onChange={(e) =>
+                            setStorefront((prev) => ({
+                              ...prev,
+                              wallets: {
+                                ...prev.wallets,
+                                [wallet.id]: e.target.value,
+                              },
+                            }))
+                          }
+                          placeholder={wallet.placeholder}
+                          className="font-mono text-sm bg-[#1C1C1C] border-zinc-800"
+                        />
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-
-        <div className="flex justify-between">
-          <Button
-            onClick={() => setBroadcastOpen(true)}
-            className="gap-2 bg-emerald-600 hover:bg-emerald-700 text-white"
-          >
-            <Send className="h-5 w-5" /> Broadcast Message
-          </Button>
-
-          <Button
-            onClick={saveStorefront}
-            disabled={saving}
-            className="gap-2 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white"
-          >
-            <Save className="h-5 w-5" />{" "}
-            {saving ? "Saving..." : "Save Configuration"}
-          </Button>
-        </div>
-
-        <BroadcastDialog
-          open={broadcastOpen}
-          setOpen={setBroadcastOpen}
-        />
       </div>
+
+      <BroadcastDialog open={broadcastOpen} setOpen={setBroadcastOpen} />
+      <Toaster position="bottom-right" />
     </Layout>
   );
 }