760 lines
43 KiB
TypeScript
760 lines
43 KiB
TypeScript
import type { ActionFunctionArgs, LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
|
|
import { json, redirect } from "@remix-run/node";
|
|
import { Form, useActionData, useLoaderData, useNavigation, Link } from "@remix-run/react";
|
|
import { requireAuthLevel } from "~/utils/auth.server";
|
|
import DashboardLayout from "~/components/DashboardLayout";
|
|
import { useState, useEffect } from "react";
|
|
import { manageSheet } from "~/utils/sheet.server";
|
|
import { prisma } from "~/utils/db.server";
|
|
|
|
export const meta: MetaFunction = () => [{ title: "New Report - Phosphat Report" }];
|
|
|
|
export const loader = async ({ request }: LoaderFunctionArgs) => {
|
|
const user = await requireAuthLevel(request, 1); // All employees can create reports
|
|
|
|
// Get dropdown data for form
|
|
const [areas, dredgerLocations, reclamationLocations, foremen, equipment] = await Promise.all([
|
|
prisma.area.findMany({ orderBy: { name: 'asc' } }),
|
|
prisma.dredgerLocation.findMany({ orderBy: { name: 'asc' } }),
|
|
prisma.reclamationLocation.findMany({ orderBy: { name: 'asc' } }),
|
|
prisma.foreman.findMany({ orderBy: { name: 'asc' } }),
|
|
prisma.equipment.findMany({ orderBy: [{ category: 'asc' }, { model: 'asc' }, { number: 'asc' }] })
|
|
]);
|
|
|
|
return json({
|
|
user,
|
|
areas,
|
|
dredgerLocations,
|
|
reclamationLocations,
|
|
foremen,
|
|
equipment
|
|
});
|
|
};
|
|
|
|
export const action = async ({ request }: ActionFunctionArgs) => {
|
|
const user = await requireAuthLevel(request, 1);
|
|
|
|
const formData = await request.formData();
|
|
|
|
// Debug logging
|
|
console.log("Form data received:", Object.fromEntries(formData.entries()));
|
|
|
|
const shift = formData.get("shift");
|
|
const areaId = formData.get("areaId");
|
|
const dredgerLocationId = formData.get("dredgerLocationId");
|
|
const dredgerLineLength = formData.get("dredgerLineLength");
|
|
const reclamationLocationId = formData.get("reclamationLocationId");
|
|
const shoreConnection = formData.get("shoreConnection");
|
|
const notes = formData.get("notes");
|
|
|
|
// Complex JSON fields
|
|
const reclamationHeightBase = formData.get("reclamationHeightBase");
|
|
const reclamationHeightExtra = formData.get("reclamationHeightExtra");
|
|
const pipelineMain = formData.get("pipelineMain");
|
|
const pipelineExt1 = formData.get("pipelineExt1");
|
|
const pipelineReserve = formData.get("pipelineReserve");
|
|
const pipelineExt2 = formData.get("pipelineExt2");
|
|
const statsDozers = formData.get("statsDozers");
|
|
const statsExc = formData.get("statsExc");
|
|
const statsLoaders = formData.get("statsLoaders");
|
|
const statsForeman = formData.get("statsForeman");
|
|
const statsLaborer = formData.get("statsLaborer");
|
|
const timeSheetData = formData.get("timeSheetData");
|
|
const stoppagesData = formData.get("stoppagesData");
|
|
|
|
// Validation
|
|
// console.log("Validating fields:", { shift, areaId, dredgerLocationId, dredgerLineLength, reclamationLocationId, shoreConnection });
|
|
|
|
if (typeof shift !== "string" || !["day", "night"].includes(shift)) {
|
|
console.log("Shift validation failed:", shift);
|
|
return json({ errors: { shift: "Valid shift is required" } }, { status: 400 });
|
|
}
|
|
if (typeof areaId !== "string" || !areaId) {
|
|
return json({ errors: { areaId: "Area is required" } }, { status: 400 });
|
|
}
|
|
if (typeof dredgerLocationId !== "string" || !dredgerLocationId) {
|
|
return json({ errors: { dredgerLocationId: "Dredger location is required" } }, { status: 400 });
|
|
}
|
|
if (typeof dredgerLineLength !== "string" || isNaN(parseInt(dredgerLineLength))) {
|
|
return json({ errors: { dredgerLineLength: "Valid dredger line length is required" } }, { status: 400 });
|
|
}
|
|
if (typeof reclamationLocationId !== "string" || !reclamationLocationId) {
|
|
return json({ errors: { reclamationLocationId: "Reclamation location is required" } }, { status: 400 });
|
|
}
|
|
if (typeof shoreConnection !== "string" || isNaN(parseInt(shoreConnection))) {
|
|
return json({ errors: { shoreConnection: "Valid shore connection is required" } }, { status: 400 });
|
|
}
|
|
|
|
try {
|
|
// Parse JSON arrays
|
|
let timeSheet = [];
|
|
let stoppages = [];
|
|
|
|
if (timeSheetData && typeof timeSheetData === "string") {
|
|
try {
|
|
timeSheet = JSON.parse(timeSheetData);
|
|
} catch (e) {
|
|
timeSheet = [];
|
|
}
|
|
}
|
|
|
|
if (stoppagesData && typeof stoppagesData === "string") {
|
|
try {
|
|
stoppages = JSON.parse(stoppagesData);
|
|
} catch (e) {
|
|
stoppages = [];
|
|
}
|
|
}
|
|
|
|
const report = await prisma.report.create({
|
|
data: {
|
|
employeeId: user.id,
|
|
shift,
|
|
areaId: parseInt(areaId),
|
|
dredgerLocationId: parseInt(dredgerLocationId),
|
|
dredgerLineLength: parseInt(dredgerLineLength),
|
|
reclamationLocationId: parseInt(reclamationLocationId),
|
|
shoreConnection: parseInt(shoreConnection),
|
|
reclamationHeight: {
|
|
base: parseInt(reclamationHeightBase as string) || 0,
|
|
extra: parseInt(reclamationHeightExtra as string) || 0
|
|
},
|
|
pipelineLength: {
|
|
main: parseInt(pipelineMain as string) || 0,
|
|
ext1: parseInt(pipelineExt1 as string) || 0,
|
|
reserve: parseInt(pipelineReserve as string) || 0,
|
|
ext2: parseInt(pipelineExt2 as string) || 0
|
|
},
|
|
stats: {
|
|
Dozers: parseInt(statsDozers as string) || 0,
|
|
Exc: parseInt(statsExc as string) || 0,
|
|
Loaders: parseInt(statsLoaders as string) || 0,
|
|
Foreman: statsForeman as string || "",
|
|
Laborer: parseInt(statsLaborer as string) || 0
|
|
},
|
|
timeSheet,
|
|
stoppages,
|
|
notes: notes || null
|
|
}
|
|
});
|
|
|
|
// Manage sheet creation/update
|
|
await manageSheet(
|
|
report.id,
|
|
shift,
|
|
parseInt(areaId),
|
|
parseInt(dredgerLocationId),
|
|
parseInt(reclamationLocationId),
|
|
report.createdDate
|
|
);
|
|
|
|
// Redirect to reports page with success message
|
|
return redirect("/reports?success=Report created successfully!");
|
|
} catch (error) {
|
|
return json({ errors: { form: "Failed to create report. Please try again." } }, { status: 400 });
|
|
}
|
|
};
|
|
|
|
export default function NewReport() {
|
|
const { user, areas, dredgerLocations, reclamationLocations, foremen, equipment } = useLoaderData<typeof loader>();
|
|
const actionData = useActionData<typeof action>();
|
|
const navigation = useNavigation();
|
|
|
|
// Form state to preserve values across steps
|
|
const [formData, setFormData] = useState({
|
|
shift: '',
|
|
areaId: '',
|
|
dredgerLocationId: '',
|
|
dredgerLineLength: '',
|
|
reclamationLocationId: '',
|
|
shoreConnection: '',
|
|
reclamationHeightBase: '0',
|
|
reclamationHeightExtra: '0',
|
|
pipelineMain: '0',
|
|
pipelineExt1: '0',
|
|
pipelineReserve: '0',
|
|
pipelineExt2: '0',
|
|
statsDozers: '0',
|
|
statsExc: '0',
|
|
statsLoaders: '0',
|
|
statsForeman: '',
|
|
statsLaborer: '0',
|
|
notes: ''
|
|
});
|
|
|
|
// Dynamic arrays state
|
|
const [timeSheetEntries, setTimeSheetEntries] = useState<Array<{
|
|
id: string,
|
|
machine: string,
|
|
from1: string,
|
|
to1: string,
|
|
from2: string,
|
|
to2: string,
|
|
total: string,
|
|
reason: string
|
|
}>>([]);
|
|
|
|
const [stoppageEntries, setStoppageEntries] = useState<Array<{
|
|
id: string,
|
|
from: string,
|
|
to: string,
|
|
total: string,
|
|
reason: string,
|
|
responsible: string,
|
|
note: string
|
|
}>>([]);
|
|
|
|
const [currentStep, setCurrentStep] = useState(1);
|
|
const totalSteps = 4;
|
|
|
|
const isSubmitting = navigation.state === "submitting";
|
|
|
|
// Function to update form data
|
|
const updateFormData = (field: string, value: string) => {
|
|
setFormData(prev => ({ ...prev, [field]: value }));
|
|
};
|
|
|
|
// Handle form submission - only allow on final step
|
|
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
|
// console.log("Form submit triggered, current step:", currentStep);
|
|
|
|
if (currentStep !== totalSteps) {
|
|
console.log("Preventing form submission - not on final step");
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
return false;
|
|
}
|
|
|
|
// console.log("Allowing form submission");
|
|
// console.log("Form being submitted with data:", formData);
|
|
// console.log("Time sheet entries:", timeSheetEntries);
|
|
// console.log("Stoppage entries:", stoppageEntries);
|
|
};
|
|
|
|
// Helper functions for time calculations
|
|
const calculateTimeDifference = (from1: string, to1: string, from2: string, to2: string) => {
|
|
if (!from1 || !to1) return "00:00";
|
|
|
|
const parseTime = (timeStr: string) => {
|
|
const [hours, minutes] = timeStr.split(':').map(Number);
|
|
return hours * 60 + minutes;
|
|
};
|
|
|
|
const formatTime = (minutes: number) => {
|
|
const hours = Math.floor(minutes / 60);
|
|
const mins = minutes % 60;
|
|
return `${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`;
|
|
};
|
|
|
|
let totalMinutes = 0;
|
|
|
|
if (from1 && to1) {
|
|
const start1 = parseTime(from1);
|
|
let end1 = parseTime(to1);
|
|
|
|
if (end1 < start1) {
|
|
end1 += 24 * 60;
|
|
}
|
|
|
|
totalMinutes += end1 - start1;
|
|
}
|
|
|
|
if (from2 && to2) {
|
|
const start2 = parseTime(from2);
|
|
let end2 = parseTime(to2);
|
|
|
|
|
|
if (end2 < start2) {
|
|
end2 += 24 * 60;
|
|
}
|
|
totalMinutes += end2 - start2;
|
|
}
|
|
|
|
return formatTime(Math.max(0, totalMinutes));
|
|
//return formatTime(Math.max(totalMinutes * -1, totalMinutes));
|
|
};
|
|
|
|
const calculateStoppageTime = (from: string, to: string) => {
|
|
if (!from || !to) return "00:00";
|
|
|
|
const parseTime = (timeStr: string) => {
|
|
const [hours, minutes] = timeStr.split(':').map(Number);
|
|
return hours * 60 + minutes;
|
|
};
|
|
|
|
const formatTime = (minutes: number) => {
|
|
const hours = Math.floor(minutes / 60);
|
|
const mins = minutes % 60;
|
|
return `${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`;
|
|
};
|
|
|
|
const startMinutes = parseTime(from);
|
|
let endMinutes = parseTime(to);
|
|
if (endMinutes < startMinutes)
|
|
endMinutes += 24 * 60;
|
|
const totalMinutes = Math.max(0, endMinutes - startMinutes);
|
|
|
|
return formatTime(totalMinutes);
|
|
};
|
|
|
|
// Time Sheet management
|
|
const addTimeSheetEntry = () => {
|
|
const newEntry = {
|
|
id: Date.now().toString(),
|
|
machine: '',
|
|
from1: '',
|
|
to1: '',
|
|
from2: '',
|
|
to2: '',
|
|
total: '00:00',
|
|
reason: ''
|
|
};
|
|
setTimeSheetEntries([...timeSheetEntries, newEntry]);
|
|
};
|
|
|
|
const removeTimeSheetEntry = (id: string) => {
|
|
setTimeSheetEntries(timeSheetEntries.filter(entry => entry.id !== id));
|
|
};
|
|
|
|
const updateTimeSheetEntry = (id: string, field: string, value: string) => {
|
|
setTimeSheetEntries(timeSheetEntries.map(entry => {
|
|
if (entry.id === id) {
|
|
const updatedEntry = { ...entry, [field]: value };
|
|
if (['from1', 'to1', 'from2', 'to2'].includes(field)) {
|
|
updatedEntry.total = calculateTimeDifference(
|
|
updatedEntry.from1,
|
|
updatedEntry.to1,
|
|
updatedEntry.from2,
|
|
updatedEntry.to2
|
|
);
|
|
}
|
|
return updatedEntry;
|
|
}
|
|
return entry;
|
|
}));
|
|
};
|
|
|
|
// Stoppage management
|
|
const addStoppageEntry = () => {
|
|
const newEntry = {
|
|
id: Date.now().toString(),
|
|
from: '',
|
|
to: '',
|
|
total: '00:00',
|
|
reason: '',
|
|
responsible: '',
|
|
note: ''
|
|
};
|
|
setStoppageEntries([...stoppageEntries, newEntry]);
|
|
};
|
|
|
|
const removeStoppageEntry = (id: string) => {
|
|
setStoppageEntries(stoppageEntries.filter(entry => entry.id !== id));
|
|
};
|
|
|
|
const updateStoppageEntry = (id: string, field: string, value: string) => {
|
|
setStoppageEntries(stoppageEntries.map(entry => {
|
|
if (entry.id === id) {
|
|
const updatedEntry = { ...entry, [field]: value };
|
|
if (['from', 'to'].includes(field)) {
|
|
updatedEntry.total = calculateStoppageTime(updatedEntry.from, updatedEntry.to);
|
|
}
|
|
return updatedEntry;
|
|
}
|
|
return entry;
|
|
}));
|
|
};
|
|
|
|
const nextStep = (event?: React.MouseEvent<HTMLButtonElement>) => {
|
|
if (event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
// console.log("Next step clicked, current step:", currentStep);
|
|
if (currentStep < totalSteps) {
|
|
setCurrentStep(currentStep + 1);
|
|
// console.log("Moving to step:", currentStep + 1);
|
|
}
|
|
};
|
|
|
|
const prevStep = () => {
|
|
if (currentStep > 1) {
|
|
setCurrentStep(currentStep - 1);
|
|
}
|
|
};
|
|
|
|
const getStepTitle = (step: number) => {
|
|
switch (step) {
|
|
case 1: return "Basic Information";
|
|
case 2: return "Location & Pipeline Details";
|
|
case 3: return "Equipment & Time Sheet";
|
|
case 4: return "Stoppages & Notes";
|
|
default: return "";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<DashboardLayout user={user}>
|
|
<div className="max-w-full mx-auto">
|
|
{/* Header */}
|
|
<div className="mb-6 sm:mb-8">
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0">
|
|
<div>
|
|
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900">Create New Shifts</h1>
|
|
<p className="mt-2 text-sm sm:text-base text-gray-600">Fill out the operational shift details step by step</p>
|
|
</div>
|
|
<Link
|
|
to="/reports"
|
|
className="inline-flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
>
|
|
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
Back to Shifts
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Progress Steps */}
|
|
<div className="mb-6 sm:mb-8">
|
|
<div className="flex items-center justify-between px-2 sm:px-0">
|
|
{[1, 2, 3, 4].map((step) => (
|
|
<div key={step} className="flex items-center">
|
|
<div className={`flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-full border-2 ${step <= currentStep
|
|
? 'bg-indigo-600 border-indigo-600 text-white'
|
|
: 'border-gray-300 text-gray-500'
|
|
}`}>
|
|
{step < currentStep ? (
|
|
<svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
) : (
|
|
<span className="text-xs sm:text-sm font-medium">{step}</span>
|
|
)}
|
|
</div>
|
|
{step < totalSteps && (
|
|
<div className={`flex-1 h-1 mx-2 sm:mx-4 ${step < currentStep ? 'bg-indigo-600' : 'bg-gray-300'
|
|
}`} />
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="mt-4 text-center">
|
|
<h2 className="text-lg sm:text-xl font-semibold text-gray-900">{getStepTitle(currentStep)}</h2>
|
|
<p className="text-xs sm:text-sm text-gray-500">Step {currentStep} of {totalSteps}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<Form method="post" onSubmit={handleSubmit} className="bg-white shadow-lg rounded-lg overflow-hidden">
|
|
<div className="p-4 sm:p-6">
|
|
{/* Step 1: Basic Information */}
|
|
{currentStep === 1 && (
|
|
<div className="space-y-4 sm:space-y-6">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
|
|
<div>
|
|
<label htmlFor="shift" className="block text-sm font-medium text-gray-700 mb-2">
|
|
Shift <span className="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
id="shift"
|
|
name="shift"
|
|
required
|
|
value={formData.shift}
|
|
onChange={(e) => updateFormData('shift', e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
>
|
|
<option value="">Select shift</option>
|
|
<option value="day">Day Shift</option>
|
|
<option value="night">Night Shift</option>
|
|
</select>
|
|
{actionData?.errors?.shift && (
|
|
<p className="mt-1 text-sm text-red-600">{actionData.errors.shift}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="areaId" className="block text-sm font-medium text-gray-700 mb-2">
|
|
Area <span className="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
id="areaId"
|
|
name="areaId"
|
|
required
|
|
value={formData.areaId}
|
|
onChange={(e) => updateFormData('areaId', e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
>
|
|
<option value="">Select area</option>
|
|
{areas.map((area) => (
|
|
<option key={area.id} value={area.id}>
|
|
{area.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{actionData?.errors?.areaId && (
|
|
<p className="mt-1 text-sm text-red-600">{actionData.errors.areaId}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
|
|
<div>
|
|
<label htmlFor="dredgerLocationId" className="block text-sm font-medium text-gray-700 mb-2">
|
|
Dredger Location <span className="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
id="dredgerLocationId"
|
|
name="dredgerLocationId"
|
|
required
|
|
value={formData.dredgerLocationId}
|
|
onChange={(e) => updateFormData('dredgerLocationId', e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
>
|
|
<option value="">Select dredger location</option>
|
|
{dredgerLocations.map((location) => (
|
|
<option key={location.id} value={location.id}>
|
|
{location.name} ({location.class.toUpperCase()})
|
|
</option>
|
|
))}
|
|
</select>
|
|
{actionData?.errors?.dredgerLocationId && (
|
|
<p className="mt-1 text-sm text-red-600">{actionData.errors.dredgerLocationId}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="dredgerLineLength" className="block text-sm font-medium text-gray-700 mb-2">
|
|
Dredger Line Length (m) <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="number"
|
|
id="dredgerLineLength"
|
|
name="dredgerLineLength"
|
|
required
|
|
min="0"
|
|
value={formData.dredgerLineLength}
|
|
onChange={(e) => updateFormData('dredgerLineLength', e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
placeholder="Enter length in meters"
|
|
/>
|
|
{actionData?.errors?.dredgerLineLength && (
|
|
<p className="mt-1 text-sm text-red-600">{actionData.errors.dredgerLineLength}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* Step 2: Location & Pipeline Details */}
|
|
{currentStep === 2 && (
|
|
<div className="space-y-4 sm:space-y-6">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
|
|
<div>
|
|
<label htmlFor="reclamationLocationId" className="block text-sm font-medium text-gray-700 mb-2">
|
|
Reclamation Location <span className="text-red-500">*</span>
|
|
</label>
|
|
<select id="reclamationLocationId" name="reclamationLocationId" required value={formData.reclamationLocationId} onChange={(e) => updateFormData('reclamationLocationId', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
|
|
<option value="">Select reclamation location</option>
|
|
{reclamationLocations.map((location) => (
|
|
<option key={location.id} value={location.id}>{location.name}</option>
|
|
))}
|
|
</select>
|
|
{actionData?.errors?.reclamationLocationId && (
|
|
<p className="mt-1 text-sm text-red-600">{actionData.errors.reclamationLocationId}</p>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<label htmlFor="shoreConnection" className="block text-sm font-medium text-gray-700 mb-2">Shore Connection <span className="text-red-500">*</span></label>
|
|
<input type="number" id="shoreConnection" name="shoreConnection" required min="0" value={formData.shoreConnection} onChange={(e) => updateFormData('shoreConnection', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Enter connection length" />
|
|
{actionData?.errors?.shoreConnection && (
|
|
<p className="mt-1 text-sm text-red-600">{actionData.errors.shoreConnection}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-base sm:text-lg font-medium text-gray-900 mb-4">Reclamation Height</h3>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
|
|
<div><label htmlFor="reclamationHeightBase" className="block text-sm font-medium text-gray-700 mb-2">Base Height (m)</label><input type="number" id="reclamationHeightBase" name="reclamationHeightBase" min="0" value={formData.reclamationHeightBase} onChange={(e) => updateFormData('reclamationHeightBase', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" /></div>
|
|
<div><label htmlFor="reclamationHeightExtra" className="block text-sm font-medium text-gray-700 mb-2">Extra Height (m)</label><input type="number" id="reclamationHeightExtra" name="reclamationHeightExtra" min="0" value={formData.reclamationHeightExtra} onChange={(e) => updateFormData('reclamationHeightExtra', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" /></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-base sm:text-lg font-medium text-gray-900 mb-4">Pipeline Length</h3>
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
|
|
<div><label htmlFor="pipelineMain" className="block text-sm font-medium text-gray-700 mb-2">Main</label><input type="number" id="pipelineMain" name="pipelineMain" min="0" value={formData.pipelineMain} onChange={(e) => updateFormData('pipelineMain', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" /></div>
|
|
<div><label htmlFor="pipelineExt1" className="block text-sm font-medium text-gray-700 mb-2">Extension 1</label><input type="number" id="pipelineExt1" name="pipelineExt1" min="0" value={formData.pipelineExt1} onChange={(e) => updateFormData('pipelineExt1', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" /></div>
|
|
<div><label htmlFor="pipelineReserve" className="block text-sm font-medium text-gray-700 mb-2">Reserve</label><input type="number" id="pipelineReserve" name="pipelineReserve" min="0" value={formData.pipelineReserve} onChange={(e) => updateFormData('pipelineReserve', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" /></div>
|
|
<div><label htmlFor="pipelineExt2" className="block text-sm font-medium text-gray-700 mb-2">Extension 2</label><input type="number" id="pipelineExt2" name="pipelineExt2" min="0" value={formData.pipelineExt2} onChange={(e) => updateFormData('pipelineExt2', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" /></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* Step 3: Equipment & Time Sheet */}
|
|
{currentStep === 3 && (
|
|
<div className="space-y-4 sm:space-y-6">
|
|
<div>
|
|
<h3 className="text-base sm:text-lg font-medium text-gray-900 mb-4">Equipment Statistics</h3>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
|
|
<div><label htmlFor="statsDozers" className="block text-sm font-medium text-gray-700 mb-2">Dozers</label><input type="number" id="statsDozers" name="statsDozers" min="0" value={formData.statsDozers} onChange={(e) => updateFormData('statsDozers', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" /></div>
|
|
<div><label htmlFor="statsExc" className="block text-sm font-medium text-gray-700 mb-2">Excavators</label><input type="number" id="statsExc" name="statsExc" min="0" value={formData.statsExc} onChange={(e) => updateFormData('statsExc', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" /></div>
|
|
<div><label htmlFor="statsLoaders" className="block text-sm font-medium text-gray-700 mb-2">Loaders</label><input type="number" id="statsLoaders" name="statsLoaders" min="0" value={formData.statsLoaders} onChange={(e) => updateFormData('statsLoaders', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" /></div>
|
|
<div><label htmlFor="statsForeman" className="block text-sm font-medium text-gray-700 mb-2">Foreman</label><select id="statsForeman" name="statsForeman" value={formData.statsForeman} onChange={(e) => updateFormData('statsForeman', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"><option value="">Select foreman</option>{foremen.map((foreman) => (<option key={foreman.id} value={foreman.name}>{foreman.name}</option>))}</select></div>
|
|
<div><label htmlFor="statsLaborer" className="block text-sm font-medium text-gray-700 mb-2">Laborers</label><input type="number" id="statsLaborer" name="statsLaborer" min="0" value={formData.statsLaborer} onChange={(e) => updateFormData('statsLaborer', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" /></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-lg font-medium text-gray-900">Time Sheet</h3>
|
|
<button type="button" onClick={addTimeSheetEntry} className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" /></svg>Add Entry
|
|
</button>
|
|
</div>
|
|
{timeSheetEntries.length > 0 ? (
|
|
<div className="space-y-4">
|
|
{timeSheetEntries.map((entry) => (
|
|
<div key={entry.id} className="bg-gray-50 p-4 rounded-lg">
|
|
<div className="grid grid-cols-1 md:grid-cols-7 gap-4">
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">Equipment</label><select value={entry.machine} onChange={(e) => updateTimeSheetEntry(entry.id, 'machine', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"><option value="">Select Equipment</option>{equipment.filter((item) => {
|
|
const machineValue = `${item.model} (${item.number})`;
|
|
// Show if not selected by any other entry, or if it's the current entry's selection
|
|
return !timeSheetEntries.some(e => e.id !== entry.id && e.machine === machineValue);
|
|
}).map((item) => (<option key={item.id} value={`${item.model} (${item.number})`}>{item.category} - {item.model} ({item.number})</option>))}</select></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">From</label><input type="time" value={entry.from1} onChange={(e) => updateTimeSheetEntry(entry.id, 'from1', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" /></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">To</label><input type="time" value={entry.to1} onChange={(e) => updateTimeSheetEntry(entry.id, 'to1', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" /></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">From 2</label><input type="time" value={entry.from2} onChange={(e) => updateTimeSheetEntry(entry.id, 'from2', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" /></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">To 2</label><input type="time" value={entry.to2} onChange={(e) => updateTimeSheetEntry(entry.id, 'to2', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" /></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">Total</label><input type="text" value={entry.total} readOnly className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-100" /></div>
|
|
<div className="flex items-end"><button type="button" onClick={() => removeTimeSheetEntry(entry.id)} className="w-full px-3 py-2 border border-red-300 text-red-700 rounded-md hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">Remove</button></div>
|
|
</div>
|
|
<div className="mt-4"><label className="block text-sm font-medium text-gray-700 mb-1">Reason</label><input type="text" value={entry.reason} onChange={(e) => updateTimeSheetEntry(entry.id, 'reason', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Reason for downtime (if any)" /></div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8 text-gray-500"><p className="mt-2">No time sheet entries yet. Click "Add Entry" to get started.</p></div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* Step 4: Stoppages & Notes */}
|
|
{currentStep === 4 && (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-lg font-medium text-gray-900">Dredger Stoppages</h3>
|
|
<button type="button" onClick={addStoppageEntry} className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" /></svg>Add Stoppage
|
|
</button>
|
|
</div>
|
|
{stoppageEntries.length > 0 ? (
|
|
<div className="space-y-4">
|
|
{stoppageEntries.map((entry) => (
|
|
<div key={entry.id} className="bg-gray-50 p-4 rounded-lg">
|
|
<div className="grid grid-cols-1 md:grid-cols-6 gap-4">
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">From</label><input type="time" value={entry.from} onChange={(e) => updateStoppageEntry(entry.id, 'from', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" /></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">To</label><input type="time" value={entry.to} onChange={(e) => updateStoppageEntry(entry.id, 'to', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" /></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">Total</label><input type="text" value={entry.total} readOnly className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-100" /></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">Reason</label><input type="text" value={entry.reason} onChange={(e) => updateStoppageEntry(entry.id, 'reason', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Stoppage reason" /></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">Responsible</label><input type="text" value={entry.responsible} onChange={(e) => updateStoppageEntry(entry.id, 'responsible', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Responsible party" /></div>
|
|
<div className="flex items-end"><button type="button" onClick={() => removeStoppageEntry(entry.id)} className="w-full px-3 py-2 border border-red-300 text-red-700 rounded-md hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">Remove</button></div>
|
|
</div>
|
|
<div className="mt-4"><label className="block text-sm font-medium text-gray-700 mb-1">Notes</label><input type="text" value={entry.note} onChange={(e) => updateStoppageEntry(entry.id, 'note', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Additional notes" /></div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8 text-gray-500"><p className="mt-2">No stoppages recorded. Click "Add Stoppage" if there were any.</p></div>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<label htmlFor="notes" className="block text-sm font-medium text-gray-700 mb-2">Additional Notes & Comments</label>
|
|
<textarea id="notes" name="notes" rows={4} value={formData.notes} onChange={(e) => updateFormData('notes', e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Enter any additional notes or comments about the operation..." />
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* Error Message */}
|
|
{actionData?.errors?.form && (
|
|
<div className="mt-4 p-4 bg-red-50 border border-red-200 rounded-md">
|
|
<div className="flex">
|
|
<svg className="h-5 w-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<div className="ml-3">
|
|
<p className="text-sm text-red-800">{actionData.errors.form}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Navigation Buttons */}
|
|
<div className="px-4 sm:px-6 py-4 bg-gray-50 border-t border-gray-200 flex flex-col sm:flex-row sm:justify-between space-y-3 sm:space-y-0">
|
|
<button type="button" onClick={prevStep} disabled={currentStep === 1} className={`inline-flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium ${currentStep === 1 ? 'text-gray-400 bg-gray-100 cursor-not-allowed' : 'text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'}`}>
|
|
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>Previous
|
|
</button>
|
|
|
|
<div className="flex space-x-3">
|
|
{currentStep < totalSteps ? (
|
|
<button type="button" onClick={(e) => nextStep(e)} className="flex-1 sm:flex-none inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
Next<svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" /></svg>
|
|
</button>
|
|
) : (
|
|
<button type="submit" disabled={isSubmitting} className="flex-1 sm:flex-none inline-flex items-center justify-center px-6 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed">
|
|
{isSubmitting ? (
|
|
<>
|
|
<svg className="animate-spin -ml-1 mr-3 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>Creating Report...
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>Create Report
|
|
</>
|
|
)}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hidden inputs for dynamic data */}
|
|
<input type="hidden" name="timeSheetData" value={JSON.stringify(timeSheetEntries)} />
|
|
<input type="hidden" name="stoppagesData" value={JSON.stringify(stoppageEntries)} />
|
|
|
|
{/* Hidden inputs for form data from all steps */}
|
|
{currentStep !== 1 && (
|
|
<>
|
|
<input type="hidden" name="shift" value={formData.shift} />
|
|
<input type="hidden" name="areaId" value={formData.areaId} />
|
|
<input type="hidden" name="dredgerLocationId" value={formData.dredgerLocationId} />
|
|
<input type="hidden" name="dredgerLineLength" value={formData.dredgerLineLength} />
|
|
</>
|
|
)}
|
|
{currentStep !== 2 && (
|
|
<>
|
|
<input type="hidden" name="reclamationLocationId" value={formData.reclamationLocationId} />
|
|
<input type="hidden" name="shoreConnection" value={formData.shoreConnection} />
|
|
<input type="hidden" name="reclamationHeightBase" value={formData.reclamationHeightBase} />
|
|
<input type="hidden" name="reclamationHeightExtra" value={formData.reclamationHeightExtra} />
|
|
<input type="hidden" name="pipelineMain" value={formData.pipelineMain} />
|
|
<input type="hidden" name="pipelineExt1" value={formData.pipelineExt1} />
|
|
<input type="hidden" name="pipelineReserve" value={formData.pipelineReserve} />
|
|
<input type="hidden" name="pipelineExt2" value={formData.pipelineExt2} />
|
|
</>
|
|
)}
|
|
{currentStep !== 3 && (
|
|
<>
|
|
<input type="hidden" name="statsDozers" value={formData.statsDozers} />
|
|
<input type="hidden" name="statsExc" value={formData.statsExc} />
|
|
<input type="hidden" name="statsLoaders" value={formData.statsLoaders} />
|
|
<input type="hidden" name="statsForeman" value={formData.statsForeman} />
|
|
<input type="hidden" name="statsLaborer" value={formData.statsLaborer} />
|
|
</>
|
|
)}
|
|
{currentStep !== 4 && (
|
|
<input type="hidden" name="notes" value={formData.notes} />
|
|
)}
|
|
</Form>
|
|
</div>
|
|
</DashboardLayout>
|
|
);
|
|
} |