feat: login example

.env

@@ -0,0 +1 @@
+VITE_API_URL=https://api.imphnen.dev/v1

apps/gacha/src/app/_components/form/modal-form-forgot-password.tsx

@@ -1,11 +1,11 @@
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import {
-  InputForm,
+  InputField,
   Modal,
   Stepper,
 } from '@imphnen-frontend-service/ui/molecules';
-import { useQueryState } from '../../../hooks/use-query-state';
+import { useQueryState } from '@imphnen-frontend-service/utils';
-
+import { Fragment } from 'react/jsx-runtime';
 interface IModalFormForgotPasswordProps {
   isOpen: boolean;
   onClose: () => void;
@@ -62,7 +62,7 @@ interface IStepOneProps {
 
 const StepOne = ({ nextStep, onClose }: IStepOneProps) => (
   <>
-    <InputForm
+    <InputField
       label="Email"
       placeholder="Masukkan Email yang Terdaftar"
       type="email"
@@ -86,9 +86,8 @@ interface IStepTwoProps {
 }
 
 const StepTwo = ({ nextStep, prevStep }: IStepTwoProps) => (
-  <>
+  <Fragment>
-    {/* TODO: Change component using OTP Input */}
+    <InputField
-    <InputForm
       label="Kode OTP"
       placeholder="Masukkan Kode OTP"
       type="text"
@@ -108,7 +107,7 @@ const StepTwo = ({ nextStep, prevStep }: IStepTwoProps) => (
         Reset Password
       </Button>
     </div>
-  </>
+  </Fragment>
 );
 
 interface IStepThreeProps {
@@ -118,14 +117,14 @@ interface IStepThreeProps {
 
 const StepThree = ({ onClose, resetStep }: IStepThreeProps) => (
   <>
-    <InputForm
+    <InputField
       label="Password Baru"
       placeholder="Masukkan Password Baru"
       type="password"
       size="lg"
       className="w-full"
     />
-    <InputForm
+    <InputField
       label="Ulang Password"
       placeholder="Masukkan Ulang Password"
       type="password"

apps/gacha/src/app/_components/form/modal-form-login.tsx

@@ -1,6 +1,8 @@
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
+import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 import { Link } from 'react-router-dom';
+import { useLogin } from '../../_hooks/use-login';
 
 interface IModalFormLogin {
   isOpen: boolean;
@@ -13,6 +15,8 @@ const ModalFormLogin = ({
   onClose,
   onForgotPassword,
 }: IModalFormLogin) => {
+  const { form, onSubmit } = useLogin();
+
   return (
     <Modal
       className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
@@ -25,38 +29,44 @@ const ModalFormLogin = ({
           Login
         </h1>
       </Modal.Header>
-      <Modal.Content className="space-y-4">
+      <Modal.Content>
-        <InputForm
+        <form className="space-y-4" onSubmit={onSubmit}>
-          label="Email"
+          <ControlledInputField
-          placeholder="Masukkan Email"
+            control={form.control}
-          type="email"
+            label="Email"
-          size="lg"
+            placeholder="Masukkan Email"
-          className="w-full"
+            type="email"
-        />
+            name="email"
-        <InputForm
+            size="lg"
-          label="Password"
+            className="w-full"
-          placeholder="Masukkan Password"
+          />
-          type="password"
+          <ControlledInputField
-          size="lg"
+            control={form.control}
-          className="w-full"
+            label="Password"
-        />
+            placeholder="Masukkan Password"
-        <h1 className="text-end text-primary-500 text-xl font-medium">
+            type="password"
-          <Button variant="text" onClick={onForgotPassword}>
+            name="password"
-            Lupa Password?
+            size="lg"
+            className="w-full"
+          />
+          <h1 className="text-end text-primary-500 text-xl font-medium">
+            <Button variant="text" onClick={onForgotPassword}>
+              Lupa Password?
+            </Button>
+          </h1>
+          <Button type="submit" size="md" className="w-full">
+            Login
           </Button>
-        </h1>
+          <div className="flex justify-center gap-2 pt-2.5 font-medium">
-        <Button size="md" className="w-full">
+            <p className="text-neutral-500">Belum punya akun?</p>
-          Login
+            <Link
-        </Button>
+              className="text-primary-500 hover:text-primary-600"
-        <div className="flex justify-center gap-2 pt-2.5 font-medium">
+              to="/register"
-          <p className="text-neutral-500">Belum punya akun?</p>
+            >
-          <Link
+              Daftar
-            className="text-primary-500 hover:text-primary-600"
+            </Link>
-            to="/register"
+          </div>
-          >
+        </form>
-            Daftar
-          </Link>
-        </div>
       </Modal.Content>
     </Modal>
   );

apps/gacha/src/app/_components/form/modal-form-register.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
+import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
-import { useQueryState } from '../../../hooks/use-query-state';
+import { useQueryState } from '@imphnen-frontend-service/utils';
 
 interface IModalFormRegisterProps {
   isOpen: boolean;
@@ -54,28 +54,28 @@ interface IStepOneProps {
 
 const StepOne = ({ nextStep, onClose }: IStepOneProps) => (
   <>
-    <InputForm
+    <InputField
       label="Nama Lengkap"
       placeholder="Masukkan Nama Lengkap"
       type="text"
       size="lg"
       className="w-full"
     />
-    <InputForm
+    <InputField
       label="Email"
       placeholder="Masukkan Email Anda"
       type="email"
       size="lg"
       className="w-full"
     />
-    <InputForm
+    <InputField
       label="Password"
       placeholder="Masukkan Password"
       type="password"
       size="lg"
       className="w-full"
     />
-    <InputForm
+    <InputField
       label="Ulangi Password"
       placeholder="Masukkan Ulang Password"
       type="password"
@@ -95,14 +95,14 @@ interface IStepTwoProps {
 
 const StepTwo = ({ nextStep, prevStep }: IStepTwoProps) => (
   <>
-    <InputForm
+    <InputField
       label="Nomor Telepon"
       placeholder="Masukkan Nomor Telepon Aktif"
       type="text"
       size="lg"
       className="w-full"
     />
-    <InputForm
+    <InputField
       label="Alamat Pengiriman"
       placeholder="Masukkan Alamat Pengiriman"
       type="text"

apps/gacha/src/app/_components/item/gacha-item.tsx

@@ -0,0 +1,29 @@
+import { cn } from '@imphnen-frontend-service/utils';
+import { FC, ReactElement } from 'react';
+
+type TGachaItem = {
+  src: string;
+  label: string;
+  className?: string;
+};
+
+export const GachaItem: FC<TGachaItem> = ({
+  src,
+  label,
+  className,
+}): ReactElement => {
+  return (
+    <div className="snap-center flex-auto justify-center items-center flex flex-col min-w-full overflow-hidden">
+      <div className="max-h-[180px] md:max-h-[270px] md:max-w-[500px] mb-2 md:mb-5 flex flex-1 justify-center items-center">
+        <img
+          src={src}
+          alt="Banner"
+          width={255}
+          height={255}
+          className={cn('h-[150px] md:h-[255px] object-contain', className)}
+        />
+      </div>
+      <p className="font-semibold text-center md:text-p2">{label}</p>
+    </div>
+  );
+};

apps/gacha/src/app/_hooks/use-login.ts

@@ -0,0 +1,26 @@
+import { useForm } from 'react-hook-form';
+import {
+  authLoginSchema,
+  TLoginRequest,
+  usePostLogin,
+} from '@imphnen-frontend-service/service';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+export const useLogin = () => {
+  const postLogin = usePostLogin();
+  const form = useForm<TLoginRequest>({
+    resolver: zodResolver(authLoginSchema),
+    mode: 'all',
+  });
+
+  const onSubmit = form.handleSubmit((data) => {
+    postLogin.mutate(data, {
+      onSuccess: () => console.log('Success Login'),
+    });
+  });
+
+  return {
+    form,
+    onSubmit,
+  };
+};

apps/gacha/src/app/page.tsx

@@ -1,37 +1,10 @@
 import { ArrowDownOutlined } from '@ant-design/icons';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { cn } from '@imphnen-frontend-service/utils';
 import { FC, Fragment, ReactElement, useState } from 'react';
 import ModalFormForgotPassword from './_components/form/modal-form-forgot-password';
 import ModalFormLogin from './_components/form/modal-form-login';
 import ModalFormRegister from './_components/form/modal-form-register';
-
+import { GachaItem } from './_components/item/gacha-item';
-interface GachaItemProps {
-  src: string;
-  label: string;
-  className?: string;
-}
-
-const GachaItem: FC<GachaItemProps> = ({
-  src,
-  label,
-  className,
-}): ReactElement => {
-  return (
-    <div className="snap-center flex-auto justify-center items-center flex flex-col min-w-full overflow-hidden">
-      <div className="max-h-[180px] md:max-h-[270px] md:max-w-[500px] mb-2 md:mb-5 flex flex-1 justify-center items-center">
-        <img
-          src={src}
-          alt="Banner"
-          width={255}
-          height={255}
-          className={cn('h-[150px] md:h-[255px] object-contain', className)}
-        />
-      </div>
-      <p className="font-semibold text-center md:text-p2">{label}</p>
-    </div>
-  );
-};
 
 export const Components: FC = (): ReactElement => {
   const [showModalForgotPassword, setShowModalForgotPassword] = useState(false);

libs/service/src/api/auth/index.ts

@@ -1,4 +1,4 @@
-import { api } from '@imphnen-frontend-service/utils';
+import { api } from '../';
 import {
   TLoginRequest,
   TLoginResponse,

libs/service/src/api/index.ts

@@ -1,3 +1,11 @@
+import axios, { AxiosRequestConfig } from 'axios';
+
 export * from './auth';
 export * from './gacha';
 export * from './users';
+
+const config: AxiosRequestConfig = {
+  baseURL: import.meta.env.VITE_API_URL,
+};
+
+export const api = axios.create(config);

libs/service/src/hooks/auth/index.ts

@@ -6,6 +6,8 @@ import {
   TRegisterRequest,
   TVerifyEmailRequest,
 } from '../../types/auth';
+import { SessionToken, SessionUser } from '@imphnen-frontend-service/utils';
+
 import { TResponseError, TResponseMessage } from '../../types/common';
 
 export const usePostLogin = (): UseMutationResult<
@@ -17,6 +19,11 @@ export const usePostLogin = (): UseMutationResult<
   return useMutation({
     mutationKey: ['post-login'],
     mutationFn: async (payload) => await postLogin(payload),
+    onSuccess: (res) => {
+      SessionUser.set(res.data.user);
+      SessionToken.set(res.data.token);
+      window.location.reload();
+    },
   });
 };
 

libs/service/src/index.ts

@@ -1,3 +1,4 @@
 export * from './api';
 export * from './hooks';
 export * from './types';
+export * from './schemas';

libs/service/src/schemas/auth/index.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod';
+
+export const authLoginSchema = z.object({
+  email: z
+    .string()
+    .min(1, 'Email cannot be empty')
+    .email('Email must be valid'),
+  password: z.string().min(1, 'Password cannot be empty'),
+});

libs/service/src/schemas/index.ts

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

libs/service/src/types/auth/index.ts

@@ -1,3 +1,5 @@
+import { TUserItem } from '../users';
+
 export type TLoginRequest = {
   email: string;
   password: string;
@@ -9,11 +11,7 @@ export type TLoginResponse = {
       access_token: string;
       refresh_token: string;
     };
-    user: {
+    user: TUserItem;
-      fullname: string;
-      email: string;
-      is_active: boolean;
-    };
   };
 };
 

libs/service/src/types/index.ts

@@ -1,3 +1,5 @@
 export * from './auth';
 export * from './gacha';
 export * from './users';
+export * from './roles';
+export * from './permissions';

libs/service/src/types/permissions/index.ts

@@ -0,0 +1,6 @@
+export type TPermissionItem = {
+  id: string;
+  name: string;
+  created_at: string;
+  updated_at: string;
+};

libs/service/src/types/roles/index.ts

@@ -0,0 +1,9 @@
+import { TPermissionItem } from '../permissions';
+
+export type TRoleItem = {
+  id: string;
+  name: string;
+  created_at: string;
+  updated_at: string;
+  permissions: TPermissionItem[];
+};

libs/service/src/types/users/index.ts

@@ -1 +1,19 @@
-export {};
+import { TRoleItem } from '../roles';
+
+export type TUserItem = {
+  id: string;
+  avatar: string;
+  birthdate: string;
+  email: string;
+  fullname: string;
+  gender: string;
+  identity_number: string;
+  is_active: boolean;
+  is_profile_completed: boolean;
+  phone_number: string;
+  referral_code: string;
+  referred_by: string;
+  religion: string;
+  student_type: string;
+  role: TRoleItem;
+};

libs/ui/src/molecules/index.ts

@@ -1,6 +1,6 @@
 export * from './forgot-step';
 export * from './otp-form';
-export * from './input-form';
+export * from './input-field';
 export * from './pagination';
 export * from './modal/modal';
 export * from './stepper';

libs/ui/src/molecules/input-field/index.ts

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

libs/ui/src/molecules/input-field/input-field.spec.tsx

@@ -1,9 +1,9 @@
 import { render, screen } from '@testing-library/react';
-import InputForm from './input-form';
+import { InputField } from './input-field';
 
 describe('InputForm Component', () => {
   it('renders correctly with disabled prop', () => {
-    render(<InputForm label="Test Label" disabled={true} />);
+    render(<InputField label="Test Label" disabled={true} />);
 
     const input = screen.getByLabelText('Test Label');
     expect(input).toBeDisabled();
@@ -11,7 +11,7 @@ describe('InputForm Component', () => {
   });
 
   it('renders correctly without disabled prop', () => {
-    render(<InputForm label="Test Label" disabled={false} />);
+    render(<InputField label="Test Label" disabled={false} />);
 
     const input = screen.getByLabelText('Test Label');
     expect(input).not.toBeDisabled();

libs/ui/src/molecules/input-field/input-field.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { InputForm } from './input-form';
+import { InputField } from './input-field';
 
 const meta = {
   title: 'Molecules/Input Form',
-  component: InputForm,
+  component: InputField,
   parameters: {
     layout: 'centered',
     docs: {
@@ -27,7 +27,7 @@ Cek dan inspect element pada story With HtmlFor untuk melihat hasilnya.
     },
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof InputForm>;
+} satisfies Meta<typeof InputField>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;

libs/ui/src/molecules/input-field/input-field.tsx

@@ -7,10 +7,9 @@ import {
 import { Input } from '../../atoms';
 import { cn } from '@imphnen-frontend-service/utils';
 
-type TInputType = 'text' | 'email' | 'password' | 'file';
+export type TInputType = 'text' | 'email' | 'password' | 'file';
-type TInputSize = 'sm' | 'md' | 'lg';
+export type TInputSize = 'sm' | 'md' | 'lg';
-
+export type TInputFieldProps = Omit<
-type TInputFormProps = Omit<
   DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
   'size' | 'type'
 > & {
@@ -19,7 +18,6 @@ type TInputFormProps = Omit<
   size?: TInputSize;
   error?: string;
   disabled?: boolean;
-
   helperText?: string;
   htmlFor?: string;
 };
@@ -39,7 +37,7 @@ const sizeClasses: Record<TInputSize, { label: string; helperText: string }> = {
   },
 };
 
-export const InputForm: FC<TInputFormProps> = ({
+export const InputField: FC<TInputFieldProps> = ({
   label,
   placeholder,
   type = 'text',
@@ -88,5 +86,3 @@ export const InputForm: FC<TInputFormProps> = ({
     </div>
   );
 };
-
-export default InputForm;

libs/ui/src/molecules/input-form/index.ts

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

libs/ui/src/organisms/controlled-field/controlled-input-field.tsx

@@ -0,0 +1,21 @@
+import {
+  InputField,
+  TInputFieldProps,
+} from '@imphnen-frontend-service/ui/molecules';
+import {
+  FieldValues,
+  useController,
+  UseControllerProps,
+} from 'react-hook-form';
+
+export type TControlledInputFieldProps<T extends FieldValues> =
+  UseControllerProps<T> & TInputFieldProps;
+
+export const ControlledInputField = <T extends FieldValues>(
+  props: TControlledInputFieldProps<T>
+) => {
+  const { field, fieldState } = useController<T>(props);
+  return (
+    <InputField error={fieldState.error?.message} {...{ ...props, ...field }} />
+  );
+};

libs/ui/src/organisms/controlled-field/index.ts

@@ -0,0 +1 @@
+export * from './controlled-input-field';

libs/ui/src/organisms/index.ts

@@ -1,6 +1,7 @@
 export * from './navbar';
-export * from "./modals-gacha";
+export * from './modals-gacha';
-export * from "./auth-banner";
+export * from './auth-banner';
-export * from './backoffice-sidebar'
+export * from './backoffice-sidebar';
-export * from './datatable'
+export * from './datatable';
-export * from './filter'
+export * from './filter';
+export * from './controlled-field';

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

@@ -163,7 +163,7 @@ describe('Navbar', () => {
     }
   });
 
-  it('has correct ARIA role for navigation', () => {
+  it('has correct ARIA role for nav', () => {
     const { container }: RenderResult = render(
       <BrowserRouter>
         <Navbar />
@@ -171,6 +171,6 @@ describe('Navbar', () => {
     );
 
     const header: HTMLElement | null = container.querySelector('header');
-    expect(header).toHaveAttribute('role', 'navigation');
+    expect(header).toHaveAttribute('role', 'nav');
   });
 });

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

@@ -1,16 +1,18 @@
 import { MenuOutlined } from '@ant-design/icons';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { FC, ReactElement, useState } from 'react';
 import { Link } from 'react-router-dom';
+import { Button } from '../../atoms/button';
+import { useSession } from '@imphnen-frontend-service/utils';
 
 export const Navbar: FC = (): ReactElement => {
-  const [isDropdownOpen, setDropdownOpen] = useState(false);
+  const { session, signOut, isAuthenticated } = useSession();
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   return (
     <div className="bg-primary-50 w-full px-[32px] pt-[32px] md:px-[60px] md:pt-[60px] lg:px-[80px] sticky top-0 z-50">
       <header
         className="bg-white shadow-lg rounded-lg min-h-[47px] max-h-[47px] md:min-h-[60px] md:max-h-[60px] lg:min-h-[71px] lg:max-h-[71px] flex justify-between w-full max-w-[1280px] xl:mx-auto"
-        role="navigation"
+        role="nav"
       >
         <div className="flex w-full items-center justify-between p-4 md:px-[32px] md:py-[10px]">
           <div className="flex items-center">
@@ -40,20 +42,27 @@ export const Navbar: FC = (): ReactElement => {
                   <Link to="#">Merch Gacha</Link>
                 </Button>
               </li>
-              <li>
+              {!isAuthenticated ? (
-                <Button
+                <li>
-                  size="md"
+                  <Button>Login</Button>
-                  className="lg:text-[19px] lg:max-h-[44px] text-neutral-50 hover:text-neutral-200 transition-colors"
+                </li>
-                >
+              ) : (
-                  <Link to="/login">Login</Link>
+                <li className="flex gap-x-4">
-                </Button>
+                  <span className="text-lg">{session.user?.fullname}</span>
-              </li>
+                  <div
+                    onClick={signOut}
+                    className="text-lg text-red-500 font-bold"
+                  >
+                    Logout
+                  </div>
+                </li>
+              )}
             </ul>
             <button
               className={`md:hidden duration-200 ${
                 isDropdownOpen ? 'transform rotate-90' : ''
               }`}
-              onClick={() => setDropdownOpen(!isDropdownOpen)}
+              onClick={() => setIsDropdownOpen(!isDropdownOpen)}
             >
               <MenuOutlined style={{ color: '#1a8ce6' }} />
             </button>
@@ -77,14 +86,18 @@ export const Navbar: FC = (): ReactElement => {
                         Merch Gacha
                       </Link>
                     </li>
-                    <li>
+                    {!isAuthenticated ? (
-                      <Link
+                      <li>
-                        to="#"
+                        <Link
-                        className="block text-gray-600 transition-colors px-4 py-2 text-center font-semibold"
+                          to="#"
-                      >
+                          className="block text-gray-600 transition-colors px-4 py-2 text-center font-semibold"
-                        Login
+                        >
-                      </Link>
+                          Login
-                    </li>
+                        </Link>
+                      </li>
+                    ) : (
+                      <li>{session.user?.fullname}</li>
+                    )}
                   </ul>
                 </div>
               )}

libs/utils/src/axios/api.ts

@@ -1,7 +0,0 @@
-import axios, { AxiosRequestConfig } from 'axios';
-
-const config: AxiosRequestConfig = {
-  baseURL: import.meta.env.VITE_API_URL,
-};
-
-export const api = axios.create(config);

libs/utils/src/axios/index.ts

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

libs/utils/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './use-query-state';
+export * from './use-session';

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

@@ -0,0 +1,22 @@
+import { SessionToken, SessionUser } from '../local-storage';
+
+export const useSession = () => {
+  const session = {
+    user: SessionUser.get(),
+    token: SessionToken.get(),
+  };
+
+  const isAuthenticated = !!session.token?.access_token;
+
+  const signOut = () => {
+    SessionUser.remove();
+    SessionToken.remove();
+    window.location.reload();
+  };
+
+  return {
+    isAuthenticated,
+    session,
+    signOut,
+  };
+};

libs/utils/src/index.ts

@@ -1,4 +1,5 @@
 export * from './react-query';
 export * from './react-router';
 export * from './tailwind-merge';
-export * from './axios';
+export * from './hooks';
+export * from './local-storage';

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

@@ -0,0 +1,60 @@
+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;
+  identity_number: string;
+  is_active: boolean;
+  is_profile_completed: boolean;
+  phone_number: string;
+  referral_code: string;
+  referred_by: string;
+  religion: string;
+  student_type: string;
+  role: TRoleItem;
+};
+
+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'),
+};
+
+export const SessionToken = {
+  set: (val: { access_token: string; refresh_token: string }) => {
+    localStorage.setItem('access_token', val.access_token);
+    localStorage.setItem('refresh_token', val.refresh_token);
+  },
+  get: ():
+    | { access_token?: string | null; refresh_token?: string | null }
+    | undefined => {
+    return {
+      access_token: localStorage.getItem('access_token'),
+      refresh_token: localStorage.getItem('refresh_token'),
+    };
+  },
+  remove: () => {
+    localStorage.removeItem('access_token');
+    localStorage.removeItem('refresh_token');
+  },
+};

package.json

@@ -19,14 +19,19 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^5.6.1",
+    "@hookform/resolvers": "^5.0.1",
     "@tanstack/react-query": "^5.67.3",
+    "@tanstack/react-store": "^0.7.0",
     "@tanstack/react-table": "^8.21.2",
     "axios": "^1.8.3",
     "clsx": "^2.1.1",
+    "js-cookie": "^3.0.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.55.0",
     "react-router-dom": "^7.3.0",
-    "tailwind-merge": "^3.0.2"
+    "tailwind-merge": "^3.0.2",
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@babel/core": "^7.14.5",
@@ -48,7 +53,7 @@
     "@storybook/test-runner": "^0.19.0",
     "@storybook/testing-library": "^0.2.2",
     "@swc-node/register": "~1.9.1",
-    "@swc/cli": "~0.3.12",
+    "@swc/cli": "^0.6.0",
     "@swc/core": "~1.5.7",
     "@swc/helpers": "~0.5.11",
     "@tailwindcss/postcss": "^4.0.13",
@@ -56,6 +61,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "18.16.9",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",