dave/eve-industrializer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: Style status navigation buttons

Browse Source 
Make status navigation buttons wider, center text, and color them based on status.
This commit is contained in:
gpt-engineer-app[bot]
2025-07-09 22:52:35 +00:00
committed by PhatPhuckDave
parent 5e2caefaaf
commit c5b4a41b19
2 changed files with 19 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/JobStatusNavigation.tsx
View File

@@ -2,7 +2,7 @@
import { ChevronLeft, ChevronRight } from 'lucide-react'; import { ChevronLeft, ChevronRight } from 'lucide-react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { IndJob } from '@/lib/types'; import { IndJob } from '@/lib/types';
import { getNextStatus, getPreviousStatus } from '@/utils/jobStatusUtils'; import { getNextStatus, getPreviousStatus, getStatusColor } from '@/utils/jobStatusUtils';
import { useJobs } from '@/hooks/useDataService'; import { useJobs } from '@/hooks/useDataService';
import { useToast } from '@/hooks/use-toast'; import { useToast } from '@/hooks/use-toast';
@@ -67,38 +67,34 @@ const JobStatusNavigation: React.FC<JobStatusNavigationProps> = ({ job }) => {
}; };
return ( return (
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center justify-center">
{previousStatus && ( {previousStatus && (
<Button <button
variant="outline"
size="sm"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
handleStatusChange(previousStatus); handleStatusChange(previousStatus);
}} }}
className="border-gray-600 hover:bg-gray-800 px-3" className={`${getStatusColor(previousStatus)} text-white px-4 py-2 rounded flex items-center justify-center gap-1 hover:opacity-80 transition-opacity w-32`}
data-no-navigate data-no-navigate
title={`Move to ${previousStatus}`} title={`Move to ${previousStatus}`}
> >
<ChevronLeft className="w-4 h-4 mr-1" /> <ChevronLeft className="w-4 h-4" />
{previousStatus} <span className="text-center flex-1">{previousStatus}</span>
</Button> </button>
)} )}
{nextStatus && ( {nextStatus && (
<Button <button
variant="outline"
size="sm"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
handleStatusChange(nextStatus); handleStatusChange(nextStatus);
}} }}
className="border-gray-600 hover:bg-gray-800 px-3" className={`${getStatusColor(nextStatus)} text-white px-4 py-2 rounded flex items-center justify-center gap-1 hover:opacity-80 transition-opacity w-32`}
data-no-navigate data-no-navigate
title={`Move to ${nextStatus}`} title={`Move to ${nextStatus}`}
> >
{nextStatus} <span className="text-center flex-1">{nextStatus}</span>
<ChevronRight className="w-4 h-4 ml-1" /> <ChevronRight className="w-4 h-4" />
</Button> </button>
)} )}
</div> </div>
); );

14
src/utils/jobStatusUtils.ts
View File

@@ -52,20 +52,20 @@ export const getStatusPriority = (status: IndJobStatusOptions): number => {
} }
}; };
// Use the actual type values from the enum // Define the status sequence - using the actual enum values
export const JOB_STATUSES: IndJobStatusOptions[] = [ export const JOB_STATUSES = [
'Planned', 'Acquisition', 'Staging', 'Inbound', 'Running', 'Done', 'Planned', 'Acquisition', 'Staging', 'Inbound', 'Running', 'Done',
'Delivered', 'Outbound', 'Selling', 'Closed', 'Tracked' 'Delivered', 'Outbound', 'Selling', 'Closed', 'Tracked'
]; ] as const;
export const getNextStatus = (currentStatus: string): IndJobStatusOptions | null => { export const getNextStatus = (currentStatus: string): string | null => {
const currentIndex = JOB_STATUSES.indexOf(currentStatus as IndJobStatusOptions); const currentIndex = JOB_STATUSES.indexOf(currentStatus as any);
if (currentIndex === -1 || currentIndex === JOB_STATUSES.length - 1) return null; if (currentIndex === -1 || currentIndex === JOB_STATUSES.length - 1) return null;
return JOB_STATUSES[currentIndex + 1]; return JOB_STATUSES[currentIndex + 1];
}; };
export const getPreviousStatus = (currentStatus: string): IndJobStatusOptions | null => { export const getPreviousStatus = (currentStatus: string): string | null => {
const currentIndex = JOB_STATUSES.indexOf(currentStatus as IndJobStatusOptions); const currentIndex = JOB_STATUSES.indexOf(currentStatus as any);
if (currentIndex <= 0) return null; if (currentIndex <= 0) return null;
return JOB_STATUSES[currentIndex - 1]; return JOB_STATUSES[currentIndex - 1];
}; };