diff --git a/frontend/app/admin/trades/page.tsx b/frontend/app/admin/trades/page.tsx index 625938d..8909f7a 100644 --- a/frontend/app/admin/trades/page.tsx +++ b/frontend/app/admin/trades/page.tsx @@ -9,6 +9,7 @@ import { SatsDisplay } from "../../components/SatsDisplay"; import { useRequireAuth } from "../../hooks/useRequireAuth"; import { components } from "../../generated/api"; import { formatDateTime } from "../../utils/date"; +import { formatEur, getTradeStatusDisplay } from "../../utils/exchange"; import { layoutStyles, typographyStyles, @@ -19,61 +20,6 @@ import { type AdminExchangeResponse = components["schemas"]["AdminExchangeResponse"]; -/** - * Format EUR amount from cents to display string - */ -function formatEur(cents: number): string { - return `€${(cents / 100).toLocaleString("de-DE")}`; -} - -/** - * Get status display properties - */ -function getTradeStatusDisplay(status: string): { - text: string; - bgColor: string; - textColor: string; -} { - switch (status) { - case "booked": - return { - text: "Pending", - bgColor: "rgba(99, 102, 241, 0.2)", - textColor: "rgba(129, 140, 248, 0.9)", - }; - case "completed": - return { - text: "Completed", - bgColor: "rgba(34, 197, 94, 0.2)", - textColor: "rgba(34, 197, 94, 0.9)", - }; - case "cancelled_by_user": - return { - text: "User Cancelled", - bgColor: "rgba(239, 68, 68, 0.2)", - textColor: "rgba(239, 68, 68, 0.9)", - }; - case "cancelled_by_admin": - return { - text: "Admin Cancelled", - bgColor: "rgba(239, 68, 68, 0.2)", - textColor: "rgba(239, 68, 68, 0.9)", - }; - case "no_show": - return { - text: "No Show", - bgColor: "rgba(251, 146, 60, 0.2)", - textColor: "rgba(251, 146, 60, 0.9)", - }; - default: - return { - text: status, - bgColor: "rgba(255, 255, 255, 0.1)", - textColor: "rgba(255, 255, 255, 0.6)", - }; - } -} - type Tab = "upcoming" | "past"; export default function AdminTradesPage() { diff --git a/frontend/app/exchange/page.tsx b/frontend/app/exchange/page.tsx index 7ad0a81..db94b3a 100644 --- a/frontend/app/exchange/page.tsx +++ b/frontend/app/exchange/page.tsx @@ -10,6 +10,7 @@ import { SatsDisplay } from "../components/SatsDisplay"; import { useRequireAuth } from "../hooks/useRequireAuth"; import { components } from "../generated/api"; import { formatDate, formatTime, getDateRange } from "../utils/date"; +import { formatEur } from "../utils/exchange"; import { layoutStyles, typographyStyles, bannerStyles, buttonStyles } from "../styles/shared"; type ExchangePriceResponse = components["schemas"]["ExchangePriceResponse"]; @@ -24,13 +25,6 @@ const MAX_ADVANCE_DAYS = 30; type Direction = "buy" | "sell"; type WizardStep = "details" | "booking"; -/** - * Format EUR amount from cents to display string - */ -function formatEur(cents: number): string { - return `€${(cents / 100).toLocaleString("de-DE")}`; -} - /** * Format price for display */ diff --git a/frontend/app/trades/page.tsx b/frontend/app/trades/page.tsx index 046d3b2..87d4917 100644 --- a/frontend/app/trades/page.tsx +++ b/frontend/app/trades/page.tsx @@ -9,6 +9,7 @@ import { SatsDisplay } from "../components/SatsDisplay"; import { useRequireAuth } from "../hooks/useRequireAuth"; import { components } from "../generated/api"; import { formatDateTime } from "../utils/date"; +import { formatEur, getTradeStatusDisplay } from "../utils/exchange"; import { layoutStyles, typographyStyles, @@ -19,61 +20,6 @@ import { type ExchangeResponse = components["schemas"]["ExchangeResponse"]; -/** - * Format EUR amount from cents to display string - */ -function formatEur(cents: number): string { - return `€${(cents / 100).toLocaleString("de-DE")}`; -} - -/** - * Get status display properties - */ -function getTradeStatusDisplay(status: string): { - text: string; - bgColor: string; - textColor: string; -} { - switch (status) { - case "booked": - return { - text: "Pending", - bgColor: "rgba(99, 102, 241, 0.2)", - textColor: "rgba(129, 140, 248, 0.9)", - }; - case "completed": - return { - text: "Completed", - bgColor: "rgba(34, 197, 94, 0.2)", - textColor: "rgba(34, 197, 94, 0.9)", - }; - case "cancelled_by_user": - return { - text: "Cancelled", - bgColor: "rgba(239, 68, 68, 0.2)", - textColor: "rgba(239, 68, 68, 0.9)", - }; - case "cancelled_by_admin": - return { - text: "Cancelled by Admin", - bgColor: "rgba(239, 68, 68, 0.2)", - textColor: "rgba(239, 68, 68, 0.9)", - }; - case "no_show": - return { - text: "No Show", - bgColor: "rgba(251, 146, 60, 0.2)", - textColor: "rgba(251, 146, 60, 0.9)", - }; - default: - return { - text: status, - bgColor: "rgba(255, 255, 255, 0.1)", - textColor: "rgba(255, 255, 255, 0.6)", - }; - } -} - export default function TradesPage() { const { user, isLoading, isAuthorized } = useRequireAuth({ requiredPermission: Permission.VIEW_OWN_EXCHANGES, diff --git a/frontend/app/utils/exchange.ts b/frontend/app/utils/exchange.ts new file mode 100644 index 0000000..633881a --- /dev/null +++ b/frontend/app/utils/exchange.ts @@ -0,0 +1,59 @@ +/** + * Exchange-related utility functions for formatting and display. + */ + +/** + * Format EUR amount from cents to display string. + * e.g., 10000 -> "€100" + */ +export function formatEur(cents: number): string { + return `€${(cents / 100).toLocaleString("de-DE")}`; +} + +/** + * Get status display properties for trade status badges. + */ +export function getTradeStatusDisplay(status: string): { + text: string; + bgColor: string; + textColor: string; +} { + switch (status) { + case "booked": + return { + text: "Pending", + bgColor: "rgba(99, 102, 241, 0.2)", + textColor: "rgba(129, 140, 248, 0.9)", + }; + case "completed": + return { + text: "Completed", + bgColor: "rgba(34, 197, 94, 0.2)", + textColor: "rgba(34, 197, 94, 0.9)", + }; + case "cancelled_by_user": + return { + text: "User Cancelled", + bgColor: "rgba(239, 68, 68, 0.2)", + textColor: "rgba(239, 68, 68, 0.9)", + }; + case "cancelled_by_admin": + return { + text: "Admin Cancelled", + bgColor: "rgba(239, 68, 68, 0.2)", + textColor: "rgba(239, 68, 68, 0.9)", + }; + case "no_show": + return { + text: "No Show", + bgColor: "rgba(251, 146, 60, 0.2)", + textColor: "rgba(251, 146, 60, 0.9)", + }; + default: + return { + text: status, + bgColor: "rgba(255, 255, 255, 0.1)", + textColor: "rgba(255, 255, 255, 0.6)", + }; + } +}