apps/web/app/[locale]/time-and-activity/Components/ActivityTable.tsx (1)

187-187: Changed progress bar color from variable to specific hex value.

Replacing bg-primary with bg-[#0088CC] changes the progress bar's color from a theme variable to a specific hex value. This ensures visual consistency but might make future theme updates more difficult.

Consider using a theme variable instead of a hardcoded color value to maintain consistency with the design system and facilitate future theme changes:

-color="bg-[#0088CC]"
+color="bg-primary"

If a different shade is needed specifically for this component, consider adding it to your theme variables.

apps/web/components/ui/export-dialog.tsx (1)

85-87: Code formatting inconsistency.

The indentation of the Button element is inconsistent with the surrounding JSX structure.

Improve code readability by fixing the indentation:

<div className="flex flex-col gap-3 sm:flex-row sm:gap-2 w-full justify-end">
-<Button variant="outline" onClick={onClose} className='bg-light--theme-light dark:bg-dark-high'>
-	Cancel
-</Button>
+  <Button variant="outline" onClick={onClose} className='bg-light--theme-light dark:bg-dark-high'>
+    Cancel
+  </Button>
  <ExportButtons reportData={reportData} exportType={exportType} groupByType={groupByType} />
</div>

apps/web/app/[locale]/dashboard/app-url/components/productivity-employee/Productivity-employeePDF.tsx (5)

16-19: Consider adding a fallback font mechanism.

The external font URL might be unavailable in some scenarios, which could affect the PDF rendering. Consider adding a fallback font or caching the font locally.

Font.register({
	family: 'Helvetica',
	src: 'https://fonts.gstatic.com/s/helveticaneue/v70/1Ptsg8zYS_SKggPNyC0IT0kLW-43aMEzIO6XUTLjad8.ttf'
+	, fallback: true
});

---

118-122: Add more informative error handling.

Currently, when validation fails, the component silently returns null after logging an error. Consider adding a simple error PDF or more descriptive error handling.

// Validate data structure
if (!Array.isArray(data) || !data.length) {
	console.error('Data is not a valid array:', data);
-	return null;
+	return (
+		<Document>
+			<Page size="A4" style={styles.page}>
+				<View style={styles.header}>
+					<Text style={styles.title}>Error generating {title}</Text>
+					<Text style={styles.subtitle}>No valid data was provided to generate the report.</Text>
+				</View>
+			</Page>
+		</Document>
+	);
}

---

148-177: Simplify the nested mapping structure.

The triple-nested mapping is complex and could be hard to maintain. Consider extracting this logic into a separate component or helper function.

- {employeeGroup.dates.map((dateGroup, dateIndex) => (
-   dateGroup.projects.map((project, projectIndex) => (
-     project.activity.map((activity, activityIndex) => (
-       <View
-         key={`${dateIndex}-${projectIndex}-${activityIndex}`}
-         style={styles.tableRow}
-       >
-         <Text style={[styles.tableCell, styles.col1]}>
-           {format(new Date(dateGroup.date), 'dd MMM yyyy')}
-         </Text>
-         <Text style={[styles.tableCell, styles.col2]}>
-           {activity.projectName || 'N/A'}
-         </Text>
-         <Text style={[styles.tableCell, styles.col3]}>
-           {activity.title}
-         </Text>
-         <View style={[styles.projectCell, styles.col4]}>
-           <View style={styles.percentageBar}>
-             <View
-               style={[styles.percentageFill, { width: `${activity.duration}%` }]}
-             />
-           </View>
-           <Text style={styles.percentageText}>
-             {activity.duration}%
-           </Text>
-         </View>
-       </View>
-     ))
-   ))
- ))}
+ {employeeGroup.dates.flatMap((dateGroup, dateIndex) => 
+   dateGroup.projects.flatMap((project, projectIndex) => 
+     project.activity.map((activity, activityIndex) => (
+       <View
+         key={`${dateIndex}-${projectIndex}-${activityIndex}`}
+         style={styles.tableRow}
+       >
+         {/* Rest of the content remains the same */}
+         <Text style={[styles.tableCell, styles.col1]}>
+           {format(new Date(dateGroup.date), 'dd MMM yyyy')}
+         </Text>
+         <Text style={[styles.tableCell, styles.col2]}>
+           {activity.projectName || 'N/A'}
+         </Text>
+         <Text style={[styles.tableCell, styles.col3]}>
+           {activity.title}
+         </Text>
+         <View style={[styles.projectCell, styles.col4]}>
+           <View style={styles.percentageBar}>
+             <View
+               style={[styles.percentageFill, { width: `${activity.duration}%` }]}
+             />
+           </View>
+           <Text style={styles.percentageText}>
+             {activity.duration}%
+           </Text>
+         </View>
+       </View>
+     ))
+   )
+ )}

---

156-157: Add error handling for date formatting.

If dateGroup.date isn't a valid date, the format function will throw an error. Consider adding error handling.

<Text style={[styles.tableCell, styles.col1]}>
-	{format(new Date(dateGroup.date), 'dd MMM yyyy')}
+	{(() => {
+		try {
+			return format(new Date(dateGroup.date), 'dd MMM yyyy');
+		} catch (e) {
+			console.error('Invalid date format:', dateGroup.date);
+			return 'Invalid date';
+		}
+	})()}
</Text>

---

166-167: Validate duration value before using it in percentage calculation.

Currently, there's no validation that activity.duration is a valid percentage number. Consider adding validation to prevent rendering issues.

<View
-	style={[styles.percentageFill, { width: `${activity.duration}%` }]}
+	style={[
+		styles.percentageFill, 
+		{ width: `${typeof activity.duration === 'number' && !isNaN(activity.duration) ? 
+			Math.min(Math.max(activity.duration, 0), 100) : 0}%` }
+	]}
/>

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