739 lines
34 KiB
TypeScript
739 lines
34 KiB
TypeScript
import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
|
|
import { json } from "@remix-run/node";
|
|
import { useLoaderData, useSearchParams } from "@remix-run/react";
|
|
import { requireAuthLevel } from "~/utils/auth.server";
|
|
import DashboardLayout from "~/components/DashboardLayout";
|
|
import { useState } from "react";
|
|
import { prisma } from "~/utils/db.server";
|
|
|
|
export const meta: MetaFunction = () => [{ title: "Stoppages Analysis - Phosphat Report" }];
|
|
|
|
interface StoppageEntry {
|
|
id: string;
|
|
from: string;
|
|
to: string;
|
|
total: string;
|
|
reason: string;
|
|
responsible: string;
|
|
note: string;
|
|
}
|
|
|
|
interface StoppageData {
|
|
sheetId: number;
|
|
date: string;
|
|
area: string;
|
|
dredgerLocation: string;
|
|
reclamationLocation: string;
|
|
shift: string;
|
|
employee: string;
|
|
stoppages: StoppageEntry[];
|
|
countedStoppages: StoppageEntry[];
|
|
uncountedStoppages: StoppageEntry[];
|
|
totalStoppageTime: number; // in minutes (all stoppages)
|
|
countedStoppageTime: number; // in minutes (counted only)
|
|
uncountedStoppageTime: number; // in minutes (uncounted only)
|
|
}
|
|
|
|
export const loader = async ({ request }: LoaderFunctionArgs) => {
|
|
const user = await requireAuthLevel(request, 2);
|
|
|
|
// 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 areaId = url.searchParams.get('areaId');
|
|
const employeeId = url.searchParams.get('employeeId');
|
|
const dredgerLocationId = url.searchParams.get('dredgerLocationId');
|
|
|
|
// Build where clause for sheets
|
|
const whereClause: any = {};
|
|
|
|
// Date range filter
|
|
if (dateFrom || dateTo) {
|
|
if (dateFrom) {
|
|
whereClause.date = { gte: dateFrom };
|
|
}
|
|
if (dateTo) {
|
|
whereClause.date = { ...whereClause.date, lte: dateTo };
|
|
}
|
|
}
|
|
|
|
// Area filter
|
|
if (areaId && areaId !== 'all') {
|
|
whereClause.areaId = parseInt(areaId);
|
|
}
|
|
|
|
// Dredger location filter
|
|
if (dredgerLocationId && dredgerLocationId !== 'all') {
|
|
whereClause.dredgerLocationId = parseInt(dredgerLocationId);
|
|
}
|
|
|
|
// Get sheets with their reports
|
|
let sheets = await prisma.sheet.findMany({
|
|
where: whereClause,
|
|
orderBy: { date: 'desc' },
|
|
include: {
|
|
area: { select: { name: true } },
|
|
dredgerLocation: { select: { name: true, class: true } },
|
|
reclamationLocation: { select: { name: true } },
|
|
dayShift: {
|
|
include: {
|
|
employee: { select: { name: true } }
|
|
}
|
|
},
|
|
nightShift: {
|
|
include: {
|
|
employee: { select: { name: true } }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Get dropdown data for filters
|
|
const [areas, dredgerLocations, employees] = await Promise.all([
|
|
prisma.area.findMany({ orderBy: { name: 'asc' } }),
|
|
prisma.dredgerLocation.findMany({ orderBy: { name: 'asc' } }),
|
|
prisma.employee.findMany({
|
|
where: { status: 'active' },
|
|
select: { id: true, name: true },
|
|
orderBy: { name: 'asc' }
|
|
})
|
|
]);
|
|
|
|
// Process stoppages data
|
|
const stoppagesData: StoppageData[] = [];
|
|
|
|
// Helper function to convert time string to minutes
|
|
const timeToMinutes = (timeStr: string): number => {
|
|
if (!timeStr || timeStr === '00:00') return 0;
|
|
const [hours, minutes] = timeStr.split(':').map(Number);
|
|
return (hours * 60) + minutes;
|
|
};
|
|
|
|
// Helper function to check if a stoppage should be counted
|
|
const isStoppageCounted = (stoppage: StoppageEntry): boolean => {
|
|
const reason = stoppage.reason?.toLowerCase() || '';
|
|
const note = stoppage.note?.toLowerCase() || '';
|
|
|
|
// Exclude stoppages with "Brine" or "Change Shift" in reason or notes
|
|
return !(
|
|
reason.includes('brine') ||
|
|
reason.includes('change shift') ||
|
|
note.includes('brine') ||
|
|
note.includes('change shift') ||
|
|
reason.includes('shift change') ||
|
|
note.includes('shift change')
|
|
);
|
|
};
|
|
|
|
sheets.forEach(sheet => {
|
|
// Process day shift stoppages
|
|
if (sheet.dayShift && Array.isArray(sheet.dayShift.stoppages)) {
|
|
const stoppages = sheet.dayShift.stoppages as StoppageEntry[];
|
|
if (stoppages.length > 0) {
|
|
const countedStoppages = stoppages.filter(isStoppageCounted);
|
|
const uncountedStoppages = stoppages.filter(s => !isStoppageCounted(s));
|
|
|
|
const totalTime = stoppages.reduce((sum, stoppage) => sum + timeToMinutes(stoppage.total), 0);
|
|
const countedTime = countedStoppages.reduce((sum, stoppage) => sum + timeToMinutes(stoppage.total), 0);
|
|
const uncountedTime = uncountedStoppages.reduce((sum, stoppage) => sum + timeToMinutes(stoppage.total), 0);
|
|
|
|
stoppagesData.push({
|
|
sheetId: sheet.id,
|
|
date: sheet.date,
|
|
area: sheet.area.name,
|
|
dredgerLocation: sheet.dredgerLocation.name,
|
|
reclamationLocation: sheet.reclamationLocation.name,
|
|
shift: 'Day',
|
|
employee: sheet.dayShift.employee.name,
|
|
stoppages,
|
|
countedStoppages,
|
|
uncountedStoppages,
|
|
totalStoppageTime: totalTime,
|
|
countedStoppageTime: countedTime,
|
|
uncountedStoppageTime: uncountedTime
|
|
});
|
|
}
|
|
}
|
|
|
|
// Process night shift stoppages
|
|
if (sheet.nightShift && Array.isArray(sheet.nightShift.stoppages)) {
|
|
const stoppages = sheet.nightShift.stoppages as StoppageEntry[];
|
|
if (stoppages.length > 0) {
|
|
const countedStoppages = stoppages.filter(isStoppageCounted);
|
|
const uncountedStoppages = stoppages.filter(s => !isStoppageCounted(s));
|
|
|
|
const totalTime = stoppages.reduce((sum, stoppage) => sum + timeToMinutes(stoppage.total), 0);
|
|
const countedTime = countedStoppages.reduce((sum, stoppage) => sum + timeToMinutes(stoppage.total), 0);
|
|
const uncountedTime = uncountedStoppages.reduce((sum, stoppage) => sum + timeToMinutes(stoppage.total), 0);
|
|
|
|
stoppagesData.push({
|
|
sheetId: sheet.id,
|
|
date: sheet.date,
|
|
area: sheet.area.name,
|
|
dredgerLocation: sheet.dredgerLocation.name,
|
|
reclamationLocation: sheet.reclamationLocation.name,
|
|
shift: 'Night',
|
|
employee: sheet.nightShift.employee.name,
|
|
stoppages,
|
|
countedStoppages,
|
|
uncountedStoppages,
|
|
totalStoppageTime: totalTime,
|
|
countedStoppageTime: countedTime,
|
|
uncountedStoppageTime: uncountedTime
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
// Apply employee filter if specified (post-processing)
|
|
let filteredStoppagesData = stoppagesData;
|
|
if (employeeId && employeeId !== 'all') {
|
|
const selectedEmployee = employees.find(emp => emp.id === parseInt(employeeId));
|
|
if (selectedEmployee) {
|
|
filteredStoppagesData = stoppagesData.filter(data => data.employee === selectedEmployee.name);
|
|
}
|
|
}
|
|
|
|
// Calculate summary statistics
|
|
const totalStoppages = filteredStoppagesData.reduce((sum, data) => sum + data.stoppages.length, 0);
|
|
const countedStoppages = filteredStoppagesData.reduce((sum, data) => sum + data.countedStoppages.length, 0);
|
|
const uncountedStoppages = filteredStoppagesData.reduce((sum, data) => sum + data.uncountedStoppages.length, 0);
|
|
|
|
const totalStoppageTime = filteredStoppagesData.reduce((sum, data) => sum + data.totalStoppageTime, 0);
|
|
const countedStoppageTime = filteredStoppagesData.reduce((sum, data) => sum + data.countedStoppageTime, 0);
|
|
const uncountedStoppageTime = filteredStoppagesData.reduce((sum, data) => sum + data.uncountedStoppageTime, 0);
|
|
|
|
const totalSheets = filteredStoppagesData.length;
|
|
const averageStoppagesPerSheet = totalSheets > 0 ? Math.round((totalStoppages / totalSheets) * 10) / 10 : 0;
|
|
const averageCountedStoppagesPerSheet = totalSheets > 0 ? Math.round((countedStoppages / totalSheets) * 10) / 10 : 0;
|
|
const averageStoppageTimePerSheet = totalSheets > 0 ? Math.round((totalStoppageTime / totalSheets) * 10) / 10 : 0;
|
|
const averageCountedTimePerSheet = totalSheets > 0 ? Math.round((countedStoppageTime / totalSheets) * 10) / 10 : 0;
|
|
|
|
// Convert total time back to hours:minutes format
|
|
const formatMinutesToTime = (minutes: number): string => {
|
|
const hours = Math.floor(minutes / 60);
|
|
const mins = minutes % 60;
|
|
return `${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`;
|
|
};
|
|
|
|
return json({
|
|
user,
|
|
stoppagesData: filteredStoppagesData,
|
|
areas,
|
|
dredgerLocations,
|
|
employees,
|
|
filters: {
|
|
dateFrom,
|
|
dateTo,
|
|
areaId,
|
|
employeeId,
|
|
dredgerLocationId
|
|
},
|
|
summary: {
|
|
totalStoppages,
|
|
countedStoppages,
|
|
uncountedStoppages,
|
|
totalStoppageTime: formatMinutesToTime(totalStoppageTime),
|
|
countedStoppageTime: formatMinutesToTime(countedStoppageTime),
|
|
uncountedStoppageTime: formatMinutesToTime(uncountedStoppageTime),
|
|
totalStoppageTimeMinutes: totalStoppageTime,
|
|
countedStoppageTimeMinutes: countedStoppageTime,
|
|
uncountedStoppageTimeMinutes: uncountedStoppageTime,
|
|
totalSheets,
|
|
averageStoppagesPerSheet,
|
|
averageCountedStoppagesPerSheet,
|
|
averageStoppageTimePerSheet: formatMinutesToTime(Math.round(averageStoppageTimePerSheet)),
|
|
averageCountedTimePerSheet: formatMinutesToTime(Math.round(averageCountedTimePerSheet))
|
|
}
|
|
});
|
|
};
|
|
|
|
export default function Stoppages() {
|
|
const { user, stoppagesData, areas, dredgerLocations, employees, filters, summary } = useLoaderData<typeof loader>();
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
const [showFilters, setShowFilters] = useState(false);
|
|
|
|
// 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.areaId || filters.employeeId || filters.dredgerLocationId;
|
|
};
|
|
|
|
// Get today's date for date input max values
|
|
const today = new Date().toISOString().split('T')[0];
|
|
|
|
const getShiftBadge = (shift: string) => {
|
|
return shift === "Day"
|
|
? "bg-yellow-100 text-yellow-800"
|
|
: "bg-blue-100 text-blue-800";
|
|
};
|
|
|
|
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">Stoppages Analysis</h1>
|
|
<p className="mt-1 text-sm text-gray-600">Analyze operational stoppages across all report sheets</p>
|
|
</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">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 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>
|
|
|
|
{/* 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">{stoppagesData.length}</span> sheet{stoppagesData.length !== 1 ? 's' : ''} with stoppages
|
|
{hasActiveFilters() && ' matching your filters'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Legend */}
|
|
<div className="bg-white shadow-sm rounded-lg overflow-hidden">
|
|
<div className="px-4 sm:px-6 py-4">
|
|
<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-4">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-4 h-4 bg-red-100 border-l-2 border-red-300 rounded"></div>
|
|
<span className="text-sm text-gray-700">Counted Stoppages</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-4 h-4 bg-green-100 border-l-2 border-green-300 rounded"></div>
|
|
<span className="text-sm text-gray-700">Uncounted Stoppages</span>
|
|
</div>
|
|
</div>
|
|
<div className="text-xs text-gray-500">
|
|
Uncounted: Brine operations & shift changes (planned activities)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Summary Statistics */}
|
|
<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">Stoppages Summary</h3>
|
|
<p className="mt-1 text-sm text-gray-600">Overall statistics for the selected period</p>
|
|
</div>
|
|
<div className="p-4 sm:p-6">
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 gap-4">
|
|
{/* Total Stoppages */}
|
|
<div className="bg-gray-50 rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-gray-800">{summary.totalStoppages}</div>
|
|
<div className="text-xs text-gray-700 mt-1">Total Stoppages</div>
|
|
</div>
|
|
|
|
{/* Counted Stoppages */}
|
|
<div className="bg-red-50 rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-red-800">{summary.countedStoppages}</div>
|
|
<div className="text-xs text-red-700 mt-1">Counted</div>
|
|
</div>
|
|
|
|
{/* Uncounted Stoppages */}
|
|
<div className="bg-green-50 rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-green-800">{summary.uncountedStoppages}</div>
|
|
<div className="text-xs text-green-700 mt-1">Uncounted</div>
|
|
</div>
|
|
|
|
{/* Total Time */}
|
|
<div className="bg-orange-50 rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-orange-800">{summary.totalStoppageTime}</div>
|
|
<div className="text-xs text-orange-700 mt-1">Total Time</div>
|
|
</div>
|
|
|
|
{/* Counted Time */}
|
|
<div className="bg-red-50 rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-red-800">{summary.countedStoppageTime}</div>
|
|
<div className="text-xs text-red-700 mt-1">Counted Time</div>
|
|
</div>
|
|
|
|
{/* Uncounted Time */}
|
|
<div className="bg-green-50 rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-green-800">{summary.uncountedStoppageTime}</div>
|
|
<div className="text-xs text-green-700 mt-1">Uncounted Time</div>
|
|
</div>
|
|
|
|
{/* Sheets with Stoppages */}
|
|
<div className="bg-blue-50 rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-blue-800">{summary.totalSheets}</div>
|
|
<div className="text-xs text-blue-700 mt-1">Sheets w/ Stops</div>
|
|
</div>
|
|
|
|
{/* Average Counted per Sheet */}
|
|
<div className="bg-indigo-50 rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-indigo-800">{summary.averageCountedStoppagesPerSheet}</div>
|
|
<div className="text-xs text-indigo-700 mt-1">Avg Counted/Sheet</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-4 gap-4 text-sm">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-gray-600">Counted vs Total:</span>
|
|
<span className="font-medium text-gray-900">
|
|
{summary.totalStoppages > 0 ? Math.round((summary.countedStoppages / summary.totalStoppages) * 100) : 0}% counted
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-gray-600">Avg Total/Sheet:</span>
|
|
<span className="font-medium text-gray-900">
|
|
{summary.averageStoppagesPerSheet}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-gray-600">Avg Total Time/Sheet:</span>
|
|
<span className="font-medium text-gray-900">
|
|
{summary.averageStoppageTimePerSheet}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-gray-600">Avg Counted Time/Sheet:</span>
|
|
<span className="font-medium text-gray-900">
|
|
{summary.averageCountedTimePerSheet}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stoppages Table - Desktop */}
|
|
<div className="bg-white shadow-sm rounded-lg overflow-hidden">
|
|
<div className="hidden lg: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">
|
|
Date & Shift
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Location
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Employee
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Stoppages
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Total Time
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{stoppagesData.map((data, index) => (
|
|
<tr key={`${data.sheetId}-${data.shift}`} className="hover:bg-gray-50 transition-colors duration-150">
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="flex flex-col space-y-1">
|
|
<div className="text-sm font-medium text-gray-900">
|
|
{new Date(data.date).toLocaleDateString('en-GB')}
|
|
</div>
|
|
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getShiftBadge(data.shift)}`}>
|
|
{data.shift} Shift
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="text-sm text-gray-900">
|
|
<div className="font-medium">{data.area}</div>
|
|
<div className="text-gray-500">{data.dredgerLocation} - {data.reclamationLocation}</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="text-sm text-gray-900">{data.employee}</div>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<div className="space-y-2">
|
|
{data.stoppages.map((stoppage, idx) => {
|
|
const isCounted = data.countedStoppages.some(cs => cs.id === stoppage.id);
|
|
return (
|
|
<div key={stoppage.id} className={`text-xs rounded p-2 ${isCounted ? 'bg-red-50 border-l-2 border-red-300' : 'bg-green-50 border-l-2 border-green-300'}`}>
|
|
<div className="flex justify-between items-start mb-1">
|
|
<div className="flex items-center space-x-2">
|
|
<span className="font-medium text-gray-900">{stoppage.reason}</span>
|
|
<span className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${isCounted ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'}`}>
|
|
{isCounted ? 'Counted' : 'Uncounted'}
|
|
</span>
|
|
</div>
|
|
<span className="text-gray-600">{stoppage.total}</span>
|
|
</div>
|
|
<div className="text-gray-600">
|
|
{stoppage.from} - {stoppage.to}
|
|
</div>
|
|
{stoppage.responsible && (
|
|
<div className="text-gray-500 mt-1">
|
|
Responsible: {stoppage.responsible}
|
|
</div>
|
|
)}
|
|
{stoppage.note && (
|
|
<div className="text-gray-500 mt-1 italic">
|
|
{stoppage.note}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="text-sm font-medium text-gray-900">
|
|
Total: {Math.floor(data.totalStoppageTime / 60).toString().padStart(2, '0')}:
|
|
{(data.totalStoppageTime % 60).toString().padStart(2, '0')}
|
|
</div>
|
|
<div className="text-sm font-medium text-red-800">
|
|
Counted: {Math.floor(data.countedStoppageTime / 60).toString().padStart(2, '0')}:
|
|
{(data.countedStoppageTime % 60).toString().padStart(2, '0')}
|
|
</div>
|
|
<div className="text-xs text-gray-500 mt-1">
|
|
{data.countedStoppages.length} counted, {data.uncountedStoppages.length} uncounted
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stoppages Cards - Mobile */}
|
|
<div className="lg:hidden">
|
|
<div className="space-y-4 p-4">
|
|
{stoppagesData.map((data, index) => (
|
|
<div key={`${data.sheetId}-${data.shift}`} className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div>
|
|
<div className="text-sm font-medium text-gray-900">
|
|
{new Date(data.date).toLocaleDateString('en-GB')}
|
|
</div>
|
|
<div className="text-xs text-gray-500">{data.area}</div>
|
|
</div>
|
|
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getShiftBadge(data.shift)}`}>
|
|
{data.shift}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="space-y-2 mb-4">
|
|
<div className="flex justify-between">
|
|
<span className="text-xs font-medium text-gray-500">Employee:</span>
|
|
<span className="text-xs text-gray-900">{data.employee}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-xs font-medium text-gray-500">Location:</span>
|
|
<span className="text-xs text-gray-900">{data.dredgerLocation} - {data.reclamationLocation}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-xs font-medium text-gray-500">Total Time:</span>
|
|
<span className="text-xs font-medium text-gray-900">
|
|
{Math.floor(data.totalStoppageTime / 60).toString().padStart(2, '0')}:
|
|
{(data.totalStoppageTime % 60).toString().padStart(2, '0')}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-xs font-medium text-gray-500">Counted Time:</span>
|
|
<span className="text-xs font-medium text-red-800">
|
|
{Math.floor(data.countedStoppageTime / 60).toString().padStart(2, '0')}:
|
|
{(data.countedStoppageTime % 60).toString().padStart(2, '0')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="text-xs font-medium text-gray-700 mb-2">
|
|
Stoppages ({data.countedStoppages.length} counted, {data.uncountedStoppages.length} uncounted):
|
|
</div>
|
|
{data.stoppages.map((stoppage) => {
|
|
const isCounted = data.countedStoppages.some(cs => cs.id === stoppage.id);
|
|
return (
|
|
<div key={stoppage.id} className={`text-xs rounded p-2 ${isCounted ? 'bg-red-50 border-l-2 border-red-300' : 'bg-green-50 border-l-2 border-green-300'}`}>
|
|
<div className="flex justify-between items-start mb-1">
|
|
<div className="flex items-center space-x-2">
|
|
<span className="font-medium text-gray-900">{stoppage.reason}</span>
|
|
<span className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${isCounted ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'}`}>
|
|
{isCounted ? 'C' : 'U'}
|
|
</span>
|
|
</div>
|
|
<span className="text-gray-600">{stoppage.total}</span>
|
|
</div>
|
|
<div className="text-gray-600">
|
|
{stoppage.from} - {stoppage.to}
|
|
</div>
|
|
{stoppage.responsible && (
|
|
<div className="text-gray-500 mt-1">
|
|
Responsible: {stoppage.responsible}
|
|
</div>
|
|
)}
|
|
{stoppage.note && (
|
|
<div className="text-gray-500 mt-1 italic">
|
|
{stoppage.note}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{stoppagesData.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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<h3 className="mt-2 text-sm font-medium text-gray-900">No stoppages found</h3>
|
|
<p className="mt-1 text-sm text-gray-500">
|
|
{hasActiveFilters()
|
|
? "No stoppages match your current filters. Try adjusting the filters."
|
|
: "No stoppages have been recorded yet."
|
|
}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</DashboardLayout>
|
|
);
|
|
} |