chore: upgrade dependencies, restructure shared libs, and fix UI

- Upgrade Nx 22.1.1 → 22.6.3 and all patch/minor dependencies
- Restructure shared libs: move business logic from utils to service
- Consolidate shadcn-ui into ui lib with atomic design pattern
- Fix container centering for landing app (Tailwind v4 compatibility)
- Fix button styling by updating @source directive in globals.css
- Fix SiCss3 → SiCss rename in react-icons 5.6
- Fix duplicate useSession export conflict
- Remove dead code, comments, and unused files

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx

@@ -19,7 +19,8 @@ import {
 import { Button } from '../../atoms';
 import { FC, ReactElement, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { cn, For, useSession } from '@imphnen-frontend-service/utils';
+import { cn, For } from '@imphnen-frontend-service/utils';
+import { useSession } from '@imphnen-frontend-service/service';
 
 type MenuItem = {
   label: string;
@@ -274,20 +275,16 @@ export const BackofficeSidebar: FC<SidebarProps> = ({
 
   return (
     <>
-      {/* Desktop Sidebar - visible on lg+, sticky */}
       <div className="hidden lg:block sticky top-0 h-screen overflow-y-auto shadow">
         {sidebarContent}
       </div>
 
-      {/* Mobile Sidebar - overlay */}
       {isOpen && (
         <div className="lg:hidden fixed inset-0 z-50">
-          {/* Backdrop */}
           <div
             className="fixed inset-0 bg-black/50 transition-opacity"
             onClick={onClose}
           />
-          {/* Sidebar */}
           <div className="fixed inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out">
             {sidebarContent}
           </div>

libs/ui/src/organisms/backoffice-wrapper/backoffice-wrapper.tsx

@@ -45,9 +45,6 @@ export const BackofficeWrapper: FC<TBackofficeWrapperProps> = ({
         </h1>
 
         <div className="flex items-center gap-x-6">
-          {/* <Button type="button" variant="secondary" className="max-h-full p-3">
-            <Icon icon="mdi:bell-outline" className="size-6" />
-          </Button> */}
           <div className="flex items-center gap-x-6">
             <div className="text-neutral-600 font-medium">
               <p className="text-p3">{user?.fullname || 'Full Name'}</p>

libs/ui/src/organisms/datatable/datatable.tsx

@@ -23,7 +23,6 @@ interface DataTableProps<T extends RowData> {
   columns?: ColumnDef<T, unknown>[];
   pageSize?: number;
   className?: string;
-  // server-side pagination props
   manualPagination?: boolean;
   pageCount?: number;
   currentPage?: number;
@@ -47,7 +46,6 @@ export const DataTable = <T extends RowData>({
   });
   const [sorting, setSorting] = React.useState<SortingState>([]);
 
-  // Update pagination state when pageSize prop changes
   React.useEffect(() => {
     setPagination((prev) => ({
       ...prev,
@@ -55,7 +53,6 @@ export const DataTable = <T extends RowData>({
     }));
   }, [pageSize]);
 
-  // Reset pagination when data changes to prevent out-of-bounds errors
   React.useEffect(() => {
     if (data.length > 0) {
       setPagination((prev) => ({
@@ -65,11 +62,9 @@ export const DataTable = <T extends RowData>({
     }
   }, [data.length]);
 
-  // Memoize data and columns to prevent unnecessary re-renders
   const memoizedData = React.useMemo(() => data, [data]);
   const memoizedColumns = React.useMemo(() => columns, [columns]);
 
-  // Memoize table configuration to prevent recreation on every render
   const tableConfig = React.useMemo(() => {
     const config: TableOptions<T> = {
       data: memoizedData,
@@ -84,7 +79,6 @@ export const DataTable = <T extends RowData>({
       getPaginationRowModel: getPaginationRowModel(),
       getSortedRowModel: getSortedRowModel(),
       getFilteredRowModel: getFilteredRowModel(),
-      // server-side pagination config
       manualPagination,
       pageCount: manualPagination ? pageCount : undefined,
     };
@@ -99,11 +93,9 @@ export const DataTable = <T extends RowData>({
     pageCount,
   ]);
 
-  // Prefer external table instance if provided; otherwise create an internal one
   const internalTable = useReactTable(tableConfig);
   const t = table ?? internalTable;
 
-  // Handle empty data state
   const isEmpty = t.getRowModel().rows.length === 0;
 
   return (
@@ -186,7 +178,6 @@ export const DataTable = <T extends RowData>({
         </table>
       </div>
       {manualPagination && onPageChange && pageCount ? (
-        // Server-side pagination controls with numbered pages
         <div className="flex items-center justify-center gap-10">
           <button
             className="disabled:opacity-50 cursor-pointer"
@@ -211,7 +202,6 @@ export const DataTable = <T extends RowData>({
 
           <div className="flex gap-4 items-baseline">
             {pageCount <= 8 ? (
-              // Show all pages if 8 or fewer
               Array.from({ length: pageCount }, (_, index) => (
                 <button
                   key={index}
@@ -226,7 +216,6 @@ export const DataTable = <T extends RowData>({
                 </button>
               ))
             ) : (
-              // Show ellipsis for many pages
               <>
                 <button
                   onClick={() => onPageChange(1)}
@@ -294,7 +283,6 @@ export const DataTable = <T extends RowData>({
           </button>
         </div>
       ) : (
-        // Client-side pagination (default)
         <Pagination table={t} />
       )}
     </div>

libs/ui/src/organisms/navbar/navbar.tsx

@@ -2,7 +2,8 @@ import { MenuOutlined } from '@ant-design/icons';
 import { FC, ReactElement, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Button } from '../../atoms/button';
-import { useModalLogin, useSession } from '@imphnen-frontend-service/utils';
+import { useModalLogin } from '@imphnen-frontend-service/utils';
+import { useSession } from '@imphnen-frontend-service/service';
 
 export const Navbar: FC = (): ReactElement => {
   const { session, signOut, isAuthenticated } = useSession();