{formatWithSuffix(new Date(selectedDate))}
diff --git a/apps/web/lib/features/integrations/calendar/setup-time-sheet.tsx b/apps/web/lib/features/integrations/calendar/setup-time-sheet.tsx
new file mode 100644
index 000000000..bbf761212
--- /dev/null
+++ b/apps/web/lib/features/integrations/calendar/setup-time-sheet.tsx
@@ -0,0 +1,16 @@
+"use client"
+
+import React from 'react'
+import { DataTableTimeSheet } from './table-time-sheet'
+
+export function SetupTimeSheet() {
+
+
+ return (
+
+ )
+}
diff --git a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
new file mode 100644
index 000000000..a7316ec29
--- /dev/null
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -0,0 +1,461 @@
+"use client"
+
+import * as React from "react"
+import {
+ ColumnDef,
+ ColumnFiltersState,
+ SortingState,
+ VisibilityState,
+ flexRender,
+ getCoreRowModel,
+ getFilteredRowModel,
+ getPaginationRowModel,
+ getSortedRowModel,
+ useReactTable,
+} from "@tanstack/react-table"
+import { ArrowUpDownIcon, MoreHorizontal } from "lucide-react"
+import { Button } from "@components/ui/button"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "@components/ui/dropdown-menu"
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@components/ui/table"
+import {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectTrigger,
+ SelectValue,
+} from "@components/ui/select"
+import {
+ MdKeyboardDoubleArrowLeft,
+ MdKeyboardDoubleArrowRight,
+ MdKeyboardArrowLeft,
+ MdKeyboardArrowRight
+} from "react-icons/md";
+import { ConfirmStatusChange } from "."
+import { useModal } from "@app/hooks"
+
+
+
+const data: TimeSheet[] = [
+ {
+ id: 1,
+ task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
+ name: "Gauzy Platform SaaS",
+ description: "Members count 11",
+ employee: "Ruslan Konviser",
+ status: "Approved",
+ time: '08:00h'
+ },
+ {
+ id: 2,
+ task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
+ name: "Gauzy Platform SaaS",
+ description: "Members count 11",
+ employee: "Ruslan Konviser",
+ status: "Pending",
+ time: '08:00h'
+ },
+ {
+ id: 3,
+ task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
+ name: "Gauzy Platform SaaS",
+ description: "Members count 11",
+ employee: "Ruslan Konviser",
+ status: "Approved",
+ time: '08:00h'
+ },
+ {
+ id: 4,
+ task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
+ name: "Gauzy Platform SaaS",
+ description: "Members count 11",
+ employee: "Ruslan Konviser",
+ status: "Pending",
+ time: '08:00h'
+ },
+ {
+ id: 5,
+ task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
+ name: "Gauzy Platform SaaS",
+ description: "Members count 11",
+ employee: "Ruslan Konviser",
+ status: "Rejected",
+ time: '06:00h'
+ },
+]
+
+export type TimeSheet = {
+ id: number,
+ task: string,
+ name: string,
+ description: string,
+ employee: string,
+ status: "Approved" | "Pending" | "Rejected",
+ time: string
+}
+
+const statusOptions = [
+ { value: "Approved", label: "Approved" },
+ { value: "Pending", label: "Pending" },
+ { value: "Rejected", label: "Rejected" },
+];
+
+function getStatusColor(status: string) {
+ switch (status) {
+ case 'Rejected':
+ return "text-red-400";
+ case 'Approved':
+ return "text-gray-500";
+ case 'Pending':
+ return "text-orange-400";
+ default:
+ return "";
+ }
+}
+
+
+export const columns: ColumnDef
[] = [
+ {
+ accessorKey: "task",
+ header: "Task",
+ cell: ({ row }) => (
+ {row.getValue("task")}
+ ),
+ },
+ {
+ accessorKey: "name",
+ header: ({ column }) => (
+
+ ),
+ cell: ({ row }) => (
+
+ ),
+ },
+ {
+ accessorKey: "employee",
+ header: ({ column }) => (
+
+ ),
+ cell: ({ row }) => (
+
+ {row.original.employee}
+
+ ),
+ },
+ {
+ accessorKey: "status",
+ header: ({ column }) => (
+
+
+ ),
+ cell: ({ row }) => {
+
+ return
+ }
+ },
+ {
+ accessorKey: "time",
+ header: () => (
+ Time
+ ),
+ cell: ({ row }) => (
+
+ {row.original.time}
+
+ ),
+ },
+ {
+ id: "actions",
+ enableHiding: false,
+ cell: ({ row }) => {
+
+ return (
+
+ );
+ },
+ },
+];
+
+
+
+export function DataTableTimeSheet() {
+ const [sorting, setSorting] = React.useState([])
+ const [columnFilters, setColumnFilters] = React.useState(
+ []
+ )
+ const [columnVisibility, setColumnVisibility] =
+ React.useState({})
+ const [rowSelection, setRowSelection] = React.useState({})
+
+ const table = useReactTable({
+ data,
+ columns,
+ onSortingChange: setSorting,
+ onColumnFiltersChange: setColumnFilters,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ getFilteredRowModel: getFilteredRowModel(),
+ onColumnVisibilityChange: setColumnVisibility,
+ onRowSelectionChange: setRowSelection,
+ state: {
+ sorting,
+ columnFilters,
+ columnVisibility,
+ rowSelection,
+ },
+ })
+
+ return (
+ <>
+
+
+
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => {
+ return (
+
+ {header.isPlaceholder
+ ? null
+ : flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+
+ )
+ })}
+
+ ))}
+
+
+ {table.getRowModel().rows?.length ? (
+ table.getRowModel().rows.map((row) => (
+
+ {row.getVisibleCells().map((cell) => (
+
+ {flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext()
+ )}
+
+ ))}
+
+ ))
+ ) : (
+
+
+ No results.
+
+
+ )}
+
+
+
+
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "}
+ {table.getFilteredRowModel().rows.length} row(s) selected.
+
+
+
+
+
+
+
+
+
+
+ ever
+
+
+
+ {name}
+
+
+ {description}
+
+
+
+
+
Select Filter
+
+
+
+
+
+ setTeamId(team ? team.id : '')}
+ itemId={(team) => (team ? team.id : '')}
+ itemToString={(team) => (team ? team.name : teamId)}
+ triggerClassName="border-slate-100 dark:border-slate-600"
+ />
+
+
+
+ setMembersId(members ? members.id : '')}
+ itemId={(members) => (members ? members.id : membersId)}
+ itemToString={(members) => (members ? members.employee.fullName : '')}
+ triggerClassName="border-slate-100 dark:border-slate-600"
+ />
+
+
+
+ setStatus(value.value ? value.value : status)}
+ itemId={(value) => value.label}
+ itemToString={(value) => (value.label)}
+ triggerClassName="border-slate-100 dark:border-slate-600"
+ />
+
+
+
+ setTaskId(task ? task.id : taskId)}
+ itemId={(task) => (task ? task.id : '')}
+ itemToString={(task) => (task ? task.title : '')}
+ triggerClassName="border-slate-100 dark:border-slate-600"
+ />
+
+
+
+
diff --git a/apps/web/lib/features/task/task-activity.tsx b/apps/web/lib/features/task/task-activity.tsx
index 7579e41d8..9246f9731 100644
--- a/apps/web/lib/features/task/task-activity.tsx
+++ b/apps/web/lib/features/task/task-activity.tsx
@@ -32,7 +32,7 @@ export function TaskActivity({ task }: { task: ITeamTask }) {