fix: template github

Feat/register form

.gitignore

@@ -44,4 +44,10 @@ Thumbs.db
 vite.config.*.timestamp*
 vitest.config.*.timestamp*
 
-storybook-static
+storybook-static
+
+
+.env
+.env.prod
+.env.develop
+.env.staging

apps/backoffice/src/app/accounts/_components/modal-edit-account.tsx

@@ -0,0 +1,162 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
+import { useState } from 'react';
+
+interface IModalEditAccount {
+  isOpen: boolean;
+  onClose: () => void;
+  handleEditAccount?: () => void;
+  currentStep?: number;
+  nextStep: () => void;
+  prevStep: () => void;
+  resetStep: () => void;
+}
+
+const ModalEditAccount = ({
+  isOpen,
+  onClose,
+  currentStep,
+  nextStep,
+  prevStep,
+  resetStep,
+  handleEditAccount,
+}: IModalEditAccount) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={() => {
+        onClose();
+        resetStep();
+      }}
+      disableEscapeKeyDown={true}
+    >
+      {currentStep === 1 && <StepOne nextStep={nextStep} onClose={onClose} />}
+      {currentStep === 2 && (
+        <StepTwo
+          onClose={onClose}
+          handleEditAccount={handleEditAccount}
+          resetStep={resetStep}
+        />
+      )}
+    </Modal>
+  );
+};
+
+interface IStepOneProps {
+  nextStep: () => void;
+  onClose: () => void;
+}
+
+const StepOne = ({ nextStep }: IStepOneProps) => {
+  const [fullName, setFullName] = useState('Ahmad Wiyana');
+  const [email, setEmail] = useState('fullname23@gmail.com');
+  const [phoneNumber, setPhoneNumber] = useState('081904423804');
+  const [address, setAddress] = useState('Jl. Pantai Cibaduyut Indah');
+
+  return (
+    <>
+      <Modal.Header>
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Edit Data Akun
+        </h2>
+      </Modal.Header>
+      <Modal.Content className="flex flex-col gap-8">
+        <div className="flex flex-col gap-4">
+          <InputField
+            label="Nama Lengkap"
+            type="text"
+            placeholder="Masukkan Nama Lengkap"
+            value={fullName}
+            onChange={(e) => setFullName(e.target.value)}
+            size="lg"
+            className="w-full"
+          />
+          <InputField
+            label="Email"
+            type="text"
+            placeholder="Masukkan Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            size="lg"
+            className="w-full"
+          />
+          <InputField
+            label="Nomor Telepon"
+            type="text"
+            placeholder="Masukkan Nomor Telepon"
+            value={phoneNumber}
+            onChange={(e) => setPhoneNumber(e.target.value)}
+            size="lg"
+            className="w-full"
+          />
+          <InputField
+            label="Alamat"
+            type="text"
+            placeholder="Masukkan Alamat"
+            value={address}
+            onChange={(e) => setAddress(e.target.value)}
+            size="lg"
+            className="w-full"
+          />
+        </div>
+
+        <Button
+          variant="primary"
+          size="lg"
+          className="w-full"
+          onClick={nextStep}
+        >
+          Perbarui Data
+        </Button>
+      </Modal.Content>
+    </>
+  );
+};
+
+interface IStepTwoProps {
+  onClose: () => void;
+  handleEditAccount?: () => void;
+  resetStep: () => void;
+}
+
+const StepTwo = ({ onClose, handleEditAccount, resetStep }: IStepTwoProps) => (
+  <>
+    <Modal.Header className="mb-0 text-center items-center">
+      <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+        Update Data
+      </h2>
+      <p className="text-p3 text-neutral-400">
+        Apakah kamu yakin dengan
+        <br /> perubahan yang dilakukan?
+      </p>
+    </Modal.Header>
+    <Modal.Content className="flex gap-4">
+      <Button
+        variant="bordered"
+        size="lg"
+        className="w-full"
+        onClick={() => {
+          onClose();
+          resetStep();
+        }}
+      >
+        Batal
+      </Button>
+      <Button
+        variant="primary"
+        size="lg"
+        className="w-full"
+        onClick={() => {
+          handleEditAccount && handleEditAccount();
+          onClose();
+          resetStep();
+        }}
+      >
+        Update
+      </Button>
+    </Modal.Content>
+  </>
+);
+
+export default ModalEditAccount;

apps/backoffice/src/app/accounts/page.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { FC, ReactElement, useState } from 'react';
+import { FC, Fragment, ReactElement, useState } from 'react';
 import {
   FilterOutlined,
   SearchOutlined,
@@ -17,6 +17,8 @@ import {
   useReactTable,
   RowSelectionState,
 } from '@tanstack/react-table';
+import ModalEditAccount from './_components/modal-edit-account';
+import { useQueryState } from '../../hook/use-query-state';
 
 interface Account {
   id: number;
@@ -35,65 +37,20 @@ const mockData: Account[] = Array.from({ length: 90 }, (_, i) => ({
   address: 'Jl. Pantai Cibaduyut Indah',
 }));
 
-const columns: ColumnDef<Account>[] = [
-  {
-    id: 'select',
-    header: ({ table }) => (
-      <input
-        type="checkbox"
-        className="rounded"
-        checked={table.getIsAllRowsSelected()}
-        onChange={table.getToggleAllRowsSelectedHandler()}
-      />
-    ),
-    cell: ({ row }) => (
-      <input
-        type="checkbox"
-        className="rounded"
-        checked={row.getIsSelected()}
-        onChange={row.getToggleSelectedHandler()}
-      />
-    ),
-  },
-  {
-    header: 'No',
-    accessorKey: 'id',
-  },
-  {
-    header: 'Nama Lengkap',
-    accessorKey: 'name',
-  },
-  {
-    header: 'Email',
-    accessorKey: 'email',
-  },
-  {
-    header: 'Nomor Telp',
-    accessorKey: 'phone',
-  },
-  {
-    header: 'Alamat Pengiriman',
-    accessorKey: 'address',
-  },
-  {
-    header: 'Action',
-    cell: ({ row }) => (
-      <Button
-        variant="primary"
-        size="sm"
-        onClick={(e) => {
-          e.stopPropagation();
-          // handleEdit(row.id);
-        }}
-        className="flex items-center gap-2"
-      >
-        <EditOutlined /> Edit
-      </Button>
-    ),
-  },
-];
-
 export const Components: FC = (): ReactElement => {
+  const [showModalEditAccount, setShowModalEditAccount] = useState(false);
+
+  const {
+    step: currentStep,
+    nextStep,
+    prevStep,
+    resetStep,
+  } = useQueryState('step', {
+    defaultValue: 1,
+    maxValue: 2,
+    minValue: 1,
+  });
+
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
     pageSize: 9,
@@ -102,6 +59,64 @@ export const Components: FC = (): ReactElement => {
   const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
   const [showFilter, setShowFilter] = useState(false);
 
+  const columns: ColumnDef<Account>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      header: 'No',
+      accessorKey: 'id',
+    },
+    {
+      header: 'Nama Lengkap',
+      accessorKey: 'name',
+    },
+    {
+      header: 'Email',
+      accessorKey: 'email',
+    },
+    {
+      header: 'Nomor Telp',
+      accessorKey: 'phone',
+    },
+    {
+      header: 'Alamat Pengiriman',
+      accessorKey: 'address',
+    },
+    {
+      header: 'Action',
+      cell: ({ row }) => (
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            setShowModalEditAccount(true);
+          }}
+          className="flex items-center gap-2"
+        >
+          <EditOutlined /> Edit
+        </Button>
+      ),
+    },
+  ];
+
   const table = useReactTable({
     data: mockData,
     columns,
@@ -119,49 +134,61 @@ export const Components: FC = (): ReactElement => {
   });
 
   return (
-    <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
-      {/* Header */}
-      <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
-        <h1 className="text-p2 font-semibold">Data Akun</h1>
-      </header>
-
-      {/* Account Table Section */}
-      <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
-        {/* Search and Filter */}
-        <div className="flex justify-between items-center gap-8 mb-2">
-          <div className="relative w-full">
-            <Input
-              placeholder="Cari berdasarkan nama lengkap, email"
-              className="pl-12 w-full max-h-full"
-            />
-            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
-              <SearchOutlined />
+    <Fragment>
+      <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
+        {/* Header */}
+        <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
+          <h1 className="text-p2 font-semibold">Data Akun</h1>
+        </header>
+        {/* Account Table Section */}
+        <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
+          {/* Search and Filter */}
+          <div className="flex justify-between items-center gap-8 mb-2">
+            <div className="relative w-full">
+              <Input
+                placeholder="Cari berdasarkan nama lengkap, email"
+                className="pl-12 w-full max-h-full"
+              />
+              <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
+                <SearchOutlined />
+              </div>
+            </div>
+            <div className="relative">
+              <Button
+                variant="primary"
+                size="md"
+                className="flex items-center gap-3"
+                disabled
+                onClick={() => setShowFilter(!showFilter)}
+              >
+                <FilterOutlined />
+                Filters
+              </Button>
+              {showFilter && (
+                <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
+                  <Filter onClose={() => setShowFilter(false)} />
+                </div>
+              )}
             </div>
           </div>
+          {/* Table */}
+          <DataTable data={mockData} columns={columns} table={table} />
+        </section>
+      </main>
 
-          <div className="relative">
-            <Button
-              variant="primary"
-              size="md"
-              className="flex items-center gap-3"
-              disabled
-              onClick={() => setShowFilter(!showFilter)}
-            >
-              <FilterOutlined />
-              Filters
-            </Button>
-            {showFilter && (
-              <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
-                <Filter onClose={() => setShowFilter(false)} />
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Table */}
-        <DataTable data={mockData} columns={columns} table={table} />
-      </section>
-    </main>
+      {/* Modal Edit Account */}
+      <ModalEditAccount
+        currentStep={currentStep}
+        isOpen={showModalEditAccount}
+        onClose={() => setShowModalEditAccount(false)}
+        handleEditAccount={() => {
+          console.log('Account updated');
+        }}
+        nextStep={nextStep}
+        prevStep={prevStep}
+        resetStep={resetStep}
+      />
+    </Fragment>
   );
 };
 

apps/backoffice/src/app/dashboard/_components/modal-add-item.tsx

@@ -0,0 +1,136 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
+
+interface IModalAddItem {
+  isOpen: boolean;
+  onClose: () => void;
+  handleAddItem: () => void;
+  currentStep?: number;
+  nextStep: () => void;
+  prevStep: () => void;
+  resetStep: () => void;
+}
+
+const ModalAddItem = ({
+  isOpen,
+  onClose,
+  currentStep,
+  nextStep,
+  resetStep,
+  handleAddItem,
+}: IModalAddItem) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={() => {
+        onClose();
+        resetStep();
+      }}
+      disableEscapeKeyDown={true}
+    >
+      {currentStep === 1 && <StepOne nextStep={nextStep} onClose={onClose} />}
+      {currentStep === 2 && (
+        <StepTwo
+          onClose={onClose}
+          handleAddItem={handleAddItem}
+          resetStep={resetStep}
+        />
+      )}
+    </Modal>
+  );
+};
+
+interface IStepOneProps {
+  nextStep: () => void;
+  onClose: () => void;
+}
+
+const StepOne = ({ nextStep }: IStepOneProps) => (
+  <>
+    <Modal.Header>
+      <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+        Tambah Item Gacha
+      </h2>
+      <p className="text-p3 text-neutral-400">
+        Lengkapi detail di bawah ini untuk menambahkan item gacha
+      </p>
+    </Modal.Header>
+    <Modal.Content className="flex flex-col gap-8">
+      <div className="flex flex-col gap-4">
+        <InputField
+          label="Nama Hadiah"
+          type="text"
+          placeholder="Masukkan Nama Hadiah"
+          size="lg"
+          className="w-full"
+        />
+        <InputField
+          label="Chance Rate"
+          type="text"
+          placeholder="Masukkan Chance Rate"
+          size="lg"
+          className="w-full"
+        />
+        <InputField
+          label="Foto Barang"
+          type="file"
+          placeholder=".jpg, .jpeg, atau .png"
+          size="lg"
+          className="w-full"
+        />
+      </div>
+
+      <Button variant="primary" size="lg" className="w-full" onClick={nextStep}>
+        Tambahkan Item
+      </Button>
+    </Modal.Content>
+  </>
+);
+
+interface IStepTwoProps {
+  onClose: () => void;
+  handleAddItem?: () => void;
+  resetStep: () => void;
+}
+
+const StepTwo = ({ onClose, handleAddItem, resetStep }: IStepTwoProps) => (
+  <>
+    <Modal.Header className="mb-0 text-center items-center">
+      <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+        Tambah Item
+      </h2>
+      <p className="text-p3 text-neutral-400">
+        Apakah kamu yakin ingin
+        <br /> menambahkan item ini?
+      </p>
+    </Modal.Header>
+    <Modal.Content className="flex gap-4">
+      <Button
+        variant="bordered"
+        size="lg"
+        className="w-full"
+        onClick={() => {
+          onClose();
+          resetStep();
+        }}
+      >
+        Batal
+      </Button>
+      <Button
+        variant="primary"
+        size="lg"
+        className="w-full"
+        onClick={() => {
+          handleAddItem && handleAddItem();
+          onClose();
+          resetStep();
+        }}
+      >
+        Tambahkan
+      </Button>
+    </Modal.Content>
+  </>
+);
+
+export default ModalAddItem;

apps/backoffice/src/app/dashboard/_components/modal-delete-item.tsx

@@ -0,0 +1,62 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
+
+interface IModalDeleteItem {
+  isOpen: boolean;
+  onClose: () => void;
+  handleDeleteItem?: () => void;
+}
+
+const ModalDeleteItem = ({
+  isOpen,
+  onClose,
+  handleDeleteItem,
+}: IModalDeleteItem) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={onClose}
+      closeButtonClassName="hidden"
+    >
+      <Modal.Header className="gap-8">
+        <img
+          src="/chibi-delete.webp"
+          alt="Delete item?"
+          width={148}
+          className="self-center"
+        />
+        <div className="text-center">
+          <h2 className="text-p1 font-semibold text-danger-500 mb-3">
+            Delete Item
+          </h2>
+          <p className="text-p3 text-neutral-400">
+            Apakah kamu yakin untuk menghapus item ini?
+          </p>
+        </div>
+      </Modal.Header>
+      <Modal.Content className="flex gap-4">
+        <Button
+          variant="secondary"
+          size="lg"
+          className="w-full"
+          onClick={onClose}
+        >
+          Batal Hapus
+        </Button>
+        <Button
+          variant="danger"
+          size="lg"
+          className="w-full"
+          onClick={() => {
+            handleDeleteItem && handleDeleteItem();
+          }}
+        >
+          Hapus Item
+        </Button>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default ModalDeleteItem;

apps/backoffice/src/app/dashboard/_components/modal-edit-item.tsx

@@ -0,0 +1,136 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
+
+interface IModalEditItem {
+  isOpen: boolean;
+  onClose: () => void;
+  handleEditItem?: () => void;
+  currentStep?: number;
+  nextStep: () => void;
+  prevStep: () => void;
+  resetStep: () => void;
+}
+
+const ModalEditItem = ({
+  isOpen,
+  onClose,
+  currentStep,
+  nextStep,
+  resetStep,
+  handleEditItem,
+}: IModalEditItem) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={() => {
+        onClose();
+        resetStep();
+      }}
+      disableEscapeKeyDown={true}
+    >
+      {currentStep === 1 && <StepOne nextStep={nextStep} onClose={onClose} />}
+      {currentStep === 2 && (
+        <StepTwo
+          onClose={onClose}
+          handleEditItem={handleEditItem}
+          resetStep={resetStep}
+        />
+      )}
+    </Modal>
+  );
+};
+
+interface IStepOneProps {
+  nextStep: () => void;
+  onClose: () => void;
+}
+
+const StepOne = ({ nextStep }: IStepOneProps) => (
+  <>
+    <Modal.Header>
+      <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+        Edit Item Gacha
+      </h2>
+      <p className="text-p3 text-neutral-400">
+        Silakan mengubah detail dari item yang diperlukan
+      </p>
+    </Modal.Header>
+    <Modal.Content className="flex flex-col gap-8">
+      <div className="flex flex-col gap-4">
+        <InputField
+          label="Nama Hadiah"
+          type="text"
+          placeholder="Masukkan Nama Hadiah"
+          size="lg"
+          className="w-full"
+        />
+        <InputField
+          label="Chance Rate"
+          type="text"
+          placeholder="Masukkan Chance Rate"
+          size="lg"
+          className="w-full"
+        />
+        <InputField
+          label="Foto Barang"
+          type="file"
+          placeholder=".jpg, .jpeg, atau .png"
+          size="lg"
+          className="w-full"
+        />
+      </div>
+
+      <Button variant="primary" size="lg" className="w-full" onClick={nextStep}>
+        Perbarui Item
+      </Button>
+    </Modal.Content>
+  </>
+);
+
+interface IStepTwoProps {
+  onClose: () => void;
+  handleEditItem?: () => void;
+  resetStep: () => void;
+}
+
+const StepTwo = ({ onClose, handleEditItem, resetStep }: IStepTwoProps) => (
+  <>
+    <Modal.Header className="mb-0 text-center items-center">
+      <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+        Update Item
+      </h2>
+      <p className="text-p3 text-neutral-400">
+        Apakah kamu yakin dengan
+        <br /> perubahan yang dilakukan?
+      </p>
+    </Modal.Header>
+    <Modal.Content className="flex gap-4">
+      <Button
+        variant="bordered"
+        size="lg"
+        className="w-full"
+        onClick={() => {
+          onClose();
+          resetStep();
+        }}
+      >
+        Batal
+      </Button>
+      <Button
+        variant="primary"
+        size="lg"
+        className="w-full"
+        onClick={() => {
+          handleEditItem && handleEditItem();
+          onClose();
+          resetStep();
+        }}
+      >
+        Update
+      </Button>
+    </Modal.Content>
+  </>
+);
+
+export default ModalEditItem;

apps/backoffice/src/app/dashboard/page.tsx

@@ -6,139 +6,204 @@ import {
   UserSwitchOutlined,
 } from '@ant-design/icons';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { FC, ReactElement } from 'react';
+import { FC, Fragment, ReactElement, useState } from 'react';
+import ModalAddItem from './_components/modal-add-item';
+import ModalEditItem from './_components/modal-edit-item';
+import ModalDeleteItem from './_components/modal-delete-item';
+import { useQueryState } from '../../hook/use-query-state';
 
 export const Components: FC = (): ReactElement => {
+  const [showModalAddItem, setShowModalAddItem] = useState(false);
+  const [showModalEditItem, setShowModalEditItem] = useState(false);
+  const [showModalDeleteItem, setShowModalDeleteItem] = useState(false);
+
+  const {
+    step: currentStep,
+    nextStep,
+    prevStep,
+    resetStep,
+  } = useQueryState('step', {
+    defaultValue: 1,
+    maxValue: 2,
+    minValue: 1,
+  });
+
   return (
-    <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
-      {/* Dashboard Header */}
-      <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
-        <h1 className="text-p2 font-semibold">Dashboard</h1>
-      </header>
+    <Fragment>
+      <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
+        {/* Dashboard Header */}
+        <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
+          <h1 className="text-p2 font-semibold">Dashboard</h1>
+        </header>
 
-      <div className="flex justify-between gap-[40px] p-8 bg-white rounded-md">
-        <div className="w-full flex flex-col gap-[40px]">
-          {/* Summary Section */}
-          <section>
-            <h2 className="text-p2 font-medium text-primary-500 mb-8">
-              Summary
-            </h2>
-            <div className="grid grid-cols-2 gap-4">
-              {/* Participants */}
-              <div className="bg-white rounded-lg shadow-sm py-4 px-6 flex items-center border border-neutral-100">
-                <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded-md">
-                  <UsergroupAddOutlined className="text-[20px]" />
-                </div>
-                <div className="flex flex-col gap-1">
-                  <h3 className="text-p1 font-semibold">1000</h3>
-                  <p className="text-label1 text-neutral-500">Participants</p>
-                </div>
-              </div>
-
-              {/* Roll and Reroll */}
-              <div className="bg-white rounded-lg shadow-sm py-4 px-6 flex items-center border border-neutral-100">
-                <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded-md">
-                  <ReloadOutlined className="text-[20px]" />
-                </div>
-                <div className="flex flex-col gap-1">
-                  <h3 className="text-p1 font-semibold">1000</h3>
-                  <p className="text-label1 text-neutral-500">
-                    Roll and Reroll
-                  </p>
-                </div>
-              </div>
-
-              {/* Redeem */}
-              <div className="bg-white rounded-lg shadow-sm py-4 px-6 flex items-center border border-neutral-100">
-                <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded-md">
-                  <UserSwitchOutlined className="text-[20px]" />
-                </div>
-                <div className="flex flex-col gap-1">
-                  <h3 className="text-p1 font-semibold">1000</h3>
-                  <p className="text-label1 text-neutral-500">Redeem</p>
-                </div>
-              </div>
-
-              {/* Inactive Users */}
-              <div className="bg-white rounded-lg shadow-sm py-4 px-6 flex items-center border border-neutral-100">
-                <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded-md">
-                  <UsergroupDeleteOutlined className="text-[20px]" />
-                </div>
-                <div className="flex flex-col gap-1">
-                  <h3 className="text-p1 font-semibold">1000</h3>
-                  <p className="text-label1 text-neutral-500">Inactive Users</p>
-                </div>
-              </div>
-            </div>
-          </section>
-
-          {/* Gacha Items Section */}
-          <section className="flex flex-col gap-8">
-            <div className="flex justify-between items-center">
-              <h2 className="text-p2 font-medium text-primary-500">
-                Gacha Items
+        <div className="flex justify-between gap-[40px] p-8 bg-white rounded-md">
+          <div className="w-full flex flex-col gap-[40px]">
+            {/* Summary Section */}
+            <section>
+              <h2 className="text-p2 font-medium text-primary-500 mb-8">
+                Summary
               </h2>
-              <Button variant="primary" size="sm" className="items-end gap-3">
-                <span>Tambah Item</span>
-                <PlusOutlined className="text-[16px]" />
-              </Button>
-            </div>
+              <div className="grid grid-cols-2 gap-4">
+                {/* Participants */}
+                <div className="bg-white rounded-lg shadow-sm py-4 px-6 flex items-center border border-neutral-100">
+                  <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded-md">
+                    <UsergroupAddOutlined className="text-[20px]" />
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <h3 className="text-p1 font-semibold">1000</h3>
+                    <p className="text-label1 text-neutral-500">Participants</p>
+                  </div>
+                </div>
 
-            {/* Gacha Items List */}
-            <div className="flex flex-col gap-4 max-h-140 overflow-auto">
-              {[1, 2, 3, 4, 5, 6].map((item) => (
-                <div
-                  key={item}
-                  className="bg-white max-h-[80px] overflow-clip rounded-lg shadow-sm flex justify-between border border-neutral-100"
+                {/* Roll and Reroll */}
+                <div className="bg-white rounded-lg shadow-sm py-4 px-6 flex items-center border border-neutral-100">
+                  <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded-md">
+                    <ReloadOutlined className="text-[20px]" />
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <h3 className="text-p1 font-semibold">1000</h3>
+                    <p className="text-label1 text-neutral-500">
+                      Roll and Reroll
+                    </p>
+                  </div>
+                </div>
+
+                {/* Redeem */}
+                <div className="bg-white rounded-lg shadow-sm py-4 px-6 flex items-center border border-neutral-100">
+                  <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded-md">
+                    <UserSwitchOutlined className="text-[20px]" />
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <h3 className="text-p1 font-semibold">1000</h3>
+                    <p className="text-label1 text-neutral-500">Redeem</p>
+                  </div>
+                </div>
+
+                {/* Inactive Users */}
+                <div className="bg-white rounded-lg shadow-sm py-4 px-6 flex items-center border border-neutral-100">
+                  <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded-md">
+                    <UsergroupDeleteOutlined className="text-[20px]" />
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <h3 className="text-p1 font-semibold">1000</h3>
+                    <p className="text-label1 text-neutral-500">
+                      Inactive Users
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            {/* Gacha Items Section */}
+            <section className="flex flex-col gap-8">
+              <div className="flex justify-between items-center">
+                <h2 className="text-p2 font-medium text-primary-500">
+                  Gacha Items
+                </h2>
+                <Button
+                  variant="primary"
+                  size="sm"
+                  className="items-end gap-3"
+                  onClick={() => setShowModalAddItem(true)}
                 >
-                  <div className="flex flex-col py-4 px-6 gap-4">
-                    <div>
-                      <h3 className="text-p3 text-primary-500 font-medium">
-                        Lanyard IMPHNEN
-                      </h3>
-                      <div className="flex items-center gap-2 text-label2 text-gray-500 mt-1">
-                        <span>Prize {item}</span>
-                        <span>Chance Rate: (0.1%)</span>
+                  <span>Tambah Item</span>
+                  <PlusOutlined className="text-[16px]" />
+                </Button>
+              </div>
+
+              {/* Gacha Items List */}
+              <div className="flex flex-col gap-4 max-h-140 overflow-auto">
+                {[1, 2, 3, 4, 5, 6].map((item) => (
+                  <div
+                    key={item}
+                    className="bg-white max-h-[80px] overflow-clip rounded-lg shadow-sm flex justify-between border border-neutral-100"
+                  >
+                    <div className="flex flex-col py-4 px-6 gap-4">
+                      <div>
+                        <h3 className="text-p3 text-primary-500 font-medium">
+                          Lanyard IMPHNEN
+                        </h3>
+                        <div className="flex items-center gap-2 text-label2 text-gray-500 mt-1">
+                          <span>Prize {item}</span>
+                          <span>Chance Rate: (0.1%)</span>
+                        </div>
+                      </div>
+                      <div className="flex justify-start gap-2">
+                        <Button
+                          variant="text"
+                          size="sm"
+                          className="text-[10px] text-neutral-500 p-0 font-normal hover:bg-transparent hover:text-primary-500"
+                          onClick={() => setShowModalEditItem(true)}
+                        >
+                          Edit
+                        </Button>
+                        <Button
+                          variant="text"
+                          size="sm"
+                          className="text-[10px] text-red-500 p-0 font-normal hover:bg-transparent hover:text-red-700"
+                          onClick={() => setShowModalDeleteItem(true)}
+                        >
+                          Delete
+                        </Button>
                       </div>
                     </div>
-                    <div className="flex justify-start gap-2">
-                      <Button
-                        variant="text"
-                        size="sm"
-                        className="text-[10px] text-neutral-500 p-0 font-normal hover:bg-transparent hover:text-primary-500"
-                      >
-                        Edit
-                      </Button>
-                      <Button
-                        variant="text"
-                        size="sm"
-                        className="text-[10px] text-red-500 p-0 font-normal hover:bg-transparent hover:text-red-700"
-                      >
-                        Delete
-                      </Button>
-                    </div>
+
+                    {/* Lebih baik gunakan gambar yang sudah di-clip dengan size height: 78px daripada hard-code object-position dan margin */}
+                    <img
+                      src="gacha-clip.webp"
+                      alt="Lanyard IMPHNEN"
+                      className="h-full"
+                    />
                   </div>
+                ))}
+              </div>
+            </section>
+          </div>
 
-                  {/* Lebih baik gunakan gambar yang sudah di-clip dengan size height: 78px daripada hard-code object-position dan margin */}
-                  <img
-                    src="gacha-clip.webp"
-                    alt="Lanyard IMPHNEN"
-                    className="h-full"
-                  />
-                </div>
-              ))}
-            </div>
-          </section>
+          {/* Right-side illustration */}
+          <img
+            src="gacha.webp"
+            alt=""
+            className="rounded-lg hidden xl:block xl:min-w-[436px] h-auto object-cover"
+          />
         </div>
+      </main>
 
-        {/* Right-side illustration */}
-        <img
-          src="gacha.webp"
-          alt=""
-          className="rounded-lg hidden xl:block xl:min-w-[436px] h-auto object-cover"
-        />
-      </div>
-    </main>
+      {/* Modal Add Item */}
+      <ModalAddItem
+        currentStep={currentStep}
+        isOpen={showModalAddItem}
+        onClose={() => setShowModalAddItem(false)}
+        handleAddItem={() => {
+          console.log('Item added');
+        }}
+        nextStep={nextStep}
+        prevStep={prevStep}
+        resetStep={resetStep}
+      />
+
+      {/* Modal Edit Item */}
+      <ModalEditItem
+        currentStep={currentStep}
+        isOpen={showModalEditItem}
+        onClose={() => setShowModalEditItem(false)}
+        handleEditItem={() => {
+          console.log('Item edited');
+        }}
+        nextStep={nextStep}
+        prevStep={prevStep}
+        resetStep={resetStep}
+      />
+
+      {/* Modal Delete Item */}
+      <ModalDeleteItem
+        isOpen={showModalDeleteItem}
+        onClose={() => setShowModalDeleteItem(false)}
+        handleDeleteItem={() => {
+          console.log('Item deleted');
+        }}
+      />
+    </Fragment>
   );
 };
 

apps/backoffice/src/app/page.tsx

@@ -1,7 +1,7 @@
 import { FC, ReactElement } from 'react';
 import { useNavigate } from 'react-router';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { InputForm } from '@imphnen-frontend-service/ui/molecules';
+import { InputField } from '@imphnen-frontend-service/ui/molecules';
 
 export const Components: FC = (): ReactElement => {
   const navigate = useNavigate();
@@ -13,14 +13,14 @@ export const Components: FC = (): ReactElement => {
         <h1 className="text-primary-500 text-p1 font-semibold">
           Welcome to IMPHNEN Backoffice
         </h1>
-        <InputForm
+        <InputField
           label="Email"
           placeholder="Masukkan Email"
           type="email"
           size="lg"
           className="w-full"
         />
-        <InputForm
+        <InputField
           label="Password"
           placeholder="Masukkan password"
           type="password"

apps/backoffice/src/app/prizes/_components/modal-process-item.tsx

@@ -0,0 +1,84 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
+
+interface IModalProcessDelivery {
+  isOpen: boolean;
+  onClose: () => void;
+  handleProcessDelivery?: () => void;
+}
+
+const ModalProcessDelivery = ({
+  isOpen,
+  onClose,
+  handleProcessDelivery,
+}: IModalProcessDelivery) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={onClose}
+      disableEscapeKeyDown={true}
+    >
+      <Modal.Header>
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Delivery Process
+        </h2>
+        <p className="text-p3 text-neutral-400">
+          Lakukan pengiriman hadiah gacha untuk pengguna di bawah ini, jika
+          sudah ubah status menjadi “Delivered”.
+        </p>
+      </Modal.Header>
+      <Modal.Content className="flex flex-col gap-8">
+        <div className="flex flex-col gap-4">
+          <InputField
+            label="Nama Lengkap"
+            type="text"
+            placeholder="Masukkan Nama Lengkap"
+            value="Ahmad Wiyana"
+            size="lg"
+            className="w-full"
+            readOnly
+          />
+          <InputField
+            label="Item yang didapatkan"
+            type="text"
+            placeholder="Masukkan Nama Item"
+            value="Lanyard + ID Card"
+            size="lg"
+            className="w-full"
+            readOnly
+          />
+          <InputField
+            label="Alamat Pengiriman"
+            type="text"
+            placeholder="Masukkan Alamat Pengiriman"
+            value="Jl. Pantai Cibaduyut Indah"
+            size="lg"
+            className="w-full"
+            readOnly
+          />
+          <InputField
+            label="Status"
+            type="text"
+            placeholder="Isi Status Pengiriman"
+            value="Lanyard + ID Card"
+            size="lg"
+            className="w-full"
+            readOnly
+          />
+        </div>
+
+        <Button
+          variant="primary"
+          size="lg"
+          className="w-full"
+          onClick={() => handleProcessDelivery && handleProcessDelivery()}
+        >
+          Proses Pengiriman
+        </Button>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default ModalProcessDelivery;

apps/backoffice/src/app/prizes/page.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { FC, ReactElement, useState } from 'react';
+import { FC, Fragment, ReactElement, useState } from 'react';
 import {
   FilterOutlined,
   SearchOutlined,
@@ -17,13 +17,15 @@ import {
   useReactTable,
   RowSelectionState,
 } from '@tanstack/react-table';
+import ModalProcessDelivery from './_components/modal-process-item';
 
-type Status = 'valid' | 'invalid' | 'unchecked';
+type OrderValid = 'valid' | 'invalid' | 'unchecked';
+type Status = 'undelivered' | 'delivered';
 
 interface Prize {
   id: number;
   name: string;
-  orderValid: Status;
+  orderValid: OrderValid;
   items: string;
   address: string;
   status: Status;
@@ -46,119 +48,16 @@ const mockData: Prize[] = Array.from({ length: 90 }, (_, i) => ({
     ? 'invalid'
     : i % 5 === 0
     ? 'unchecked'
-    : 'valid') as Status,
+    : 'valid') as OrderValid,
   items: items[i % items.length],
   address: 'Jl. Pantai Cibaduyut Indah',
-  status: (i % 3 === 0
-    ? 'unchecked'
-    : i % 5 === 0
-    ? 'invalid'
-    : 'valid') as Status,
+  status: (i % 3 === 0 ? 'undelivered' : 'delivered') as Status,
 }));
 
-const columns: ColumnDef<Prize>[] = [
-  {
-    id: 'select',
-    header: ({ table }) => (
-      <input
-        type="checkbox"
-        className="rounded"
-        checked={table.getIsAllRowsSelected()}
-        onChange={table.getToggleAllRowsSelectedHandler()}
-      />
-    ),
-    cell: ({ row }) => (
-      <input
-        type="checkbox"
-        className="rounded"
-        checked={row.getIsSelected()}
-        onChange={row.getToggleSelectedHandler()}
-      />
-    ),
-  },
-  {
-    header: 'No',
-    accessorKey: 'id',
-  },
-  {
-    header: 'Nama Lengkap',
-    accessorKey: 'name',
-  },
-  {
-    header: 'Order Valid?',
-    accessorKey: 'orderValid',
-    cell: ({ row }) => {
-      const status = row.original.orderValid;
-      const statusColors: Record<Status, string> = {
-        valid: 'bg-success-200 text-success-500',
-        invalid: 'bg-danger-200 text-danger-500',
-        unchecked: 'bg-warning-200 text-warning-900',
-      };
-      const statusText: Record<Status, string> = {
-        valid: 'Valid',
-        invalid: 'Invalid',
-        unchecked: 'Unchecked',
-      };
-      return (
-        <div
-          className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
-        >
-          {statusText[status]}
-        </div>
-      );
-    },
-  },
-  {
-    header: 'Items',
-    accessorKey: 'items',
-  },
-  {
-    header: 'Alamat Pengiriman',
-    accessorKey: 'address',
-  },
-  {
-    header: 'Status',
-    accessorKey: 'status',
-    cell: ({ row }) => {
-      const status = row.original.status;
-      const statusColors: Record<Status, string> = {
-        valid: 'bg-success-200 text-success-500',
-        invalid: 'bg-danger-200 text-danger-500',
-        unchecked: 'bg-warning-200 text-warning-900',
-      };
-      const statusText: Record<Status, string> = {
-        valid: 'Valid',
-        invalid: 'Invalid',
-        unchecked: 'Unchecked',
-      };
-      return (
-        <div
-          className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
-        >
-          {statusText[status]}
-        </div>
-      );
-    },
-  },
-  {
-    header: 'Action',
-    cell: ({ row }) => (
-      <Button
-        variant="primary"
-        size="sm"
-        onClick={(e) => {
-          e.stopPropagation();
-          // handleUpdate(row.id);
-        }}
-        className="flex items-center gap-2 w-full"
-      >
-        <AuditOutlined className="text-[16px]" /> Process
-      </Button>
-    ),
-  },
-];
-
 export const Components: FC = (): ReactElement => {
+  const [showModalProcessDelivery, setShowModalProcessDelivery] =
+    useState(false);
+
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
     pageSize: 9,
@@ -167,6 +66,111 @@ export const Components: FC = (): ReactElement => {
   const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
   const [showFilter, setShowFilter] = useState(false);
 
+  const deliveryOptions = [
+    { id: 'option1', value: 'undelivered', label: 'Undelivered' },
+    { id: 'option1', value: 'delivered', label: 'Delivered' },
+  ];
+
+  const columns: ColumnDef<Prize>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      header: 'No',
+      accessorKey: 'id',
+    },
+    {
+      header: 'Nama Lengkap',
+      accessorKey: 'name',
+    },
+    {
+      header: 'Order Valid?',
+      accessorKey: 'orderValid',
+      cell: ({ row }) => {
+        const status = row.original.orderValid;
+        const statusColors: Record<OrderValid, string> = {
+          valid: 'bg-success-200 text-success-500',
+          invalid: 'bg-danger-200 text-danger-500',
+          unchecked: 'bg-warning-200 text-warning-900',
+        };
+        const statusText: Record<OrderValid, string> = {
+          valid: 'Valid',
+          invalid: 'Invalid',
+          unchecked: 'Unchecked',
+        };
+        return (
+          <div
+            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
+          >
+            {statusText[status]}
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Items',
+      accessorKey: 'items',
+    },
+    {
+      header: 'Alamat Pengiriman',
+      accessorKey: 'address',
+    },
+    {
+      header: 'Status',
+      accessorKey: 'status',
+      cell: ({ row }) => {
+        const status = row.original.status;
+        const statusColors: Record<Status, string> = {
+          delivered: 'bg-success-200 text-success-500',
+          undelivered: 'bg-danger-200 text-danger-500',
+        };
+        const statusText: Record<Status, string> = {
+          delivered: 'Delivered',
+          undelivered: 'Undelivered',
+        };
+        return (
+          <div
+            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
+          >
+            {statusText[status]}
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Action',
+      cell: ({ row }) => (
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            setShowModalProcessDelivery(true);
+          }}
+          className="flex items-center gap-2 w-full"
+        >
+          <AuditOutlined className="text-[16px]" /> Process
+        </Button>
+      ),
+    },
+  ];
+
   const table = useReactTable({
     data: mockData,
     columns,
@@ -184,48 +188,63 @@ export const Components: FC = (): ReactElement => {
   });
 
   return (
-    <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
-      {/* Header */}
-      <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
-        <h1 className="text-p2 font-semibold">Data Pengiriman Hadiah</h1>
-      </header>
-
-      {/* Account Table Section */}
-      <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
-        {/* Search and Filter */}
-        <div className="flex justify-between items-center gap-8 mb-2">
-          <div className="relative w-full">
-            <Input
-              placeholder="Cari berdasarkan nama lengkap, nomor order Shopee"
-              className="pl-12 w-full max-h-full"
-            />
-            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
-              <SearchOutlined />
+    <Fragment>
+      <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
+        {/* Header */}
+        <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
+          <h1 className="text-p2 font-semibold">Data Pengiriman Hadiah</h1>
+        </header>
+        {/* Account Table Section */}
+        <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
+          {/* Search and Filter */}
+          <div className="flex justify-between items-center gap-8 mb-2">
+            <div className="relative w-full">
+              <Input
+                placeholder="Cari berdasarkan nama lengkap, nomor order Shopee"
+                className="pl-12 w-full max-h-full"
+              />
+              <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
+                <SearchOutlined />
+              </div>
+            </div>
+            <div className="relative">
+              <Button
+                variant="primary"
+                size="md"
+                className="flex items-center gap-3"
+                onClick={() => setShowFilter(!showFilter)}
+              >
+                <FilterOutlined />
+                Filters
+              </Button>
+              {showFilter && (
+                <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
+                  <Filter
+                    options={deliveryOptions}
+                    onClose={() => setShowFilter(false)}
+                    onFilterChange={(value) => {
+                      console.log('Selected filter:', value);
+                      // Filter logic di sini
+                    }}
+                  />
+                </div>
+              )}
             </div>
           </div>
+          {/* Table */}
+          <DataTable data={mockData} columns={columns} table={table} />
+        </section>
+      </main>
 
-          <div className="relative">
-            <Button
-              variant="primary"
-              size="md"
-              className="flex items-center gap-3"
-              onClick={() => setShowFilter(!showFilter)}
-            >
-              <FilterOutlined />
-              Filters
-            </Button>
-            {showFilter && (
-              <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
-                <Filter onClose={() => setShowFilter(false)} />
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Table */}
-        <DataTable data={mockData} columns={columns} table={table} />
-      </section>
-    </main>
+      {/* Modal Process Delivery */}
+      <ModalProcessDelivery
+        isOpen={showModalProcessDelivery}
+        onClose={() => setShowModalProcessDelivery(false)}
+        handleProcessDelivery={() => {
+          console.log('Action ketika user menekan tombol Proses Pengiriman');
+        }}
+      />
+    </Fragment>
   );
 };
 

apps/backoffice/src/app/transactions/_components/modal-validate.tsx

@@ -0,0 +1,61 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
+
+interface IModalValidate {
+  isOpen: boolean;
+  onClose: () => void;
+  handleValid?: () => void;
+  handleInvalid?: () => void;
+}
+
+const ModalValidate = ({
+  isOpen,
+  onClose,
+  handleValid,
+  handleInvalid,
+}: IModalValidate) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={onClose}
+      disableEscapeKeyDown={true}
+    >
+      <Modal.Header className="mb-0 text-center items-center">
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Validasi Transaksi
+        </h2>
+      </Modal.Header>
+      <Modal.Content className="flex flex-col gap-8">
+        <InputField
+          label="Nomor Transaksi"
+          type="text"
+          placeholder="Masukkan Nomor Transaksi"
+          value="2502133Y9AFVBO"
+          size="lg"
+          className="w-full"
+        />
+        <div className="flex gap-4">
+          <Button
+            variant="bordered"
+            size="lg"
+            className="w-full border-danger-500 text-danger-500 hover:border-danger-700 hover:text-danger-700"
+            onClick={() => handleInvalid && handleInvalid()}
+          >
+            Tidak Valid
+          </Button>
+          <Button
+            variant="primary"
+            size="lg"
+            className="w-full"
+            onClick={() => handleValid && handleValid()}
+          >
+            Valid
+          </Button>
+        </div>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default ModalValidate;

apps/backoffice/src/app/transactions/page.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FC, ReactElement, useState } from 'react';
+import { FC, Fragment, ReactElement, useState } from 'react';
 import {
   FilterOutlined,
   SearchOutlined,
@@ -16,6 +16,7 @@ import {
   useReactTable,
   RowSelectionState,
 } from '@tanstack/react-table';
+import ModalValidate from './_components/modal-validate';
 
 type TransactionStatus = 'valid' | 'invalid' | 'unchecked';
 
@@ -38,81 +39,9 @@ const mockTransactions: Transaction[] = Array.from({ length: 20 }, (_, i) => ({
     : 'valid') as TransactionStatus,
 }));
 
-const columns: ColumnDef<Transaction>[] = [
-  {
-    id: 'select',
-    header: ({ table }) => (
-      <input
-        type="checkbox"
-        className="rounded"
-        checked={table.getIsAllRowsSelected()}
-        onChange={table.getToggleAllRowsSelectedHandler()}
-      />
-    ),
-    cell: ({ row }) => (
-      <input
-        type="checkbox"
-        className="rounded"
-        checked={row.getIsSelected()}
-        onChange={row.getToggleSelectedHandler()}
-      />
-    ),
-  },
-  {
-    header: 'No',
-    accessorKey: 'id',
-  },
-  {
-    header: 'Nama Lengkap',
-    accessorKey: 'name',
-  },
-  {
-    header: 'Nomor Transaksi',
-    accessorKey: 'transactionNumber',
-  },
-  {
-    header: 'Order Valid?',
-    accessorKey: 'status',
-    cell: ({ row }) => {
-      const status = row.original.status;
-      const statusColors: Record<TransactionStatus, string> = {
-        valid: 'bg-success-200 text-success-500',
-        invalid: 'bg-danger-200 text-danger-500',
-        unchecked: 'bg-warning-200 text-warning-900',
-      };
-      const statusText: Record<TransactionStatus, string> = {
-        valid: 'Valid',
-        invalid: 'Invalid',
-        unchecked: 'Unchecked',
-      };
-      return (
-        <div
-          className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
-        >
-          {statusText[status]}
-        </div>
-      );
-    },
-  },
-  {
-    header: 'Action',
-    cell: ({ row }) => (
-      <Button
-        variant="primary"
-        size="sm"
-        onClick={(e) => {
-          e.stopPropagation();
-          // handleUpdate(row.id);
-        }}
-        className="flex items-center gap-2 w-full"
-      >
-        <AuditOutlined className="text-[16px]" /> Update
-      </Button>
-    ),
-  },
-];
-
 export const Components: FC = (): ReactElement => {
+  const [showModalValidate, setShowModalValidate] = useState(false);
+
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
     pageSize: 9,
@@ -121,6 +50,86 @@ export const Components: FC = (): ReactElement => {
   const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
   const [showFilter, setShowFilter] = useState(false);
 
+  const validationOptions = [
+    { id: 'option1', value: 'unchecked', label: 'Unchecked' },
+    { id: 'option2', value: 'valid', label: 'Valid' },
+    { id: 'option3', value: 'invalid', label: 'Invalid' },
+  ];
+
+  const columns: ColumnDef<Transaction>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      header: 'No',
+      accessorKey: 'id',
+    },
+    {
+      header: 'Nama Lengkap',
+      accessorKey: 'name',
+    },
+    {
+      header: 'Nomor Transaksi',
+      accessorKey: 'transactionNumber',
+    },
+    {
+      header: 'Order Valid?',
+      accessorKey: 'status',
+      cell: ({ row }) => {
+        const status = row.original.status;
+        const statusColors: Record<TransactionStatus, string> = {
+          valid: 'bg-success-200 text-success-500',
+          invalid: 'bg-danger-200 text-danger-500',
+          unchecked: 'bg-warning-200 text-warning-900',
+        };
+        const statusText: Record<TransactionStatus, string> = {
+          valid: 'Valid',
+          invalid: 'Invalid',
+          unchecked: 'Unchecked',
+        };
+        return (
+          <div
+            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
+          >
+            {statusText[status]}
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Action',
+      cell: ({ row }) => (
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            setShowModalValidate(true);
+          }}
+          className="flex items-center gap-2 w-full"
+        >
+          <AuditOutlined className="text-[16px]" /> Update
+        </Button>
+      ),
+    },
+  ];
+
   const table = useReactTable({
     data: mockTransactions,
     columns,
@@ -138,48 +147,67 @@ export const Components: FC = (): ReactElement => {
   });
 
   return (
-    <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
-      {/* Header */}
-      <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
-        <h1 className="text-p2 font-semibold">Validasi Transaksi</h1>
-      </header>
+    <Fragment>
+      <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
+        {/* Header */}
+        <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
+          <h1 className="text-p2 font-semibold">Validasi Transaksi</h1>
+        </header>
 
-      {/* Account Table Section */}
-      <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
-        {/* Search and Filter */}
-        <div className="flex justify-between items-center gap-8 mb-2">
-          <div className="relative w-full">
-            <Input
-              placeholder="Cari berdasarkan nama lengkap, nomor order Shopee"
-              className="pl-12 w-full max-h-full"
-            />
-            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
-              <SearchOutlined />
+        {/* Account Table Section */}
+        <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
+          {/* Search and Filter */}
+          <div className="flex justify-between items-center gap-8 mb-2">
+            <div className="relative w-full">
+              <Input
+                placeholder="Cari berdasarkan nama lengkap, nomor order Shopee"
+                className="pl-12 w-full max-h-full"
+              />
+              <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
+                <SearchOutlined />
+              </div>
+            </div>
+
+            <div className="relative">
+              <Button
+                variant="primary"
+                size="md"
+                className="flex items-center gap-3"
+                onClick={() => setShowFilter(!showFilter)}
+              >
+                <FilterOutlined />
+                Filters
+              </Button>
+              {showFilter && (
+                <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
+                  <Filter
+                    options={validationOptions}
+                    onClose={() => setShowFilter(false)}
+                    onFilterChange={(value) => {
+                      console.log('Selected filter:', value);
+                      // Filter logic di sini
+                    }}
+                  />
+                </div>
+              )}
             </div>
           </div>
 
-          <div className="relative">
-            <Button
-              variant="primary"
-              size="md"
-              className="flex items-center gap-3"
-              onClick={() => setShowFilter(!showFilter)}
-            >
-              <FilterOutlined />
-              Filters
-            </Button>
-            {showFilter && (
-              <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
-                <Filter onClose={() => setShowFilter(false)} />
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Table */}
-        <DataTable data={mockTransactions} columns={columns} table={table} />
-      </section>
-    </main>
+          {/* Table */}
+          <DataTable data={mockTransactions} columns={columns} table={table} />
+        </section>
+      </main>
+      <ModalValidate
+        isOpen={showModalValidate}
+        onClose={() => setShowModalValidate(false)}
+        handleValid={() => {
+          console.log('Action ketika user klik Valid');
+        }}
+        handleInvalid={() => {
+          console.log('Action ketika user klik Tidak Valid');
+        }}
+      />
+    </Fragment>
   );
 };
 

apps/dimentorin/src/app/auth/login/page.tsx

@@ -1,45 +1,73 @@
 import { FC, ReactElement } from 'react';
-import { LoginBanner } from "@imphnen-frontend-service/ui/organisms"
+import { LoginBanner } from '@imphnen-frontend-service/ui/organisms';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { useSearchParams } from 'react-router-dom';
-import { InputForm } from '@imphnen-frontend-service/ui/molecules';
+import { InputField } from '@imphnen-frontend-service/ui/molecules';
 
 export const Components: FC = (): ReactElement => {
   const [searchParams] = useSearchParams();
-  const error = searchParams.get("error"); // Ambil nilai ?error=
+  const error = searchParams.get('error'); // Ambil nilai ?error=
 
   return (
-    <div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'>
-      <div className='bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6'>
+    <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
+      <div className="bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
         <LoginBanner />
-        <div className='border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[96px] flex justify-center'>
-          <div className='w-[404px]'>
-            <h2 className='text-4xl font-semibold text-primary-500 text-center mb-2'>Hallo Minna-san</h2>
-            <h5 className='text-xl font-medium text-primary-500 text-center'>Welcome to Dimentorin by IMPHNEN</h5>
-            <InputForm label='Email' error={error ? error : undefined} size='lg' className='w-full' placeholder='Masukkan email-mu, Senpai~! ✨ (Pastikan tidak typo, ya~ 😆)' />
-            <InputForm label="password" error={error ? error : undefined} className='w-full' size='lg' type='password' placeholder='Masukkan password rahasiamu!' />
-            <div className='flex justify-end my-5'>
-              <a href="/auth/forgot" className='text-primary-500 font-medium'>Lupa Password ?</a>
+        <div className="border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[96px] flex justify-center">
+          <div className="w-[404px]">
+            <h2 className="text-4xl font-semibold text-primary-500 text-center mb-2">
+              Hallo Minna-san
+            </h2>
+            <h5 className="text-xl font-medium text-primary-500 text-center">
+              Welcome to Dimentorin by IMPHNEN
+            </h5>
+            <InputField
+              label="Email"
+              error={error ? error : undefined}
+              size="lg"
+              className="w-full"
+              placeholder="Masukkan email-mu, Senpai~! ✨ (Pastikan tidak typo, ya~ 😆)"
+            />
+            <InputField
+              label="password"
+              error={error ? error : undefined}
+              className="w-full"
+              size="lg"
+              type="password"
+              placeholder="Masukkan password rahasiamu!"
+            />
+            <div className="flex justify-end my-5">
+              <a href="/auth/forgot" className="text-primary-500 font-medium">
+                Lupa Password ?
+              </a>
             </div>
-            <Button className='w-full'>Enter Isekai</Button>
-            <div className='flex my-3 gap-3 justify-center'>
+            <Button className="w-full">Enter Isekai</Button>
+            <div className="flex my-3 gap-3 justify-center">
               <h5>Belum Punya akun ?</h5>
-              <a href="/auth/register" className='text-primary-500 font-medium'>Daftar Disini</a>
+              <a href="/auth/register" className="text-primary-500 font-medium">
+                Daftar Disini
+              </a>
             </div>
             <div className="flex items-center w-full">
               <div className="flex-grow border-t border-blue-400 opacity-50"></div>
               <span className="px-3 text-blue-400">Or</span>
               <div className="flex-grow border-t border-blue-400 opacity-50"></div>
             </div>
-            <Button className='w-full my-3 text-gray-500 gap-2' variant='secondary'>
+            <Button
+              className="w-full my-3 text-gray-500 gap-2"
+              variant="secondary"
+            >
               <p>Log In With Google</p>
-              <img src="/image/33978ce5bed2da9bf9d73acad802182a.webp" alt="Google Icon" width={24}/>
+              <img
+                src="/image/33978ce5bed2da9bf9d73acad802182a.webp"
+                alt="Google Icon"
+                width={24}
+              />
             </Button>
-          </div> 
+          </div>
         </div>
       </div>
     </div>
   );
 };
 
-export default Components;
+export default Components;

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) => (
-  <>
-    {/* TODO: Change component using OTP Input */}
-    <InputForm
+  <Fragment>
+    <InputField
       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,18 +1,23 @@
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
-import { Link } from 'react-router-dom';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
+import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
+import { useLogin } from '../../_hooks/use-login';
 
 interface IModalFormLogin {
   isOpen: boolean;
   onClose: () => void;
   onForgotPassword: () => void;
+  setIsOpenRegisterModal: (value: boolean) => void;
 }
 
 const ModalFormLogin = ({
   isOpen,
   onClose,
   onForgotPassword,
+  setIsOpenRegisterModal,
 }: IModalFormLogin) => {
+  const { form, onSubmit } = useLogin();
+
   return (
     <Modal
       className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
@@ -25,38 +30,45 @@ const ModalFormLogin = ({
           Login
         </h1>
       </Modal.Header>
-      <Modal.Content className="space-y-4">
-        <InputForm
-          label="Email"
-          placeholder="Masukkan Email"
-          type="email"
-          size="lg"
-          className="w-full"
-        />
-        <InputForm
-          label="Password"
-          placeholder="Masukkan Password"
-          type="password"
-          size="lg"
-          className="w-full"
-        />
-        <h1 className="text-end text-primary-500 text-xl font-medium">
-          <Button variant="text" onClick={onForgotPassword}>
-            Lupa Password?
+      <Modal.Content>
+        <form className="space-y-4" onSubmit={onSubmit}>
+          <ControlledInputField
+            control={form.control}
+            label="Email"
+            placeholder="Masukkan Email"
+            type="email"
+            name="email"
+            size="lg"
+            className="w-full"
+          />
+          <ControlledInputField
+            control={form.control}
+            label="Password"
+            placeholder="Masukkan Password"
+            type="password"
+            name="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>
-        <Button size="md" className="w-full">
-          Login
-        </Button>
-        <div className="flex justify-center gap-2 pt-2.5 font-medium">
-          <p className="text-neutral-500">Belum punya akun?</p>
-          <Link
-            className="text-primary-500 hover:text-primary-600"
-            to="/register"
-          >
-            Daftar
-          </Link>
-        </div>
+          <div className="flex justify-center gap-2 pt-2.5 font-medium">
+            <p className="text-neutral-500">Belum punya akun?</p>
+            <Button
+              variant="text"
+              className="text-primary-500 hover:text-primary-600 m-0 p-0"
+              onClick={() => setIsOpenRegisterModal(true)}
+            >
+              Daftar
+            </Button>
+          </div>
+        </form>
       </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 { useQueryState } from '../../../hooks/use-query-state';
+import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
+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/layout.tsx

@@ -1,14 +1,16 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
 import { Navbar } from '@imphnen-frontend-service/ui/organisms';
+import { Outlet } from 'react-router-dom';
+import { FC, ReactElement } from 'react';
+import { ModalLoginProvider } from '@imphnen-frontend-service/utils';
 
 export const AppLayout: FC = (): ReactElement => {
   return (
-    <main className="bg-primary-50 min-h-screen">
-      <Navbar />
-      <Outlet />
-    </main>
+    <ModalLoginProvider>
+      <main className="bg-primary-50 min-h-screen">
+        <Navbar />
+        <Outlet />
+      </main>
+    </ModalLoginProvider>
   );
 };
-
 export default AppLayout;

apps/gacha/src/app/page.tsx

@@ -1,20 +1,15 @@
 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, useEffect, useState } from 'react';
+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';
-
-interface GachaItemProps {
-  src: string;
-  label: string;
-  className?: string;
-}
+import { GachaItem } from './_components/item/gacha-item';
+import { useModalLogin } from '@imphnen-frontend-service/utils';
 
 export const Components: FC = (): ReactElement => {
+  const { showModalLogin, setShowModalLogin } = useModalLogin();
   const [showModalForgotPassword, setShowModalForgotPassword] = useState(false);
-  const [showModalLogin, setShowModalLogin] = useState(false);
   const [showModalRegister, setShowModalRegister] = useState(false);
 
   const scrollToRoulette = () => {
@@ -24,49 +19,6 @@ export const Components: FC = (): ReactElement => {
     }
   };
 
-  useEffect(() => {
-    const gachaPlaySection = document.getElementById('gacha-play');
-    if (gachaPlaySection) {
-      let currentIndex = 0;
-      const items = gachaPlaySection.children;
-      const totalItems = items.length;
-
-      const scrollItems = () => {
-        if (currentIndex >= totalItems) {
-          currentIndex = 0;
-        }
-        items[currentIndex].scrollIntoView({
-          behavior: 'smooth',
-          inline: 'center',
-        });
-        currentIndex++;
-      };
-
-      const intervalId = setInterval(scrollItems, 2800);
-
-      return () => clearInterval(intervalId);
-    }
-  }, []);
-
-  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">
-        <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=""
-            className={cn('h-[150px] md:h-[255px] object-contain', className)}
-          />
-        </div>
-        <p className="font-semibold text-center md:text-p2">{label}</p>
-      </div>
-    );
-  };
-
   const handleForgotPasswordClick = () => {
     setShowModalLogin(false);
     setShowModalForgotPassword(true);
@@ -74,7 +26,6 @@ export const Components: FC = (): ReactElement => {
 
   return (
     <Fragment>
-      {/* Landing Page */}
       <section
         id="landing-page"
         className="my-12 md:my-24 grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 justify-items-center max-w-[1280px] items-center justify-center mx-[32px] md:mx-[60px] lg:mx-[80px] xl:mx-auto"
@@ -137,22 +88,28 @@ export const Components: FC = (): ReactElement => {
             ~ 175k ~
           </div>
         </div>
-        <div className="order-2 flex flex-col col-span-4 justify-center items-center mb-8 relative">
+        <div className="order-2 flex flex-col col-span-4 justify-center items-center mb-8 relative overflow-hidden">
           <div className="relative h-[130px] md:h-[230px]">
             <img
+              width={400}
+              height={400}
               src="/merch/2.png"
               alt="Merch 2"
               className="relative top-[5px] md:top-[8px] left-0 md:left-[5px] z-10 w-[165px] md:w-[277px]"
             />
             <img
+              width={400}
+              height={400}
               className="absolute top-0 -left-[5px] md:-left-[8px] z-0 min-w-[174px] md:min-w-[302px]"
               src="/merch/Vector-2.svg"
-              alt=""
+              alt="Merch 3"
             />
             <img
+              width={400}
+              height={400}
               className="absolute hidden lg:block -bottom-[100px] -left-[55px]"
               src="/landing-arrow-2.svg"
-              alt=""
+              alt="Merch 1"
             />
           </div>
           <div className="px-3 py-1 text-primary-500 font-semibold text-base md:text-p2 bg-white shadow-md rounded">
@@ -163,7 +120,7 @@ export const Components: FC = (): ReactElement => {
           </div>
         </div>
       </section>
-      {/* Roulette Page */}
+
       <section
         id="roulette"
         className="mt-20 pb-50 lg:py-90 mx-[32px] md:mx-[60px] lg:mx-[80px] xl:mx-auto lg:max-w-[1280px] grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 justify-items-center gap-y-16 md:gap-y-28"
@@ -191,10 +148,7 @@ export const Components: FC = (): ReactElement => {
           </ol>
         </div>
 
-        <div
-          id="roulette-spin"
-          className="col-span-4 md:col-span-8 lg:col-span-6 flex flex-col items-center gap-4 md:gap-8 overflow-x-hidden"
-        >
+        <div className="col-span-4 md:col-span-8 lg:col-span-6 flex flex-col items-center gap-4 md:gap-8 overflow-x-hidden">
           <div className="bg-white text-primary-500 font-medium text-p3 md:text-h3 shadow py-2 px-4 md:py-4 md:px-8 max-w-fit rounded-md md:rounded-lg">
             Here Take Your Prize
           </div>
@@ -223,31 +177,17 @@ export const Components: FC = (): ReactElement => {
             Spin Now
           </Button>
         </div>
-        {/* TODO: Change using real button trigger */}
-        <div className="flex gap-4 col-span-4 md:col-span-8 lg:col-span-6 justify-center items-center">
-          <Button onClick={() => setShowModalLogin(true)}>
-            Open Modal Login
-          </Button>
-          <Button onClick={() => setShowModalForgotPassword(true)}>
-            Open Modal Forgot Password
-          </Button>
-          <Button onClick={() => setShowModalRegister(true)}>
-            Open Modal Register
-          </Button>
-        </div>
       </section>
-      {/* Diffuser & Cloud */}
       <div className="sticky bottom-0 h-[86px] md:h-[200px] bg-gradient-to-b from-primary-500/0 to-primary-500/50 to-80%"></div>
 
-      {/* Login Modal */}
       <ModalFormLogin
         isOpen={showModalLogin}
         onClose={() => setShowModalLogin(false)}
         onForgotPassword={handleForgotPasswordClick}
+        setIsOpenRegisterModal={setShowModalRegister}
         key="login"
       />
 
-      {/* Register Modal */}
       <ModalFormRegister
         isOpen={showModalRegister}
         onClose={() => {
@@ -256,7 +196,6 @@ export const Components: FC = (): ReactElement => {
         key="register"
       />
 
-      {/* Forgot Password Modal */}
       <ModalFormForgotPassword
         isOpen={showModalForgotPassword}
         onClose={() => {

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,17 @@
+import { z } from 'zod';
+
+export const authLoginSchema = z.object({
+  email: z
+    .string({
+      required_error: 'Email tidak boleh kosong',
+      invalid_type_error: 'Email harus berupa string',
+    })
+    .min(1, 'Email tidak boleh kosong')
+    .email('Email harus valid'),
+  password: z
+    .string({
+      required_error: 'Password tidak boleh kosong',
+      invalid_type_error: 'Password harus berupa string',
+    })
+    .min(1, 'Password tidak boleh kosong'),
+});

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: {
-      fullname: string;
-      email: string;
-      is_active: boolean;
-    };
+    user: TUserItem;
   };
 };
 

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/atoms/input/input.tsx

@@ -9,7 +9,7 @@ import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; // Import
 import { cn } from '@imphnen-frontend-service/utils';
 import { Button } from '../button';
 
-type TInputType = 'text' | 'email' | 'password';
+type TInputType = 'text' | 'email' | 'password' | 'file';
 type TInputSize = 'sm' | 'md' | 'lg';
 
 type TInputProps = Omit<

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', () => {
+describe('InputField 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';
-type TInputSize = 'sm' | 'md' | 'lg';
-
-type TInputFormProps = Omit<
+export type TInputType = 'text' | 'email' | 'password' | 'file';
+export type TInputSize = 'sm' | 'md' | 'lg';
+export type TInputFieldProps = 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',
@@ -77,7 +75,7 @@ export const InputForm: FC<TInputFormProps> = ({
         {...rest}
       />
       {error ? (
-        <p className="text-danger-500 text-xs mt-1">{error}</p>
+        <p className="text-danger-500 text-xl mt-1">{error}</p>
       ) : (
         helperText && (
           <p className={cn('text-cs mt-1', sizeClasses[size].helperText)}>
@@ -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/filter/filter.tsx

@@ -42,13 +42,31 @@ const Radio = ({
 
 interface FilterProps {
   onClose?: () => void;
+  options: Array<{
+    id: string;
+    value: string;
+    label: string;
+  }>;
+  selectedValue?: string;
+  onFilterChange?: (value: string) => void;
+  title?: string;
 }
 
-export const Filter = ({ onClose }: FilterProps) => {
-  const [selectedStatus, setSelectedStatus] = useState('delivered');
+export const Filter = ({
+  onClose,
+  options,
+  selectedValue,
+  onFilterChange,
+  title = 'Status',
+}: FilterProps) => {
+  const [selectedStatus, setSelectedStatus] = useState(
+    selectedValue || options[0]?.value || ''
+  );
 
   const handleStatusChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSelectedStatus(e.target.value);
+    const newValue = e.target.value;
+    setSelectedStatus(newValue);
+    onFilterChange?.(newValue);
   };
 
   return (
@@ -63,24 +81,19 @@ export const Filter = ({ onClose }: FilterProps) => {
         </button>
       </div>
       <hr className="border-primary-200" />
-      <span className="font-semibold text-primary-500">Status</span>
+      <span className="font-semibold text-primary-500">{title}</span>
       <div className="flex flex-col gap-[10px]">
-        <Radio
-          id="option1"
-          name="status"
-          value="undelivered"
-          label="Undelivered"
-          checked={selectedStatus === 'undelivered'}
-          onChange={handleStatusChange}
-        />
-        <Radio
-          id="option2"
-          name="status"
-          value="delivered"
-          label="Delivered"
-          checked={selectedStatus === 'delivered'}
-          onChange={handleStatusChange}
-        />
+        {options.map((option) => (
+          <Radio
+            key={option.id}
+            id={option.id}
+            name="status"
+            value={option.value}
+            label={option.label}
+            checked={selectedStatus === option.value}
+            onChange={handleStatusChange}
+          />
+        ))}
       </div>
     </div>
   );

libs/ui/src/organisms/index.ts

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

libs/ui/src/organisms/modal-backoffice/index.ts

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

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

@@ -1,25 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-interface ModalBackofficeProps {
-  children: ReactNode;
-  className?: string;
-}
-
-export const ModalBackoffice = ({
-  children,
-  className,
-  ...rest
-}: ModalBackofficeProps): ReactElement => {
-  return (
-    <div
-      className={`w-[400px] bg-primary-50 rounded-lg p-[40px] gap-[32px] ${
-        className || ''
-      }`}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default ModalBackoffice;

libs/ui/src/organisms/modal-backoffice/modal.stories.tsx

@@ -1,373 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ModalBackoffice } from './modal-backoffice';
-import { InputForm } from '../../molecules';
-import { Button } from '../../atoms';
-
-const meta: Meta<typeof ModalBackoffice> = {
-  title: 'Organisms/Modal Backoffice',
-  component: ModalBackoffice,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta<typeof ModalBackoffice>;
-
-export default meta;
-type Story = StoryObj<typeof ModalBackoffice>;
-
-export const Default: Story = {
-  args: {
-    // isOpen: true,
-    // onClose: () => console.log('Modal closed'),
-    // title: 'Sample Modal',
-    children: (
-      <>
-        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
-          Modal Title
-        </h2>
-        <p className="text-p3 text-neutral-400">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas repellat
-          rerum doloremque dolorem fugit architecto eos blanditiis ratione
-          facere? Esse dolores inventore deleniti. Dicta voluptatem dolore vel
-          quia amet dolorem?
-        </p>
-        <div className="flex flex-col gap-4"></div>
-      </>
-    ),
-  },
-};
-
-export const TambahItemGacha: Story = {
-  args: {
-    children: (
-      <div className="flex flex-col gap-8">
-        <div>
-          <h2 className="text-p1 font-semibold text-primary-500 mb-3">
-            Tambah Item Gacha
-          </h2>
-          <p className="text-p3 text-neutral-400">
-            Lengkapi detail di bawah ini untuk menambahkan item gacha
-          </p>
-        </div>
-        <div className="flex flex-col gap-4">
-          <InputForm
-            label="Nama Hadiah"
-            type="text"
-            placeholder="Masukkan Nama Hadiah"
-            size="lg"
-            className="w-full"
-          />
-          <InputForm
-            label="Chance Rate"
-            type="text"
-            placeholder="Masukkan Chance Rate"
-            size="lg"
-            className="w-full"
-          />
-          <InputForm
-            label="Foto Barang"
-            type="text"
-            placeholder=".jpg, .jpeg, atau .png"
-            size="lg"
-            className="w-full"
-          />
-        </div>
-        <Button variant="primary" size="lg" className="w-full">
-          Tambahkan Item
-        </Button>
-      </div>
-    ),
-  },
-};
-
-export const TambahItem: Story = {
-  args: {
-    children: (
-      <div className="flex flex-col gap-8 text-center">
-        <div>
-          <h2 className="text-p1 font-semibold text-primary-500 mb-3">
-            Tambah Item
-          </h2>
-          <p className="text-p3 text-neutral-400">
-            Apakah kamu yakin ingin
-            <br /> menambahkan item ini?
-          </p>
-        </div>
-        <div className="flex gap-4">
-          <Button variant="bordered" size="lg" className="w-full">
-            Batal
-          </Button>
-          <Button variant="primary" size="lg" className="w-full">
-            Tambahkan
-          </Button>
-        </div>
-      </div>
-    ),
-  },
-};
-
-export const EditItemGacha: Story = {
-  args: {
-    children: (
-      <div className="flex flex-col gap-8">
-        <div>
-          <h2 className="text-p1 font-semibold text-primary-500 mb-3">
-            Edit Item Gacha
-          </h2>
-          <p className="text-p3 text-neutral-400">
-            Silakan mengubah detail dari item yang diperlukan
-          </p>
-        </div>
-        <div className="flex flex-col gap-4">
-          <InputForm
-            label="Nama Hadiah"
-            type="text"
-            placeholder="Masukkan Nama Hadiah"
-            size="lg"
-            className="w-full"
-          />
-          <InputForm
-            label="Chance Rate"
-            type="text"
-            placeholder="Masukkan Chance Rate"
-            size="lg"
-            className="w-full"
-          />
-          <InputForm
-            label="Foto Barang"
-            type="text"
-            placeholder=".jpg, .jpeg, atau .png"
-            size="lg"
-            className="w-full"
-          />
-        </div>
-        <Button variant="primary" size="lg" className="w-full">
-          Perbarui Item
-        </Button>
-      </div>
-    ),
-  },
-};
-
-export const UpdateItem: Story = {
-  args: {
-    children: (
-      <div className="flex flex-col gap-8 text-center">
-        <div>
-          <h2 className="text-p1 font-semibold text-primary-500 mb-3">
-            Update Item
-          </h2>
-          <p className="text-p3 text-neutral-400">
-            Apakah kamu yakin dengan
-            <br /> perubahan yang dilakukan?
-          </p>
-        </div>
-        <div className="flex gap-4">
-          <Button variant="bordered" size="lg" className="w-full">
-            Batal
-          </Button>
-          <Button variant="primary" size="lg" className="w-full">
-            Update
-          </Button>
-        </div>
-      </div>
-    ),
-  },
-};
-
-export const DeleteItem: Story = {
-  args: {
-    children: (
-      <div className="flex flex-col gap-8 text-center">
-        <img
-          src="/chibi-delete.webp"
-          alt="Delete item?"
-          width={148}
-          className="self-center"
-        />
-        <div>
-          <h2 className="text-p1 font-semibold text-danger-500 mb-3">
-            Delete Item
-          </h2>
-          <p className="text-p3 text-neutral-400">
-            Apakah kamu yakin untuk menghapus item ini?
-          </p>
-        </div>
-        <div className="flex gap-4">
-          <Button variant="secondary" size="lg" className="w-full">
-            Batal Hapus
-          </Button>
-          <Button variant="danger" size="lg" className="w-full">
-            Hapus Item
-          </Button>
-        </div>
-      </div>
-    ),
-  },
-};
-
-export const EditDataAkun: Story = {
-  args: {
-    children: (
-      <div className="flex flex-col gap-8">
-        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
-          Edit Data Akun
-        </h2>
-
-        <div className="flex flex-col gap-4">
-          <InputForm
-            label="Nama Lengkap"
-            type="text"
-            placeholder="Masukkan Nama Lengkap"
-            value="Ahmad Wiyana"
-            size="lg"
-            className="w-full"
-          />
-          <InputForm
-            label="Email"
-            type="text"
-            placeholder="Masukkan Email"
-            value="fullname23@gmail.com"
-            size="lg"
-            className="w-full"
-          />
-          <InputForm
-            label="Nomor Telepon"
-            type="text"
-            placeholder="Masukkan Nomor Telepon"
-            value="081904423804"
-            size="lg"
-            className="w-full"
-          />
-          <InputForm
-            label="Alamat"
-            type="text"
-            placeholder="Masukkan Alamat"
-            value="Jl. Pantai Cibaduyut Indah"
-            size="lg"
-            className="w-full"
-          />
-        </div>
-        <Button variant="primary" size="lg" className="w-full">
-          Perbarui Data
-        </Button>
-      </div>
-    ),
-  },
-};
-
-export const UpdateDataAkun: Story = {
-  args: {
-    children: (
-      <div className="flex flex-col gap-8 text-center">
-        <div>
-          <h2 className="text-p1 font-semibold text-primary-500 mb-3">
-            Update Data
-          </h2>
-          <p className="text-p3 text-neutral-400">
-            Apakah kamu yakin dengan
-            <br /> perubahan yang dilakukan?
-          </p>
-        </div>
-        <div className="flex gap-4">
-          <Button variant="bordered" size="lg" className="w-full">
-            Batal
-          </Button>
-          <Button variant="primary" size="lg" className="w-full">
-            Update
-          </Button>
-        </div>
-      </div>
-    ),
-  },
-};
-
-export const ValidasiTransaksi: Story = {
-  args: {
-    children: (
-      <div className="flex flex-col gap-8">
-        <h2 className="text-p1 font-semibold text-primary-500 ">
-          Validasi Transaksi
-        </h2>
-
-        <InputForm
-          label="Nomor Transaksi"
-          type="text"
-          placeholder="Masukkan Nomor Transaksi"
-          value="2502133Y9AFVBO"
-          size="lg"
-          className="w-full"
-        />
-        <div className="flex gap-4">
-          <Button
-            variant="bordered"
-            size="lg"
-            className="w-full border-danger-500 text-danger-500 hover:border-danger-700 hover:text-danger-700"
-          >
-            Tidak Valid
-          </Button>
-          <Button variant="primary" size="lg" className="w-full">
-            Valid
-          </Button>
-        </div>
-      </div>
-    ),
-  },
-};
-
-export const ProsesDelivery: Story = {
-  args: {
-    children: (
-      <div className="flex flex-col gap-8">
-        <div>
-          <h2 className="text-p1 font-semibold text-primary-500 mb-3">
-            Delivery Process
-          </h2>
-
-          <p className="text-p3 text-neutral-400">
-            Lakukan pengiriman hadiah gacha untuk pengguna di bawah ini, jika
-            sudah ubah status menjadi “Delivered”.
-          </p>
-        </div>
-
-        <div className="flex flex-col gap-4">
-          <InputForm
-            label="Nama Lengkap"
-            type="text"
-            placeholder="Masukkan Nama Lengkap"
-            value="Ahmad Wiyana"
-            size="lg"
-            className="w-full"
-          />
-          <InputForm
-            label="Item yang didapatkan"
-            type="text"
-            placeholder="Masukkan Nama Item"
-            value="Lanyard + ID Card"
-            size="lg"
-            className="w-full"
-          />
-          <InputForm
-            label="Alamat Pengiriman"
-            type="text"
-            placeholder="Masukkan Alamat Pengiriman"
-            value="Jl. Pantai Cibaduyut Indah"
-            size="lg"
-            className="w-full"
-          />
-          <InputForm
-            label="Status"
-            type="text"
-            placeholder="Isi Status Pengiriman"
-            value="Lanyard + ID Card"
-            size="lg"
-            className="w-full"
-          />
-        </div>
-        <Button variant="primary" size="lg" className="w-full">
-          Tambahkan Item
-        </Button>
-      </div>
-    ),
-  },
-};

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,19 @@
 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 { useModalLogin, 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);
+  const { setShowModalLogin } = useModalLogin();
 
   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 +43,27 @@ export const Navbar: FC = (): ReactElement => {
                   <Link to="#">Merch Gacha</Link>
                 </Button>
               </li>
-              <li>
-                <Button
-                  size="md"
-                  className="lg:text-[19px] lg:max-h-[44px] text-neutral-50 hover:text-neutral-200 transition-colors"
-                >
-                  <Link to="/login">Login</Link>
-                </Button>
-              </li>
+              {!isAuthenticated ? (
+                <li>
+                  <Button onClick={() => setShowModalLogin(true)}>Login</Button>
+                </li>
+              ) : (
+                <li className="flex gap-x-4">
+                  <span className="text-lg">{session.user?.fullname}</span>
+                  <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 +87,18 @@ export const Navbar: FC = (): ReactElement => {
                         Merch Gacha
                       </Link>
                     </li>
-                    <li>
-                      <Link
-                        to="#"
-                        className="block text-gray-600 transition-colors px-4 py-2 text-center font-semibold"
-                      >
-                        Login
-                      </Link>
-                    </li>
+                    {!isAuthenticated ? (
+                      <li>
+                        <Button
+                          onClick={() => setShowModalLogin(true)}
+                          className="block w-full text-gray-100 transition-colors px-4 py-2 text-center font-semibold"
+                        >
+                          Login
+                        </Button>
+                      </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,3 @@
+export * from './use-query-state';
+export * from './use-session';
+export * from './use-modal-login';

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

@@ -0,0 +1,28 @@
+import { createContext, ReactNode, useContext, useState } from 'react';
+
+interface ModalLoginContextType {
+  showModalLogin: boolean;
+  setShowModalLogin: (value: boolean) => void;
+}
+
+const ModalLoginContext = createContext<ModalLoginContextType | undefined>(
+  undefined
+);
+
+export const ModalLoginProvider = ({ children }: { children: ReactNode }) => {
+  const [showModalLogin, setShowModalLogin] = useState(false);
+
+  return (
+    <ModalLoginContext.Provider value={{ showModalLogin, setShowModalLogin }}>
+      {children}
+    </ModalLoginContext.Provider>
+  );
+};
+
+export const useModalLogin = () => {
+  const context = useContext(ModalLoginContext);
+  if (!context) {
+    throw new Error('useModalLogin must be used within an ModalLoginProvider');
+  }
+  return context;
+};

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

@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useState } from 'react';
+
+interface UseQueryStateOptions {
+  defaultValue: number;
+  maxValue?: number;
+  minValue?: number;
+}
+
+export const useQueryState = (key: string, options: UseQueryStateOptions) => {
+  const { defaultValue, maxValue = Infinity, minValue = 1 } = options;
+
+  const getQueryParam = (param: string): string | null => {
+    if (typeof window === 'undefined') return null;
+    const searchParams = new URLSearchParams(window.location.search);
+    return searchParams.get(param);
+  };
+
+  const setQueryParam = (param: string, value: string) => {
+    const searchParams = new URLSearchParams(window.location.search);
+    searchParams.set(param, value);
+    const newUrl = `${window.location.pathname}?${searchParams.toString()}`;
+    window.history.replaceState(null, '', newUrl);
+  };
+
+  const initialValue = () => {
+    const queryValue = getQueryParam(key);
+    const parsedValue = queryValue ? parseInt(queryValue, 10) : defaultValue;
+    return Math.max(minValue, Math.min(maxValue, parsedValue));
+  };
+
+  const [value, setValue] = useState<number>(initialValue);
+
+  useEffect(() => {
+    const handlePopState = () => {
+      const queryValue = getQueryParam(key);
+      const newValue = queryValue ? parseInt(queryValue, 10) : defaultValue;
+      setValue(Math.max(minValue, Math.min(maxValue, newValue)));
+    };
+
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, [key, defaultValue, minValue, maxValue]);
+
+  const updateValue = useCallback(
+    (newValue: number) => {
+      const constrainedValue = Math.max(minValue, Math.min(maxValue, newValue));
+      setValue(constrainedValue);
+      setQueryParam(key, constrainedValue.toString());
+    },
+    [key, minValue, maxValue]
+  );
+
+  const nextStep = useCallback(() => {
+    updateValue(value + 1);
+  }, [value, updateValue]);
+
+  const prevStep = useCallback(() => {
+    updateValue(value - 1);
+  }, [value, updateValue]);
+
+  const resetStep = useCallback(() => {
+    updateValue(defaultValue);
+  }, [defaultValue, updateValue]);
+
+  return {
+    step: value,
+    nextStep,
+    prevStep,
+    resetStep,
+  };
+};

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

@@ -8,7 +8,7 @@
     "gacha:prod": "serve ./dist/apps/gacha",
     "backoffice:dev": "nx serve backoffice",
     "backoffice:build": "nx build backoffice",
-    "backoffice:prod": "serve ./dist/apps/gacha",
+    "backoffice:prod": "serve ./dist/apps/backoffice",
     "dimentorin:dev": "nx serve dimentorin",
     "dimentorin:build": "nx build dimentorin",
     "dimentorin:prod": "serve ./dist/apps/dimentorin",
@@ -19,14 +19,20 @@
   "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"
+    "sonner": "^2.0.3",
+    "tailwind-merge": "^3.0.2",
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@babel/core": "^7.14.5",
@@ -48,7 +54,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 +62,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",