Update page.tsx

app/dashboard/storefront/page.tsx

@@ -10,6 +10,7 @@ import { Save, Send, Key, MessageSquare, Shield, Globe, Wallet } from "lucide-re
 import { apiRequest } from "@/lib/api";
 import { toast, Toaster } from "sonner";
 import BroadcastDialog from "@/components/modals/broadcast-dialog";
+import Dashboard from "@/components/dashboard/dashboard";
 import {
   Select,
   SelectContent,
@@ -33,6 +34,7 @@ interface Storefront {
   telegramToken: string;
   shipsFrom: typeof SHIPPING_REGIONS[number]["value"];
   shipsTo: typeof SHIPPING_REGIONS[number]["value"];
+  storePolicy: string;
   wallets: {
     bitcoin?: string;
     litecoin: string;
@@ -80,6 +82,7 @@ export default function StorefrontPage() {
     telegramToken: "",
     shipsFrom: "UK",
     shipsTo: "WW",
+    storePolicy: "",
     wallets: {
       bitcoin: '',
       litecoin: '',
@@ -117,6 +120,7 @@ export default function StorefrontPage() {
           telegramToken: data.telegramToken || "",
           shipsFrom: data.shipsFrom || "UK",
           shipsTo: data.shipsTo || "WW",
+          storePolicy: data.storePolicy || "",
           wallets: {
             bitcoin: data.wallets?.bitcoin || '',
             litecoin: data.wallets?.litecoin || '',
@@ -157,10 +161,13 @@ export default function StorefrontPage() {
   };
 
   return (
-    <Layout>
+    <Dashboard>
-      <div>
+      <div className="space-y-6">
-        <div className="flex items-center justify-between border-b border-zinc-800 h-14 px-4">
+        <div className="flex items-center justify-between">
-          <h1 className="text-xl font-medium">Storefront Settings</h1>
+          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
+            <Globe className="mr-2 h-6 w-6" />
+            Storefront Settings
+          </h1>
           <div className="flex gap-2">
             <Button
               variant="outline"
@@ -183,11 +190,10 @@ export default function StorefrontPage() {
           </div>
         </div>
 
-        <div className="p-3">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
           {/* Security Settings */}
           <div className="space-y-3">
-              <div className="bg-[#0F0F12] rounded-lg p-3 border border-zinc-800">
+            <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
               <div className="flex items-center gap-2 mb-3">
                 <Shield className="h-4 w-4 text-purple-400" />
                 <h2 className="text-base font-medium text-zinc-100">
@@ -218,7 +224,7 @@ export default function StorefrontPage() {
             </div>
 
             {/* Shipping Settings */}
-              <div className="bg-[#0F0F12] rounded-lg p-3 border border-zinc-800">
+            <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
               <div className="flex items-center gap-2 mb-3">
                 <Globe className="h-4 w-4 text-blue-400" />
                 <h2 className="text-base font-medium text-zinc-100">
@@ -272,7 +278,7 @@ export default function StorefrontPage() {
 
           {/* Messaging and Payments */}
           <div className="space-y-3">
-              <div className="bg-[#0F0F12] rounded-lg p-3 border border-zinc-800">
+            <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
               <div className="flex items-center gap-2 mb-3">
                 <MessageSquare className="h-4 w-4 text-emerald-400" />
                 <h2 className="text-base font-medium text-zinc-100">
@@ -283,11 +289,26 @@ export default function StorefrontPage() {
                 value={storefront.welcomeMessage}
                 onChange={(e) => setStorefront(prev => ({ ...prev, welcomeMessage: e.target.value }))}
                 placeholder="Enter the welcome message for new customers"
-                  className="h-24 bg-[#1C1C1C] border-zinc-800 text-sm resize-none"
+                className="h-36 bg-[#1C1C1C] border-zinc-800 text-sm resize-none"
               />
             </div>
 
-              <div className="bg-[#0F0F12] rounded-lg p-3 border border-zinc-800">
+            <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
+              <div className="flex items-center gap-2 mb-3">
+                <Shield className="h-4 w-4 text-orange-400" />
+                <h2 className="text-base font-medium text-zinc-100">
+                  Store Policy
+                </h2>
+              </div>
+              <Textarea
+                value={storefront.storePolicy}
+                onChange={(e) => setStorefront(prev => ({ ...prev, storePolicy: e.target.value }))}
+                placeholder="Enter your store's policies, terms, and conditions"
+                className="h-48 bg-[#1C1C1C] border-zinc-800 text-sm resize-none"
+              />
+            </div>
+
+            <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
               <div className="flex items-center gap-2 mb-3">
                 <Wallet className="h-4 w-4 text-yellow-400" />
                 <h2 className="text-base font-medium text-zinc-100">
@@ -357,10 +378,9 @@ export default function StorefrontPage() {
           </div>
         </div>
       </div>
-      </div>
 
       <BroadcastDialog open={broadcastOpen} setOpen={setBroadcastOpen} />
       <Toaster position="bottom-right" />
-    </Layout>
+    </Dashboard>
   );
 }