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/utils/src/constants/index.ts

@@ -1 +0,0 @@
-export * from './permissions';

libs/utils/src/constants/permissions.ts

@@ -1,40 +0,0 @@
-export const PERMISSIONS = {
-  USERS: {
-    READ_LIST: 'Read List Users',
-    READ_DETAIL: 'Read Detail Users',
-    CREATE: 'Create Users',
-    UPDATE: 'Update Users',
-    DELETE: 'Delete Users',
-    ACTIVATE: 'Activate Users',
-  },
-  ROLES: {
-    READ_LIST: 'Read List Roles',
-    READ_DETAIL: 'Read Detail Roles',
-    CREATE: 'Create Roles',
-    UPDATE: 'Update Roles',
-    DELETE: 'Delete Roles',
-  },
-  PERMISSIONS: {
-    READ_LIST: 'Read List Permissions',
-    READ_DETAIL: 'Read Detail Permissions',
-    CREATE: 'Create Permissions',
-    UPDATE: 'Update Permissions',
-    DELETE: 'Delete Permissions',
-  },
-  GACHA_CLAIMS: {
-    CREATE: 'Create Gacha Claims',
-    READ_DETAIL: 'Read Detail Gacha Claims',
-  },
-  GACHA_ITEMS: {
-    READ_LIST: 'Read List Gacha Items',
-    READ_DETAIL: 'Read Detail Gacha Items',
-    CREATE: 'Create Gacha Items',
-    UPDATE: 'Update Gacha Items',
-    DELETE: 'Delete Gacha Items',
-  },
-  GACHA_ROLLS: {
-    READ_DETAIL: 'Read Detail Gacha Rolls',
-    CREATE: 'Create Gacha Rolls',
-    EXECUTE: 'Execute Gacha Rolls',
-  },
-};

libs/utils/src/cookies/index.ts

@@ -1,36 +0,0 @@
-import Cookies from 'js-cookie';
-
-type TTokenItem = {
-  access_token: string;
-  refresh_token: string;
-};
-
-const TOKEN_KEY = 'token';
-
-type TStoredToken =
-  | {
-      token?: TTokenItem;
-    }
-  | undefined;
-
-export const SessionToken = {
-  set: (val: TStoredToken) => {
-    Cookies.set(TOKEN_KEY, JSON.stringify(val), {
-      secure: true,
-      sameSite: 'Strict',
-      expires: 7,
-    });
-  },
-  get: (): TStoredToken => {
-    const token = Cookies.get(TOKEN_KEY);
-    if (!token) return undefined;
-    try {
-      return JSON.parse(token);
-    } catch {
-      return undefined;
-    }
-  },
-  remove: () => {
-    Cookies.remove(TOKEN_KEY);
-  },
-};

libs/utils/src/hooks/index.ts

@@ -1,6 +1,2 @@
 export * from './use-query-state';
 export * from './use-modal-login';
-export * from './use-session';
-export * from './use-register';
-export * from './use-otp';
-export * from './use-send-otp';

libs/utils/src/hooks/use-auth-store.ts

@@ -1,47 +0,0 @@
-import { create } from 'zustand';
-import { TLoginItem } from '@imphnen-frontend-service/service';
-import { SessionToken } from '../cookies';
-import { SessionUser } from '../local-storage';
-
-export enum ESessionStatus {
-  Authenticated = 'authenticated',
-  Authenticating = 'authenticating',
-  Unauthenticated = 'unauthenticated',
-}
-
-type SessionState = {
-  isLoading: boolean;
-  session?: TLoginItem;
-  status?: ESessionStatus;
-  setLoading: (val: boolean) => void;
-  setSession: (payload: TLoginItem) => void;
-  clearSession: () => void;
-};
-
-export const useAuthStore = create<SessionState>((set) => {
-  const session = SessionToken.get();
-  const user = SessionUser.get();
-  const isAuthenticated = !!session;
-
-  return {
-    isLoading: false,
-    session: isAuthenticated ? { token: session.token, user } : undefined,
-    status: isAuthenticated
-      ? ESessionStatus.Authenticated
-      : ESessionStatus.Unauthenticated,
-    setLoading: (val) => set({ isLoading: val }),
-    setSession: (data) => {
-      SessionToken.set({ token: data.token });
-      SessionUser.set(data.user);
-      set({
-        session: data,
-        status: ESessionStatus.Authenticated,
-      });
-    },
-    clearSession: () => {
-      SessionToken.remove();
-      SessionUser.remove();
-      set({ session: undefined, status: ESessionStatus.Unauthenticated });
-    },
-  };
-});

libs/utils/src/hooks/use-modal-login.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, ReactNode, useContext, useState } from 'react';
 
 interface ModalLoginContextType {

libs/utils/src/hooks/use-otp.ts

@@ -1,10 +0,0 @@
-// OTP verification is not used with GitHub OAuth authentication
-// This hook is kept for backward compatibility but is not used
-export const useOtp = () => {
-  return {
-    otp: () => {
-      console.warn('OTP verification is not used with GitHub OAuth authentication');
-    },
-    isLoading: false,
-  };
-};

libs/utils/src/hooks/use-query-state.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useCallback, useEffect, useState } from 'react';
 
 interface UseQueryStateOptions {

libs/utils/src/hooks/use-register.ts

@@ -1,10 +0,0 @@
-// Registration is handled through GitHub OAuth
-// This hook is kept for backward compatibility but is not used
-export const useRegister = () => {
-  return {
-    register: () => {
-      console.warn('Registration is handled through GitHub OAuth');
-    },
-    isLoading: false,
-  };
-};

libs/utils/src/hooks/use-send-otp.ts

@@ -1,10 +0,0 @@
-// OTP is not used with GitHub OAuth authentication
-// This hook is kept for backward compatibility but is not used
-export const useSendOTP = () => {
-  return {
-    resendOTP: () => {
-      console.warn('OTP is not used with GitHub OAuth authentication');
-    },
-    isLoading: false,
-  };
-};

libs/utils/src/hooks/use-session.ts

@@ -1,20 +0,0 @@
-import { useAuthStore } from '@imphnen-frontend-service/service';
-import { useNavigate } from 'react-router';
-
-export const useSession = () => {
-  const navigate = useNavigate();
-  const { clearSession, session, status } = useAuthStore();
-  const isAuthenticated = status === 'authenticated';
-
-  const signOut = () => {
-    clearSession();
-    localStorage.clear();
-    navigate('/auth/login');
-  };
-
-  return {
-    session,
-    signOut,
-    isAuthenticated,
-  };
-};

libs/utils/src/index.ts

@@ -2,8 +2,4 @@ export * from './react-query';
 export * from './react-router';
 export * from './tailwind-merge';
 export * from './hooks';
-export * from './local-storage';
-export * from './cookies';
-export * from './session';
-export * from './constants';
 export * from './logic';

libs/utils/src/local-storage/index.ts

@@ -1,38 +0,0 @@
-export type TPermissionItem = {
-  id: string;
-  name: string;
-  created_at: string;
-  updated_at: string;
-};
-
-type TRoleItem = {
-  id: string;
-  name: string;
-  created_at: string;
-  updated_at: string;
-  permissions: TPermissionItem[];
-};
-
-type TUserItem = {
-  id: string;
-  avatar: string;
-  birthdate: string;
-  email: string;
-  fullname: string;
-  gender: string;
-  is_active: boolean;
-  phone_number: string;
-  role: TRoleItem;
-  bio?: string;
-  location?: string;
-  skills?: string[];
-};
-
-export const SessionUser = {
-  set: (val?: TUserItem) => localStorage.setItem('users', JSON.stringify(val)),
-  get: (): TUserItem | undefined => {
-    const users = localStorage.getItem('users');
-    return users ? JSON.parse(users) : undefined;
-  },
-  remove: () => localStorage.removeItem('users'),
-};

libs/utils/src/logic/for.tsx

@@ -4,18 +4,6 @@ export interface ForProps<T, U> {
   fallback?: React.ReactNode | null
 }
 
-/**
- * A functional component that renders a list of children components from a given
- * array of data.
- *
- * @param data - The array of data to render
- * @param children - A function that takes the current item and index and returns
- *                   the child component to render
- * @param fallback - An optional fallback component to render when the data is empty
- *
- * @returns An array of rendered child components if the data is not empty, otherwise
- *          the fallback component if it is provided, null otherwise
- */
 export function For<T, U extends React.JSX.Element>({
   data,
   children,

libs/utils/src/logic/show.tsx

@@ -4,16 +4,6 @@ export interface ShowProps {
   fallback?: React.ReactNode | null
 }
 
-/**
- * Conditionally renders the `children` component if `condition` is true. If
- * `condition` is false, renders the `fallback` component instead.
- *
- * If `fallback` is `null`, renders nothing.
- *
- * @param condition - The condition to check
- * @param children - The component to render if `condition` is true
- * @param fallback - The component to render if `condition` is false
- */
 export function Show({ condition, children, fallback = null }: ShowProps) {
   return condition ? children : fallback
 }

libs/utils/src/react-router/file-based-routing.tsx

@@ -50,7 +50,6 @@ export function convertPagesToRoute(
         return 'loader' in result ? result.loader?.(args) : null;
       },
       async guard() {
-        // Permission checking removed - always allow access
         return true;
       },
     });

libs/utils/src/session/guard/index.tsx

@@ -1,11 +0,0 @@
-import { FC, PropsWithChildren, ReactNode } from 'react';
-
-type TProps = PropsWithChildren<{
-  permissions?: Array<string>;
-  fallback?: ReactNode;
-}>;
-
-export const Guard: FC<TProps> = (props): ReactNode => {
-  // Permission checking removed - always allow access
-  return props.children;
-};

libs/utils/src/session/index.ts

@@ -1 +0,0 @@
-export * from './guard';