feat: implement client overview dashboard and admin portal structure with API services and page components
This commit is contained in:
234
src/pages/admin/DevTickets.tsx
Normal file
234
src/pages/admin/DevTickets.tsx
Normal file
@@ -0,0 +1,234 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import {
|
||||
Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
|
||||
Paper, TextField, FormControl, InputLabel, Select, MenuItem, CircularProgress,
|
||||
Chip, TablePagination, Link, Tooltip,
|
||||
} from '@mui/material';
|
||||
import { adminService } from '../../api/adminService';
|
||||
import type { DevTicket } from '../../api/adminService';
|
||||
import { useToastStore } from '../../store/toastStore';
|
||||
|
||||
const PAGE_SIZE = 25;
|
||||
|
||||
const gitStatusColor = (status: DevTicket['git_status']): 'success' | 'warning' | 'error' => {
|
||||
if (status === 'success') return 'success';
|
||||
if (status === 'failed') return 'error';
|
||||
return 'warning';
|
||||
};
|
||||
|
||||
const truncate = (text: string, max = 80) => (text.length > max ? `${text.slice(0, max)}…` : text);
|
||||
|
||||
export const DevTickets: React.FC = () => {
|
||||
const [search, setSearch] = useState('');
|
||||
const [gitStatus, setGitStatus] = useState<'' | 'pending' | 'success' | 'failed'>('');
|
||||
const [dateFrom, setDateFrom] = useState('');
|
||||
const [dateTo, setDateTo] = useState('');
|
||||
const [records, setRecords] = useState<DevTicket[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [page, setPage] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// dateTo is a bare date; created_at is a full timestamp, and both fields
|
||||
// are independently editable, so normalize the order and extend "to" to
|
||||
// end-of-day - see Allocation.tsx/AuditHistory.tsx for the same fix after
|
||||
// hitting this exact bug there (an inverted range silently matches zero
|
||||
// rows instead of erroring).
|
||||
const [effectiveDateFrom, effectiveDateTo] = (() => {
|
||||
if (!dateFrom || !dateTo) return [dateFrom || undefined, dateTo ? `${dateTo}T23:59:59` : undefined];
|
||||
return dateFrom <= dateTo
|
||||
? [dateFrom, `${dateTo}T23:59:59`]
|
||||
: [dateTo, `${dateFrom}T23:59:59`];
|
||||
})();
|
||||
|
||||
// Live Gitea issue state (open/closed) - git_status only ever records
|
||||
// whether we succeeded in *filing* the issue, never what happened to it
|
||||
// afterward, so this is fetched separately from the main list.
|
||||
const [issueStates, setIssueStates] = useState<Record<number, 'open' | 'closed' | null>>({});
|
||||
const [issueStatesLoading, setIssueStatesLoading] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await adminService.getDevTickets({
|
||||
search: search || undefined,
|
||||
gitStatus: gitStatus || undefined,
|
||||
dateFrom: effectiveDateFrom,
|
||||
dateTo: effectiveDateTo,
|
||||
limit: PAGE_SIZE,
|
||||
offset: page * PAGE_SIZE,
|
||||
});
|
||||
setRecords(result.records);
|
||||
setTotal(result.total);
|
||||
} catch (err) {
|
||||
useToastStore.getState().showToast('Failed to load dev tickets.', 'error');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [search, gitStatus, effectiveDateFrom, effectiveDateTo, page]);
|
||||
|
||||
useEffect(() => {
|
||||
const timeout = setTimeout(load, 300);
|
||||
return () => clearTimeout(timeout);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [search, gitStatus, effectiveDateFrom, effectiveDateTo, page]);
|
||||
|
||||
useEffect(() => {
|
||||
setPage(0);
|
||||
}, [search, gitStatus, effectiveDateFrom, effectiveDateTo]);
|
||||
|
||||
useEffect(() => {
|
||||
// Keyed by ticket id, not issue number - the backend resolves each
|
||||
// ticket's own stored git_issue_url, so this stays correct even for
|
||||
// tickets filed before a repo migration.
|
||||
const ticketIds = records
|
||||
.filter((t) => t.git_status === 'success' && t.git_issue_number != null)
|
||||
.map((t) => t.id);
|
||||
|
||||
if (ticketIds.length === 0) {
|
||||
setIssueStates({});
|
||||
return;
|
||||
}
|
||||
|
||||
setIssueStatesLoading(true);
|
||||
adminService.getIssueStates(ticketIds)
|
||||
.then(setIssueStates)
|
||||
.catch(() => useToastStore.getState().showToast('Failed to check live Gitea issue status.', 'error'))
|
||||
.finally(() => setIssueStatesLoading(false));
|
||||
}, [records]);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', gap: 2, mb: 3, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<TextField
|
||||
label="Search (dev, reporter, message, anomaly ID)"
|
||||
size="small"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
sx={{ minWidth: 300 }}
|
||||
/>
|
||||
<FormControl size="small" sx={{ minWidth: 160 }}>
|
||||
<InputLabel>Git status</InputLabel>
|
||||
<Select label="Git status" value={gitStatus} onChange={(e) => setGitStatus(e.target.value as any)}>
|
||||
<MenuItem value="">All</MenuItem>
|
||||
<MenuItem value="pending">Pending</MenuItem>
|
||||
<MenuItem value="success">Success</MenuItem>
|
||||
<MenuItem value="failed">Failed</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<TextField
|
||||
label="Created from"
|
||||
type="date"
|
||||
size="small"
|
||||
value={dateFrom}
|
||||
onChange={(e) => setDateFrom(e.target.value)}
|
||||
slotProps={{ inputLabel: { shrink: true } }}
|
||||
/>
|
||||
<TextField
|
||||
label="Created to"
|
||||
type="date"
|
||||
size="small"
|
||||
value={dateTo}
|
||||
onChange={(e) => setDateTo(e.target.value)}
|
||||
slotProps={{ inputLabel: { shrink: true } }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{loading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>
|
||||
) : (
|
||||
<TableContainer component={Paper}>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Anomaly ID</TableCell>
|
||||
<TableCell>Asset / Plaza</TableCell>
|
||||
<TableCell>Dev</TableCell>
|
||||
<TableCell>Reporter</TableCell>
|
||||
<TableCell>Message</TableCell>
|
||||
<TableCell>RocketChat</TableCell>
|
||||
<TableCell>Git</TableCell>
|
||||
<TableCell>Issue status</TableCell>
|
||||
<TableCell>Created</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{records.length === 0 && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={9} align="center" sx={{ color: 'text.secondary' }}>
|
||||
No dev tickets found.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
{records.map((t) => {
|
||||
const liveState = t.git_status === 'success' && t.git_issue_number != null ? issueStates[t.id] : undefined;
|
||||
return (
|
||||
<TableRow key={t.id}>
|
||||
<TableCell>{t.anomaly_id}</TableCell>
|
||||
<TableCell>{[t.asset, t.plaza].filter(Boolean).join(' / ') || '—'}</TableCell>
|
||||
<TableCell>@{t.dev_handle}</TableCell>
|
||||
<TableCell>{t.reporter || '—'}</TableCell>
|
||||
<TableCell>
|
||||
<Tooltip title={t.message_text}>
|
||||
<span>{truncate(t.message_text)}</span>
|
||||
</Tooltip>
|
||||
{t.duplicate_of_id && (
|
||||
<Chip size="small" label={`dup of #${t.duplicate_of_id}`} sx={{ ml: 1 }} variant="outlined" />
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{t.rocketchat_sent ? (
|
||||
<Chip size="small" label="Sent" color="success" />
|
||||
) : (
|
||||
<Tooltip title={t.rocketchat_error || 'Not sent'}>
|
||||
<Chip size="small" label="Failed" color="error" />
|
||||
</Tooltip>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{t.git_issue_url ? (
|
||||
<Link href={t.git_issue_url} target="_blank" rel="noopener noreferrer">
|
||||
<Chip size="small" label={`#${t.git_issue_number}`} color={gitStatusColor(t.git_status)} clickable />
|
||||
</Link>
|
||||
) : (
|
||||
<Tooltip title={t.git_error || ''}>
|
||||
<Chip size="small" label={t.git_status} color={gitStatusColor(t.git_status)} />
|
||||
</Tooltip>
|
||||
)}
|
||||
{t.retry_count > 0 && (
|
||||
<Chip size="small" label={`retries: ${t.retry_count}`} sx={{ ml: 1 }} variant="outlined" />
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{t.git_status !== 'success' ? (
|
||||
'—'
|
||||
) : issueStatesLoading && liveState === undefined ? (
|
||||
<CircularProgress size={14} />
|
||||
) : liveState === 'closed' ? (
|
||||
<Chip size="small" label="Closed" color="default" />
|
||||
) : liveState === 'open' ? (
|
||||
<Chip size="small" label="Open" color="info" />
|
||||
) : (
|
||||
<Tooltip title="Could not reach Gitea to check">
|
||||
<Chip size="small" label="Unknown" variant="outlined" />
|
||||
</Tooltip>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>{new Date(t.created_at).toLocaleString()}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<TablePagination
|
||||
component="div"
|
||||
count={total}
|
||||
page={page}
|
||||
onPageChange={(_, newPage) => setPage(newPage)}
|
||||
rowsPerPage={PAGE_SIZE}
|
||||
rowsPerPageOptions={[PAGE_SIZE]}
|
||||
/>
|
||||
</TableContainer>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user