"Rework" navigation to be less javascript-y

This commit is contained in:
2025-07-07 16:31:30 +02:00
parent b2b67c8761
commit e9a539997b

View File

@@ -1,5 +1,4 @@
import { Link } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import { Card, CardContent, CardHeader } from '@/components/ui/card'; import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { IndJob } from '@/lib/types'; import { IndJob } from '@/lib/types';
import JobCardHeader from './JobCardHeader'; import JobCardHeader from './JobCardHeader';
@@ -23,12 +22,6 @@ const JobCard: React.FC<JobCardProps> = ({
onImportBOM, onImportBOM,
isTracked = false isTracked = false
}) => { }) => {
const navigate = useNavigate();
const handleCardClick = () => {
navigate(`/${job.id}`);
};
const getStatusBackgroundColor = (status: string) => { const getStatusBackgroundColor = (status: string) => {
switch (status) { switch (status) {
case 'Planned': return 'bg-gray-600/20'; case 'Planned': return 'bg-gray-600/20';
@@ -43,25 +36,29 @@ const JobCard: React.FC<JobCardProps> = ({
}; };
return ( return (
<Card <Link
className={`bg-gray-900 border-gray-700 text-white h-full flex flex-col cursor-pointer hover:bg-gray-800/50 transition-colors ${job.status === 'Tracked' ? 'border-l-4 border-l-cyan-600' : ''} ${getStatusBackgroundColor(job.status)}`} to={`/${job.id}`}
onClick={handleCardClick} className="block h-full no-underline"
> >
<CardHeader className="flex-shrink-0"> <Card
<JobCardHeader className={`bg-gray-900 border-gray-700 text-white h-full flex flex-col cursor-pointer hover:bg-gray-800/50 transition-colors ${job.status === 'Tracked' ? 'border-l-4 border-l-cyan-600' : ''} ${getStatusBackgroundColor(job.status)}`}
job={job} >
onEdit={onEdit} <CardHeader className="flex-shrink-0">
onDelete={onDelete} <JobCardHeader
onUpdateProduced={onUpdateProduced} job={job}
onImportBOM={onImportBOM} onEdit={onEdit}
/> onDelete={onDelete}
</CardHeader> onUpdateProduced={onUpdateProduced}
<CardContent className="flex-1 flex flex-col space-y-4"> onImportBOM={onImportBOM}
<JobCardDetails job={job} /> />
<div className="flex-1" /> </CardHeader>
<JobCardMetrics job={job} /> <CardContent className="flex-1 flex flex-col space-y-4">
</CardContent> <JobCardDetails job={job} />
</Card> <div className="flex-1" />
<JobCardMetrics job={job} />
</CardContent>
</Card>
</Link>
); );
}; };