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 { Button } from '@/components/ui/button';
import { IndJob } from '@/lib/types';
import { getNextStatus, getPreviousStatus } from '@/utils/jobStatusUtils';
import { getNextStatus, getPreviousStatus, getStatusColor } from '@/utils/jobStatusUtils';
import { useJobs } from '@/hooks/useDataService';
import { useToast } from '@/hooks/use-toast';
@@ -67,38 +67,34 @@ const JobStatusNavigation: React.FC<JobStatusNavigationProps> = ({ job }) => {
};
return (
<div className="flex gap-2 items-center">
<div className="flex gap-2 items-center justify-center">
{previousStatus && (
<Button
variant="outline"
size="sm"
<button
onClick={(e) => {
e.stopPropagation();
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
title={`Move to ${previousStatus}`}
>
<ChevronLeft className="w-4 h-4 mr-1" />
{previousStatus}
</Button>
<ChevronLeft className="w-4 h-4" />
<span className="text-center flex-1">{previousStatus}</span>
</button>
)}
{nextStatus && (
<Button
variant="outline"
size="sm"
<button
onClick={(e) => {
e.stopPropagation();
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
title={`Move to ${nextStatus}`}
>
{nextStatus}
<ChevronRight className="w-4 h-4 ml-1" />
</Button>
<span className="text-center flex-1">{nextStatus}</span>
<ChevronRight className="w-4 h-4" />
</button>
)}
</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
export const JOB_STATUSES: IndJobStatusOptions[] = [
// Define the status sequence - using the actual enum values
export const JOB_STATUSES = [
'Planned', 'Acquisition', 'Staging', 'Inbound', 'Running', 'Done',
'Delivered', 'Outbound', 'Selling', 'Closed', 'Tracked'
];
] as const;
export const getNextStatus = (currentStatus: string): IndJobStatusOptions | null => {
const currentIndex = JOB_STATUSES.indexOf(currentStatus as IndJobStatusOptions);
export const getNextStatus = (currentStatus: string): string | null => {
const currentIndex = JOB_STATUSES.indexOf(currentStatus as any);
if (currentIndex === -1 || currentIndex === JOB_STATUSES.length - 1) return null;
return JOB_STATUSES[currentIndex + 1];
};
export const getPreviousStatus = (currentStatus: string): IndJobStatusOptions | null => {
const currentIndex = JOB_STATUSES.indexOf(currentStatus as IndJobStatusOptions);
export const getPreviousStatus = (currentStatus: string): string | null => {
const currentIndex = JOB_STATUSES.indexOf(currentStatus as any);
if (currentIndex <= 0) return null;
return JOB_STATUSES[currentIndex - 1];
};