Feat/ make Personnal settings and Team settings pages responsives

apps/web/components/ui/data-table.tsx

@@ -12,42 +12,26 @@ import {
 	getPaginationRowModel,
 	getSortedRowModel,
 	useReactTable
-} from "@tanstack/react-table"
+} from '@tanstack/react-table';
 
-import {
-	Table,
-	TableHeader,
-	TableRow,
-	TableHead,
-	TableCell,
-	TableBody,
-	TableFooter,
-} from './table';
+import { Table, TableHeader, TableRow, TableHead, TableCell, TableBody, TableFooter } from './table';
 
 interface DataTableProps<TData, TValue> {
-	columns: ColumnDef<TData, TValue>[]
-	data: TData[],
-	footerRows?: React.ReactNode[],
+	columns: ColumnDef<TData, TValue>[];
+	data: TData[];
+	footerRows?: React.ReactNode[];
 	isError?: boolean;
 	noResultsMessage?: {
 		heading: string;
 		content: string;
-	}
+	};
 }
 
-function DataTable<TData, TValue>({
-	columns,
-	data,
-	footerRows,
-}: DataTableProps<TData, TValue>) {
-
-	const [rowSelection, setRowSelection] = React.useState({})
-	const [columnVisibility, setColumnVisibility] =
-		React.useState<VisibilityState>({})
-	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-		[]
-	)
-	const [sorting, setSorting] = React.useState<SortingState>([])
+function DataTable<TData, TValue>({ columns, data, footerRows }: DataTableProps<TData, TValue>) {
+	const [rowSelection, setRowSelection] = React.useState({});
+	const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
+	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+	const [sorting, setSorting] = React.useState<SortingState>([]);
 
 	const table = useReactTable({
 		data,
@@ -56,7 +40,7 @@ function DataTable<TData, TValue>({
 			sorting,
 			columnVisibility,
 			rowSelection,
-			columnFilters,
+			columnFilters
 		},
 		enableRowSelection: true,
 		onRowSelectionChange: setRowSelection,
@@ -68,8 +52,8 @@ function DataTable<TData, TValue>({
 		getPaginationRowModel: getPaginationRowModel(),
 		getSortedRowModel: getSortedRowModel(),
 		getFacetedRowModel: getFacetedRowModel(),
-		getFacetedUniqueValues: getFacetedUniqueValues(),
-	})
+		getFacetedUniqueValues: getFacetedUniqueValues()
+	});
 
 	return (
 		<Table className="border-transparent bg-light--theme-light dark:bg-dark--theme-light mt-8 w-full rounded-2xl">

apps/web/components/ui/table.tsx

@@ -1,115 +1,76 @@
-import * as React from "react"
+import * as React from 'react';
 
 import { clsxm } from '@app/utils';
 
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+	({ className, ...props }, ref) => (
+		<div className="relative w-full overflow-auto">
+			<table ref={ref} className={clsxm('w-full caption-bottom text-sm', className)} {...props} />
+		</div>
+	)
+);
+Table.displayName = 'Table';
 
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={clsxm("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
-))
-Table.displayName = "Table"
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+	({ className, ...props }, ref) => <thead ref={ref} className={clsxm('[&_tr]:border-b', className)} {...props} />
+);
+TableHeader.displayName = 'TableHeader';
 
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={clsxm("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+	({ className, ...props }, ref) => (
+		<tbody ref={ref} className={clsxm('[&_tr:last-child]:border-0', className)} {...props} />
+	)
+);
+TableBody.displayName = 'TableBody';
 
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={clsxm("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-))
-TableBody.displayName = "TableBody"
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+	({ className, ...props }, ref) => (
+		<tfoot ref={ref} className={clsxm('bg-primary font-medium text-primary-foreground', className)} {...props} />
+	)
+);
+TableFooter.displayName = 'TableFooter';
 
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={clsxm("bg-primary font-medium text-primary-foreground", className)}
-    {...props}
-  />
-))
-TableFooter.displayName = "TableFooter"
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+	({ className, ...props }, ref) => (
+		<tr
+			ref={ref}
+			className={clsxm('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)}
+			{...props}
+		/>
+	)
+);
+TableRow.displayName = 'TableRow';
 
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={clsxm(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
-TableRow.displayName = "TableRow"
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+	({ className, ...props }, ref) => (
+		<th
+			ref={ref}
+			className={clsxm(
+				'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+				className
+			)}
+			{...props}
+		/>
+	)
+);
+TableHead.displayName = 'TableHead';
 
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={clsxm(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className
-    )}
-    {...props}
-  />
-))
-TableHead.displayName = "TableHead"
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+	({ className, ...props }, ref) => (
+		<td
+			ref={ref}
+			className={clsxm('p-4 align-middle [&:has([role=checkbox])]:pr-0 !w-full', className)}
+			{...props}
+		/>
+	)
+);
+TableCell.displayName = 'TableCell';
 
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={clsxm("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
-    {...props}
-  />
-))
-TableCell.displayName = "TableCell"
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+	({ className, ...props }, ref) => (
+		<caption ref={ref} className={clsxm('mt-4 text-sm text-muted-foreground', className)} {...props} />
+	)
+);
+TableCaption.displayName = 'TableCaption';
 
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={clsxm("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-TableCaption.displayName = "TableCaption"
-
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

apps/web/lib/components/pagination.tsx

@@ -16,7 +16,10 @@ export function Paginate({ total, itemsPerPage = 10, onPageChange, itemOffset, e
 	const pageCount: number = Math.ceil(total / itemsPerPage);
 
 	return (
-		<div className="flex items-center justify-between pt-4" aria-label="Table navigation">
+		<div
+			className="flex flex-col md:flex-row gap-2 items-center justify-between pt-4"
+			aria-label="Table navigation"
+		>
 			<ReactPaginate
 				breakLabel=". . ."
 				nextLabel={

apps/web/lib/features/task/task-assign-popover.tsx

@@ -57,7 +57,7 @@ export function TaskUnOrAssignPopover({
 						? `${t('common.ASSIGN_TASK_TO')} ${userProfile?.employee.user?.name}`
 						: ''
 				}
-				className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-[70vw] h-[70vh] justify-start"
+				className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-full md:w-[70vw] h-[70vh] justify-start"
 				titleClass="font-normal"
 			>
 				<TaskInput

apps/web/lib/features/task/task-card.tsx

@@ -196,9 +196,9 @@ export function TaskCard(props: Props) {
 			>
 				<div className="flex justify-between mb-4 ml-2">
 					{totalWork}
-					{isTrackingEnabled && isAuthUser && viewType === 'unassign' && task && (
+					{/* {isTrackingEnabled && isAuthUser && viewType === 'unassign' && task && (
 						<TimerButtonCall activeTeam={activeTeam} currentMember={currentMember} task={task} />
-					)}
+					)} */}
 				</div>
 				<div className="flex flex-wrap items-start justify-between pb-4 border-b">
 					<TaskInfo task={task} className="px-4 mb-4 w-80" />{' '}
@@ -246,7 +246,7 @@ function UsersTaskAssigned({ task, className }: { task: Nullable<ITeamTask> } &
 
 	return (
 		<div className={clsxm('flex justify-center items-center', className)}>
-			<div className="flex flex-col justify-center">
+			<div className="flex flex-col justify-center items-center">
 				{members.length > 0 && <span className="mb-1 text-xs text-center">{t('common.ASSIGNED')}</span>}
 				<span className="text-sm font-medium text-center">
 					{members.length > 0

apps/web/lib/features/team-member-cell.tsx

@@ -1,15 +1,14 @@
-import { useTeamMemberCard, useTMCardTaskEdit, useCollaborative } from "@app/hooks";
-import { OT_Member } from "@app/interfaces";
-import { clsxm } from "@app/utils";
-import { InputField } from "lib/components";
-import { TaskTimes } from "./task/task-times";
-import { TaskEstimateInfo } from "./team/user-team-card/task-estimate";
-import { TaskInfo } from "./team/user-team-card/task-info";
-import { UserInfo } from "./team/user-team-card/user-info";
-import { UserTeamCardMenu } from "./team/user-team-card/user-team-card-menu";
-import React from "react";
-import get from "lodash/get";
-
+import { useTeamMemberCard, useTMCardTaskEdit, useCollaborative } from '@app/hooks';
+import { OT_Member } from '@app/interfaces';
+import { clsxm } from '@app/utils';
+import { InputField } from 'lib/components';
+import { TaskTimes } from './task/task-times';
+import { TaskEstimateInfo } from './team/user-team-card/task-estimate';
+import { TaskInfo } from './team/user-team-card/task-info';
+import { UserInfo } from './team/user-team-card/user-info';
+import { UserTeamCardMenu } from './team/user-team-card/user-team-card-menu';
+import React from 'react';
+import get from 'lodash/get';
 
 export function TaskCell({ row }: { row: any }) {
 	const member = row.original as OT_Member;
@@ -21,25 +20,19 @@ export function TaskCell({ row }: { row: any }) {
 		<TaskInfo
 			edition={taskEdition}
 			memberInfo={memberInfo}
-			className="2xl:w-80 3xl:w-[32rem] w-1/5 lg:px-4 px-2"
+			className="2xl:w-80 3xl:w-[32rem] w-full lg:w-1/5 lg:px-4 px-2"
 			publicTeam={publicTeam}
 		/>
 	);
 }
 
-export function UserInfoCell({ cell }: {  cell: any}) {
-	const row  = get(cell, 'row', {});
+export function UserInfoCell({ cell }: { cell: any }) {
+	const row = get(cell, 'row', {});
 	const member = row.original as OT_Member;
 	const publicTeam = get(cell, 'column.columnDef.meta.publicTeam', false);
 	const memberInfo = useTeamMemberCard(member);
 
-	return (
-		<UserInfo
-			memberInfo={memberInfo}
-			className="2xl:w-[20.625rem] w-1/4"
-			publicTeam={publicTeam}
-		/>
-	);
+	return <UserInfo memberInfo={memberInfo} className="2xl:w-[20.625rem] w-full lg:w-1/4" publicTeam={publicTeam} />;
 }
 
 export function WorkedOnTaskCell({ row }: { row: any }) {
@@ -52,7 +45,7 @@ export function WorkedOnTaskCell({ row }: { row: any }) {
 			memberInfo={memberInfo}
 			task={memberInfo?.memberTask}
 			isAuthUser={memberInfo?.isAuthUser}
-			className="2xl:w-32 3xl:w-[8rem] w-1/5  flex flex-col gap-y-[1.125rem] justify-center"
+			className="2xl:w-32 3xl:w-[8rem] w-52 lg:w-1/5  flex flex-col gap-y-[1.125rem] justify-center"
 		/>
 	);
 }
@@ -67,27 +60,23 @@ export function TaskEstimateInfoCell({ row }: { row: any }) {
 			memberInfo={memberInfo}
 			edition={taskEdition}
 			activeAuthTask={true}
-			className="lg:px-3 2xl:w-52 3xl:w-64 w-1/5"
+			className="lg:px-3 2xl:w-52 3xl:w-64 w-52 lg:w-1/5"
 		/>
 	);
 }
 
-export function ActionMenuCell ({ cell }: {  cell: any}) {
-	const row  = get(cell, 'row', {});
+export function ActionMenuCell({ cell }: { cell: any }) {
+	const row = get(cell, 'row', {});
 	const member = row.original as OT_Member;
-	const active  = get(cell, 'column.columnDef.meta.active', false);
+	const active = get(cell, 'column.columnDef.meta.active', false);
 	const memberInfo = useTeamMemberCard(member);
 
-	const { collaborativeSelect, user_selected, onUserSelect } = useCollaborative(
-		memberInfo.memberUser
-	);
+	const { collaborativeSelect, user_selected, onUserSelect } = useCollaborative(memberInfo.memberUser);
 	const taskEdition = useTMCardTaskEdit(memberInfo.memberTask);
 
 	return (
 		<>
-			{(!collaborativeSelect || active) && (
-				<UserTeamCardMenu memberInfo={memberInfo} edition={taskEdition} />
-			)}
+			{(!collaborativeSelect || active) && <UserTeamCardMenu memberInfo={memberInfo} edition={taskEdition} />}
 
 			{collaborativeSelect && !active && (
 				<InputField