[Feat]: Productivity project table view (#3616)

* feat: add project-based productivity table view

- Create new ProductivityProjectTable component
- Group activities by project with dedicated headers
- Update activity report interfaces
- Implement date-based sorting within project groups
- Add visual progress indicators for time usage

* fix: prevent date repetition in project table and fix type error

- Group activities by both project and date
- Combine activities for the same date
- Show all unique members and applications per date
- Fix type error in duration formatting

* fix: resolve type conversion issues in duration calculations

- Change totalDuration type to string
- Fix string/number type conversions in duration calculations
- Ensure consistent type handling throughout the component

* feat: add detailed activity breakdown in project table

- Add hierarchical structure with project, date, and activity levels
- Show individual member activities with time and percentage
- Add date summaries with total time and combined percentage
- Improve visual hierarchy with subtle background colors

* refactor: improve productivity table component structure

- Split into smaller, reusable components
- Add proper TypeScript interfaces
- Extract data processing logic
- Improve code organization and maintainability
- Add loading and empty states as separate components

* refactor: restructure productivity project table component

- Split into modular components with proper file organization
- Create separate files for types, utils, components, and states
- Improve TypeScript types and interfaces
- Enhance dark mode support and styling
- Add proper component documentation

* refactor: improve conditional fetching in useReportActivity hook

- Replace if/else and ternary operators with switch statements
- Simplify APPS-URLS case to only fetch activity report
- Standardize Promise.all usage for default case
- Improve code consistency across all fetch operations

* fix: progressBar

* feat: improve productivity tables display and grouping

- Add conditional rendering based on groupBy type
- Show ProductivityProjectTable for project grouping
- Show ProductivityTable for date grouping
- Improve skeleton loading UI with full-width progress bars
- Fix group type handling in switch statement

* fix: progressBar

* fix: null check

* fix: date is defined but never used.

* feat: UI productivity Employee Table

* Refactor suggestion

* Refactor suggestion

* Remove debug console logs from production code.

apps/web/app/[locale]/dashboard/app-url/[teamId]/page.tsx

@@ -12,12 +12,14 @@ import { ArrowLeftIcon } from '@radix-ui/react-icons';
 import { useRouter } from 'next/navigation';
 import { Breadcrumb, Container } from '@/lib/components';
 import { DashboardHeader } from '../../team-dashboard/[teamId]/components/dashboard-header';
-import { useReportActivity } from '@/app/hooks/features/useReportActivity';
-import { ProductivityStats } from '../components/ProductivityStats';
-import { ProductivityChart } from '../components/ProductivityChart';
+import { GroupByType, useReportActivity } from '@/app/hooks/features/useReportActivity';
+import { Card } from '@components/ui/card';
 import { ProductivityHeader } from '../components/ProductivityHeader';
+import { ProductivityChart } from '../components/ProductivityChart';
+import { ProductivityStats } from '../components/ProductivityStats';
+import { ProductivityProjectTable } from '../components/productivity-project';
 import { ProductivityTable } from '../components/ProductivityTable';
-import { Card } from '@components/ui/card';
+import { ProductivityEmployeeTable } from '../components/productivity-employee/ProductivityEmployeeTable';
 
 interface ProductivityData {
 	date: string;
@@ -33,6 +35,7 @@ function AppUrls() {
 	const paramsUrl = useParams<{ locale: string }>();
 	const currentLocale = paramsUrl?.locale;
 	const { isTrackingEnabled } = useOrganizationTeams();
+	const [groupByType, setGroupByType] = React.useState<GroupByType>('date');
 
 	const {
 		activityReport,
@@ -43,6 +46,11 @@ function AppUrls() {
 		isManage
 	} = useReportActivity({ types: 'APPS-URLS' });
 
+	const handleGroupTypeChange = (type: GroupByType) => {
+		setGroupByType(type);
+		handleGroupByChange(type);
+	};
+
 	const generateMonthData = (date: Date): ProductivityData[] => {
 		const year = date.getFullYear();
 		const month = date.getMonth();
@@ -102,10 +110,10 @@ function AppUrls() {
 							<DashboardHeader
 								onUpdateDateRange={updateDateRange}
 								onUpdateFilters={updateFilters}
+								onGroupByChange={handleGroupTypeChange}
+								showGroupBy={true}
 								title="Apps & URLs Dashboard"
 								isManage={isManage}
-								showGroupBy={true}
-								onGroupByChange={handleGroupByChange}
 							/>
 							<Card className="bg-white rounded-xl border border-gray-100 dark:border-gray-700 dark:bg-dark--theme-light h-[403px] p-8 py-0 px-0">
 								<div className="flex flex-col gap-6 w-full">
@@ -128,7 +136,16 @@ function AppUrls() {
 			}
 		>
 			<Container fullWidth={fullWidth} className={cn('flex flex-col gap-8 !px-4 py-6 w-full')}>
-				<ProductivityTable data={activityReport} isLoading={loadingActivityReport} />
+				{(() => {
+					switch (groupByType) {
+						case 'project':
+							return <ProductivityProjectTable data={activityReport} isLoading={loadingActivityReport} />;
+						case 'date':
+							return <ProductivityTable data={activityReport} isLoading={loadingActivityReport} />;
+						case 'employee':
+							return <ProductivityEmployeeTable data={activityReport} isLoading={loadingActivityReport} />;
+					}
+				})()}
 			</Container>
 		</MainLayout>
 	);

apps/web/app/[locale]/dashboard/app-url/components/GroupBySelect.tsx

@@ -19,7 +19,7 @@ export function GroupBySelect({ onGroupByChange }: GroupBySelectProps) {
             <SelectContent className="dark:bg-dark--theme-light">
                 <SelectItem value="date">Date</SelectItem>
                 <SelectItem value="project">Project</SelectItem>
-                <SelectItem value="person">Person</SelectItem>
+                <SelectItem value="employee">Person</SelectItem>
                 <SelectItem value="application">Application</SelectItem>
             </SelectContent>
         </Select>

apps/web/app/[locale]/dashboard/app-url/components/ProductivityTable.tsx

@@ -42,7 +42,7 @@ export function ProductivityTable({
                 <TableCell><Skeleton className="w-24 h-4"/></TableCell>
                 <TableCell><Skeleton className="w-16 h-4"/></TableCell>
                 <TableCell><Skeleton className="w-16 h-4"/></TableCell>
-                <TableCell><Skeleton className="w-24 h-4"/></TableCell>
+                <TableCell><Skeleton className="w-full h-4"/></TableCell>
               </TableRow>
             ))}
           </TableBody>
@@ -142,7 +142,7 @@ export function ProductivityTable({
                       <TableCell>{formatDuration(activity.duration.toString())}</TableCell>
                       <TableCell>
                         <div className="flex gap-2 items-center">
-                          <div className="overflow-hidden w-24 h-2 bg-gray-200 rounded-full">
+                          <div className="overflow-hidden w-full h-2 bg-gray-200 rounded-full">
                             <div
                               className="h-full bg-blue-500"
                               style={{ width: `${activity.duration_percentage}%` }}