feat(backoffice): slicing backoffice dimentorin

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

@@ -11,12 +11,26 @@ import {
 import { Button } from '../../atoms';
 import { FC, ReactElement } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { useSession } from '@imphnen-frontend-service/utils';
+import { cn, For, useSession } from '@imphnen-frontend-service/utils';
+
+const MENUS = [
+  { label: 'Dashboard & Set Gacha', href: '/dashboard', icon: <AppstoreOutlined className="text-[20px]" /> },
+  { label: 'Dashboard - Dimentorin', href: '/dashboard-dimentorin', icon: <AppstoreOutlined className="text-[20px]" /> },
+  { label: 'Gacha Roll', href: '/gacha-roll', icon: <ReloadOutlined className="text-[20px]" /> },
+  { label: 'Permissions', href: '/permissions', icon: <UserSwitchOutlined className="text-[20px]" /> },
+  { label: 'Roles', href: '/roles', icon: <UsergroupAddOutlined className="text-[20px]" /> },
+  { label: 'Data Akun', href: '/accounts', icon: <UserOutlined className="text-[20px]" /> },
+  { label: 'Validasi Transaksi', href: '/transactions', icon: <AuditOutlined className="text-[20px]" /> },
+  { label: 'Data Pengiriman Hadiah', href: '/prizes', icon: <InboxOutlined className="text-[20px]" /> },
+]
 
 export const BackofficeSidebar: FC = (): ReactElement => {
   const { signOut } = useSession();
   const location = useLocation();
-  const isActive = (path: string) => location.pathname.includes(path);
+  const isActive = (path: string) => {
+    if (path === '/dashboard' && location.pathname === '/dashboard-dimentorin') return false
+    return location.pathname.includes(path)
+  };
 
   return (
     <aside className="sticky top-0 left-0 w-[280px] bg-white min-h-screen py-[60px] px-[28px] shadow-xl flex flex-col justify-between">
@@ -24,89 +38,21 @@ export const BackofficeSidebar: FC = (): ReactElement => {
         <img src="/logos/simple.svg" alt="IMPHNEN Logo" className="w-[150px]" />
 
         <nav className="flex flex-col gap-4 w-full">
-          <Link
-            to="/dashboard"
-            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
-              isActive('/dashboard')
-                ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
-            }`}
-          >
-            <AppstoreOutlined className="text-[20px]" />
-            <span className="text-p3 font-medium">Dashboard & Set Gacha</span>
-          </Link>
-
-          <Link
-            to="/gacha-roll"
-            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
-              isActive('/gacha-roll')
-                ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
-            }`}
-          >
-            <ReloadOutlined className="text-[20px]" />
-            <span className="text-p3 font-medium">Gacha Roll</span>
-          </Link>
-
-          <Link
-            to="/permissions"
-            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
-              isActive('/permissions')
-                ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
-            }`}
-          >
-            <UserSwitchOutlined className="text-[20px]" />
-            <span className="text-p3 font-medium">Permissions</span>
-          </Link>
-
-          <Link
-            to="/roles"
-            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
-              isActive('/roles')
-                ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
-            }`}
-          >
-            <UsergroupAddOutlined className="text-[20px]" />
-            <span className="text-p3 font-medium">Roles</span>
-          </Link>
-
-          <Link
-            to="/accounts"
-            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
-              isActive('/accounts')
-                ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
-            }`}
-          >
-            <UserOutlined className="text-[20px]" />
-            <span className="text-p3 font-medium">Data Akun</span>
-          </Link>
-
-          <Link
-            to="/transactions"
-            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
-              isActive('/transactions')
-                ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
-            }`}
-          >
-            <AuditOutlined className="text-[20px]" />
-            <span className="text-p3 font-medium">Validasi Transaksi</span>
-          </Link>
-
-          <Link
-            to="/prizes"
-            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
-              isActive('/prizes')
-                ? 'bg-primary-500 text-white rounded-md'
-                : 'text-gray-700 hover:bg-gray-100'
-            }`}
-          >
-            <InboxOutlined className="text-[20px]" />
-            <span className="text-p3 font-medium">Data Pengiriman Hadiah</span>
-          </Link>
+          <For data={MENUS}>
+            {({ label, href, icon }) => (
+              <Link
+                key={href}
+                to={href}
+                className={cn(
+                  "flex items-center justify-items-start gap-3 px-[8px] py-[10px]",
+                  isActive(href) ? "bg-primary-500 text-white rounded-md" : "text-gray-700 hover:bg-gray-100"
+                )}
+              >
+                {icon}
+                <span className="text-p3 font-medium">{label}</span>
+              </Link>
+            )}
+          </For>
         </nav>
       </div>
 

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

@@ -0,0 +1,51 @@
+import { cn } from "@imphnen-frontend-service/utils"
+import { Icon } from '@iconify/react'
+import { FC, ReactElement, ReactNode } from "react"
+import { Button } from "../../atoms"
+
+export type TBackofficeWrapperProps = {
+  children: ReactNode
+  title?: string
+  className?: string
+  classHeader?: string
+  classTitle?: string
+}
+
+export const BackofficeWrapper: FC<TBackofficeWrapperProps> = ({
+  children,
+  title,
+  className,
+  classHeader,
+  classTitle,
+}): ReactElement => {
+  return (
+    <main className={cn("w-full px-[48px] py-[40px] flex flex-col gap-8", className)}>
+      <header className={cn("bg-white py-5 px-7 rounded-md shadow flex items-center justify-between", classHeader)}>
+        <h1 className={cn("text-[19px] text-primary-500 font-semibold", classTitle)}>{title}</h1>
+
+        <div className="flex items-center gap-x-6">
+          <Button
+            type="button"
+            variant="secondary"
+            className="max-h-full p-3"
+          >
+            <Icon icon="mdi:bell-outline" className="size-6" />
+          </Button>
+          <div className="flex items-center gap-x-6">
+            <div className="text-neutral-600 font-medium">
+              <p className="text-p3">Rizal Syaepulloh</p>
+              <p className="text-label1">Super Admin</p>
+            </div>
+            <div className="size-12 rounded-full overflow-hidden">
+              <img src="/images/asd687hwq6nds4dfjj2983.webp" alt="Profile" className="size-full object-cover" />
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <section>
+        {children}
+      </section>
+    </main>
+  )
+}

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

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

libs/ui/src/organisms/index.ts

@@ -5,3 +5,4 @@ export * from './backoffice-sidebar';
 export * from './datatable';
 export * from './filter';
 export * from './controlled-field';
+export * from './backoffice-wrapper';