feat: Draft dashboard AI-generated
This commit is contained in:
Hafid Nur
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 511 KiB |
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export * from './backoffice-sidebar'
|
||||
@@ -1,2 +1,3 @@
|
||||
export * from './navbar';
|
||||
export * from "./navbar";
|
||||
export * from "./modals-gacha";
|
||||
export * from "./backoffice-sidebar"
|
||||
|
||||
Reference in New Issue
Block a user