723 lines
27 KiB
TypeScript
723 lines
27 KiB
TypeScript
import type { ActionFunctionArgs, LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
|
|
import { json, redirect } from "@remix-run/node";
|
|
import { Form, useActionData, useLoaderData, useNavigation, Link, useSearchParams } from "@remix-run/react";
|
|
import { requireAuthLevel } from "~/utils/auth.server";
|
|
import DashboardLayout from "~/components/DashboardLayout";
|
|
import ReportViewModal from "~/components/ReportViewModal";
|
|
import ReportFormModal from "~/components/ReportFormModal";
|
|
import Toast from "~/components/Toast";
|
|
import { useState, useEffect } from "react";
|
|
import { manageSheet, removeFromSheet } from "~/utils/sheet.server";
|
|
import { prisma } from "~/utils/db.server";
|
|
|
|
export const meta: MetaFunction = () => [{ title: "Reports Management - Phosphat Report" }];
|
|
|
|
export const loader = async ({ request }: LoaderFunctionArgs) => {
|
|
const user = await requireAuthLevel(request, 1); // All employees can access reports
|
|
|
|
|
|
// Get all reports with related data
|
|
let reports = await prisma.report.findMany({
|
|
// where: { employeeId: user.id },
|
|
orderBy: { createdDate: 'desc' },
|
|
include: {
|
|
employee: { select: { name: true } },
|
|
area: { select: { name: true } },
|
|
dredgerLocation: { select: { name: true, class: true } },
|
|
reclamationLocation: { select: { name: true } }
|
|
}
|
|
});
|
|
|
|
if (user.authLevel === 1){
|
|
// filter report by user id
|
|
reports = reports.filter((report: any) => report.employeeId === user.id);
|
|
}
|
|
|
|
|
|
// if (user.authLevel === 1) {
|
|
// reports = await prisma.report.findMany({
|
|
// where: { employeeId: user.id },
|
|
// orderBy: { createdDate: 'desc' },
|
|
// include: {
|
|
// employee: { select: { name: true } },
|
|
// area: { select: { name: true } },
|
|
// dredgerLocation: { select: { name: true, class: true } },
|
|
// reclamationLocation: { select: { name: true } }
|
|
// }
|
|
// });
|
|
// }
|
|
|
|
|
|
// Get dropdown data for edit form only
|
|
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,
|
|
reports,
|
|
areas,
|
|
dredgerLocations,
|
|
reclamationLocations,
|
|
foremen,
|
|
equipment
|
|
});
|
|
};
|
|
|
|
export const action = async ({ request }: ActionFunctionArgs) => {
|
|
const user = await requireAuthLevel(request, 1);
|
|
|
|
const formData = await request.formData();
|
|
const intent = formData.get("intent");
|
|
const id = formData.get("id");
|
|
|
|
if (intent === "update") {
|
|
if (typeof id !== "string") {
|
|
return json({ errors: { form: "Invalid report ID" } }, { status: 400 });
|
|
}
|
|
|
|
// Check if user owns this report or has admin privileges
|
|
const existingReport = await prisma.report.findUnique({
|
|
where: { id: parseInt(id) },
|
|
select: {
|
|
employeeId: true,
|
|
createdDate: true,
|
|
shift: true,
|
|
areaId: true,
|
|
dredgerLocationId: true,
|
|
reclamationLocationId: true
|
|
}
|
|
});
|
|
|
|
if (!existingReport) {
|
|
return json({ errors: { form: "Report not found" } }, { status: 404 });
|
|
}
|
|
|
|
if (user.authLevel < 2) {
|
|
// Regular users can only edit their own reports
|
|
if (existingReport.employeeId !== user.id) {
|
|
return json({ errors: { form: "You can only edit your own reports" } }, { status: 403 });
|
|
}
|
|
|
|
// Regular users can only edit their latest report
|
|
const latestUserReport = await prisma.report.findFirst({
|
|
where: { employeeId: user.id },
|
|
orderBy: { createdDate: 'desc' },
|
|
select: { id: true }
|
|
});
|
|
|
|
if (!latestUserReport || latestUserReport.id !== parseInt(id)) {
|
|
return json({ errors: { form: "You can only edit your latest report" } }, { status: 403 });
|
|
}
|
|
}
|
|
|
|
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 (same as create)
|
|
if (typeof shift !== "string" || !["day", "night"].includes(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 = [];
|
|
}
|
|
}
|
|
|
|
// First, remove from old sheet if location/date changed
|
|
if (existingReport.areaId !== parseInt(areaId) ||
|
|
existingReport.dredgerLocationId !== parseInt(dredgerLocationId) ||
|
|
existingReport.reclamationLocationId !== parseInt(reclamationLocationId)) {
|
|
await removeFromSheet(
|
|
parseInt(id),
|
|
existingReport.shift,
|
|
existingReport.areaId,
|
|
existingReport.dredgerLocationId,
|
|
existingReport.reclamationLocationId,
|
|
existingReport.createdDate
|
|
);
|
|
}
|
|
|
|
const updatedReport = await prisma.report.update({
|
|
where: { id: parseInt(id) },
|
|
data: {
|
|
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 for new location/date
|
|
await manageSheet(
|
|
parseInt(id),
|
|
shift,
|
|
parseInt(areaId),
|
|
parseInt(dredgerLocationId),
|
|
parseInt(reclamationLocationId),
|
|
updatedReport.createdDate // Use original creation date, not update date
|
|
);
|
|
return json({ success: "Report updated successfully!" });
|
|
} catch (error) {
|
|
return json({ errors: { form: "Failed to update report" } }, { status: 400 });
|
|
}
|
|
}
|
|
|
|
if (intent === "delete") {
|
|
if (typeof id !== "string") {
|
|
return json({ errors: { form: "Invalid report ID" } }, { status: 400 });
|
|
}
|
|
|
|
// Check if user owns this report or has admin privileges
|
|
const existingReport = await prisma.report.findUnique({
|
|
where: { id: parseInt(id) },
|
|
select: {
|
|
employeeId: true,
|
|
createdDate: true,
|
|
shift: true,
|
|
areaId: true,
|
|
dredgerLocationId: true,
|
|
reclamationLocationId: true
|
|
}
|
|
});
|
|
|
|
if (!existingReport) {
|
|
return json({ errors: { form: "Report not found" } }, { status: 404 });
|
|
}
|
|
|
|
if (user.authLevel < 2) {
|
|
// Regular users can only delete their own reports
|
|
if (existingReport.employeeId !== user.id) {
|
|
return json({ errors: { form: "You can only delete your own reports" } }, { status: 403 });
|
|
}
|
|
|
|
// Regular users can only delete their latest report
|
|
const latestUserReport = await prisma.report.findFirst({
|
|
where: { employeeId: user.id },
|
|
orderBy: { createdDate: 'desc' },
|
|
select: { id: true }
|
|
});
|
|
|
|
if (!latestUserReport || latestUserReport.id !== parseInt(id)) {
|
|
return json({ errors: { form: "You can only delete your latest report" } }, { status: 403 });
|
|
}
|
|
}
|
|
|
|
try {
|
|
// Remove from sheet before deleting report
|
|
await removeFromSheet(
|
|
parseInt(id),
|
|
existingReport.shift,
|
|
existingReport.areaId,
|
|
existingReport.dredgerLocationId,
|
|
existingReport.reclamationLocationId,
|
|
existingReport.createdDate
|
|
);
|
|
|
|
await prisma.report.delete({
|
|
where: { id: parseInt(id) }
|
|
});
|
|
return json({ success: "Report deleted successfully!" });
|
|
} catch (error) {
|
|
return json({ errors: { form: "Failed to delete report" } }, { status: 400 });
|
|
}
|
|
}
|
|
|
|
return json({ errors: { form: "Invalid action" } }, { status: 400 });
|
|
};
|
|
|
|
export default function Reports() {
|
|
const { user, reports, areas, dredgerLocations, reclamationLocations, foremen, equipment } = useLoaderData<typeof loader>();
|
|
const actionData = useActionData<typeof action>();
|
|
const navigation = useNavigation();
|
|
const [searchParams] = useSearchParams();
|
|
const [editingReport, setEditingReport] = useState<any>(null);
|
|
const [viewingReport, setViewingReport] = useState<any>(null);
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [showViewModal, setShowViewModal] = useState(false);
|
|
const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null);
|
|
|
|
// Dynamic arrays state for editing only
|
|
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 isSubmitting = navigation.state === "submitting";
|
|
const isEditing = editingReport !== null;
|
|
|
|
// Handle success/error messages from URL params and action data
|
|
useEffect(() => {
|
|
const successMessage = searchParams.get("success");
|
|
const errorMessage = searchParams.get("error");
|
|
|
|
if (successMessage) {
|
|
setToast({ message: successMessage, type: "success" });
|
|
// Clear the URL parameter
|
|
window.history.replaceState({}, '', '/reports');
|
|
} else if (errorMessage) {
|
|
setToast({ message: errorMessage, type: "error" });
|
|
// Clear the URL parameter
|
|
window.history.replaceState({}, '', '/reports');
|
|
} else if (actionData?.success) {
|
|
setToast({ message: actionData.success, type: "success" });
|
|
setShowModal(false);
|
|
setEditingReport(null);
|
|
} else if (actionData?.errors?.form) {
|
|
setToast({ message: actionData.errors.form, type: "error" });
|
|
}
|
|
}, [actionData, searchParams]);
|
|
|
|
const handleView = (report: any) => {
|
|
setViewingReport(report);
|
|
setShowViewModal(true);
|
|
};
|
|
|
|
const handleEdit = (report: any) => {
|
|
setEditingReport(report);
|
|
// Load existing timesheet and stoppages data
|
|
setTimeSheetEntries(Array.isArray(report.timeSheet) ? report.timeSheet : []);
|
|
setStoppageEntries(Array.isArray(report.stoppages) ? report.stoppages : []);
|
|
setShowModal(true);
|
|
};
|
|
|
|
// Remove handleAdd since we're using a separate page
|
|
|
|
const handleCloseModal = () => {
|
|
setShowModal(false);
|
|
setEditingReport(null);
|
|
setTimeSheetEntries([]);
|
|
setStoppageEntries([]);
|
|
};
|
|
|
|
const handleCloseViewModal = () => {
|
|
setShowViewModal(false);
|
|
setViewingReport(null);
|
|
};
|
|
|
|
// Helper function to calculate time difference in hours:minutes format
|
|
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;
|
|
|
|
// First period
|
|
if (from1 && to1) {
|
|
const start1 = parseTime(from1);
|
|
const end1 = parseTime(to1);
|
|
totalMinutes += end1 - start1;
|
|
}
|
|
|
|
// Second period
|
|
if (from2 && to2) {
|
|
const start2 = parseTime(from2);
|
|
const end2 = parseTime(to2);
|
|
totalMinutes += end2 - start2;
|
|
}
|
|
|
|
return formatTime(Math.max(0, 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);
|
|
const endMinutes = parseTime(to);
|
|
const totalMinutes = Math.max(0, endMinutes - startMinutes);
|
|
|
|
return formatTime(totalMinutes);
|
|
};
|
|
|
|
// TimeSheet management functions
|
|
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 };
|
|
// Auto-calculate total when time fields change
|
|
if (['from1', 'to1', 'from2', 'to2'].includes(field)) {
|
|
updatedEntry.total = calculateTimeDifference(
|
|
updatedEntry.from1,
|
|
updatedEntry.to1,
|
|
updatedEntry.from2,
|
|
updatedEntry.to2
|
|
);
|
|
}
|
|
return updatedEntry;
|
|
}
|
|
return entry;
|
|
}));
|
|
};
|
|
|
|
// Stoppage management functions
|
|
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 };
|
|
// Auto-calculate total when time fields change
|
|
if (['from', 'to'].includes(field)) {
|
|
updatedEntry.total = calculateStoppageTime(updatedEntry.from, updatedEntry.to);
|
|
}
|
|
return updatedEntry;
|
|
}
|
|
return entry;
|
|
}));
|
|
};
|
|
|
|
const getShiftBadge = (shift: string) => {
|
|
return shift === "day"
|
|
? "bg-yellow-100 text-yellow-800"
|
|
: "bg-blue-100 text-blue-800";
|
|
};
|
|
|
|
const canEditReport = (report: any) => {
|
|
// Admin users (auth level >= 2) can edit any report
|
|
if (user.authLevel >= 2) {
|
|
return true;
|
|
}
|
|
|
|
// Regular users (auth level 1) can only edit their own latest report
|
|
if (report.employeeId === user.id) {
|
|
// Find the latest report for this user
|
|
const userReports = reports.filter(r => r.employeeId === user.id);
|
|
const latestReport = userReports.reduce((latest, current) =>
|
|
new Date(current.createdDate) > new Date(latest.createdDate) ? current : latest
|
|
);
|
|
return report.id === latestReport.id;
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
return (
|
|
<DashboardLayout user={user}>
|
|
<div className="space-y-6">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">Shifts Management</h1>
|
|
<p className="mt-1 text-sm text-gray-600">Create and manage operational shifts</p>
|
|
</div>
|
|
<Link
|
|
to="/reports/new"
|
|
className="inline-flex items-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 transition-colors duration-200"
|
|
>
|
|
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
Create New Shift
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Reports Table */}
|
|
<div className="bg-white shadow-sm rounded-lg overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Shift Details
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Shift & Area
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Locations
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Created
|
|
</th>
|
|
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{reports.map((report) => (
|
|
<tr key={report.id} className="hover:bg-gray-50 transition-colors duration-150">
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="flex items-center">
|
|
<div className="flex-shrink-0 h-10 w-10">
|
|
<div className="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
|
|
<svg className="h-5 w-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="ml-4">
|
|
<div className="text-sm font-medium text-gray-900">Shift #{report.id}</div>
|
|
<div className="text-sm text-gray-500">by {report.employee.name}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="flex flex-col space-y-1">
|
|
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getShiftBadge(report.shift)}`}>
|
|
{report.shift.charAt(0).toUpperCase() + report.shift.slice(1)} Shift
|
|
</span>
|
|
<span className="text-sm text-gray-900">{report.area.name}</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="text-sm text-gray-900">
|
|
<div> {report.area.name} Dredger</div>
|
|
<div className="text-gray-500"> {report.dredgerLocation.name} - {report.reclamationLocation.name}</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{/* {new Date(report.createdDate).toLocaleDateString()} */}
|
|
{new Date(report.createdDate).toLocaleDateString('en-GB')}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<div className="flex justify-end space-x-2">
|
|
<button
|
|
onClick={() => handleView(report)}
|
|
className="text-blue-600 hover:text-blue-900 transition-colors duration-150"
|
|
>
|
|
View
|
|
</button>
|
|
{canEditReport(report) && (
|
|
<>
|
|
<button
|
|
onClick={() => handleEdit(report)}
|
|
className="text-indigo-600 hover:text-indigo-900 transition-colors duration-150"
|
|
>
|
|
Edit
|
|
</button>
|
|
<Form method="post" className="inline">
|
|
<input type="hidden" name="intent" value="delete" />
|
|
<input type="hidden" name="id" value={report.id} />
|
|
<button
|
|
type="submit"
|
|
onClick={(e) => {
|
|
if (!confirm("Are you sure you want to delete this report?")) {
|
|
e.preventDefault();
|
|
}
|
|
}}
|
|
className="text-red-600 hover:text-red-900 transition-colors duration-150"
|
|
>
|
|
Delete
|
|
</button>
|
|
</Form>
|
|
</>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{reports.length === 0 && (
|
|
<div className="text-center py-12">
|
|
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
<h3 className="mt-2 text-sm font-medium text-gray-900">No reports</h3>
|
|
<p className="mt-1 text-sm text-gray-500">Get started by creating your first report.</p>
|
|
<div className="mt-6">
|
|
<Link
|
|
to="/reports/new"
|
|
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
|
|
>
|
|
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
Create Shifs
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Edit Form Modal - Only for editing existing reports */}
|
|
{isEditing && (
|
|
<ReportFormModal
|
|
isOpen={showModal}
|
|
onClose={handleCloseModal}
|
|
isEditing={isEditing}
|
|
isSubmitting={isSubmitting}
|
|
editingReport={editingReport}
|
|
actionData={actionData}
|
|
areas={areas}
|
|
dredgerLocations={dredgerLocations}
|
|
reclamationLocations={reclamationLocations}
|
|
foremen={foremen}
|
|
equipment={equipment}
|
|
timeSheetEntries={timeSheetEntries}
|
|
stoppageEntries={stoppageEntries}
|
|
addTimeSheetEntry={addTimeSheetEntry}
|
|
removeTimeSheetEntry={removeTimeSheetEntry}
|
|
updateTimeSheetEntry={updateTimeSheetEntry}
|
|
addStoppageEntry={addStoppageEntry}
|
|
removeStoppageEntry={removeStoppageEntry}
|
|
updateStoppageEntry={updateStoppageEntry}
|
|
/>
|
|
)}
|
|
|
|
{/* View Modal */}
|
|
<ReportViewModal
|
|
isOpen={showViewModal}
|
|
onClose={handleCloseViewModal}
|
|
report={viewingReport}
|
|
/>
|
|
|
|
{/* Toast Notifications */}
|
|
{toast && (
|
|
<Toast
|
|
message={toast.message}
|
|
type={toast.type}
|
|
onClose={() => setToast(null)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</DashboardLayout>
|
|
);
|
|
} |