1452 lines
59 KiB
TypeScript
1452 lines
59 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
|
|
|
|
// Parse URL search parameters for filters
|
|
const url = new URL(request.url);
|
|
const dateFrom = url.searchParams.get('dateFrom');
|
|
const dateTo = url.searchParams.get('dateTo');
|
|
const shift = url.searchParams.get('shift');
|
|
const areaId = url.searchParams.get('areaId');
|
|
const employeeId = url.searchParams.get('employeeId');
|
|
const dredgerLocationId = url.searchParams.get('dredgerLocationId');
|
|
const search = url.searchParams.get('search');
|
|
|
|
// Build where clause based on filters
|
|
const whereClause: any = {};
|
|
|
|
// Date range filter
|
|
if (dateFrom || dateTo) {
|
|
whereClause.createdDate = {};
|
|
if (dateFrom) {
|
|
whereClause.createdDate.gte = new Date(dateFrom + 'T00:00:00.000Z');
|
|
}
|
|
if (dateTo) {
|
|
whereClause.createdDate.lte = new Date(dateTo + 'T23:59:59.999Z');
|
|
}
|
|
}
|
|
|
|
// Shift filter
|
|
if (shift && shift !== 'all') {
|
|
whereClause.shift = shift;
|
|
}
|
|
|
|
// Area filter
|
|
if (areaId && areaId !== 'all') {
|
|
whereClause.areaId = parseInt(areaId);
|
|
}
|
|
|
|
// Employee filter
|
|
if (employeeId && employeeId !== 'all') {
|
|
whereClause.employeeId = parseInt(employeeId);
|
|
}
|
|
|
|
// Dredger location filter
|
|
if (dredgerLocationId && dredgerLocationId !== 'all') {
|
|
whereClause.dredgerLocationId = parseInt(dredgerLocationId);
|
|
}
|
|
|
|
// Search filter (search within notes)
|
|
if (search && search.trim() !== '') {
|
|
whereClause.notes = {
|
|
contains: search.trim(),
|
|
mode: 'insensitive' // Case-insensitive search
|
|
};
|
|
}
|
|
|
|
// Get filtered reports with related data
|
|
let reports = await prisma.report.findMany({
|
|
where: whereClause,
|
|
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 } }
|
|
// }
|
|
// });
|
|
// }
|
|
|
|
|
|
// Calculate statistics for the stats section
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
|
|
const yesterday = new Date(today);
|
|
yesterday.setDate(yesterday.getDate() - 1);
|
|
|
|
const sevenDaysAgo = new Date(today);
|
|
sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
|
|
|
|
// Get dropdown data and statistics
|
|
const [areas, dredgerLocations, reclamationLocations, foremen, equipment, employees, stats] = 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' }] }),
|
|
prisma.employee.findMany({
|
|
where: { status: 'active' },
|
|
select: { id: true, name: true },
|
|
orderBy: { name: 'asc' }
|
|
}),
|
|
// Calculate statistics
|
|
Promise.all([
|
|
// Total reports count
|
|
prisma.report.count(),
|
|
// Day shift count
|
|
prisma.report.count({ where: { shift: 'day' } }),
|
|
// Night shift count
|
|
prisma.report.count({ where: { shift: 'night' } }),
|
|
// Reports from today
|
|
prisma.report.count({
|
|
where: {
|
|
createdDate: {
|
|
gte: today,
|
|
lt: new Date(today.getTime() + 24 * 60 * 60 * 1000)
|
|
}
|
|
}
|
|
}),
|
|
// Reports from yesterday
|
|
prisma.report.count({
|
|
where: {
|
|
createdDate: {
|
|
gte: yesterday,
|
|
lt: today
|
|
}
|
|
}
|
|
}),
|
|
// Reports from last 7 days for average calculation
|
|
prisma.report.count({
|
|
where: {
|
|
createdDate: {
|
|
gte: sevenDaysAgo
|
|
}
|
|
}
|
|
})
|
|
])
|
|
]);
|
|
|
|
const [totalReports, dayShiftCount, nightShiftCount, todayCount, yesterdayCount, last7DaysCount] = stats;
|
|
const averagePerDay = Math.round((last7DaysCount / 7) * 10) / 10; // Round to 1 decimal place
|
|
|
|
return json({
|
|
user,
|
|
reports,
|
|
areas,
|
|
dredgerLocations,
|
|
reclamationLocations,
|
|
foremen,
|
|
equipment,
|
|
employees,
|
|
stats: {
|
|
totalReports,
|
|
dayShiftCount,
|
|
nightShiftCount,
|
|
todayCount,
|
|
yesterdayCount,
|
|
averagePerDay
|
|
},
|
|
filters: {
|
|
dateFrom,
|
|
dateTo,
|
|
shift,
|
|
areaId,
|
|
employeeId,
|
|
dredgerLocationId,
|
|
search
|
|
}
|
|
});
|
|
};
|
|
|
|
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 === "duplicate") {
|
|
if (typeof id !== "string") {
|
|
return json({ errors: { form: "Invalid report ID" } }, { status: 400 });
|
|
}
|
|
|
|
// Get the original report with all its data
|
|
const originalReport = await prisma.report.findUnique({
|
|
where: { id: parseInt(id) },
|
|
include: {
|
|
area: true,
|
|
dredgerLocation: true,
|
|
reclamationLocation: true
|
|
}
|
|
});
|
|
|
|
if (!originalReport) {
|
|
return json({ errors: { form: "Report not found" } }, { status: 404 });
|
|
}
|
|
|
|
// Check if report is too old (before the day before current date)
|
|
const reportDate = new Date(originalReport.createdDate);
|
|
const dayBeforeToday = new Date();
|
|
dayBeforeToday.setDate(dayBeforeToday.getDate() - 1);
|
|
dayBeforeToday.setHours(0, 0, 0, 0); // Set to start of day
|
|
|
|
if (reportDate < dayBeforeToday) {
|
|
return json({ errors: { form: "Cannot duplicate reports older than yesterday" } }, { status: 400 });
|
|
}
|
|
|
|
// Check if the report is part of a complete sheet (both day and night shifts exist)
|
|
const dateString = originalReport.createdDate.toISOString().split('T')[0];
|
|
const existingSheet = await prisma.sheet.findUnique({
|
|
where: {
|
|
areaId_dredgerLocationId_reclamationLocationId_date: {
|
|
areaId: originalReport.areaId,
|
|
dredgerLocationId: originalReport.dredgerLocationId,
|
|
reclamationLocationId: originalReport.reclamationLocationId,
|
|
date: dateString
|
|
}
|
|
}
|
|
});
|
|
|
|
// If sheet exists and has both shifts, don't allow duplication
|
|
if (existingSheet && existingSheet.dayShiftId && existingSheet.nightShiftId) {
|
|
return json({ errors: { form: "Cannot duplicate report - sheet is already complete with both day and night shifts" } }, { status: 400 });
|
|
}
|
|
|
|
// Determine the new shift (opposite of original)
|
|
const newShift = originalReport.shift === 'day' ? 'night' : 'day';
|
|
|
|
// Check if the opposite shift already exists
|
|
if (existingSheet) {
|
|
if ((newShift === 'day' && existingSheet.dayShiftId) ||
|
|
(newShift === 'night' && existingSheet.nightShiftId)) {
|
|
return json({ errors: { form: `Cannot duplicate report - ${newShift} shift already exists for this date and location` } }, { status: 400 });
|
|
}
|
|
}
|
|
|
|
try {
|
|
// Create the duplicate report with opposite shift and no stoppages
|
|
const duplicateReport = await prisma.report.create({
|
|
data: {
|
|
employeeId: user.id, // Assign to current user
|
|
shift: newShift,
|
|
areaId: originalReport.areaId,
|
|
dredgerLocationId: originalReport.dredgerLocationId,
|
|
dredgerLineLength: originalReport.dredgerLineLength,
|
|
reclamationLocationId: originalReport.reclamationLocationId,
|
|
shoreConnection: originalReport.shoreConnection,
|
|
reclamationHeight: originalReport.reclamationHeight,
|
|
pipelineLength: originalReport.pipelineLength,
|
|
stats: originalReport.stats,
|
|
timeSheet: originalReport.timeSheet,
|
|
stoppages: [], // Empty stoppages array
|
|
notes: originalReport.notes
|
|
}
|
|
});
|
|
|
|
// Manage sheet for the new report
|
|
await manageSheet(
|
|
duplicateReport.id,
|
|
newShift,
|
|
originalReport.areaId,
|
|
originalReport.dredgerLocationId,
|
|
originalReport.reclamationLocationId,
|
|
duplicateReport.createdDate
|
|
);
|
|
|
|
return json({ success: `Report duplicated successfully as ${newShift} shift!` });
|
|
} catch (error) {
|
|
console.error('Duplicate error:', error);
|
|
return json({ errors: { form: "Failed to duplicate 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, employees, stats, filters } = useLoaderData<typeof loader>();
|
|
const actionData = useActionData<typeof action>();
|
|
const navigation = useNavigation();
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
const [editingReport, setEditingReport] = useState<any>(null);
|
|
const [viewingReport, setViewingReport] = useState<any>(null);
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [showViewModal, setShowViewModal] = useState(false);
|
|
const [showFilters, setShowFilters] = 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);
|
|
let end1 = parseTime(to1);
|
|
if (end1 < start1)
|
|
end1 += 24 * 60;
|
|
totalMinutes += end1 - start1;
|
|
}
|
|
|
|
// Second period
|
|
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));
|
|
};
|
|
|
|
|
|
|
|
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);
|
|
};
|
|
|
|
// 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;
|
|
};
|
|
|
|
const canDuplicateReport = (report: any) => {
|
|
// Check if report is too old (before the day before current date)
|
|
const reportDate = new Date(report.createdDate);
|
|
const dayBeforeToday = new Date();
|
|
dayBeforeToday.setDate(dayBeforeToday.getDate() - 1);
|
|
dayBeforeToday.setHours(0, 0, 0, 0); // Set to start of day
|
|
|
|
// If report is before the day before today, don't allow duplication
|
|
if (reportDate < dayBeforeToday) {
|
|
return false;
|
|
}
|
|
|
|
// All users (auth level 1+) can duplicate reports, not just their own
|
|
// The server will handle the final validation for sheet completeness
|
|
return true;
|
|
};
|
|
|
|
const isReportTooOld = (report: any) => {
|
|
const reportDate = new Date(report.createdDate);
|
|
const dayBeforeToday = new Date();
|
|
dayBeforeToday.setDate(dayBeforeToday.getDate() - 1);
|
|
dayBeforeToday.setHours(0, 0, 0, 0);
|
|
return reportDate < dayBeforeToday;
|
|
};
|
|
|
|
// Filter functions
|
|
const handleFilterChange = (filterName: string, value: string) => {
|
|
const newSearchParams = new URLSearchParams(searchParams);
|
|
if (value === '' || value === 'all') {
|
|
newSearchParams.delete(filterName);
|
|
} else {
|
|
newSearchParams.set(filterName, value);
|
|
}
|
|
setSearchParams(newSearchParams);
|
|
};
|
|
|
|
const clearAllFilters = () => {
|
|
setSearchParams(new URLSearchParams());
|
|
};
|
|
|
|
const hasActiveFilters = () => {
|
|
return filters.dateFrom || filters.dateTo || filters.shift || filters.areaId || filters.employeeId || filters.dredgerLocationId || filters.search;
|
|
};
|
|
|
|
// Debounced search handler for better performance
|
|
const [searchTerm, setSearchTerm] = useState(filters.search || '');
|
|
const [searchTimeout, setSearchTimeout] = useState<NodeJS.Timeout | null>(null);
|
|
|
|
const handleSearchChange = (value: string) => {
|
|
setSearchTerm(value);
|
|
|
|
// Clear existing timeout
|
|
if (searchTimeout) {
|
|
clearTimeout(searchTimeout);
|
|
}
|
|
|
|
// Set new timeout for debounced search
|
|
const newTimeout = setTimeout(() => {
|
|
handleFilterChange('search', value);
|
|
}, 500); // 500ms delay
|
|
|
|
setSearchTimeout(newTimeout);
|
|
};
|
|
|
|
// Update search term when filters change (e.g., from URL or clear all)
|
|
useEffect(() => {
|
|
setSearchTerm(filters.search || '');
|
|
}, [filters.search]);
|
|
|
|
// Cleanup timeout on unmount
|
|
useEffect(() => {
|
|
return () => {
|
|
if (searchTimeout) {
|
|
clearTimeout(searchTimeout);
|
|
}
|
|
};
|
|
}, [searchTimeout]);
|
|
|
|
// Get today's date for date input max values
|
|
const today = new Date().toISOString().split('T')[0];
|
|
|
|
return (
|
|
<DashboardLayout user={user}>
|
|
<div className="space-y-6">
|
|
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center space-y-4 sm:space-y-0">
|
|
<div>
|
|
<h1 className="text-xl sm: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 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 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>
|
|
|
|
{/* Quick Stats Section */}
|
|
<div className="bg-white shadow-sm rounded-lg overflow-hidden">
|
|
<div className="px-4 sm:px-6 py-4 border-b border-gray-200">
|
|
<h3 className="text-lg font-medium text-gray-900">Quick Statistics</h3>
|
|
<p className="mt-1 text-sm text-gray-600">Overview of report activity</p>
|
|
</div>
|
|
<div className="p-4 sm:p-6">
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
|
|
{/* Total Reports */}
|
|
<div className="bg-gray-50 rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-gray-900">{stats.totalReports}</div>
|
|
<div className="text-xs text-gray-600 mt-1">Total Reports</div>
|
|
</div>
|
|
|
|
{/* Day Shift Count */}
|
|
<div className="bg-yellow-50 rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-yellow-800">{stats.dayShiftCount}</div>
|
|
<div className="text-xs text-yellow-700 mt-1">Day Shifts</div>
|
|
</div>
|
|
|
|
{/* Night Shift Count */}
|
|
<div className="bg-blue-50 rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-blue-800">{stats.nightShiftCount}</div>
|
|
<div className="text-xs text-blue-700 mt-1">Night Shifts</div>
|
|
</div>
|
|
|
|
{/* Today's Reports */}
|
|
<div className="bg-green-50 rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-green-800">{stats.todayCount}</div>
|
|
<div className="text-xs text-green-700 mt-1">Today</div>
|
|
</div>
|
|
|
|
{/* Yesterday's Reports */}
|
|
<div className="bg-orange-50 rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-orange-800">{stats.yesterdayCount}</div>
|
|
<div className="text-xs text-orange-700 mt-1">Yesterday</div>
|
|
</div>
|
|
|
|
{/* Average Per Day */}
|
|
<div className="bg-indigo-50 rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-indigo-800">{stats.averagePerDay}</div>
|
|
<div className="text-xs text-indigo-700 mt-1">Avg/Day (7d)</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Additional Insights */}
|
|
<div className="mt-4 pt-4 border-t border-gray-200">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 text-sm">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-gray-600">Shift Distribution:</span>
|
|
<span className="font-medium text-gray-900">
|
|
{stats.totalReports > 0 ? Math.round((stats.dayShiftCount / stats.totalReports) * 100) : 0}% Day, {stats.totalReports > 0 ? Math.round((stats.nightShiftCount / stats.totalReports) * 100) : 0}% Night
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-gray-600">Today vs Yesterday:</span>
|
|
<span className={`font-medium ${stats.todayCount >= stats.yesterdayCount ? 'text-green-600' : 'text-red-600'}`}>
|
|
{stats.todayCount >= stats.yesterdayCount ? '+' : ''}{stats.todayCount - stats.yesterdayCount}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-gray-600">Weekly Trend:</span>
|
|
<span className="font-medium text-gray-900">
|
|
{stats.averagePerDay} reports/day
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filter Section */}
|
|
<div className="bg-white shadow-sm rounded-lg overflow-hidden">
|
|
<div className="px-4 sm:px-6 py-4 border-b border-gray-200">
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-2 sm:space-y-0">
|
|
<div className="flex items-center space-x-2">
|
|
<button
|
|
onClick={() => setShowFilters(!showFilters)}
|
|
className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md 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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
|
</svg>
|
|
{showFilters ? 'Hide Filters' : 'Show Filters'}
|
|
</button>
|
|
{hasActiveFilters() && (
|
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
|
|
{Object.values(filters).filter(Boolean).length} active
|
|
</span>
|
|
)}
|
|
</div>
|
|
{hasActiveFilters() && (
|
|
<button
|
|
onClick={clearAllFilters}
|
|
className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-indigo-600 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
>
|
|
Clear All Filters
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{showFilters && (
|
|
<div className="px-4 sm:px-6 py-4 bg-gray-50 border-b border-gray-200">
|
|
{/* Search Input - Full Width */}
|
|
{/* <div className="mb-4">
|
|
<label htmlFor="search" className="block text-sm font-medium text-gray-700 mb-2">
|
|
Search in Report Notes
|
|
</label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
id="search"
|
|
placeholder="Search for keywords in report notes..."
|
|
value={searchTerm}
|
|
onChange={(e) => handleSearchChange(e.target.value)}
|
|
className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
|
/>
|
|
{filters.search && (
|
|
<div className="absolute inset-y-0 right-0 pr-3 flex items-center">
|
|
<button
|
|
onClick={() => {
|
|
setSearchTerm('');
|
|
handleFilterChange('search', '');
|
|
}}
|
|
className="text-gray-400 hover:text-gray-600"
|
|
title="Clear search"
|
|
>
|
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{filters.search && (
|
|
<div className="mt-2 flex items-center justify-between">
|
|
<p className="text-xs text-gray-500">
|
|
Searching for: <span className="font-medium text-gray-700">"{filters.search}"</span>
|
|
</p>
|
|
{searchTerm !== filters.search && (
|
|
<span className="text-xs text-indigo-600 flex items-center">
|
|
<svg className="animate-spin -ml-1 mr-1 h-3 w-3 text-indigo-600" 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>
|
|
Searching...
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div> */}
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4">
|
|
{/* Date From */}
|
|
<div>
|
|
<label htmlFor="dateFrom" className="block text-xs font-medium text-gray-700 mb-1">
|
|
Date From
|
|
</label>
|
|
<input
|
|
type="date"
|
|
id="dateFrom"
|
|
value={filters.dateFrom || ''}
|
|
max={today}
|
|
onChange={(e) => handleFilterChange('dateFrom', e.target.value)}
|
|
className="block w-full text-sm border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* Date To */}
|
|
<div>
|
|
<label htmlFor="dateTo" className="block text-xs font-medium text-gray-700 mb-1">
|
|
Date To
|
|
</label>
|
|
<input
|
|
type="date"
|
|
id="dateTo"
|
|
value={filters.dateTo || ''}
|
|
max={today}
|
|
onChange={(e) => handleFilterChange('dateTo', e.target.value)}
|
|
className="block w-full text-sm border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* Shift Type */}
|
|
<div>
|
|
<label htmlFor="shift" className="block text-xs font-medium text-gray-700 mb-1">
|
|
Shift Type
|
|
</label>
|
|
<select
|
|
id="shift"
|
|
value={filters.shift || 'all'}
|
|
onChange={(e) => handleFilterChange('shift', e.target.value)}
|
|
className="block w-full text-sm border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
|
|
>
|
|
<option value="all">All Shifts</option>
|
|
<option value="day">Day Shift</option>
|
|
<option value="night">Night Shift</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Area */}
|
|
<div>
|
|
<label htmlFor="areaId" className="block text-xs font-medium text-gray-700 mb-1">
|
|
Area
|
|
</label>
|
|
<select
|
|
id="areaId"
|
|
value={filters.areaId || 'all'}
|
|
onChange={(e) => handleFilterChange('areaId', e.target.value)}
|
|
className="block w-full text-sm border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
|
|
>
|
|
<option value="all">All Areas</option>
|
|
{areas.map((area) => (
|
|
<option key={area.id} value={area.id}>
|
|
{area.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Employee */}
|
|
<div>
|
|
<label htmlFor="employeeId" className="block text-xs font-medium text-gray-700 mb-1">
|
|
Employee
|
|
</label>
|
|
<select
|
|
id="employeeId"
|
|
value={filters.employeeId || 'all'}
|
|
onChange={(e) => handleFilterChange('employeeId', e.target.value)}
|
|
className="block w-full text-sm border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
|
|
>
|
|
<option value="all">All Employees</option>
|
|
{employees.map((employee) => (
|
|
<option key={employee.id} value={employee.id}>
|
|
{employee.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Dredger Location */}
|
|
<div>
|
|
<label htmlFor="dredgerLocationId" className="block text-xs font-medium text-gray-700 mb-1">
|
|
Dredger Location
|
|
</label>
|
|
<select
|
|
id="dredgerLocationId"
|
|
value={filters.dredgerLocationId || 'all'}
|
|
onChange={(e) => handleFilterChange('dredgerLocationId', e.target.value)}
|
|
className="block w-full text-sm border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
|
|
>
|
|
<option value="all">All Dredger Locations</option>
|
|
{dredgerLocations.map((location) => (
|
|
<option key={location.id} value={location.id}>
|
|
{location.name} ({location.class.toUpperCase()})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Results Summary */}
|
|
<div className="mt-4 pt-4 border-t border-gray-200">
|
|
<p className="text-sm text-gray-600">
|
|
Showing <span className="font-medium">{reports.length}</span> report{reports.length !== 1 ? 's' : ''}
|
|
{hasActiveFilters() && (
|
|
<span>
|
|
{filters.search ? ' matching your search and filters' : ' matching your filters'}
|
|
</span>
|
|
)}
|
|
</p>
|
|
{filters.search && reports.length === 0 && (
|
|
<p className="text-sm text-gray-500 mt-1">
|
|
No reports found containing "{filters.search}" in their notes. Try a different search term.
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Reports Table - Desktop */}
|
|
<div className="bg-white shadow-sm rounded-lg overflow-hidden">
|
|
<div className="hidden md:block">
|
|
<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('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>
|
|
{canDuplicateReport(report) ? (
|
|
<Form method="post" className="inline">
|
|
<input type="hidden" name="intent" value="duplicate" />
|
|
<input type="hidden" name="id" value={report.id} />
|
|
<button
|
|
type="submit"
|
|
onClick={(e) => {
|
|
const oppositeShift = report.shift === 'day' ? 'night' : 'day';
|
|
if (!confirm(`Are you sure you want to duplicate this ${report.shift} shift as a ${oppositeShift} shift? Stoppages will not be copied.`)) {
|
|
e.preventDefault();
|
|
}
|
|
}}
|
|
className="text-green-600 hover:text-green-900 transition-colors duration-150"
|
|
title={`Duplicate as ${report.shift === 'day' ? 'night' : 'day'} shift`}
|
|
>
|
|
Duplicate
|
|
</button>
|
|
</Form>
|
|
) : isReportTooOld(report) ? (
|
|
<span
|
|
className="text-gray-400 cursor-not-allowed"
|
|
title="Cannot duplicate reports older than yesterday"
|
|
>
|
|
Duplicate
|
|
</span>
|
|
) : null}
|
|
{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>
|
|
</div>
|
|
|
|
{/* Reports Cards - Mobile */}
|
|
<div className="md:hidden">
|
|
<div className="space-y-4 p-4">
|
|
{reports.map((report) => (
|
|
<div key={report.id} className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<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-3">
|
|
<div className="text-sm font-medium text-gray-900">Shift #{report.id}</div>
|
|
<div className="text-xs text-gray-500">by {report.employee.name}</div>
|
|
</div>
|
|
</div>
|
|
<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)}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="space-y-2 mb-4">
|
|
<div className="flex justify-between">
|
|
<span className="text-xs font-medium text-gray-500">Area:</span>
|
|
<span className="text-xs text-gray-900">{report.area.name}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-xs font-medium text-gray-500">Dredger:</span>
|
|
<span className="text-xs text-gray-900">{report.dredgerLocation.name}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-xs font-medium text-gray-500">Reclamation:</span>
|
|
<span className="text-xs text-gray-900">{report.reclamationLocation.name}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-xs font-medium text-gray-500">Created:</span>
|
|
<span className="text-xs text-gray-900">{new Date(report.createdDate).toLocaleDateString('en-GB')}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col space-y-2">
|
|
<button
|
|
onClick={() => handleView(report)}
|
|
className="w-full text-center px-3 py-2 text-sm text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 transition-colors duration-150"
|
|
>
|
|
View Details
|
|
</button>
|
|
{canDuplicateReport(report) ? (
|
|
<Form method="post" className="w-full">
|
|
<input type="hidden" name="intent" value="duplicate" />
|
|
<input type="hidden" name="id" value={report.id} />
|
|
<button
|
|
type="submit"
|
|
onClick={(e) => {
|
|
const oppositeShift = report.shift === 'day' ? 'night' : 'day';
|
|
if (!confirm(`Are you sure you want to duplicate this ${report.shift} shift as a ${oppositeShift} shift? Stoppages will not be copied.`)) {
|
|
e.preventDefault();
|
|
}
|
|
}}
|
|
className="w-full text-center px-3 py-2 text-sm text-green-600 bg-green-50 rounded-md hover:bg-green-100 transition-colors duration-150"
|
|
>
|
|
Duplicate as {report.shift === 'day' ? 'Night' : 'Day'} Shift
|
|
</button>
|
|
</Form>
|
|
) : isReportTooOld(report) ? (
|
|
<button
|
|
disabled
|
|
className="w-full text-center px-3 py-2 text-sm text-gray-400 bg-gray-100 rounded-md cursor-not-allowed"
|
|
title="Cannot duplicate reports older than yesterday"
|
|
>
|
|
Duplicate as {report.shift === 'day' ? 'Night' : 'Day'} Shift (Too Old)
|
|
</button>
|
|
) : null}
|
|
{canEditReport(report) && (
|
|
<div className="flex space-x-2">
|
|
<button
|
|
onClick={() => handleEdit(report)}
|
|
className="flex-1 text-center px-3 py-2 text-sm text-indigo-600 bg-indigo-50 rounded-md hover:bg-indigo-100 transition-colors duration-150"
|
|
>
|
|
Edit
|
|
</button>
|
|
<Form method="post" className="flex-1">
|
|
<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="w-full text-center px-3 py-2 text-sm text-red-600 bg-red-50 rounded-md hover:bg-red-100 transition-colors duration-150"
|
|
>
|
|
Delete
|
|
</button>
|
|
</Form>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
{reports.length === 0 && (
|
|
<div className="text-center py-12 px-4">
|
|
<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 Shifts
|
|
</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>
|
|
);
|
|
} |