BizzleBot
f718a76153
Features: - Copy Previous Week (entries duplication) - Bulk Approve/Reject (admin workflow) - Overtime tracking (employee + admin views) - DayCard component with auto-save - PDF generation, email notifications - React + Tailwind frontend, Prisma + PostgreSQL backend - Docker deployment (3 containers)
357 lines
8.8 KiB
JavaScript
357 lines
8.8 KiB
JavaScript
const React = require('react');
|
||
const {
|
||
Document,
|
||
Page,
|
||
Text,
|
||
View,
|
||
StyleSheet,
|
||
renderToBuffer,
|
||
} = require('@react-pdf/renderer');
|
||
|
||
const styles = StyleSheet.create({
|
||
page: {
|
||
fontFamily: 'Helvetica',
|
||
fontSize: 10,
|
||
paddingTop: 25,
|
||
paddingBottom: 40,
|
||
paddingHorizontal: 30,
|
||
backgroundColor: '#ffffff',
|
||
},
|
||
headerSection: {
|
||
marginBottom: 20,
|
||
paddingBottom: 10,
|
||
borderBottomWidth: 2,
|
||
borderBottomColor: '#e5e7eb',
|
||
},
|
||
header: {
|
||
fontSize: 20,
|
||
marginBottom: 6,
|
||
textAlign: 'center',
|
||
fontWeight: 'bold',
|
||
color: '#1f2937',
|
||
letterSpacing: 1.0,
|
||
},
|
||
brandLine: {
|
||
width: 60,
|
||
height: 3,
|
||
backgroundColor: '#3b82f6',
|
||
alignSelf: 'center',
|
||
marginBottom: 5,
|
||
},
|
||
weekInfo: {
|
||
fontSize: 14,
|
||
marginBottom: 18,
|
||
textAlign: 'center',
|
||
fontWeight: 'bold',
|
||
color: '#374151',
|
||
backgroundColor: '#f8fafc',
|
||
paddingVertical: 6,
|
||
paddingHorizontal: 16,
|
||
borderRadius: 4,
|
||
},
|
||
employeeInfo: {
|
||
fontSize: 14,
|
||
marginBottom: 12,
|
||
textAlign: 'center',
|
||
fontWeight: 'bold',
|
||
color: '#374151',
|
||
backgroundColor: '#f0f9ff',
|
||
paddingVertical: 6,
|
||
paddingHorizontal: 16,
|
||
borderRadius: 4,
|
||
},
|
||
statusBadge: {
|
||
fontSize: 10,
|
||
textAlign: 'center',
|
||
marginBottom: 12,
|
||
paddingVertical: 4,
|
||
paddingHorizontal: 12,
|
||
borderRadius: 4,
|
||
alignSelf: 'center',
|
||
},
|
||
daySection: {
|
||
marginBottom: 8,
|
||
borderRadius: 4,
|
||
overflow: 'hidden',
|
||
border: '1px solid #e5e7eb',
|
||
},
|
||
dayHeader: {
|
||
backgroundColor: '#3b82f6',
|
||
paddingVertical: 6,
|
||
paddingHorizontal: 10,
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
},
|
||
dayName: {
|
||
fontSize: 11,
|
||
fontWeight: 'bold',
|
||
color: '#ffffff',
|
||
},
|
||
dayDate: {
|
||
fontSize: 9,
|
||
color: '#dbeafe',
|
||
},
|
||
dayTotal: {
|
||
fontSize: 9,
|
||
color: '#dbeafe',
|
||
fontWeight: 'bold',
|
||
},
|
||
entryRow: {
|
||
flexDirection: 'row',
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: '#f3f4f6',
|
||
minHeight: 28,
|
||
},
|
||
entryRowLast: {
|
||
borderBottomWidth: 0,
|
||
},
|
||
entryRowAlternate: {
|
||
backgroundColor: '#f9fafb',
|
||
},
|
||
entryCell: {
|
||
paddingVertical: 6,
|
||
paddingHorizontal: 8,
|
||
fontSize: 9,
|
||
color: '#374151',
|
||
justifyContent: 'center',
|
||
},
|
||
homeownerCell: {
|
||
width: '25%',
|
||
borderRightWidth: 1,
|
||
borderRightColor: '#e5e7eb',
|
||
fontWeight: 'bold',
|
||
color: '#1f2937',
|
||
},
|
||
hoursCell: {
|
||
width: '15%',
|
||
borderRightWidth: 1,
|
||
borderRightColor: '#e5e7eb',
|
||
alignItems: 'center',
|
||
fontWeight: 'bold',
|
||
color: '#059669',
|
||
},
|
||
workDescCell: {
|
||
width: '60%',
|
||
},
|
||
summarySection: {
|
||
marginTop: 18,
|
||
paddingTop: 12,
|
||
borderTopWidth: 2,
|
||
borderTopColor: '#3b82f6',
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
},
|
||
summaryText: {
|
||
fontSize: 12,
|
||
fontWeight: 'bold',
|
||
color: '#1f2937',
|
||
},
|
||
totalHours: {
|
||
fontSize: 16,
|
||
fontWeight: 'bold',
|
||
color: '#059669',
|
||
},
|
||
footer: {
|
||
position: 'absolute',
|
||
fontSize: 8,
|
||
bottom: 25,
|
||
left: 0,
|
||
right: 0,
|
||
textAlign: 'center',
|
||
color: '#9ca3af',
|
||
},
|
||
});
|
||
|
||
const DAY_NAMES = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||
|
||
/**
|
||
* Get the 7 days of the week (Monday → Sunday) from a Monday date string
|
||
*/
|
||
function getWeekDays(mondayStr) {
|
||
const days = [];
|
||
const start = new Date(mondayStr + 'T00:00:00Z');
|
||
for (let i = 0; i < 7; i++) {
|
||
const d = new Date(start);
|
||
d.setUTCDate(d.getUTCDate() + i);
|
||
days.push(d);
|
||
}
|
||
return days;
|
||
}
|
||
|
||
function formatDate(date) {
|
||
const m = date.getUTCMonth() + 1;
|
||
const d = date.getUTCDate();
|
||
const y = date.getUTCFullYear();
|
||
return `${m}/${d}/${y}`;
|
||
}
|
||
|
||
function formatWeekRange(weekDays) {
|
||
if (!weekDays.length) return '';
|
||
const first = weekDays[0];
|
||
const last = weekDays[weekDays.length - 1];
|
||
const opts = { month: 'short', day: 'numeric' };
|
||
const startStr = first.toLocaleDateString('en-US', { ...opts, timeZone: 'UTC' });
|
||
const endStr = last.toLocaleDateString('en-US', { ...opts, year: 'numeric', timeZone: 'UTC' });
|
||
return `${startStr} – ${endStr}`;
|
||
}
|
||
|
||
function getStatusColor(status) {
|
||
switch (status) {
|
||
case 'approved': return { bg: '#dcfce7', text: '#166534' };
|
||
case 'submitted': return { bg: '#dbeafe', text: '#1e40af' };
|
||
case 'rejected': return { bg: '#fef2f2', text: '#991b1b' };
|
||
default: return { bg: '#f3f4f6', text: '#374151' };
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Build the React-PDF document element
|
||
*/
|
||
function buildTimesheetDocument({ userName, weekStart, entries, status }) {
|
||
const weekDays = getWeekDays(weekStart);
|
||
|
||
// Group entries by date
|
||
const entriesByDate = {};
|
||
for (const entry of entries) {
|
||
const dateKey = typeof entry.date === 'string'
|
||
? entry.date
|
||
: entry.date.toISOString().split('T')[0];
|
||
if (!entriesByDate[dateKey]) entriesByDate[dateKey] = [];
|
||
entriesByDate[dateKey].push(entry);
|
||
}
|
||
|
||
// Total hours
|
||
const totalHours = entries.reduce(
|
||
(sum, e) => sum + (parseFloat(e.hoursWorked) || 0),
|
||
0
|
||
);
|
||
|
||
const statusColors = getStatusColor(status);
|
||
|
||
const el = React.createElement;
|
||
|
||
return el(Document, null,
|
||
el(Page, { size: 'A4', style: styles.page },
|
||
// Header
|
||
el(View, { style: styles.headerSection },
|
||
el(View, { style: styles.brandLine }),
|
||
el(Text, { style: styles.header }, 'COASTAL CONTRACTING OF FL')
|
||
),
|
||
|
||
// Week range
|
||
el(View, { style: styles.weekInfo },
|
||
el(Text, null, `Week of: ${formatWeekRange(weekDays)}`)
|
||
),
|
||
|
||
// Employee name
|
||
userName
|
||
? el(View, { style: styles.employeeInfo },
|
||
el(Text, null, `Employee: ${userName}`)
|
||
)
|
||
: null,
|
||
|
||
// Status badge
|
||
status && status !== 'draft'
|
||
? el(View, {
|
||
style: {
|
||
...styles.statusBadge,
|
||
backgroundColor: statusColors.bg,
|
||
color: statusColors.text,
|
||
},
|
||
},
|
||
el(Text, {
|
||
style: { color: statusColors.text },
|
||
}, `Status: ${status.charAt(0).toUpperCase() + status.slice(1)}`)
|
||
)
|
||
: null,
|
||
|
||
// Days
|
||
...weekDays.map((day, dayIndex) => {
|
||
const dayKey = day.toISOString().split('T')[0];
|
||
const dayEntries = entriesByDate[dayKey] || [];
|
||
|
||
if (dayEntries.length === 0) return null;
|
||
|
||
const dayTotal = dayEntries.reduce(
|
||
(sum, e) => sum + (parseFloat(e.hoursWorked) || 0),
|
||
0
|
||
);
|
||
|
||
return el(View, { key: dayIndex, style: styles.daySection },
|
||
// Day header
|
||
el(View, { style: styles.dayHeader },
|
||
el(View, null,
|
||
el(Text, { style: styles.dayName }, DAY_NAMES[day.getUTCDay()]),
|
||
el(Text, { style: styles.dayDate }, formatDate(day))
|
||
),
|
||
el(Text, { style: styles.dayTotal }, `${dayTotal.toFixed(1)} hours`)
|
||
),
|
||
|
||
// Entries
|
||
...dayEntries.map((entry, entryIndex) => {
|
||
const isLast = entryIndex === dayEntries.length - 1;
|
||
const isAlt = entryIndex % 2 === 1;
|
||
const rowStyle = [
|
||
styles.entryRow,
|
||
isLast ? styles.entryRowLast : null,
|
||
isAlt ? styles.entryRowAlternate : null,
|
||
].filter(Boolean);
|
||
|
||
return el(View, { key: entryIndex, style: rowStyle },
|
||
el(View, { style: [styles.entryCell, styles.homeownerCell] },
|
||
el(Text, null, entry.homeownerName || entry.homeowner || '-')
|
||
),
|
||
el(View, { style: [styles.entryCell, styles.hoursCell] },
|
||
el(Text, null, String(entry.hoursWorked || '0'))
|
||
),
|
||
el(View, { style: [styles.entryCell, styles.workDescCell] },
|
||
el(Text, null, entry.workDescription || '-')
|
||
)
|
||
);
|
||
})
|
||
);
|
||
}).filter(Boolean),
|
||
|
||
// Summary
|
||
el(View, { style: styles.summarySection },
|
||
el(Text, { style: styles.summaryText }, 'Weekly Total'),
|
||
el(Text, { style: styles.totalHours }, `${totalHours.toFixed(1)} Hours`)
|
||
),
|
||
|
||
// Footer
|
||
el(Text, { style: styles.footer },
|
||
`Generated on ${new Date().toLocaleDateString()} • Coastal Contracting of FL`
|
||
)
|
||
)
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Generate a timesheet PDF buffer
|
||
* @param {Object} data - { userName, weekStart, entries, status }
|
||
* @returns {Promise<Buffer>}
|
||
*/
|
||
async function generateTimesheetPDF(data) {
|
||
const doc = buildTimesheetDocument(data);
|
||
const buffer = await renderToBuffer(doc);
|
||
return buffer;
|
||
}
|
||
|
||
/**
|
||
* Build a filename for the PDF
|
||
*/
|
||
function buildPdfFilename(userName, weekStart) {
|
||
const safeName = (userName || 'timesheet')
|
||
.replace(/[^a-zA-Z0-9]/g, '_')
|
||
.replace(/_+/g, '_')
|
||
.toLowerCase();
|
||
return `timesheet_${safeName}_${weekStart}.pdf`;
|
||
}
|
||
|
||
module.exports = {
|
||
generateTimesheetPDF,
|
||
buildPdfFilename,
|
||
};
|