feat: add price history admin page with fetch button
This commit is contained in:
parent
94497f9200
commit
c2dd7b5b91
GPG key ID:
883EDBAA726BD96C
3 changed files with 372 additions and 1 deletions
265
frontend/app/admin/price-history/page.tsx
Normal file
265
frontend/app/admin/price-history/page.tsx
Normal file
|
|
@ -0,0 +1,265 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { Permission } from "../../auth-context";
|
||||
import { api } from "../../api";
|
||||
import { sharedStyles } from "../../styles/shared";
|
||||
import { Header } from "../../components/Header";
|
||||
import { useRequireAuth } from "../../hooks/useRequireAuth";
|
||||
import { components } from "../../generated/api";
|
||||
|
||||
type PriceHistoryRecord = components["schemas"]["PriceHistoryResponse"];
|
||||
|
||||
export default function AdminPriceHistoryPage() {
|
||||
const [records, setRecords] = useState<PriceHistoryRecord[]>([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isLoadingData, setIsLoadingData] = useState(true);
|
||||
const [isFetching, setIsFetching] = useState(false);
|
||||
const { user, isLoading, isAuthorized } = useRequireAuth({
|
||||
requiredPermission: Permission.VIEW_AUDIT,
|
||||
fallbackRedirect: "/",
|
||||
});
|
||||
|
||||
const fetchRecords = useCallback(async () => {
|
||||
setError(null);
|
||||
setIsLoadingData(true);
|
||||
try {
|
||||
const data = await api.get<PriceHistoryRecord[]>("/api/audit/price-history");
|
||||
setRecords(data);
|
||||
} catch (err) {
|
||||
setRecords([]);
|
||||
setError(err instanceof Error ? err.message : "Failed to load price history");
|
||||
} finally {
|
||||
setIsLoadingData(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleFetchNow = async () => {
|
||||
setIsFetching(true);
|
||||
setError(null);
|
||||
try {
|
||||
await api.post<PriceHistoryRecord>("/api/audit/price-history/fetch", {});
|
||||
await fetchRecords();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to fetch price");
|
||||
} finally {
|
||||
setIsFetching(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (user && isAuthorized) {
|
||||
fetchRecords();
|
||||
}
|
||||
}, [user, isAuthorized, fetchRecords]);
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
return new Date(dateStr).toLocaleString();
|
||||
};
|
||||
|
||||
const formatPrice = (price: number) => {
|
||||
return new Intl.NumberFormat("en-US", {
|
||||
style: "currency",
|
||||
currency: "EUR",
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
}).format(price);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<main style={styles.main}>
|
||||
<div style={styles.loader}>Loading...</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user || !isAuthorized) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<main style={styles.main}>
|
||||
<Header currentPage="admin-price-history" />
|
||||
|
||||
<div style={styles.content}>
|
||||
<div style={styles.tableCard}>
|
||||
<div style={styles.tableHeader}>
|
||||
<h2 style={styles.tableTitle}>Bitcoin Price History</h2>
|
||||
<div style={styles.headerActions}>
|
||||
<span style={styles.totalCount}>{records.length} records</span>
|
||||
<button onClick={fetchRecords} style={styles.refreshBtn} disabled={isLoadingData}>
|
||||
Refresh
|
||||
</button>
|
||||
<button onClick={handleFetchNow} style={styles.fetchBtn} disabled={isFetching}>
|
||||
{isFetching ? "Fetching..." : "Fetch Now"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={styles.tableWrapper}>
|
||||
<table style={styles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={styles.th}>Source</th>
|
||||
<th style={styles.th}>Pair</th>
|
||||
<th style={styles.th}>Price</th>
|
||||
<th style={styles.th}>Timestamp</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{error && (
|
||||
<tr>
|
||||
<td colSpan={4} style={styles.errorRow}>
|
||||
{error}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{!error && isLoadingData && (
|
||||
<tr>
|
||||
<td colSpan={4} style={styles.emptyRow}>
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{!error && !isLoadingData && records.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={4} style={styles.emptyRow}>
|
||||
No price records yet. Click "Fetch Now" to get the current price.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{!error &&
|
||||
!isLoadingData &&
|
||||
records.map((record) => (
|
||||
<tr key={record.id} style={styles.tr}>
|
||||
<td style={styles.td}>{record.source}</td>
|
||||
<td style={styles.td}>{record.pair}</td>
|
||||
<td style={styles.tdPrice}>{formatPrice(record.price)}</td>
|
||||
<td style={styles.tdDate}>{formatDate(record.timestamp)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const pageStyles: Record<string, React.CSSProperties> = {
|
||||
content: {
|
||||
flex: 1,
|
||||
padding: "2rem",
|
||||
overflowY: "auto",
|
||||
},
|
||||
tableCard: {
|
||||
background: "rgba(255, 255, 255, 0.03)",
|
||||
backdropFilter: "blur(10px)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.08)",
|
||||
borderRadius: "20px",
|
||||
padding: "1.5rem",
|
||||
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
|
||||
maxWidth: "900px",
|
||||
margin: "0 auto",
|
||||
},
|
||||
tableHeader: {
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: "1rem",
|
||||
flexWrap: "wrap",
|
||||
gap: "1rem",
|
||||
},
|
||||
tableTitle: {
|
||||
fontFamily: "'Instrument Serif', Georgia, serif",
|
||||
fontSize: "1.5rem",
|
||||
fontWeight: 400,
|
||||
color: "#fff",
|
||||
margin: 0,
|
||||
},
|
||||
headerActions: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "1rem",
|
||||
},
|
||||
totalCount: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.875rem",
|
||||
color: "rgba(255, 255, 255, 0.4)",
|
||||
},
|
||||
refreshBtn: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.875rem",
|
||||
padding: "0.5rem 1rem",
|
||||
background: "rgba(255, 255, 255, 0.08)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.15)",
|
||||
borderRadius: "8px",
|
||||
color: "rgba(255, 255, 255, 0.8)",
|
||||
cursor: "pointer",
|
||||
},
|
||||
fetchBtn: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.875rem",
|
||||
padding: "0.5rem 1rem",
|
||||
background: "linear-gradient(135deg, #a78bfa, #8b5cf6)",
|
||||
border: "none",
|
||||
borderRadius: "8px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
fontWeight: 500,
|
||||
},
|
||||
tableWrapper: {
|
||||
overflowX: "auto",
|
||||
},
|
||||
table: {
|
||||
width: "100%",
|
||||
borderCollapse: "collapse",
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
},
|
||||
th: {
|
||||
textAlign: "left",
|
||||
padding: "0.75rem 1rem",
|
||||
fontSize: "0.75rem",
|
||||
fontWeight: 600,
|
||||
color: "rgba(255, 255, 255, 0.4)",
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.05em",
|
||||
borderBottom: "1px solid rgba(255, 255, 255, 0.08)",
|
||||
},
|
||||
tr: {
|
||||
borderBottom: "1px solid rgba(255, 255, 255, 0.04)",
|
||||
},
|
||||
td: {
|
||||
padding: "0.875rem 1rem",
|
||||
fontSize: "0.875rem",
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
},
|
||||
tdPrice: {
|
||||
padding: "0.875rem 1rem",
|
||||
fontSize: "1rem",
|
||||
color: "#fbbf24",
|
||||
fontWeight: 600,
|
||||
fontFamily: "'DM Mono', monospace",
|
||||
},
|
||||
tdDate: {
|
||||
padding: "0.875rem 1rem",
|
||||
fontSize: "0.75rem",
|
||||
color: "rgba(255, 255, 255, 0.4)",
|
||||
},
|
||||
emptyRow: {
|
||||
padding: "2rem 1rem",
|
||||
textAlign: "center",
|
||||
color: "rgba(255, 255, 255, 0.3)",
|
||||
fontSize: "0.875rem",
|
||||
},
|
||||
errorRow: {
|
||||
padding: "2rem 1rem",
|
||||
textAlign: "center",
|
||||
color: "#f87171",
|
||||
fontSize: "0.875rem",
|
||||
},
|
||||
};
|
||||
|
||||
const styles = { ...sharedStyles, ...pageStyles };
|
||||
|
|
@ -18,7 +18,8 @@ type PageId =
|
|||
| "admin-invites"
|
||||
| "admin-availability"
|
||||
| "admin-appointments"
|
||||
| "admin-random-jobs";
|
||||
| "admin-random-jobs"
|
||||
| "admin-price-history";
|
||||
|
||||
interface HeaderProps {
|
||||
currentPage: PageId;
|
||||
|
|
@ -47,6 +48,7 @@ const ADMIN_NAV_ITEMS: NavItem[] = [
|
|||
{ id: "admin-availability", label: "Availability", href: "/admin/availability", adminOnly: true },
|
||||
{ id: "admin-appointments", label: "Appointments", href: "/admin/appointments", adminOnly: true },
|
||||
{ id: "admin-random-jobs", label: "Random Jobs", href: "/admin/random-jobs", adminOnly: true },
|
||||
{ id: "admin-price-history", label: "Prices", href: "/admin/price-history", adminOnly: true },
|
||||
];
|
||||
|
||||
export function Header({ currentPage }: HeaderProps) {
|
||||
|
|
|
|||
|
|
@ -204,6 +204,46 @@ export interface paths {
|
|||
patch?: never;
|
||||
trace?: never;
|
||||
};
|
||||
"/api/audit/price-history": {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
/**
|
||||
* Get Price History
|
||||
* @description Get the 20 most recent price history records.
|
||||
*/
|
||||
get: operations["get_price_history_api_audit_price_history_get"];
|
||||
put?: never;
|
||||
post?: never;
|
||||
delete?: never;
|
||||
options?: never;
|
||||
head?: never;
|
||||
patch?: never;
|
||||
trace?: never;
|
||||
};
|
||||
"/api/audit/price-history/fetch": {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
get?: never;
|
||||
put?: never;
|
||||
/**
|
||||
* Fetch Price Now
|
||||
* @description Manually trigger a price fetch from Bitfinex.
|
||||
*/
|
||||
post: operations["fetch_price_now_api_audit_price_history_fetch_post"];
|
||||
delete?: never;
|
||||
options?: never;
|
||||
head?: never;
|
||||
patch?: never;
|
||||
trace?: never;
|
||||
};
|
||||
"/api/profile": {
|
||||
parameters: {
|
||||
query?: never;
|
||||
|
|
@ -791,6 +831,30 @@ export interface components {
|
|||
* @enum {string}
|
||||
*/
|
||||
Permission: "view_counter" | "increment_counter" | "use_sum" | "view_audit" | "manage_own_profile" | "manage_invites" | "view_own_invites" | "book_appointment" | "view_own_appointments" | "cancel_own_appointment" | "manage_availability" | "view_all_appointments" | "cancel_any_appointment";
|
||||
/**
|
||||
* PriceHistoryResponse
|
||||
* @description Response model for a price history record.
|
||||
*/
|
||||
PriceHistoryResponse: {
|
||||
/** Id */
|
||||
id: number;
|
||||
/** Source */
|
||||
source: string;
|
||||
/** Pair */
|
||||
pair: string;
|
||||
/** Price */
|
||||
price: number;
|
||||
/**
|
||||
* Timestamp
|
||||
* Format: date-time
|
||||
*/
|
||||
timestamp: string;
|
||||
/**
|
||||
* Created At
|
||||
* Format: date-time
|
||||
*/
|
||||
created_at: string;
|
||||
};
|
||||
/**
|
||||
* ProfileResponse
|
||||
* @description Response model for profile data.
|
||||
|
|
@ -1268,6 +1332,46 @@ export interface operations {
|
|||
};
|
||||
};
|
||||
};
|
||||
get_price_history_api_audit_price_history_get: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
requestBody?: never;
|
||||
responses: {
|
||||
/** @description Successful Response */
|
||||
200: {
|
||||
headers: {
|
||||
[name: string]: unknown;
|
||||
};
|
||||
content: {
|
||||
"application/json": components["schemas"]["PriceHistoryResponse"][];
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
fetch_price_now_api_audit_price_history_fetch_post: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
requestBody?: never;
|
||||
responses: {
|
||||
/** @description Successful Response */
|
||||
200: {
|
||||
headers: {
|
||||
[name: string]: unknown;
|
||||
};
|
||||
content: {
|
||||
"application/json": components["schemas"]["PriceHistoryResponse"];
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
get_profile_api_profile_get: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue