314 lines
14 KiB
TypeScript
314 lines
14 KiB
TypeScript
import { useState, useMemo, useEffect } from 'react';
|
|
import {
|
|
Box, Tab, Tabs, Typography, Grid, Chip,
|
|
Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper,
|
|
TextField, MenuItem,
|
|
} from '@mui/material';
|
|
import { Add as AddIcon } from '@mui/icons-material';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { useSearchParams, useNavigate } from 'react-router-dom';
|
|
import DashboardLayout from '../components/dashboard/DashboardLayout';
|
|
import ChatAwareFab from '../components/shared/ChatAwareFab';
|
|
import { usePermissionContext } from '../contexts/PermissionContext';
|
|
import { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
|
|
import { KatalogTab } from '../components/shared/KatalogTab';
|
|
import { AUSRUESTUNG_STATUS_LABELS, AUSRUESTUNG_STATUS_COLORS } from '../types/ausruestungsanfrage.types';
|
|
import type {
|
|
AusruestungAnfrageStatus, AusruestungAnfrage,
|
|
AusruestungOverview,
|
|
} from '../types/ausruestungsanfrage.types';
|
|
|
|
// ─── Helpers ─────────────────────────────────────────────────────────────────
|
|
|
|
function formatOrderId(r: AusruestungAnfrage): string {
|
|
if (r.bestell_jahr && r.bestell_nummer) {
|
|
return `${r.bestell_jahr}/${String(r.bestell_nummer).padStart(3, '0')}`;
|
|
}
|
|
return `#${r.id}`;
|
|
}
|
|
|
|
const ACTIVE_STATUSES: AusruestungAnfrageStatus[] = ['offen', 'genehmigt', 'bestellt'];
|
|
|
|
// ─── My Requests Tab ────────────────────────────────────────────────────────
|
|
|
|
function MeineAnfragenTab() {
|
|
const { hasPermission } = usePermissionContext();
|
|
const navigate = useNavigate();
|
|
|
|
const canCreate = hasPermission('ausruestungsanfrage:create_request');
|
|
|
|
const [statusFilter, setStatusFilter] = useState<AusruestungAnfrageStatus[]>(ACTIVE_STATUSES);
|
|
|
|
const { data: requests = [], isLoading } = useQuery({
|
|
queryKey: ['ausruestungsanfrage', 'myRequests'],
|
|
queryFn: () => ausruestungsanfrageApi.getMyRequests(),
|
|
});
|
|
|
|
const filteredRequests = useMemo(() => {
|
|
if (statusFilter.length === 0) return requests;
|
|
return requests.filter(r => statusFilter.includes(r.status));
|
|
}, [requests, statusFilter]);
|
|
|
|
const handleStatusFilterChange = (value: string) => {
|
|
if (value === 'all') {
|
|
setStatusFilter([]);
|
|
} else if (value === 'active') {
|
|
setStatusFilter(ACTIVE_STATUSES);
|
|
} else {
|
|
setStatusFilter([value as AusruestungAnfrageStatus]);
|
|
}
|
|
};
|
|
|
|
const currentFilterValue = useMemo(() => {
|
|
if (statusFilter.length === 0) return 'all';
|
|
if (statusFilter.length === ACTIVE_STATUSES.length && ACTIVE_STATUSES.every(s => statusFilter.includes(s))) return 'active';
|
|
return statusFilter[0] || 'all';
|
|
}, [statusFilter]);
|
|
|
|
if (isLoading) return <Typography color="text.secondary">Lade Anfragen...</Typography>;
|
|
|
|
return (
|
|
<Box>
|
|
<Box sx={{ display: 'flex', gap: 2, mb: 2, alignItems: 'center' }}>
|
|
<TextField
|
|
select
|
|
size="small"
|
|
label="Status"
|
|
value={currentFilterValue}
|
|
onChange={e => handleStatusFilterChange(e.target.value)}
|
|
sx={{ minWidth: 200 }}
|
|
>
|
|
<MenuItem value="active">Aktive Anfragen</MenuItem>
|
|
<MenuItem value="all">Alle</MenuItem>
|
|
{(Object.keys(AUSRUESTUNG_STATUS_LABELS) as AusruestungAnfrageStatus[]).map(s => (
|
|
<MenuItem key={s} value={s}>{AUSRUESTUNG_STATUS_LABELS[s]}</MenuItem>
|
|
))}
|
|
</TextField>
|
|
</Box>
|
|
|
|
{filteredRequests.length === 0 ? (
|
|
<Typography color="text.secondary" sx={{ mb: 2 }}>Keine Anfragen vorhanden.</Typography>
|
|
) : (
|
|
<TableContainer component={Paper} variant="outlined">
|
|
<Table size="small">
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>Anfrage ID</TableCell>
|
|
<TableCell>Bezeichnung</TableCell>
|
|
<TableCell>Status</TableCell>
|
|
<TableCell>Im Haus</TableCell>
|
|
<TableCell>Positionen</TableCell>
|
|
<TableCell>Geliefert</TableCell>
|
|
<TableCell>Erstellt am</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{filteredRequests.map(r => (
|
|
<TableRow key={r.id} hover sx={{ cursor: 'pointer' }} onClick={() => navigate('/ausruestungsanfrage/' + r.id)}>
|
|
<TableCell>{formatOrderId(r)}</TableCell>
|
|
<TableCell>{r.bezeichnung || '-'}</TableCell>
|
|
<TableCell><Chip label={AUSRUESTUNG_STATUS_LABELS[r.status]} color={AUSRUESTUNG_STATUS_COLORS[r.status]} size="small" /></TableCell>
|
|
<TableCell>
|
|
{r.im_haus_count != null && r.positionen_count != null && r.im_haus_count > 0 && r.im_haus_count < r.positionen_count
|
|
? <Chip label="Teilweise im Haus" color="warning" size="small" />
|
|
: r.im_haus_count != null && r.positionen_count != null && r.im_haus_count > 0 && r.im_haus_count >= r.positionen_count
|
|
? <Chip label="Im Haus" color="success" size="small" />
|
|
: r.im_haus ? <Chip label="Im Haus" color="success" size="small" /> : null}
|
|
</TableCell>
|
|
<TableCell>{r.positionen_count ?? r.items_count ?? '-'}</TableCell>
|
|
<TableCell>
|
|
{r.positionen_count != null && r.positionen_count > 0
|
|
? `${r.geliefert_count ?? 0}/${r.positionen_count}`
|
|
: '-'}
|
|
</TableCell>
|
|
<TableCell>{new Date(r.erstellt_am).toLocaleDateString('de-AT')}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
)}
|
|
|
|
{canCreate && (
|
|
<ChatAwareFab onClick={() => navigate('/ausruestungsanfrage/neu')} aria-label="Neue Anfrage erstellen">
|
|
<AddIcon />
|
|
</ChatAwareFab>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
// ─── Admin All Requests Tab (merged with overview) ──────────────────────────
|
|
|
|
function AlleAnfragenTab() {
|
|
const navigate = useNavigate();
|
|
const [statusFilter, setStatusFilter] = useState<string>('alle');
|
|
|
|
const { data: requests = [], isLoading: requestsLoading, isError: requestsError } = useQuery({
|
|
queryKey: ['ausruestungsanfrage', 'allRequests', statusFilter],
|
|
queryFn: () => ausruestungsanfrageApi.getRequests(statusFilter !== 'alle' ? { status: statusFilter } : undefined),
|
|
});
|
|
|
|
const { data: overview } = useQuery<AusruestungOverview>({
|
|
queryKey: ['ausruestungsanfrage', 'overview-cards'],
|
|
queryFn: () => ausruestungsanfrageApi.getOverview(),
|
|
});
|
|
|
|
return (
|
|
<Box>
|
|
<Grid container spacing={2} sx={{ mb: 3 }}>
|
|
<Grid item xs={6} sm={3}>
|
|
<Paper variant="outlined" sx={{ p: 2, textAlign: 'center' }}>
|
|
<Typography variant="h4" fontWeight={700}>{overview?.pending_count ?? '-'}</Typography>
|
|
<Typography variant="body2" color="text.secondary">Offene</Typography>
|
|
</Paper>
|
|
</Grid>
|
|
<Grid item xs={6} sm={3}>
|
|
<Paper variant="outlined" sx={{ p: 2, textAlign: 'center' }}>
|
|
<Typography variant="h4" fontWeight={700}>{overview?.approved_count ?? '-'}</Typography>
|
|
<Typography variant="body2" color="text.secondary">Genehmigte</Typography>
|
|
</Paper>
|
|
</Grid>
|
|
<Grid item xs={6} sm={3}>
|
|
<Paper variant="outlined" sx={{ p: 2, textAlign: 'center' }}>
|
|
<Typography variant="h4" fontWeight={700} color="warning.main">{overview?.unhandled_count ?? '-'}</Typography>
|
|
<Typography variant="body2" color="text.secondary">Neue (unbearbeitet)</Typography>
|
|
</Paper>
|
|
</Grid>
|
|
<Grid item xs={6} sm={3}>
|
|
<Paper variant="outlined" sx={{ p: 2, textAlign: 'center' }}>
|
|
<Typography variant="h4" fontWeight={700}>{overview?.total_items ?? '-'}</Typography>
|
|
<Typography variant="body2" color="text.secondary">Gesamt Artikel</Typography>
|
|
</Paper>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<TextField
|
|
select
|
|
size="small"
|
|
label="Status Filter"
|
|
value={statusFilter}
|
|
onChange={e => setStatusFilter(e.target.value)}
|
|
sx={{ minWidth: 200, mb: 2 }}
|
|
>
|
|
<MenuItem value="alle">Alle</MenuItem>
|
|
{(Object.keys(AUSRUESTUNG_STATUS_LABELS) as AusruestungAnfrageStatus[]).map(s => (
|
|
<MenuItem key={s} value={s}>{AUSRUESTUNG_STATUS_LABELS[s]}</MenuItem>
|
|
))}
|
|
</TextField>
|
|
|
|
{requestsLoading ? (
|
|
<Typography color="text.secondary">Lade Anfragen...</Typography>
|
|
) : requestsError ? (
|
|
<Typography color="error">Fehler beim Laden der Anfragen.</Typography>
|
|
) : requests.length === 0 ? (
|
|
<Typography color="text.secondary">Keine Anfragen vorhanden.</Typography>
|
|
) : (
|
|
<TableContainer component={Paper} variant="outlined">
|
|
<Table size="small">
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>Anfrage ID</TableCell>
|
|
<TableCell>Bezeichnung</TableCell>
|
|
<TableCell>Anfrage für</TableCell>
|
|
<TableCell>Status</TableCell>
|
|
<TableCell>Im Haus</TableCell>
|
|
<TableCell>Positionen</TableCell>
|
|
<TableCell>Geliefert</TableCell>
|
|
<TableCell>Erstellt am</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{requests.map(r => (
|
|
<TableRow key={r.id} hover sx={{ cursor: 'pointer' }} onClick={() => navigate('/ausruestungsanfrage/' + r.id)}>
|
|
<TableCell>{formatOrderId(r)}</TableCell>
|
|
<TableCell>{r.bezeichnung || '-'}</TableCell>
|
|
<TableCell>{r.fuer_benutzer_name || r.anfrager_name || r.anfrager_id}</TableCell>
|
|
<TableCell><Chip label={AUSRUESTUNG_STATUS_LABELS[r.status]} color={AUSRUESTUNG_STATUS_COLORS[r.status]} size="small" /></TableCell>
|
|
<TableCell>
|
|
{r.im_haus_count != null && r.positionen_count != null && r.im_haus_count > 0 && r.im_haus_count < r.positionen_count
|
|
? <Chip label="Teilweise im Haus" color="warning" size="small" />
|
|
: r.im_haus_count != null && r.positionen_count != null && r.im_haus_count > 0 && r.im_haus_count >= r.positionen_count
|
|
? <Chip label="Im Haus" color="success" size="small" />
|
|
: r.im_haus ? <Chip label="Im Haus" color="success" size="small" /> : null}
|
|
</TableCell>
|
|
<TableCell>{r.positionen_count ?? r.items_count ?? '-'}</TableCell>
|
|
<TableCell>
|
|
{r.positionen_count != null && r.positionen_count > 0
|
|
? `${r.geliefert_count ?? 0}/${r.positionen_count}`
|
|
: '-'}
|
|
</TableCell>
|
|
<TableCell>{new Date(r.erstellt_am).toLocaleDateString('de-AT')}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
// ─── Main Page ──────────────────────────────────────────────────────────────
|
|
|
|
export default function Ausruestungsanfrage() {
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
const { hasPermission } = usePermissionContext();
|
|
|
|
const canView = hasPermission('ausruestungsanfrage:view');
|
|
const canCreate = hasPermission('ausruestungsanfrage:create_request');
|
|
const canApprove = hasPermission('ausruestungsanfrage:approve');
|
|
|
|
const tabCount = (canCreate ? 1 : 0) + (canApprove ? 1 : 0) + (canView ? 1 : 0);
|
|
|
|
const [activeTab, setActiveTab] = useState(() => {
|
|
const t = Number(searchParams.get('tab'));
|
|
return t >= 0 && t < tabCount ? t : 0;
|
|
});
|
|
|
|
useEffect(() => {
|
|
const t = Number(searchParams.get('tab'));
|
|
if (t >= 0 && t < tabCount) setActiveTab(t);
|
|
}, [searchParams, tabCount]);
|
|
|
|
const handleTabChange = (_: React.SyntheticEvent, val: number) => {
|
|
setActiveTab(val);
|
|
setSearchParams({ tab: String(val) }, { replace: true });
|
|
};
|
|
|
|
const tabIndex = useMemo(() => {
|
|
const map: Record<string, number> = {};
|
|
let next = 0;
|
|
if (canCreate) { map.meine = next; next++; }
|
|
if (canApprove) { map.alle = next; next++; }
|
|
if (canView) { map.katalog = next; next++; }
|
|
return map;
|
|
}, [canCreate, canApprove, canView]);
|
|
|
|
if (!canView && !canCreate && !canApprove) {
|
|
return (
|
|
<DashboardLayout>
|
|
<Typography>Keine Berechtigung.</Typography>
|
|
</DashboardLayout>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<DashboardLayout>
|
|
<Typography variant="h5" fontWeight={700} sx={{ mb: 2 }}>Interne Bestellungen</Typography>
|
|
|
|
<Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
|
|
<Tabs value={activeTab} onChange={handleTabChange} variant="scrollable" scrollButtons="auto">
|
|
{canCreate && <Tab label="Meine Anfragen" />}
|
|
{canApprove && <Tab label="Alle Anfragen" />}
|
|
{canView && <Tab label="Katalog" />}
|
|
</Tabs>
|
|
</Box>
|
|
|
|
{canCreate && activeTab === tabIndex.meine && <MeineAnfragenTab />}
|
|
{canApprove && activeTab === tabIndex.alle && <AlleAnfragenTab />}
|
|
{canView && activeTab === tabIndex.katalog && <KatalogTab />}
|
|
</DashboardLayout>
|
|
);
|
|
}
|