Feat | Calendar activity | Legend |Add not hours worked flag

apps/web/app/[locale]/profile/[memberId]/page.tsx

@@ -171,7 +171,6 @@ const Profile = React.memo(function ProfilePage({ params }: { params: { memberId
 					</div>
 				</Container>
 			)}
-
 			<Container fullWidth={fullWidth} className="mb-10 -mt-6">
 				{hook.tab !== 'worked' || activityFilter == 'Tasks' ? (
 					<UserProfileTask profile={profile} tabFiltered={hook} paginateTasks={true} />

apps/web/lib/features/integrations/activity-calendar/index.tsx

@@ -1,11 +1,13 @@
 'use client';
 
 import { useTimeLogs } from '@app/hooks/features/useTimeLogs';
-import { useEffect, useState } from 'react';
+import { Fragment, useEffect, useMemo, useState } from 'react';
 import { CalendarDatum, ResponsiveCalendar } from '@nivo/calendar';
 import Skeleton from 'react-loading-skeleton';
 import moment from 'moment';
 import Separator from '@components/ui/separator';
+import { useTranslations } from 'next-intl';
+import { cn } from '@/lib/utils';
 
 export function ActivityCalendar() {
 	const { timerLogsDailyReport, timerLogsDailyReportLoading } = useTimeLogs();
@@ -123,29 +125,45 @@ function ActivityCalendarSkeleton() {
 }
 
 function ActivityLegend() {
+	const t = useTranslations();
+
+	const data = useMemo(
+		() => [
+			{ color: '#FFFFFF', label: t('common.NOT_HOURS_WORKED') },
+			{
+				color: '#9370DB',
+				label: `0 - 4 ${t('common.HOURS')}`
+			},
+			{
+				color: '#0000FF',
+				label: `4 - 10 ${t('common.HOURS')}`
+			},
+			{
+				color: '#FFA500',
+				label: `10 - 18 ${t('common.HOURS')}`
+			},
+			{
+				color: '#FF4500',
+				label: `18 - 24 ${t('common.HOURS')}`
+			}
+		],
+		[t]
+	);
 	return (
 		<div className="flex w-full flex-wrap items-center gap-3 justify-start p-1 bg-white dark:bg-dark--theme-light rounded-lg shadow shadow-slate-50 dark:shadow-slate-700 space-x-3 px-3 max-w-[100svw] min-w-fit">
-			<h3 className="mb-2 text-lg font-bold">Legend</h3>
-			<Separator className="!w-fit" />
-			<div className="flex items-center" id="legend-purple">
-				<span className="inline-block w-4 h-4 mr-2" style={{ backgroundColor: '#9370DB' }}></span>
-				<span className="text-nowrap">0 - 4 Hours</span>
-			</div>
-			<Separator className="!w-fit" />
-			<div className="flex items-center" id="legend-blue">
-				<span className="inline-block w-4 h-4 mr-2" style={{ backgroundColor: '#0000FF' }}></span>
-				<span className="text-nowrap">4 - 10 Hours</span>
-			</div>
-			<Separator className="!w-fit" />
-			<div className="flex items-center" id="legend-orange">
-				<span className="inline-block w-4 h-4 mr-2" style={{ backgroundColor: '#FFA500' }}></span>
-				<span className="text-nowrap">10 - 18 Hours</span>
-			</div>
-			<Separator className="!w-fit" />
-			<div className="flex items-center" id="legend-red">
-				<span className="inline-block w-4 h-4 mr-2" style={{ backgroundColor: '#FF0000' }}></span>
-				<span className="text-nowrap">18 - 24 Hours</span>
-			</div>
+			<h3 className=" text-lg font-bold">{t('common.LEGEND')}</h3>
+			{data.map((item, index) => (
+				<Fragment key={index}>
+					<Separator className="!w-fit" />
+					<div className="flex items-center" id={`legend-${item.color.slice(1)}`}>
+						<span
+							className={cn('inline-block w-4 h-4 mr-2', item.color == '#FFFFFF' && 'border')}
+							style={{ backgroundColor: item.color }}
+						></span>
+						<span className="text-nowrap">{item.label}</span>
+					</div>
+				</Fragment>
+			))}
 		</div>
 	);
 }

apps/web/locales/ar.json

@@ -296,7 +296,10 @@
 		"GROUP_BY": "تجميع حسب",
 		"DAILY_LIMIT": "الحد اليومي",
 		"WEEKLY_LIMIT": "الحد الأسبوعي",
-		"REPORTS": "التقارير"
+		"REPORTS": "التقارير",
+		"LEGEND": "مفتاح الخريطة",
+		"HOURS": "ساعات",
+		"NOT_HOURS_WORKED": "ساعات غير مُشتغَلة"
 	},
 	"sidebar": {
 		"DASHBOARD": "لوحة التحكم",

apps/web/locales/bg.json

@@ -314,7 +314,10 @@
 		"GROUP_BY": "Групирай по",
 		"DAILY_LIMIT": "Дневен лимит",
 		"WEEKLY_LIMIT": "Седмичен лимит",
-		"REPORTS": "Доклади"
+		"REPORTS": "Доклади",
+		"LEGEND": "Легенда",
+		"HOURS": "Часове",
+		"NOT_HOURS_WORKED": "Неотработени часове"
 	},
 	"hotkeys": {
 		"HELP": "Помощ",

apps/web/locales/de.json

@@ -314,7 +314,10 @@
 		"GROUP_BY": "Gruppieren nach",
 		"DAILY_LIMIT": "Tägliches Limit",
 		"WEEKLY_LIMIT": "Wöchentliches Limit",
-		"REPORTS": "Berichte"
+		"REPORTS": "Berichte",
+		"LEGEND": "Legende",
+		"HOURS": "Stunden",
+		"NOT_HOURS_WORKED": "Nicht gearbeitete Stunden"
 	},
 	"hotkeys": {
 		"HELP": "Hilfe",

apps/web/locales/en.json

@@ -314,7 +314,10 @@
 		"GROUP_BY": "Group by",
 		"DAILY_LIMIT": "Daily limit",
 		"WEEKLY_LIMIT": "Weekly limit",
-		"REPORTS": "Reports"
+		"REPORTS": "Reports",
+		"LEGEND": "Legend",
+		"HOURS": "Hours",
+		"NOT_HOURS_WORKED": "Not hours worked"
 	},
 	"hotkeys": {
 		"HELP": "Help",

apps/web/locales/es.json

@@ -314,7 +314,10 @@
 		"GROUP_BY": "Agrupar por",
 		"DAILY_LIMIT": "Límite diario",
 		"WEEKLY_LIMIT": "Límite semanal",
-		"REPORTS": "Informes"
+		"REPORTS": "Informes",
+		"LEGEND": "Leyenda",
+		"HOURS": "Horas",
+		"NOT_HOURS_WORKED": "Horas no trabajadas"
 	},
 	"hotkeys": {
 		"HELP": "Ayuda",

apps/web/locales/fr.json

@@ -314,7 +314,10 @@
 		"GROUP_BY": "Regrouper par",
 		"DAILY_LIMIT": "Limite quotidienne",
 		"WEEKLY_LIMIT": "Limite hebdomadaire",
-		"REPORTS": "Rapports"
+		"REPORTS": "Rapports",
+		"LEGEND": "Légende",
+		"HOURS": "Heures",
+		"NOT_HOURS_WORKED": "Heures non travaillées"
 	},
 	"hotkeys": {
 		"HELP": "Aide",

apps/web/locales/he.json

@@ -314,7 +314,10 @@
 		"GROUP_BY": "קבץ לפי",
 		"DAILY_LIMIT": "הגבלה יומית",
 		"WEEKLY_LIMIT": "הגבלה שבועית",
-		"REPORTS": "דוחות"
+		"REPORTS": "דוחות",
+		"LEGEND": "מקרא",
+		"HOURS": "שעות",
+		"NOT_HOURS_WORKED": "שעות לא עבודה"
 	},
 	"hotkeys": {
 		"HELP": "עזרה",

apps/web/locales/it.json

@@ -314,7 +314,10 @@
 		"GROUP_BY": "Raggruppa per",
 		"DAILY_LIMIT": "Limite giornaliero",
 		"WEEKLY_LIMIT": "Limite settimanale",
-		"REPORTS": "Report"
+		"REPORTS": "Report",
+		"LEGEND": "Legenda",
+		"HOURS": "Ore",
+		"NOT_HOURS_WORKED": "Ore non lavorate"
 	},
 	"hotkeys": {
 		"HELP": "Aiuto",

apps/web/locales/nl.json

@@ -314,7 +314,10 @@
 		"GROUP_BY": "Groeperen op",
 		"DAILY_LIMIT": "Daglimiet",
 		"WEEKLY_LIMIT": "Weeklimiet",
-		"REPORTS": "Rapporten"
+		"REPORTS": "Rapporten",
+		"LEGEND": "Legenda",
+		"HOURS": "Uren",
+		"NOT_HOURS_WORKED": "Niet-gewerkte uren"
 	},
 	"hotkeys": {
 		"HELP": "Help",

apps/web/locales/pl.json

@@ -314,7 +314,10 @@
 		"GROUP_BY": "Grupuj według",
 		"DAILY_LIMIT": "Dzienne ograniczenie",
 		"WEEKLY_LIMIT": "Tygodniowe ograniczenie",
-		"REPORTS": "Raporty"
+		"REPORTS": "Raporty",
+		"LEGEND": "Legenda",
+		"HOURS": "Godziny",
+		"NOT_HOURS_WORKED": "Nieprzepracowane godziny"
 	},
 	"hotkeys": {
 		"HELP": "Pomoc",

apps/web/locales/pt.json

@@ -315,7 +315,10 @@
 		"GROUP_BY": "Agrupar por",
 		"DAILY_LIMIT": "Limite diário",
 		"WEEKLY_LIMIT": "Limite semanal",
-		"REPORTS": "Relatórios"
+		"REPORTS": "Relatórios",
+		"LEGEND": "Legenda",
+		"HOURS": "Horas",
+		"NOT_HOURS_WORKED": "Horas não trabalhadas"
 	},
 	"hotkeys": {
 		"HELP": "Ajuda",

apps/web/locales/ru.json

@@ -314,7 +314,10 @@
 		"GROUP_BY": "Группировать по",
 		"DAILY_LIMIT": "Дневной лимит",
 		"WEEKLY_LIMIT": "Недельный лимит",
-		"REPORTS": "Отчеты"
+		"REPORTS": "Отчеты",
+		"LEGEND": "Легенда",
+		"HOURS": "Часы",
+		"NOT_HOURS_WORKED": "Не отработанные часы"
 	},
 	"hotkeys": {
 		"HELP": "Помощь",

apps/web/locales/zh.json

@@ -314,7 +314,10 @@
 		"GROUP_BY": "分组依据",
 		"DAILY_LIMIT": "每日限制",
 		"WEEKLY_LIMIT": "每周限制",
-		"REPORTS": "报告"
+		"REPORTS": "报告",
+		"LEGEND": "图例",
+		"HOURS": "小时",
+		"NOT_HOURS_WORKED": "非工作小时"
 	},
 	"hotkeys": {
 		"HELP": "帮助",