first commit
This commit is contained in:
Dennis Thiessen
@@ -0,0 +1,36 @@
|
||||
import { useState } from 'react';
|
||||
import { useCleanupData } from '../../hooks/useAdmin';
|
||||
|
||||
export function DataCleanup() {
|
||||
const [days, setDays] = useState(90);
|
||||
const cleanup = useCleanupData();
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (days < 1) return;
|
||||
cleanup.mutate(days);
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="glass p-5 flex flex-wrap items-end gap-4">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label htmlFor="cleanup-days" className="text-xs text-gray-400">Older than (days)</label>
|
||||
<input
|
||||
id="cleanup-days"
|
||||
type="number"
|
||||
min={1}
|
||||
value={days}
|
||||
onChange={(e) => setDays(Number(e.target.value))}
|
||||
className="w-28 input-glass px-3 py-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={cleanup.isPending || days < 1}
|
||||
className="rounded-lg bg-gradient-to-r from-red-600 to-red-500 px-4 py-2 text-sm font-medium text-white hover:from-red-500 hover:to-red-400 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
|
||||
>
|
||||
{cleanup.isPending ? 'Cleaning…' : 'Run Cleanup'}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import { useJobs, useToggleJob, useTriggerJob } from '../../hooks/useAdmin';
|
||||
import { SkeletonTable } from '../ui/Skeleton';
|
||||
|
||||
function formatNextRun(iso: string | null): string {
|
||||
if (!iso) return '—';
|
||||
const d = new Date(iso);
|
||||
const now = new Date();
|
||||
const diffMs = d.getTime() - now.getTime();
|
||||
if (diffMs < 0) return 'imminent';
|
||||
const mins = Math.round(diffMs / 60_000);
|
||||
if (mins < 60) return `in ${mins}m`;
|
||||
const hrs = Math.round(mins / 60);
|
||||
return `in ${hrs}h`;
|
||||
}
|
||||
|
||||
export function JobControls() {
|
||||
const { data: jobs, isLoading } = useJobs();
|
||||
const toggleJob = useToggleJob();
|
||||
const triggerJob = useTriggerJob();
|
||||
|
||||
if (isLoading) return <SkeletonTable rows={4} cols={3} />;
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{jobs?.map((job) => (
|
||||
<div key={job.name} className="glass p-4 glass-hover">
|
||||
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Status dot */}
|
||||
<span
|
||||
className={`inline-block h-2.5 w-2.5 rounded-full shrink-0 ${
|
||||
job.enabled
|
||||
? 'bg-emerald-400 shadow-lg shadow-emerald-400/40'
|
||||
: 'bg-gray-500'
|
||||
}`}
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-200">{job.label}</span>
|
||||
<div className="flex items-center gap-3 mt-0.5">
|
||||
<span className={`text-[11px] font-medium ${job.enabled ? 'text-emerald-400' : 'text-gray-500'}`}>
|
||||
{job.enabled ? 'Active' : 'Inactive'}
|
||||
</span>
|
||||
{job.enabled && job.next_run_at && (
|
||||
<span className="text-[11px] text-gray-500">
|
||||
Next run {formatNextRun(job.next_run_at)}
|
||||
</span>
|
||||
)}
|
||||
{!job.registered && (
|
||||
<span className="text-[11px] text-red-400">Not registered</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleJob.mutate({ jobName: job.name, enabled: !job.enabled })}
|
||||
disabled={toggleJob.isPending}
|
||||
className={`rounded-lg border px-3 py-1.5 text-xs transition-all duration-200 disabled:opacity-50 ${
|
||||
job.enabled
|
||||
? 'border-red-500/20 bg-red-500/10 text-red-400 hover:bg-red-500/20'
|
||||
: 'border-emerald-500/20 bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20'
|
||||
}`}
|
||||
>
|
||||
{job.enabled ? 'Disable' : 'Enable'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => triggerJob.mutate(job.name)}
|
||||
disabled={triggerJob.isPending || !job.enabled}
|
||||
className="btn-gradient px-3 py-1.5 text-xs disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<span>{triggerJob.isPending ? 'Triggering…' : 'Trigger Now'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import { useState } from 'react';
|
||||
import { useSettings, useUpdateSetting } from '../../hooks/useAdmin';
|
||||
import { SkeletonTable } from '../ui/Skeleton';
|
||||
import type { SystemSetting } from '../../lib/types';
|
||||
|
||||
export function SettingsForm() {
|
||||
const { data: settings, isLoading, isError, error } = useSettings();
|
||||
const updateSetting = useUpdateSetting();
|
||||
const [edits, setEdits] = useState<Record<string, string>>({});
|
||||
|
||||
function currentValue(setting: SystemSetting) {
|
||||
return edits[setting.key] ?? setting.value;
|
||||
}
|
||||
|
||||
function handleChange(key: string, value: string) {
|
||||
setEdits((prev) => ({ ...prev, [key]: value }));
|
||||
}
|
||||
|
||||
function handleSave(key: string) {
|
||||
const value = edits[key];
|
||||
if (value === undefined) return;
|
||||
updateSetting.mutate(
|
||||
{ key, value },
|
||||
{ onSuccess: () => setEdits((prev) => { const next = { ...prev }; delete next[key]; return next; }) },
|
||||
);
|
||||
}
|
||||
|
||||
function handleToggleRegistration(current: string) {
|
||||
updateSetting.mutate({ key: 'registration', value: current === 'true' ? 'false' : 'true' });
|
||||
}
|
||||
|
||||
if (isLoading) return <SkeletonTable rows={4} cols={2} />;
|
||||
if (isError) return <p className="text-sm text-red-400">{(error as Error)?.message || 'Failed to load settings'}</p>;
|
||||
if (!settings || settings.length === 0) return <p className="text-sm text-gray-500">No settings found.</p>;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{settings.map((setting) => (
|
||||
<div key={setting.key} className="glass p-4 flex flex-wrap items-center gap-3 glass-hover">
|
||||
<label className="min-w-[140px] text-sm font-medium text-gray-300">{setting.key}</label>
|
||||
{setting.key === 'registration' ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleToggleRegistration(setting.value)}
|
||||
disabled={updateSetting.isPending}
|
||||
className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-[#0a0e1a] disabled:opacity-50 ${
|
||||
setting.value === 'true' ? 'bg-gradient-to-r from-blue-600 to-indigo-600' : 'bg-white/[0.1]'
|
||||
}`}
|
||||
role="switch"
|
||||
aria-checked={setting.value === 'true'}
|
||||
aria-label={`Toggle ${setting.key}`}
|
||||
>
|
||||
<span className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform transition-transform duration-200 ${setting.value === 'true' ? 'translate-x-5' : 'translate-x-0'}`} />
|
||||
</button>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
<input
|
||||
type="text"
|
||||
value={currentValue(setting)}
|
||||
onChange={(e) => handleChange(setting.key, e.target.value)}
|
||||
className="flex-1 input-glass px-3 py-2 text-sm"
|
||||
/>
|
||||
{edits[setting.key] !== undefined && edits[setting.key] !== setting.value && (
|
||||
<button
|
||||
onClick={() => handleSave(setting.key)}
|
||||
disabled={updateSetting.isPending}
|
||||
className="btn-gradient px-3 py-2 text-xs disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<span>{updateSetting.isPending ? 'Saving…' : 'Save'}</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import { useState } from 'react';
|
||||
import { useTickers, useAddTicker, useDeleteTicker } from '../../hooks/useTickers';
|
||||
import { ConfirmDialog } from '../ui/ConfirmDialog';
|
||||
import { SkeletonTable } from '../ui/Skeleton';
|
||||
import { formatDateTime } from '../../lib/format';
|
||||
|
||||
export function TickerManagement() {
|
||||
const { data: tickers, isLoading, isError, error } = useTickers();
|
||||
const addTicker = useAddTicker();
|
||||
const deleteTicker = useDeleteTicker();
|
||||
const [newSymbol, setNewSymbol] = useState('');
|
||||
const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
|
||||
|
||||
function handleAdd(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
const symbol = newSymbol.trim().toUpperCase();
|
||||
if (!symbol) return;
|
||||
addTicker.mutate(symbol, { onSuccess: () => setNewSymbol('') });
|
||||
}
|
||||
|
||||
function handleConfirmDelete() {
|
||||
if (!deleteTarget) return;
|
||||
deleteTicker.mutate(deleteTarget, { onSuccess: () => setDeleteTarget(null) });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<form onSubmit={handleAdd} className="flex gap-3">
|
||||
<input
|
||||
type="text"
|
||||
value={newSymbol}
|
||||
onChange={(e) => setNewSymbol(e.target.value)}
|
||||
placeholder="Enter ticker symbol (e.g. AAPL)"
|
||||
className="flex-1 input-glass px-3 py-2.5 text-sm"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={addTicker.isPending || !newSymbol.trim()}
|
||||
className="btn-gradient px-4 py-2.5 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<span>{addTicker.isPending ? 'Adding…' : 'Add Ticker'}</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{isLoading && <SkeletonTable rows={5} cols={3} />}
|
||||
{isError && <p className="text-sm text-red-400">{(error as Error)?.message || 'Failed to load tickers'}</p>}
|
||||
|
||||
{tickers && tickers.length > 0 && (
|
||||
<div className="glass overflow-x-auto">
|
||||
<table className="w-full text-sm text-left">
|
||||
<thead className="border-b border-white/[0.06] text-gray-500">
|
||||
<tr>
|
||||
<th className="px-4 py-3 font-medium text-xs uppercase tracking-wider">Symbol</th>
|
||||
<th className="px-4 py-3 font-medium text-xs uppercase tracking-wider">Added</th>
|
||||
<th className="px-4 py-3 font-medium text-xs uppercase tracking-wider text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/[0.04]">
|
||||
{tickers.map((ticker) => (
|
||||
<tr key={ticker.id} className="hover:bg-white/[0.03] transition-all duration-150">
|
||||
<td className="px-4 py-3 font-medium text-gray-100">{ticker.symbol}</td>
|
||||
<td className="px-4 py-3 text-gray-400">{formatDateTime(ticker.created_at)}</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<button
|
||||
onClick={() => setDeleteTarget(ticker.symbol)}
|
||||
disabled={deleteTicker.isPending}
|
||||
className="rounded-lg border border-red-500/20 bg-red-500/10 px-3 py-1 text-xs text-red-400 hover:bg-red-500/20 disabled:opacity-50 transition-all duration-200"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tickers && tickers.length === 0 && (
|
||||
<p className="text-sm text-gray-500">No tickers registered yet. Add one above.</p>
|
||||
)}
|
||||
|
||||
<ConfirmDialog
|
||||
open={deleteTarget !== null}
|
||||
title="Delete Ticker"
|
||||
message={`Are you sure you want to delete ${deleteTarget}? This action cannot be undone.`}
|
||||
onConfirm={handleConfirmDelete}
|
||||
onCancel={() => setDeleteTarget(null)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
import { useState } from 'react';
|
||||
import { useUsers, useCreateUser, useUpdateAccess, useResetPassword } from '../../hooks/useAdmin';
|
||||
import { SkeletonTable } from '../ui/Skeleton';
|
||||
import type { AdminUser } from '../../lib/types';
|
||||
|
||||
export function UserTable() {
|
||||
const { data: users, isLoading, isError, error } = useUsers();
|
||||
const createUser = useCreateUser();
|
||||
const updateAccess = useUpdateAccess();
|
||||
const resetPassword = useResetPassword();
|
||||
|
||||
const [newUsername, setNewUsername] = useState('');
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [newRole, setNewRole] = useState('user');
|
||||
const [newAccess, setNewAccess] = useState(true);
|
||||
const [resetTarget, setResetTarget] = useState<number | null>(null);
|
||||
const [resetPw, setResetPw] = useState('');
|
||||
|
||||
function handleCreate(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!newUsername.trim() || !newPassword.trim()) return;
|
||||
createUser.mutate(
|
||||
{ username: newUsername.trim(), password: newPassword, role: newRole, has_access: newAccess },
|
||||
{ onSuccess: () => { setNewUsername(''); setNewPassword(''); setNewRole('user'); setNewAccess(true); } },
|
||||
);
|
||||
}
|
||||
|
||||
function handleToggleAccess(user: AdminUser) {
|
||||
updateAccess.mutate({ userId: user.id, hasAccess: !user.has_access });
|
||||
}
|
||||
|
||||
function handleResetPassword(userId: number) {
|
||||
if (!resetPw.trim()) return;
|
||||
resetPassword.mutate(
|
||||
{ userId, password: resetPw },
|
||||
{ onSuccess: () => { setResetTarget(null); setResetPw(''); } },
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Create user form */}
|
||||
<form onSubmit={handleCreate} className="glass p-5 flex flex-wrap items-end gap-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-xs text-gray-400">Username</label>
|
||||
<input type="text" value={newUsername} onChange={(e) => setNewUsername(e.target.value)}
|
||||
placeholder="username" className="input-glass px-3 py-2 text-sm" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-xs text-gray-400">Password</label>
|
||||
<input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)}
|
||||
placeholder="password" className="input-glass px-3 py-2 text-sm" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-xs text-gray-400">Role</label>
|
||||
<select value={newRole} onChange={(e) => setNewRole(e.target.value)} className="input-glass px-3 py-2 text-sm">
|
||||
<option value="user">User</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
<label className="flex items-center gap-2 text-sm text-gray-300 pb-1">
|
||||
<input type="checkbox" checked={newAccess} onChange={(e) => setNewAccess(e.target.checked)}
|
||||
className="rounded border-white/[0.1] bg-white/[0.04] text-blue-500 focus:ring-blue-500" />
|
||||
Access
|
||||
</label>
|
||||
<button type="submit" disabled={createUser.isPending || !newUsername.trim() || !newPassword.trim()}
|
||||
className="btn-gradient px-4 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<span>{createUser.isPending ? 'Creating…' : 'Create User'}</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{isLoading && <SkeletonTable rows={4} cols={4} />}
|
||||
{isError && <p className="text-sm text-red-400">{(error as Error)?.message || 'Failed to load users'}</p>}
|
||||
|
||||
{users && users.length > 0 && (
|
||||
<div className="glass overflow-x-auto">
|
||||
<table className="w-full text-sm text-left">
|
||||
<thead className="border-b border-white/[0.06] text-gray-500">
|
||||
<tr>
|
||||
<th className="px-4 py-3 font-medium text-xs uppercase tracking-wider">Username</th>
|
||||
<th className="px-4 py-3 font-medium text-xs uppercase tracking-wider">Role</th>
|
||||
<th className="px-4 py-3 font-medium text-xs uppercase tracking-wider">Access</th>
|
||||
<th className="px-4 py-3 font-medium text-xs uppercase tracking-wider text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/[0.04]">
|
||||
{users.map((user) => (
|
||||
<tr key={user.id} className="hover:bg-white/[0.03] transition-all duration-150">
|
||||
<td className="px-4 py-3 font-medium text-gray-100">{user.username}</td>
|
||||
<td className="px-4 py-3 text-gray-300 capitalize">{user.role}</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`inline-block h-2.5 w-2.5 rounded-full ${user.has_access ? 'bg-emerald-400 shadow-lg shadow-emerald-400/40' : 'bg-red-400 shadow-lg shadow-red-400/40'}`} />
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<div className="flex items-center justify-end gap-2 flex-wrap">
|
||||
<button onClick={() => handleToggleAccess(user)} disabled={updateAccess.isPending}
|
||||
className="rounded-lg border border-white/[0.08] bg-white/[0.04] px-3 py-1 text-xs text-gray-300 hover:bg-white/[0.08] disabled:opacity-50 transition-all duration-200">
|
||||
{user.has_access ? 'Revoke' : 'Grant'}
|
||||
</button>
|
||||
{resetTarget === user.id ? (
|
||||
<span className="flex items-center gap-1">
|
||||
<input type="password" value={resetPw} onChange={(e) => setResetPw(e.target.value)}
|
||||
placeholder="new password" className="w-32 input-glass px-2 py-1 text-xs" />
|
||||
<button onClick={() => handleResetPassword(user.id)}
|
||||
disabled={resetPassword.isPending || !resetPw.trim()}
|
||||
className="btn-gradient px-2 py-1 text-xs disabled:opacity-50">
|
||||
<span>Save</span>
|
||||
</button>
|
||||
<button onClick={() => { setResetTarget(null); setResetPw(''); }}
|
||||
className="rounded-lg border border-white/[0.08] bg-white/[0.04] px-2 py-1 text-xs text-gray-400 hover:bg-white/[0.08] transition-all duration-200">
|
||||
Cancel
|
||||
</button>
|
||||
</span>
|
||||
) : (
|
||||
<button onClick={() => { setResetTarget(user.id); setResetPw(''); }}
|
||||
className="rounded-lg border border-white/[0.08] bg-white/[0.04] px-3 py-1 text-xs text-gray-300 hover:bg-white/[0.08] transition-all duration-200">
|
||||
Reset Password
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{users && users.length === 0 && <p className="text-sm text-gray-500">No users found.</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user