Phase 3.3: Add Admin Trades page
New /admin/trades page for managing exchange trades: - Upcoming trades tab with user contact info - History tab with status/user search filters - Complete/No-show/Cancel actions for admin - Trade details: direction, amounts, rates, premium Update navigation: - Admin home redirects to /admin/trades - Regular user home redirects to /exchange - Header shows 'Trades' for admin
This commit is contained in:
parent
3785d6242d
commit
d6002b0cfc
GPG key ID:
883EDBAA726BD96C
3 changed files with 607 additions and 4 deletions
603
frontend/app/admin/trades/page.tsx
Normal file
603
frontend/app/admin/trades/page.tsx
Normal file
|
|
@ -0,0 +1,603 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { useEffect, useState, useCallback } from "react";
|
||||||
|
import { Permission } from "../../auth-context";
|
||||||
|
import { api } from "../../api";
|
||||||
|
import { Header } from "../../components/Header";
|
||||||
|
import { useRequireAuth } from "../../hooks/useRequireAuth";
|
||||||
|
import { components } from "../../generated/api";
|
||||||
|
import { formatDateTime } from "../../utils/date";
|
||||||
|
import {
|
||||||
|
layoutStyles,
|
||||||
|
typographyStyles,
|
||||||
|
bannerStyles,
|
||||||
|
badgeStyles,
|
||||||
|
buttonStyles,
|
||||||
|
} from "../../styles/shared";
|
||||||
|
|
||||||
|
type AdminExchangeResponse = components["schemas"]["AdminExchangeResponse"];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format EUR amount from cents to display string
|
||||||
|
*/
|
||||||
|
function formatEur(cents: number): string {
|
||||||
|
return `€${(cents / 100).toLocaleString("de-DE")}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format satoshi amount with thousand separators
|
||||||
|
*/
|
||||||
|
function formatSats(sats: number): string {
|
||||||
|
const btc = sats / 100_000_000;
|
||||||
|
const btcStr = btc.toFixed(8);
|
||||||
|
const [whole, decimal] = btcStr.split(".");
|
||||||
|
const grouped = decimal.replace(/(.{2})(.{3})(.{3})/, "$1 $2 $3");
|
||||||
|
return `${whole}.${grouped}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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() {
|
||||||
|
const { user, isLoading, isAuthorized } = useRequireAuth({
|
||||||
|
requiredPermission: Permission.VIEW_ALL_APPOINTMENTS,
|
||||||
|
fallbackRedirect: "/",
|
||||||
|
});
|
||||||
|
|
||||||
|
const [activeTab, setActiveTab] = useState<Tab>("upcoming");
|
||||||
|
const [upcomingTrades, setUpcomingTrades] = useState<AdminExchangeResponse[]>([]);
|
||||||
|
const [pastTrades, setPastTrades] = useState<AdminExchangeResponse[]>([]);
|
||||||
|
const [isLoadingTrades, setIsLoadingTrades] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// Action state
|
||||||
|
const [actioningId, setActioningId] = useState<number | null>(null);
|
||||||
|
const [confirmAction, setConfirmAction] = useState<{
|
||||||
|
id: number;
|
||||||
|
type: "complete" | "no_show" | "cancel";
|
||||||
|
} | null>(null);
|
||||||
|
|
||||||
|
// Past trades filters
|
||||||
|
const [statusFilter, setStatusFilter] = useState<string>("all");
|
||||||
|
const [userSearch, setUserSearch] = useState("");
|
||||||
|
|
||||||
|
const fetchUpcomingTrades = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const data = await api.get<AdminExchangeResponse[]>("/api/admin/trades/upcoming");
|
||||||
|
setUpcomingTrades(data);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to fetch upcoming trades:", err);
|
||||||
|
setError("Failed to load upcoming trades");
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const fetchPastTrades = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
let url = "/api/admin/trades/past";
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
|
||||||
|
if (statusFilter !== "all") {
|
||||||
|
params.append("status", statusFilter);
|
||||||
|
}
|
||||||
|
if (userSearch.trim()) {
|
||||||
|
params.append("user_search", userSearch.trim());
|
||||||
|
}
|
||||||
|
|
||||||
|
if (params.toString()) {
|
||||||
|
url += `?${params.toString()}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await api.get<AdminExchangeResponse[]>(url);
|
||||||
|
setPastTrades(data);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to fetch past trades:", err);
|
||||||
|
setError("Failed to load past trades");
|
||||||
|
}
|
||||||
|
}, [statusFilter, userSearch]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (user && isAuthorized) {
|
||||||
|
setIsLoadingTrades(true);
|
||||||
|
Promise.all([fetchUpcomingTrades(), fetchPastTrades()]).finally(() => {
|
||||||
|
setIsLoadingTrades(false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [user, isAuthorized, fetchUpcomingTrades, fetchPastTrades]);
|
||||||
|
|
||||||
|
const handleAction = async (tradeId: number, action: "complete" | "no_show" | "cancel") => {
|
||||||
|
setActioningId(tradeId);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const endpoint =
|
||||||
|
action === "no_show"
|
||||||
|
? `/api/admin/trades/${tradeId}/no-show`
|
||||||
|
: `/api/admin/trades/${tradeId}/${action}`;
|
||||||
|
|
||||||
|
await api.post<AdminExchangeResponse>(endpoint, {});
|
||||||
|
await Promise.all([fetchUpcomingTrades(), fetchPastTrades()]);
|
||||||
|
setConfirmAction(null);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : `Failed to ${action} trade`);
|
||||||
|
} finally {
|
||||||
|
setActioningId(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<main style={layoutStyles.main}>
|
||||||
|
<div style={layoutStyles.loader}>Loading...</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isAuthorized) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const trades = activeTab === "upcoming" ? upcomingTrades : pastTrades;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main style={layoutStyles.main}>
|
||||||
|
<Header currentPage="admin-appointments" />
|
||||||
|
<div style={styles.content}>
|
||||||
|
<h1 style={typographyStyles.pageTitle}>Trades</h1>
|
||||||
|
<p style={typographyStyles.pageSubtitle}>Manage Bitcoin exchange trades</p>
|
||||||
|
|
||||||
|
{error && <div style={bannerStyles.errorBanner}>{error}</div>}
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<div style={styles.tabRow}>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab("upcoming")}
|
||||||
|
style={{
|
||||||
|
...styles.tabButton,
|
||||||
|
...(activeTab === "upcoming" ? styles.tabButtonActive : {}),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Upcoming ({upcomingTrades.length})
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab("past")}
|
||||||
|
style={{
|
||||||
|
...styles.tabButton,
|
||||||
|
...(activeTab === "past" ? styles.tabButtonActive : {}),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
History ({pastTrades.length})
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters for Past tab */}
|
||||||
|
{activeTab === "past" && (
|
||||||
|
<div style={styles.filterRow}>
|
||||||
|
<select
|
||||||
|
value={statusFilter}
|
||||||
|
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>
|
||||||
|
</select>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search by email..."
|
||||||
|
value={userSearch}
|
||||||
|
onChange={(e) => setUserSearch(e.target.value)}
|
||||||
|
style={styles.searchInput}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isLoadingTrades ? (
|
||||||
|
<div style={styles.emptyState}>Loading trades...</div>
|
||||||
|
) : trades.length === 0 ? (
|
||||||
|
<div style={styles.emptyState}>
|
||||||
|
{activeTab === "upcoming" ? "No upcoming trades." : "No trades found."}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div style={styles.tradeList}>
|
||||||
|
{trades.map((trade) => {
|
||||||
|
const status = getTradeStatusDisplay(trade.status);
|
||||||
|
const isBuy = trade.direction === "buy";
|
||||||
|
const isPast = new Date(trade.slot_start) <= new Date();
|
||||||
|
const canComplete = trade.status === "booked" && isPast && activeTab === "past";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={trade.id} style={styles.tradeCard}>
|
||||||
|
<div style={styles.tradeHeader}>
|
||||||
|
<div style={styles.tradeInfo}>
|
||||||
|
<div style={styles.tradeTime}>{formatDateTime(trade.slot_start)}</div>
|
||||||
|
|
||||||
|
{/* User Info */}
|
||||||
|
<div style={styles.userInfo}>
|
||||||
|
<span style={styles.userEmail}>{trade.user_email}</span>
|
||||||
|
{trade.user_contact.telegram && (
|
||||||
|
<span style={styles.contactBadge}>{trade.user_contact.telegram}</span>
|
||||||
|
)}
|
||||||
|
{trade.user_contact.signal && (
|
||||||
|
<span style={styles.contactBadge}>
|
||||||
|
Signal: {trade.user_contact.signal}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Trade Details */}
|
||||||
|
<div style={styles.tradeDetails}>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
...styles.directionBadge,
|
||||||
|
background: isBuy
|
||||||
|
? "rgba(74, 222, 128, 0.15)"
|
||||||
|
: "rgba(248, 113, 113, 0.15)",
|
||||||
|
color: isBuy ? "#4ade80" : "#f87171",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isBuy ? "BUY" : "SELL"}
|
||||||
|
</span>
|
||||||
|
<span style={styles.amount}>{formatEur(trade.eur_amount)}</span>
|
||||||
|
<span style={styles.arrow}>↔</span>
|
||||||
|
<span style={styles.satsAmount}>{formatSats(trade.sats_amount)} sats</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={styles.rateRow}>
|
||||||
|
<span style={styles.rateLabel}>Rate:</span>
|
||||||
|
<span style={styles.rateValue}>
|
||||||
|
€
|
||||||
|
{trade.agreed_price_eur.toLocaleString("de-DE", {
|
||||||
|
maximumFractionDigits: 0,
|
||||||
|
})}
|
||||||
|
/BTC
|
||||||
|
</span>
|
||||||
|
<span style={styles.rateLabel}>Market:</span>
|
||||||
|
<span style={styles.rateValue}>
|
||||||
|
€
|
||||||
|
{trade.market_price_eur.toLocaleString("de-DE", {
|
||||||
|
maximumFractionDigits: 0,
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
...badgeStyles.badge,
|
||||||
|
background: status.bgColor,
|
||||||
|
color: status.textColor,
|
||||||
|
marginTop: "0.5rem",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{status.text}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div style={styles.buttonGroup}>
|
||||||
|
{confirmAction?.id === trade.id ? (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={() => handleAction(trade.id, confirmAction.type)}
|
||||||
|
disabled={actioningId === trade.id}
|
||||||
|
style={
|
||||||
|
confirmAction.type === "cancel"
|
||||||
|
? styles.dangerButton
|
||||||
|
: styles.successButton
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{actioningId === trade.id ? "..." : "Confirm"}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setConfirmAction(null)}
|
||||||
|
style={buttonStyles.secondaryButton}
|
||||||
|
>
|
||||||
|
No
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{canComplete && (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={() =>
|
||||||
|
setConfirmAction({
|
||||||
|
id: trade.id,
|
||||||
|
type: "complete",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
style={styles.successButton}
|
||||||
|
>
|
||||||
|
Complete
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() =>
|
||||||
|
setConfirmAction({
|
||||||
|
id: trade.id,
|
||||||
|
type: "no_show",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
style={styles.warningButton}
|
||||||
|
>
|
||||||
|
No Show
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{trade.status === "booked" && (
|
||||||
|
<button
|
||||||
|
onClick={() =>
|
||||||
|
setConfirmAction({
|
||||||
|
id: trade.id,
|
||||||
|
type: "cancel",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
style={buttonStyles.secondaryButton}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Page-specific styles
|
||||||
|
const styles: Record<string, React.CSSProperties> = {
|
||||||
|
content: {
|
||||||
|
flex: 1,
|
||||||
|
padding: "2rem",
|
||||||
|
maxWidth: "900px",
|
||||||
|
margin: "0 auto",
|
||||||
|
width: "100%",
|
||||||
|
},
|
||||||
|
tabRow: {
|
||||||
|
display: "flex",
|
||||||
|
gap: "0.5rem",
|
||||||
|
marginBottom: "1.5rem",
|
||||||
|
},
|
||||||
|
tabButton: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "0.9rem",
|
||||||
|
fontWeight: 500,
|
||||||
|
padding: "0.75rem 1.5rem",
|
||||||
|
background: "rgba(255, 255, 255, 0.03)",
|
||||||
|
border: "1px solid rgba(255, 255, 255, 0.08)",
|
||||||
|
borderRadius: "8px",
|
||||||
|
color: "rgba(255, 255, 255, 0.6)",
|
||||||
|
cursor: "pointer",
|
||||||
|
transition: "all 0.2s",
|
||||||
|
},
|
||||||
|
tabButtonActive: {
|
||||||
|
background: "rgba(167, 139, 250, 0.15)",
|
||||||
|
border: "1px solid #a78bfa",
|
||||||
|
color: "#a78bfa",
|
||||||
|
},
|
||||||
|
filterRow: {
|
||||||
|
display: "flex",
|
||||||
|
gap: "0.75rem",
|
||||||
|
marginBottom: "1.5rem",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
},
|
||||||
|
filterSelect: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
padding: "0.5rem 1rem",
|
||||||
|
background: "rgba(255, 255, 255, 0.05)",
|
||||||
|
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||||
|
borderRadius: "6px",
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: "0.875rem",
|
||||||
|
},
|
||||||
|
searchInput: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
padding: "0.5rem 1rem",
|
||||||
|
background: "rgba(255, 255, 255, 0.05)",
|
||||||
|
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||||
|
borderRadius: "6px",
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: "0.875rem",
|
||||||
|
minWidth: "200px",
|
||||||
|
},
|
||||||
|
tradeList: {
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: "0.75rem",
|
||||||
|
},
|
||||||
|
tradeCard: {
|
||||||
|
background: "rgba(255, 255, 255, 0.03)",
|
||||||
|
border: "1px solid rgba(255, 255, 255, 0.08)",
|
||||||
|
borderRadius: "12px",
|
||||||
|
padding: "1.25rem",
|
||||||
|
transition: "all 0.2s",
|
||||||
|
},
|
||||||
|
tradeHeader: {
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "flex-start",
|
||||||
|
gap: "1rem",
|
||||||
|
},
|
||||||
|
tradeInfo: {
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: "0.25rem",
|
||||||
|
},
|
||||||
|
tradeTime: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "1rem",
|
||||||
|
fontWeight: 500,
|
||||||
|
color: "#fff",
|
||||||
|
marginBottom: "0.25rem",
|
||||||
|
},
|
||||||
|
userInfo: {
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: "0.5rem",
|
||||||
|
marginBottom: "0.5rem",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
},
|
||||||
|
userEmail: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "0.875rem",
|
||||||
|
color: "rgba(255, 255, 255, 0.7)",
|
||||||
|
},
|
||||||
|
contactBadge: {
|
||||||
|
fontFamily: "'DM Mono', monospace",
|
||||||
|
fontSize: "0.7rem",
|
||||||
|
padding: "0.15rem 0.5rem",
|
||||||
|
background: "rgba(99, 102, 241, 0.15)",
|
||||||
|
border: "1px solid rgba(99, 102, 241, 0.3)",
|
||||||
|
borderRadius: "4px",
|
||||||
|
color: "rgba(129, 140, 248, 0.9)",
|
||||||
|
},
|
||||||
|
tradeDetails: {
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: "0.5rem",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
},
|
||||||
|
directionBadge: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "0.7rem",
|
||||||
|
fontWeight: 600,
|
||||||
|
padding: "0.2rem 0.5rem",
|
||||||
|
borderRadius: "4px",
|
||||||
|
textTransform: "uppercase",
|
||||||
|
},
|
||||||
|
amount: {
|
||||||
|
fontFamily: "'DM Mono', monospace",
|
||||||
|
fontSize: "0.95rem",
|
||||||
|
color: "#fff",
|
||||||
|
fontWeight: 500,
|
||||||
|
},
|
||||||
|
arrow: {
|
||||||
|
color: "rgba(255, 255, 255, 0.3)",
|
||||||
|
fontSize: "0.8rem",
|
||||||
|
},
|
||||||
|
satsAmount: {
|
||||||
|
fontFamily: "'DM Mono', monospace",
|
||||||
|
fontSize: "0.9rem",
|
||||||
|
color: "#f7931a",
|
||||||
|
},
|
||||||
|
rateRow: {
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: "0.5rem",
|
||||||
|
marginTop: "0.25rem",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
},
|
||||||
|
rateLabel: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
fontSize: "0.75rem",
|
||||||
|
color: "rgba(255, 255, 255, 0.4)",
|
||||||
|
},
|
||||||
|
rateValue: {
|
||||||
|
fontFamily: "'DM Mono', monospace",
|
||||||
|
fontSize: "0.8rem",
|
||||||
|
color: "rgba(255, 255, 255, 0.7)",
|
||||||
|
},
|
||||||
|
buttonGroup: {
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: "0.5rem",
|
||||||
|
alignItems: "flex-end",
|
||||||
|
},
|
||||||
|
successButton: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
padding: "0.4rem 0.85rem",
|
||||||
|
fontSize: "0.75rem",
|
||||||
|
fontWeight: 500,
|
||||||
|
background: "rgba(34, 197, 94, 0.2)",
|
||||||
|
border: "1px solid rgba(34, 197, 94, 0.3)",
|
||||||
|
borderRadius: "6px",
|
||||||
|
color: "#4ade80",
|
||||||
|
cursor: "pointer",
|
||||||
|
transition: "all 0.2s",
|
||||||
|
},
|
||||||
|
warningButton: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
padding: "0.4rem 0.85rem",
|
||||||
|
fontSize: "0.75rem",
|
||||||
|
fontWeight: 500,
|
||||||
|
background: "rgba(251, 146, 60, 0.2)",
|
||||||
|
border: "1px solid rgba(251, 146, 60, 0.3)",
|
||||||
|
borderRadius: "6px",
|
||||||
|
color: "#fb923c",
|
||||||
|
cursor: "pointer",
|
||||||
|
transition: "all 0.2s",
|
||||||
|
},
|
||||||
|
dangerButton: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
padding: "0.4rem 0.85rem",
|
||||||
|
fontSize: "0.75rem",
|
||||||
|
fontWeight: 500,
|
||||||
|
background: "rgba(239, 68, 68, 0.2)",
|
||||||
|
border: "1px solid rgba(239, 68, 68, 0.3)",
|
||||||
|
borderRadius: "6px",
|
||||||
|
color: "#f87171",
|
||||||
|
cursor: "pointer",
|
||||||
|
transition: "all 0.2s",
|
||||||
|
},
|
||||||
|
emptyState: {
|
||||||
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||||
|
color: "rgba(255, 255, 255, 0.4)",
|
||||||
|
textAlign: "center",
|
||||||
|
padding: "3rem",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -37,9 +37,9 @@ const REGULAR_NAV_ITEMS: NavItem[] = [
|
||||||
];
|
];
|
||||||
|
|
||||||
const ADMIN_NAV_ITEMS: NavItem[] = [
|
const ADMIN_NAV_ITEMS: NavItem[] = [
|
||||||
{ id: "admin-invites", label: "Invites", href: "/admin/invites", adminOnly: true },
|
{ id: "admin-appointments", label: "Trades", href: "/admin/trades", adminOnly: true },
|
||||||
{ id: "admin-availability", label: "Availability", href: "/admin/availability", adminOnly: true },
|
{ id: "admin-availability", label: "Availability", href: "/admin/availability", adminOnly: true },
|
||||||
{ id: "admin-appointments", label: "Appointments", href: "/admin/appointments", adminOnly: true },
|
{ id: "admin-invites", label: "Invites", href: "/admin/invites", adminOnly: true },
|
||||||
{ id: "admin-price-history", label: "Prices", href: "/admin/price-history", adminOnly: true },
|
{ id: "admin-price-history", label: "Prices", href: "/admin/price-history", adminOnly: true },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -22,9 +22,9 @@ export default function Home() {
|
||||||
|
|
||||||
// Redirect based on role
|
// Redirect based on role
|
||||||
if (hasRole(ADMIN)) {
|
if (hasRole(ADMIN)) {
|
||||||
router.replace("/admin/appointments");
|
router.replace("/admin/trades");
|
||||||
} else if (hasRole(REGULAR)) {
|
} else if (hasRole(REGULAR)) {
|
||||||
router.replace("/booking");
|
router.replace("/exchange");
|
||||||
} else {
|
} else {
|
||||||
// User with no roles - redirect to login
|
// User with no roles - redirect to login
|
||||||
router.replace("/login");
|
router.replace("/login");
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue