chore: update package versions and dependencies across multiple files (#413)

* chore: update package versions and dependencies across multiple files

- Bumped application version to 2.21.3 in package.json.
- Updated dependencies including turbo to version 2.6.1, @next/bundle-analyzer and @next/eslint-plugin-next to version 16.0.3, and @supabase/supabase-js to version 2.81.1.
- Adjusted @types/node, @types/react, and @types/react-dom versions for consistency.
- Refactored package.json files to utilize catalog dependencies for improved management.
- Incremented various other dependencies such as react-i18next to version 16.3.3 and tailwind-merge to version 3.4.0.

* chore: downgrade @next/bundle-analyzer and @next/eslint-plugin-next to version 16.0.2 and update next to version 16.0.2 in pnpm-lock.yaml and pnpm-workspace.yaml

- Updated package versions for consistency across the project.
- Adjusted the overflow property in the PageWithSidebar component for improved layout handling.

* feat: add sorting functionality to DataTable header

- Implemented click handler for sortable headers in the DataTable component, allowing users to toggle sorting between ascending and descending order.
- Enhanced user interaction by updating the header's visual state based on the current sorting direction.

* fix: update layout and structure in UserHomePage and DashboardDemo components

- Added a new div structure within the PageBody of UserHomePage for improved layout.
- Simplified the grid structure in DashboardDemo by adjusting the number of columns for better responsiveness.
- Enhanced the PageWithSidebar component to ensure proper flex behavior and layout consistency.

* refactor: simplify PageBody structure in UserHomePage

- Removed unnecessary div elements within the PageBody of UserHomePage for cleaner layout.
- Enhanced readability and maintainability of the component structure.

packages/ui/src/makerkit/data-table.tsx

@@ -358,6 +358,14 @@ export function DataTable<RecordData extends DataItem>({
                   >
                     {header.isPlaceholder ? null : (
                       <div
+                        onClick={() =>
+                          header.column.getCanSort() &&
+                          header.column.toggleSorting(
+                            header.column.getIsSorted() === 'asc'
+                              ? true
+                              : false,
+                          )
+                        }
                         className={cn(
                           'flex items-center gap-2',
                           header.column.getCanSort()
@@ -380,6 +388,7 @@ export function DataTable<RecordData extends DataItem>({
                                   : 'text-muted-foreground/50',
                               )}
                             />
+
                             <ChevronDown
                               className={cn(
                                 '-mt-1 h-3 w-3',