feat: Draft dashboard AI-generated

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

@@ -0,0 +1,18 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <div className="bg-neutral-900 min-h-screen flex justify-center">
+      <div className="bg-primary-50 min-h-screen max-w-[1280px] w-full flex">
+        <BackofficeSidebar />
+        <div className="flex-1 overflow-auto">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AppLayout;

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

@@ -0,0 +1,133 @@
+import { FC, ReactElement } from 'react';
+
+export const Components: FC = (): ReactElement => {
+  return (
+    <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
+      {/* Dashboard Header */}
+      <div className="bg-white rounded-md shadow p-4">
+        <h1 className="text-xl font-medium">Dashboard</h1>
+      </div>
+
+      {/* Summary Section */}
+      <div className="flex flex-col gap-4">
+        <h2 className="text-lg font-medium">Summary</h2>
+        <div className="grid grid-cols-2 gap-4">
+          {/* Summary Cards */}
+          {[1, 2, 3, 4].map((item) => (
+            <div
+              key={item}
+              className="bg-white rounded-md shadow p-4 flex items-center"
+            >
+              <div className="mr-4 text-primary-500">
+                <svg
+                  className="w-6 h-6"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M12 4L4 8L12 12L20 8L12 4Z" fill="currentColor" />
+                  <path d="M4 12L12 16L20 12" fill="currentColor" />
+                  <path d="M4 16L12 20L20 16" fill="currentColor" />
+                </svg>
+              </div>
+              <div>
+                <h3 className="text-2xl font-bold">1000</h3>
+                <p className="text-sm text-gray-500">Total Participants</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Gacha Items Section */}
+      <div className="flex flex-col gap-4">
+        <div className="flex justify-between items-center">
+          <h2 className="text-lg font-medium">Gacha Items</h2>
+          <button className="bg-primary-500 text-white px-4 py-2 rounded-md flex items-center gap-2">
+            <span>Tambah Item</span>
+            <svg
+              className="w-4 h-4"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 4V20M4 12H20"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+              />
+            </svg>
+          </button>
+        </div>
+
+        {/* Gacha Items List */}
+        <div className="flex flex-col gap-4">
+          {[1, 2, 3, 4].map((item) => (
+            <div
+              key={item}
+              className="bg-white rounded-md shadow p-4 flex justify-between items-center"
+            >
+              <div className="flex items-center gap-4">
+                <img
+                  src="/gacha/lanyard-id-card.png"
+                  alt="Lanyard IMPHNEN"
+                  className="w-20 h-20 object-contain"
+                />
+                <div>
+                  <h3 className="font-medium">Lanyard IMPHNEN</h3>
+                  <div className="flex items-center gap-2 text-sm text-gray-500">
+                    <span>Prize {item}</span>
+                    <span>•</span>
+                    <span>Chance Rate: (1%)</span>
+                  </div>
+                </div>
+              </div>
+              <div className="flex gap-2">
+                <button className="text-gray-500 hover:text-primary-500">
+                  Edit
+                </button>
+                <button className="text-gray-500 hover:text-red-500">
+                  Delete
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Right side illustration */}
+      <div className="fixed right-8 bottom-8 pointer-events-none z-0">
+        <div className="grid grid-cols-3 gap-2">
+          <img
+            src="/gacha/lanyard-id-card.png"
+            alt="Lanyard"
+            className="w-24 h-24 object-contain"
+          />
+          <img
+            src="/gacha/pin.png"
+            alt="Pin"
+            className="w-24 h-24 object-contain"
+          />
+          <img
+            src="/gacha/sticker.png"
+            alt="Sticker"
+            className="w-24 h-24 object-contain"
+          />
+          <img
+            src="/gacha/certificate.png"
+            alt="Certificate"
+            className="w-24 h-24 object-contain"
+          />
+          <img
+            src="/gacha/gelang-karet.png"
+            alt="Gelang Karet"
+            className="w-24 h-24 object-contain"
+          />
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default Components;

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

@@ -0,0 +1,95 @@
+import { FC, ReactElement } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+export const BackofficeSidebar: FC = (): ReactElement => {
+  const location = useLocation();
+  const isActive = (path: string) => location.pathname.includes(path);
+
+  return (
+    <aside className="w-[280px] bg-white min-h-screen py-[60px] px-[28px] shadow-xl flex flex-col justify-between">
+      <div className="flex flex-col">
+        {/* Logo */}
+        <div className="p-6 flex justify-center">
+          <img
+            src="/logos/simple.svg"
+            alt="IMPHNEN Logo"
+            className="w-[150px]"
+          />
+        </div>
+
+        {/* Navigation Menu */}
+        <nav className="mt-4 flex flex-col gap-2">
+          <Link
+            to="/dashboard"
+            className={`flex items-center gap-2 px-6 py-3 ${
+              isActive('/dashboard')
+                ? 'bg-primary-100 text-primary-500'
+                : 'text-gray-700 hover:bg-gray-100'
+            }`}
+          >
+            <svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+              <rect
+                width="20"
+                height="20"
+                rx="2"
+                fill="currentColor"
+                fillOpacity="0.2"
+              />
+              <path d="M7 9h2v5H7V9zm4-3h2v8h-2V6z" fill="currentColor" />
+            </svg>
+            <span>Dashboard & Set Gacha</span>
+          </Link>
+
+          <Link
+            to="/users"
+            className={`flex items-center gap-2 px-6 py-3 ${
+              isActive('/users')
+                ? 'bg-primary-100 text-primary-500'
+                : 'text-gray-700 hover:bg-gray-100'
+            }`}
+          >
+            <svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+              <path
+                d="M10 10a4 4 0 100-8 4 4 0 000 8zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+                fill="currentColor"
+              />
+            </svg>
+            <span>Data Akun</span>
+          </Link>
+
+          <Link
+            to="/transactions"
+            className={`flex items-center gap-2 px-6 py-3 ${
+              isActive('/transactions')
+                ? 'bg-primary-100 text-primary-500'
+                : 'text-gray-700 hover:bg-gray-100'
+            }`}
+          >
+            <svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+              <path
+                d="M17 4H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 10H3V6h14v8z"
+                fill="currentColor"
+              />
+              <path d="M10 9h4v2h-4V9z" fill="currentColor" />
+            </svg>
+            <span>Validasi Transaksi</span>
+          </Link>
+        </nav>
+      </div>
+
+      {/* Log Out Button */}
+      <div className="mb-6 px-6">
+        <button className="flex items-center gap-2 text-gray-700 hover:text-red-500 transition-colors">
+          <svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+            <path
+              d="M17 4h-4V2h-6v2H3v16h14V4zm-2 14H5V6h10v12z"
+              fill="currentColor"
+            />
+            <path d="M8 9h4v2H8V9z" fill="currentColor" />
+          </svg>
+          <span>Log Out</span>
+        </button>
+      </div>
+    </aside>
+  );
+};

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

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

libs/ui/src/organisms/index.ts

@@ -1,2 +1,3 @@
-export * from './navbar';
+export * from "./navbar";
 export * from "./modals-gacha";
+export * from "./backoffice-sidebar"