apps/web/app/[locale]/reports/weekly-limit/components/weekly-limit-report-export-menu.tsx (1)

21-101: Well-implemented export menu with PDF and future CSV support.

The WeeklyLimitExportMenu component:

1. Uses Headless UI's Menu and Transition for a professional dropdown effect
2. Integrates PDFDownloadLink correctly for PDF generation
3. Handles loading states appropriately
4. Provides clear placeholder for future CSV implementation
5. Uses translations consistently

Consider enhancing this implementation in the future with:

1. A visual indicator (like a spinner) while PDF is generating
2. Progress on the CSV export implementation
3. Additional export formats if needed by users

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

apps/web/app/[locale]/reports/weekly-limit/export-formats/pdf/index.tsx (3)

11-30: Consider consolidating style properties for similar elements.

The style definitions are clear, but there are opportunities to improve maintainability. Styles for shared properties like display: 'flex' and flexDirection: 'row' appear in multiple places.

Consider extracting common style properties into base styles that can be extended:

const styles = StyleSheet.create({
	page: { padding: 20 },
+	flexColumn: { display: 'flex', flexDirection: 'column' },
+	flexRow: { display: 'flex', flexDirection: 'row' },
-	table: { display: 'flex', flexDirection: 'column', width: '100%', fontWeight: '400', fontSize: '10px' },
+	table: { width: '100%', fontWeight: '400', fontSize: '10px' },
-	row: { display: 'flex', flexDirection: 'row' },
	rowHeader: {
		backgroundColor: 'rgba(0, 0, 0, 0.1)',
		height: '10px',
-		display: 'flex',
		alignItems: 'center',
		paddingHorizontal: '4px'
	},
	// rest of the styles...
});

Then apply these base styles where needed:

-<View style={styles.table}>
+<View style={[styles.flexColumn, styles.table]}>

-<View style={styles.row}>
+<View style={styles.flexRow}>

---

46-53: Consider adding metadata to the Document component.

The PDF document lacks metadata properties which are important for document identification and accessibility.

Add metadata to provide more context about the document:

-<Document style={{ width: '100%', height: '40rem' }}>
+<Document 
+  style={{ width: '100%', height: '40rem' }}
+  title={title}
+  author="Ever Teams"
+  creator="Ever Teams Weekly Limit Report"
+  producer="Ever Teams Application"
+>

---

140-159: Add pagination or overflow handling for large data sets.

The table doesn't handle pagination or overflow if there are many employees in a single report, which could lead to content being cut off in the PDF.

Consider adding pagination support or a mechanism to handle overflow:

return (
	<View style={styles.table}>
		{/**
		 * Header
		 */}
		<View key={0} style={[styles.headerRow, styles.row]}>
			{/* header cells */}
		</View>
		{/**
		 * Body
		 */}
+		{data.length === 0 ? (
+			<View style={[styles.row, { justifyContent: 'center', padding: 10 }]}>
+				<Text>No data available</Text>
+			</View>
+		) : (
			{data.map((el, i) => (
				<Row {...el} key={i} />
			))}
+		)}
	</View>
);

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

apps/web/app/[locale]/reports/weekly-limit/export-formats/pdf/index.tsx (6)

56-62: Handle potential edge cases in data filtering and mapping.

The code doesn't handle the possibility of empty data arrays or undefined values within the data.

<View>
	{data
+		?.filter((report) => {
-		?.filter((report) =>
+			if (!report || !report.date) return false;
			return displayMode === 'week'
				? moment(report.date).isSame(moment(report.date).startOf('isoWeek'), 'date')
				: true
+			})
-		)
		?.map((el, idx) => {

---

88-104: Handle potential undefined employees array.

The code doesn't check if el.employees exists before mapping over it, which could lead to runtime errors.

<Table
-	data={el.employees?.map((item) => {
+	data={el.employees ? el.employees.map((item) => {
		const limit =
			item.limit ||
			organizationLimits[displayMode] ||
			DEFAULT_WORK_HOURS_PER_DAY;
		const percentageUsed = (item.duration / limit) * 100;
		const remaining = limit - item.duration;

		return {
			indexValue: item.employee.fullName,
			limit,
			percentageUsed,
			timeSpent: item.duration,
			remaining
		};
-	})}
+	}) : []}
	headers={headers}
/>

---

155-157: Add a check for empty data in the Table component.

The Table component should handle cases where data is empty or undefined.

{/**
 * Body
 */}
-{data.map((el, i) => (
+{data?.length > 0 ? data.map((el, i) => (
	<Row {...el} key={i} />
-))
+)) : (
+	<View style={styles.row}>
+		<Text style={[styles.cell, { width: '100%', textAlign: 'center', padding: 10 }]}>
+			No data available
+		</Text>
+	</View>
+)}

---

46-47: Consider adding more document metadata.

For better accessibility and document management, consider adding metadata to the PDF document.

-<Document style={{ width: '100%', height: '40rem' }}>
+<Document 
+	style={{ width: '100%', height: '40rem' }}
+	title={`${title} - Weekly Limit Report`}
+	author="Ever Teams"
+	creator="Ever Teams"
+>
	<Page size="A4" orientation="landscape" style={styles.page}>

---

123-138: Create a separate Row component for better code organization.

The Row function inside the Table component would be clearer as either a separate component or a memoized function outside the Table component.

+const TableRow = React.memo(({ row }: { row: WeeklyLimitTableDataType }) => (
+	<View style={styles.row}>
+		<Text style={[styles.cell, styles.indexValue]}>{row.indexValue}</Text>
+		<Text style={[styles.cell, styles.timeSpent]}>
+			{formatTimeString(formatIntegerToHour(Number(row.timeSpent) / 3600))}
+		</Text>
+		<Text style={[styles.cell, styles.limit]}>
+			{formatTimeString(formatIntegerToHour(Number(row.limit) / 3600))}
+		</Text>
+		<Text style={[styles.cell, styles.percentageUsed]}>{`${Number(row.percentageUsed).toFixed(2)}%`}</Text>
+		<Text style={[styles.cell, styles.remaining]}>
+			{Number(row.remaining) < 0 
+				? `-${formatTimeString(formatIntegerToHour(Math.abs(Number(row.remaining)) / 3600))}`
+				: formatTimeString(formatIntegerToHour(Number(row.remaining) / 3600))
+			}
+		</Text>
+	</View>
+));

function Table({
	data,
	headers
}: {
	data: WeeklyLimitTableDataType[];
	headers: Record<keyof WeeklyLimitTableDataType, DottedLanguageObjectStringPaths>;
}) {
-	const Row = (row: WeeklyLimitTableDataType) => (
-		<View style={styles.row}>
-			<Text style={[styles.cell, styles.indexValue]}>{row.indexValue}</Text>
-			<Text style={[styles.cell, styles.timeSpent]}>
-				{formatTimeString(formatIntegerToHour(Number(row.timeSpent) / 3600))}
-			</Text>
-			<Text style={[styles.cell, styles.limit]}>
-				{formatTimeString(formatIntegerToHour(Number(row.limit) / 3600))}
-			</Text>
-			<Text style={[styles.cell, styles.percentageUsed]}>{`${Number(row.percentageUsed).toFixed(2)}%`}</Text>
-			<Text style={[styles.cell, styles.remaining]}>
-				{Number(row.percentageUsed) > 100 && '-'}
-				{formatTimeString(formatIntegerToHour(Number(row.remaining) / 3600))}
-			</Text>
-		</View>
-	);

---

132-132: Format percentage values consistently.

Consider standardizing the percentage display with a fixed number of decimal places for better readability.

-<Text style={[styles.cell, styles.percentageUsed]}>{`${Number(row.percentageUsed).toFixed(2)}%`}</Text>
+<Text style={[styles.cell, styles.percentageUsed]}>{`${Math.min(Number(row.percentageUsed), 999.99).toFixed(2)}%`}</Text>

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro