+
+
+ {t("businessOverview")}
+
+
+
-
-
-
- Create Link
-
-
-
-
-
- View Docs
-
-
-
-
- Settings
-
-
-
+
+
+
+ {t("liveConfirmations")}
+
+
+ {t("viewAllPayments")}
+
+
+
+
-
- {/* ── Main Dashboard Content ────────────────────────────────────────── */}
-
- {/* Performance Metrics Section */}
-
-
-
Performance
-
-
- Live monitoring active
+
-
-
-
- {/* Activity Table Section */}
-
-
-
Recent Activity
-
- View all payments
-
-
-
-
-
-
+
+
);
-}
+}
\ No newline at end of file
diff --git a/frontend/src/app/(authenticated)/settings/page.tsx b/frontend/src/app/(authenticated)/settings/page.tsx
index 1288cc3e..89d7cad0 100644
--- a/frontend/src/app/(authenticated)/settings/page.tsx
+++ b/frontend/src/app/(authenticated)/settings/page.tsx
@@ -6,6 +6,8 @@ import Link from "next/link";
import Image from "next/image";
import CopyButton from "@/components/CopyButton";
import { toast } from "sonner";
+import DangerZone from "@/components/DangerZone";
+import { useTranslations } from "next-intl";
import {
useHydrateMerchantStore,
useMerchantApiKey,
@@ -14,7 +16,6 @@ import {
} from "@/lib/merchant-store";
import { useDisplayPreferences } from "@/lib/display-preferences";
import WebhookHealthIndicator from "@/components/WebhookHealthIndicator";
-import DangerZone from "@/components/DangerZone";
import { EmailReceiptPreview } from "@/components/EmailReceiptPreview";
const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
@@ -80,15 +81,44 @@ function EyeIcon({ open }: { open: boolean }) {
);
}
-const NAV_ITEMS: { id: SettingsTab; label: string; icon: React.ReactNode; danger?: boolean }[] = [
- { id: "api", label: "API Keys", icon:
},
- { id: "branding", label: "Branding", icon:
},
- { id: "display", label: "Display", icon:
},
- { id: "webhooks", label: "Webhooks", icon:
},
- { id: "danger", label: "Danger Zone", icon:
, danger: true },
+const NAV_ITEMS: {
+ id: SettingsTab;
+ icon: React.ReactNode;
+ danger?: boolean;
+}[] = [
+ {
+ id: "api",
+ icon:
🔑,
+ },
+ {
+ id: "branding",
+ icon:
🎨,
+ },
+ {
+ id: "display",
+ icon:
🖥️,
+ },
+ {
+ id: "webhooks",
+ icon:
🔗,
+ },
+ {
+ id: "danger",
+ icon:
⚠️,
+ danger: true,
+ },
];
export default function SettingsPage() {
+ const t = useTranslations("Settings");
+
+ const navItems = [
+ { ...NAV_ITEMS[0], label: t("apiKeys") },
+ { ...NAV_ITEMS[1], label: t("branding") },
+ { ...NAV_ITEMS[2], label: t("display") },
+ { ...NAV_ITEMS[3], label: t("webhooks") },
+ { ...NAV_ITEMS[4], label: t("dangerZone") },
+ ];
const apiKey = useMerchantApiKey();
const hydrated = useMerchantHydrated();
const setApiKey = useSetMerchantApiKey();
@@ -256,7 +286,14 @@ export default function SettingsPage() {
const res = await fetch(`${API_URL}/api/webhooks/test`, { method: "POST", headers: { "x-api-key": apiKey } });
const data = await res.json();
if (!res.ok) throw new Error(data.error ?? "Test webhook request failed");
- toast.success(`Test webhook sent — status ${data.status}`);
+
+ const statusClass = data.status >= 200 && data.status < 300 ? "text-green-400" : "text-red-400";
+ toast.success(
+
+ {t("testWebhookSent")}
+ Status: {data.status}
+
+ );
} catch (err: unknown) {
const msg = err instanceof Error ? err.message : "Failed to test webhook";
toast.error(msg); setWebhookSaveError(msg);
@@ -270,12 +307,12 @@ export default function SettingsPage() {
Settings
-
Merchant Settings
+
{t("merchantSettings")}
-
No API key found
+
{t("noApiKey")}
Register a merchant account first to manage your credentials here.
-
Register as Merchant
+
{t("registerMerchant")}
);
@@ -290,15 +327,15 @@ export default function SettingsPage() {
{/* Page header */}
Account
-
Settings
-
Manage your credentials, branding, and integrations.
+
{t("title")}
+
{t("description")}
{/* Two-column layout */}
{/* Left nav */}