Translate admin pages - Create admin.json files and translate all admin pages
- Create admin.json translation files for es, en, ca with all admin strings - Update IntlProvider to include admin namespace - Translate admin/invites/page.tsx - all strings now use translations - Translate admin/trades/page.tsx - all strings now use translations - Translate admin/price-history/page.tsx - all strings now use translations - Translate admin/availability/page.tsx - all strings now use translations - Add 'saving' key to common.json for all languages - Fix linting errors: add t to useCallback dependencies - All admin pages now fully multilingual
This commit is contained in:
parent
b8b3e8b9f6
commit
e2376855ce
GPG key ID:
883EDBAA726BD96C
11 changed files with 473 additions and 87 deletions
|
|
@ -9,6 +9,7 @@ import { StatusBadge } from "../../components/StatusBadge";
|
|||
import { EmptyState } from "../../components/EmptyState";
|
||||
import { ConfirmationButton } from "../../components/ConfirmationButton";
|
||||
import { useRequireAuth } from "../../hooks/useRequireAuth";
|
||||
import { useTranslation } from "../../hooks/useTranslation";
|
||||
import { components } from "../../generated/api";
|
||||
import { formatDateTime } from "../../utils/date";
|
||||
import { formatEur } from "../../utils/exchange";
|
||||
|
|
@ -19,6 +20,8 @@ type AdminExchangeResponse = components["schemas"]["AdminExchangeResponse"];
|
|||
type Tab = "upcoming" | "past";
|
||||
|
||||
export default function AdminTradesPage() {
|
||||
const t = useTranslation("admin");
|
||||
const tCommon = useTranslation("common");
|
||||
const { user, isLoading, isAuthorized } = useRequireAuth({
|
||||
requiredPermission: Permission.VIEW_ALL_EXCHANGES,
|
||||
fallbackRedirect: "/",
|
||||
|
|
@ -48,9 +51,9 @@ export default function AdminTradesPage() {
|
|||
return null;
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch upcoming trades:", err);
|
||||
return "Failed to load upcoming trades";
|
||||
return t("trades.errors.loadUpcomingFailed");
|
||||
}
|
||||
}, []);
|
||||
}, [t]);
|
||||
|
||||
const fetchPastTrades = useCallback(async (): Promise<string | null> => {
|
||||
try {
|
||||
|
|
@ -69,9 +72,9 @@ export default function AdminTradesPage() {
|
|||
return null;
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch past trades:", err);
|
||||
return "Failed to load past trades";
|
||||
return t("trades.errors.loadPastFailed");
|
||||
}
|
||||
}, [statusFilter, userSearch]);
|
||||
}, [statusFilter, userSearch, t]);
|
||||
|
||||
useEffect(() => {
|
||||
if (user && isAuthorized) {
|
||||
|
|
@ -112,7 +115,7 @@ export default function AdminTradesPage() {
|
|||
}
|
||||
setConfirmAction(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : `Failed to ${action} trade`);
|
||||
setError(err instanceof Error ? err.message : t("trades.errors.actionFailed", { action }));
|
||||
} finally {
|
||||
// Remove this trade from the set of actioning trades
|
||||
setActioningIds((prev) => {
|
||||
|
|
@ -126,7 +129,7 @@ export default function AdminTradesPage() {
|
|||
if (isLoading) {
|
||||
return (
|
||||
<main style={layoutStyles.main}>
|
||||
<div style={layoutStyles.loader}>Loading...</div>
|
||||
<div style={layoutStyles.loader}>{tCommon("loading")}</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -141,8 +144,8 @@ export default function AdminTradesPage() {
|
|||
<main style={layoutStyles.main}>
|
||||
<Header currentPage="admin-trades" />
|
||||
<div style={styles.content}>
|
||||
<h1 style={typographyStyles.pageTitle}>Trades</h1>
|
||||
<p style={typographyStyles.pageSubtitle}>Manage Bitcoin exchange trades</p>
|
||||
<h1 style={typographyStyles.pageTitle}>{t("trades.title")}</h1>
|
||||
<p style={typographyStyles.pageSubtitle}>{t("trades.subtitle")}</p>
|
||||
|
||||
{error && <div style={bannerStyles.errorBanner}>{error}</div>}
|
||||
|
||||
|
|
@ -155,7 +158,7 @@ export default function AdminTradesPage() {
|
|||
...(activeTab === "upcoming" ? styles.tabButtonActive : {}),
|
||||
}}
|
||||
>
|
||||
Upcoming ({upcomingTrades.length})
|
||||
{t("trades.tabs.upcoming", { count: upcomingTrades.length })}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("past")}
|
||||
|
|
@ -164,7 +167,7 @@ export default function AdminTradesPage() {
|
|||
...(activeTab === "past" ? styles.tabButtonActive : {}),
|
||||
}}
|
||||
>
|
||||
History ({pastTrades.length})
|
||||
{t("trades.tabs.history", { count: pastTrades.length })}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -176,15 +179,15 @@ export default function AdminTradesPage() {
|
|||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
style={styles.filterSelect}
|
||||
>
|
||||
<option value="all">All Statuses</option>
|
||||
<option value="completed">Completed</option>
|
||||
<option value="no_show">No Show</option>
|
||||
<option value="cancelled_by_user">User Cancelled</option>
|
||||
<option value="cancelled_by_admin">Admin Cancelled</option>
|
||||
<option value="all">{t("trades.filters.allStatuses")}</option>
|
||||
<option value="completed">{t("trades.filters.completed")}</option>
|
||||
<option value="no_show">{t("trades.filters.noShow")}</option>
|
||||
<option value="cancelled_by_user">{t("trades.filters.userCancelled")}</option>
|
||||
<option value="cancelled_by_admin">{t("trades.filters.adminCancelled")}</option>
|
||||
</select>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by email..."
|
||||
placeholder={t("trades.searchPlaceholder")}
|
||||
value={userSearch}
|
||||
onChange={(e) => setUserSearch(e.target.value)}
|
||||
style={styles.searchInput}
|
||||
|
|
@ -193,10 +196,14 @@ export default function AdminTradesPage() {
|
|||
)}
|
||||
|
||||
{isLoadingTrades ? (
|
||||
<EmptyState message="Loading trades..." isLoading={true} />
|
||||
<EmptyState message={t("trades.loading")} isLoading={true} />
|
||||
) : trades.length === 0 ? (
|
||||
<EmptyState
|
||||
message={activeTab === "upcoming" ? "No upcoming trades." : "No trades found."}
|
||||
message={
|
||||
activeTab === "upcoming"
|
||||
? t("trades.emptyStates.upcoming")
|
||||
: t("trades.emptyStates.past")
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div style={tradeCardStyles.tradeList}>
|
||||
|
|
@ -221,7 +228,7 @@ export default function AdminTradesPage() {
|
|||
)}
|
||||
{trade.user_contact.signal && (
|
||||
<span style={styles.contactBadge}>
|
||||
Signal: {trade.user_contact.signal}
|
||||
{t("trades.tradeDetails.signal", { value: trade.user_contact.signal })}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -238,7 +245,9 @@ export default function AdminTradesPage() {
|
|||
color: isBuy ? "#f87171" : "#4ade80",
|
||||
}}
|
||||
>
|
||||
{isBuy ? "SELL BTC" : "BUY BTC"}
|
||||
{isBuy
|
||||
? t("trades.tradeDetails.sellBtc")
|
||||
: t("trades.tradeDetails.buyBtc")}
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
|
|
@ -248,8 +257,18 @@ export default function AdminTradesPage() {
|
|||
}}
|
||||
>
|
||||
{isBuy
|
||||
? `Send via ${trade.bitcoin_transfer_method === "onchain" ? "Onchain" : "Lightning"}`
|
||||
: `Receive via ${trade.bitcoin_transfer_method === "onchain" ? "Onchain" : "Lightning"}`}
|
||||
? t("trades.tradeDetails.sendVia", {
|
||||
method:
|
||||
trade.bitcoin_transfer_method === "onchain"
|
||||
? t("trades.tradeDetails.onchain")
|
||||
: t("trades.tradeDetails.lightning"),
|
||||
})
|
||||
: t("trades.tradeDetails.receiveVia", {
|
||||
method:
|
||||
trade.bitcoin_transfer_method === "onchain"
|
||||
? t("trades.tradeDetails.onchain")
|
||||
: t("trades.tradeDetails.lightning"),
|
||||
})}
|
||||
</span>
|
||||
<span style={tradeCardStyles.amount}>{formatEur(trade.eur_amount)}</span>
|
||||
<span style={tradeCardStyles.arrow}>↔</span>
|
||||
|
|
@ -259,7 +278,9 @@ export default function AdminTradesPage() {
|
|||
</div>
|
||||
|
||||
<div style={tradeCardStyles.rateRow}>
|
||||
<span style={tradeCardStyles.rateLabel}>Rate:</span>
|
||||
<span style={tradeCardStyles.rateLabel}>
|
||||
{t("trades.tradeDetails.rate")}
|
||||
</span>
|
||||
<span style={tradeCardStyles.rateValue}>
|
||||
€
|
||||
{trade.agreed_price_eur.toLocaleString("es-ES", {
|
||||
|
|
@ -267,7 +288,9 @@ export default function AdminTradesPage() {
|
|||
})}
|
||||
/BTC
|
||||
</span>
|
||||
<span style={tradeCardStyles.rateLabel}>Market:</span>
|
||||
<span style={tradeCardStyles.rateLabel}>
|
||||
{t("trades.tradeDetails.market")}
|
||||
</span>
|
||||
<span style={tradeCardStyles.rateValue}>
|
||||
€
|
||||
{trade.market_price_eur.toLocaleString("es-ES", {
|
||||
|
|
@ -298,7 +321,7 @@ export default function AdminTradesPage() {
|
|||
type: "complete",
|
||||
})
|
||||
}
|
||||
actionLabel="Complete"
|
||||
actionLabel={t("trades.actions.complete")}
|
||||
isLoading={actioningIds.has(trade.public_id)}
|
||||
confirmVariant="success"
|
||||
confirmButtonStyle={styles.successButton}
|
||||
|
|
@ -317,7 +340,7 @@ export default function AdminTradesPage() {
|
|||
type: "no_show",
|
||||
})
|
||||
}
|
||||
actionLabel="No Show"
|
||||
actionLabel={t("trades.actions.noShow")}
|
||||
isLoading={actioningIds.has(trade.public_id)}
|
||||
confirmVariant="primary"
|
||||
actionButtonStyle={styles.warningButton}
|
||||
|
|
@ -338,7 +361,7 @@ export default function AdminTradesPage() {
|
|||
type: "cancel",
|
||||
})
|
||||
}
|
||||
actionLabel="Cancel"
|
||||
actionLabel={t("trades.actions.cancel")}
|
||||
isLoading={actioningIds.has(trade.public_id)}
|
||||
confirmVariant="danger"
|
||||
confirmButtonStyle={styles.dangerButton}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue