Merge pull request #464 from FrostGraphix/codex/issue-334-335-336-337

feat: improve dashboard navigation and checkout payment UX

Author: emdevelopa

frontend/messages/en.json

@@ -16,13 +16,18 @@
     "toggleMenu": "Toggle menu"
   },
   "sidebar": {
-    "dashboard": "Dashboard",
+    "overview": "Overview",
     "payments": "Payments",
     "webhookLogs": "Webhook Logs",
     "apiKeys": "API Keys",
     "settings": "Settings",
-    "status": "Status",
-    "network": "Mainnet-testnet"
+    "workspace": "Authenticated workspace",
+    "shortcuts": "Shortcuts",
+    "createPayment": "Create Payment",
+    "network": "Mainnet-testnet",
+    "collapse": "Collapse sidebar",
+    "expand": "Expand sidebar",
+    "close": "Close navigation"
   },
   "breadcrumbs": {
     "home": "Home",
@@ -37,7 +42,8 @@
   },
   "copyButton": {
     "ariaLabel": "Copy to clipboard",
-    "copied": "Copied!"
+    "copied": "Copied!",
+    "copiedState": "Copied"
   },
   "dashboardPage": {
     "title": "Merchant Overview",
@@ -204,13 +210,28 @@
     "recipient": "Recipient",
     "scanToPay": "Scan to Pay",
     "scanDescription": "Scan with Freighter or any Stellar wallet",
+    "openQrModal": "Pay with QR code",
+    "qrModalTitle": "Pay with QR code",
+    "qrModalDescription": "Scan this code on another device or share it with your wallet app.",
+    "downloadQr": "Download PNG",
+    "downloadQrSuccess": "QR code downloaded.",
+    "downloadQrError": "Could not download QR code.",
     "viewRawIntent": "View raw intent link",
     "hideRawIntent": "Hide raw intent link",
     "created": "Created",
     "transaction": "Transaction",
     "paymentSent": "Payment sent!",
     "paymentFailed": "Payment failed. Please try again.",
     "connectedVia": "Connected via {provider}",
+    "payInXlm": "Pay in XLM",
+    "standardAssetOption": "Pay the invoice in {asset}",
+    "pathPaymentOption": "Pay in XLM",
+    "approximateCost": "Approximate cost in XLM",
+    "merchantReceives": "Merchant receives {amount} {asset}",
+    "quoteLoading": "Checking XLM path payment routes...",
+    "quoteUnavailable": "XLM payment routing is unavailable for this invoice right now.",
+    "quoteBuffer": "You may send up to {amount} XLM to cover price movement.",
+    "pathPaymentHint": "Uses Stellar path payments under the hood through your connected wallet.",
     "approximateCostLabel": "Approximate cost in XLM",
     "approximateCostHelp": "Estimated amount to deliver {amount} {asset} to the merchant.",
     "slippageBuffer": "{percent}% safety buffer included. Max send: {sendMax} {asset}",

frontend/messages/es.json

@@ -16,13 +16,18 @@
     "toggleMenu": "Abrir menu"
   },
   "sidebar": {
-    "dashboard": "Panel",
+    "overview": "Resumen",
     "payments": "Pagos",
     "webhookLogs": "Registros Webhook",
     "apiKeys": "Claves API",
     "settings": "Configuracion",
-    "status": "Estado",
-    "network": "Mainnet-testnet"
+    "workspace": "Area autenticada",
+    "shortcuts": "Accesos",
+    "createPayment": "Crear pago",
+    "network": "Mainnet-testnet",
+    "collapse": "Contraer barra lateral",
+    "expand": "Expandir barra lateral",
+    "close": "Cerrar navegacion"
   },
   "breadcrumbs": {
     "home": "Inicio",
@@ -37,7 +42,8 @@
   },
   "copyButton": {
     "ariaLabel": "Copiar al portapapeles",
-    "copied": "Copiado"
+    "copied": "Copiado",
+    "copiedState": "Copiado"
   },
   "dashboardPage": {
     "title": "Resumen del comercio",
@@ -204,13 +210,28 @@
     "recipient": "Destinatario",
     "scanToPay": "Escanear para pagar",
     "scanDescription": "Escanea con Freighter o cualquier billetera Stellar",
+    "openQrModal": "Pagar con codigo QR",
+    "qrModalTitle": "Pagar con codigo QR",
+    "qrModalDescription": "Escanea este codigo en otro dispositivo o compartelo con tu app de billetera.",
+    "downloadQr": "Descargar PNG",
+    "downloadQrSuccess": "Codigo QR descargado.",
+    "downloadQrError": "No se pudo descargar el codigo QR.",
     "viewRawIntent": "Ver enlace intent sin procesar",
     "hideRawIntent": "Ocultar enlace intent sin procesar",
     "created": "Creado",
     "transaction": "Transaccion",
     "paymentSent": "Pago enviado",
     "paymentFailed": "El pago fallo. Intentalo de nuevo.",
     "connectedVia": "Conectado mediante {provider}",
+    "payInXlm": "Pagar en XLM",
+    "standardAssetOption": "Pagar la factura en {asset}",
+    "pathPaymentOption": "Pagar en XLM",
+    "approximateCost": "Costo aproximado en XLM",
+    "merchantReceives": "El comercio recibe {amount} {asset}",
+    "quoteLoading": "Buscando rutas de pago en XLM...",
+    "quoteUnavailable": "La ruta de pago en XLM no esta disponible para esta factura ahora mismo.",
+    "quoteBuffer": "Puedes enviar hasta {amount} XLM para cubrir movimientos de precio.",
+    "pathPaymentHint": "Usa Stellar path payments desde tu billetera conectada.",
     "approximateCostLabel": "Costo aproximado en XLM",
     "approximateCostHelp": "Monto estimado para entregar {amount} {asset} al comercio.",
     "slippageBuffer": "Incluye un margen de seguridad del {percent}%. Envio maximo: {sendMax} {asset}",

frontend/messages/pt.json

@@ -16,13 +16,18 @@
     "toggleMenu": "Abrir menu"
   },
   "sidebar": {
-    "dashboard": "Painel",
+    "overview": "Visao geral",
     "payments": "Pagamentos",
     "webhookLogs": "Logs de Webhook",
     "apiKeys": "Chaves API",
     "settings": "Configuracoes",
-    "status": "Status",
-    "network": "Mainnet-testnet"
+    "workspace": "Area autenticada",
+    "shortcuts": "Atalhos",
+    "createPayment": "Criar pagamento",
+    "network": "Mainnet-testnet",
+    "collapse": "Recolher barra lateral",
+    "expand": "Expandir barra lateral",
+    "close": "Fechar navegacao"
   },
   "breadcrumbs": {
     "home": "Inicio",
@@ -37,7 +42,8 @@
   },
   "copyButton": {
     "ariaLabel": "Copiar para a area de transferencia",
-    "copied": "Copiado"
+    "copied": "Copiado",
+    "copiedState": "Copiado"
   },
   "dashboardPage": {
     "title": "Visao geral do lojista",
@@ -204,13 +210,28 @@
     "recipient": "Destinatario",
     "scanToPay": "Escanear para pagar",
     "scanDescription": "Escaneie com o Freighter ou qualquer carteira Stellar",
+    "openQrModal": "Pagar com codigo QR",
+    "qrModalTitle": "Pagar com codigo QR",
+    "qrModalDescription": "Escaneie este codigo em outro dispositivo ou compartilhe com seu app de carteira.",
+    "downloadQr": "Baixar PNG",
+    "downloadQrSuccess": "Codigo QR baixado.",
+    "downloadQrError": "Nao foi possivel baixar o codigo QR.",
     "viewRawIntent": "Ver link bruto de intent",
     "hideRawIntent": "Ocultar link bruto de intent",
     "created": "Criado",
     "transaction": "Transacao",
     "paymentSent": "Pagamento enviado",
     "paymentFailed": "O pagamento falhou. Tente novamente.",
     "connectedVia": "Conectado via {provider}",
+    "payInXlm": "Pagar em XLM",
+    "standardAssetOption": "Pagar a fatura em {asset}",
+    "pathPaymentOption": "Pagar em XLM",
+    "approximateCost": "Custo aproximado em XLM",
+    "merchantReceives": "O lojista recebe {amount} {asset}",
+    "quoteLoading": "Buscando rotas de pagamento em XLM...",
+    "quoteUnavailable": "O roteamento em XLM nao esta disponivel para esta fatura agora.",
+    "quoteBuffer": "Voce pode enviar ate {amount} XLM para cobrir variacoes de preco.",
+    "pathPaymentHint": "Usa Stellar path payments pela carteira conectada.",
     "approximateCostLabel": "Custo aproximado em XLM",
     "approximateCostHelp": "Valor estimado para entregar {amount} {asset} ao lojista.",
     "slippageBuffer": "Inclui margem de seguranca de {percent}%. Envio maximo: {sendMax} {asset}",

frontend/public/sw.js

@@ -1,53 +1,75 @@
 "use client";
 
-import Sidebar from "@/components/Sidebar";
-import MobileNav from "@/components/MobileNav";
+import { useState } from "react";
+import AuthGuard from "@/components/AuthGuard";
 import Breadcrumbs from "@/components/Breadcrumbs";
 import LocaleSwitcher from "@/components/LocaleSwitcher";
 import PaymentToastListener from "@/components/PaymentToastListener";
-import { motion } from "framer-motion";
-import AuthGuard from "@/components/AuthGuard";
+import Sidebar from "@/components/Sidebar";
 import { useHydrateMerchantStore } from "@/lib/merchant-store";
+import { motion } from "framer-motion";
 
 export default function AuthenticatedLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+
   useHydrateMerchantStore();
-  
+
   return (
     <AuthGuard>
       <div className="flex min-h-screen overflow-x-hidden bg-black">
-      {/* Sidebar - fixed width for desktop layout offset */}
-      <Sidebar />
-      <MobileNav />
-      <PaymentToastListener />
+        <Sidebar
+          mobileOpen={mobileSidebarOpen}
+          onMobileOpenChange={setMobileSidebarOpen}
+        />
+        <PaymentToastListener />
 
-      {/* Main Content Area */}
-      <main className="min-w-0 flex-1 overflow-x-hidden transition-all lg:pl-[260px]">
-        <div className="mx-auto flex w-full min-w-0 max-w-7xl flex-col p-6 lg:p-10">
-          {/* Header with Breadcrumbs */}
-          <header className="mb-10 flex flex-col gap-6">
-            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-              <Breadcrumbs />
-              <LocaleSwitcher className="w-fit self-start sm:self-auto" />
-            </div>
-            <div className="h-px w-full bg-gradient-to-r from-white/10 to-transparent" />
-          </header>
+        <main className="min-w-0 flex-1 overflow-x-hidden">
+          <div className="mx-auto flex w-full min-w-0 max-w-7xl flex-col p-6 lg:p-10">
+            <header className="mb-10 flex flex-col gap-6">
+              <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                <div className="flex items-center gap-3">
+                  <button
+                    type="button"
+                    onClick={() => setMobileSidebarOpen(true)}
+                    className="inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-slate-300 transition-colors hover:bg-white/10 hover:text-white lg:hidden"
+                    aria-label="Open navigation menu"
+                  >
+                    <svg
+                      className="h-5 w-5"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M4 7h16M4 12h16M4 17h16"
+                      />
+                    </svg>
+                  </button>
+                  <Breadcrumbs />
+                </div>
+                <LocaleSwitcher className="w-fit self-start sm:self-auto" />
+              </div>
+              <div className="h-px w-full bg-gradient-to-r from-white/10 to-transparent" />
+            </header>
 
-          {/* Page Content */}
-          <motion.section
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.4, ease: "easeOut" }}
-            className="min-w-0 pb-20 lg:pb-0"
-          >
-            {children}
-          </motion.section>
-        </div>
-      </main>
-    </div>
+            <motion.section
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.4, ease: "easeOut" }}
+              className="min-w-0 pb-10"
+            >
+              {children}
+            </motion.section>
+          </div>
+        </main>
+      </div>
     </AuthGuard>
   );
 }

frontend/src/app/(authenticated)/layout.tsx

@@ -1,5 +1,5 @@
 import { notFound } from "next/navigation";
-import { MDXRemote } from "next-mdx-remote/rsc";
+import { MDXRemote } from "next-mdx-remote";
 import { docsManifest } from "@/lib/docs-manifest";
 import { getDocBySlug } from "@/lib/docs";