MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: summary section in dashboard page

Browse Source
This commit is contained in:
Hafid Nur
2025-03-27 13:35:13 +07:00
parent 82fb1ea2bc
commit 31b7587571
2 changed files with 83 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/backoffice/public/gacha.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

apps/backoffice/src/app/dashboard/page.tsx
+83 -107
View File
@@ -1,130 +1,106 @@
import { ArrowDownOutlined } from '@ant-design/icons';
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { FC, ReactElement } from 'react'; import { FC, ReactElement } from 'react';
export const Components: FC = (): ReactElement => { export const Components: FC = (): ReactElement => {
return ( return (
<main className="w-full px-[48px] py-[40px] flex flex-col gap-8"> <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
{/* Dashboard Header */} {/* Dashboard Header */}
<div className="bg-white rounded-md shadow p-4"> <header className="bg-white py-4 px-8 rounded-md shadow p-4">
<h1 className="text-xl font-medium">Dashboard</h1> <h1 className="text-p2 font-semibold">Dashboard</h1>
</div> </header>
{/* Summary Section */} <div className="flex justify-between gap-[40px] p-8 bg-white rounded-md">
<div className="flex flex-col gap-4"> <div className="w-full flex flex-col gap-[40px]">
<h2 className="text-lg font-medium">Summary</h2> {/* Summary Section */}
<div className="grid grid-cols-2 gap-4"> <section>
{/* Summary Cards */} <h2 className="text-p2 font-medium text-primary-500 mb-8">
{[1, 2, 3, 4].map((item) => ( Summary
<div </h2>
key={item} <div className="grid grid-cols-2 gap-4">
className="bg-white rounded-md shadow p-4 flex items-center" {/* Summary Cards */}
> {[1, 2, 3, 4].map((item) => (
<div className="mr-4 text-primary-500"> <div
key={item}
className="bg-white rounded-md shadow py-3 px-6 flex items-center"
>
<div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded border border-neutral-100">
<ArrowDownOutlined 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">
Total Participants
</p>
</div>
</div>
))}
</div>
</section>
{/* Gacha Items Section */}
<section className="flex flex-col gap-4">
<div className="flex justify-between items-center">
<h2 className="text-p2 font-medium text-primary-500">
Gacha Items
</h2>
<Button variant="primary"></Button>
<button className="bg-primary-500 text-white px-4 py-2 rounded-md flex items-center gap-2">
<span>Tambah Item</span>
<svg <svg
className="w-6 h-6" className="w-4 h-4"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path d="M12 4L4 8L12 12L20 8L12 4Z" fill="currentColor" /> <path
<path d="M4 12L12 16L20 12" fill="currentColor" /> d="M12 4V20M4 12H20"
<path d="M4 16L12 20L20 16" fill="currentColor" /> stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
</svg> </svg>
</div> </button>
<div>
<h3 className="text-2xl font-bold">1000</h3>
<p className="text-sm text-gray-500">Total Participants</p>
</div>
</div> </div>
))}
</div>
</div>
{/* Gacha Items Section */} {/* Gacha Items List */}
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex justify-between items-center"> {[1, 2, 3, 4].map((item) => (
<h2 className="text-lg font-medium">Gacha Items</h2> <div
<button className="bg-primary-500 text-white px-4 py-2 rounded-md flex items-center gap-2"> key={item}
<span>Tambah Item</span> className="bg-white rounded-md shadow p-4 flex justify-between items-center"
<svg >
className="w-4 h-4" <div className="flex items-center gap-4">
viewBox="0 0 24 24" <img
fill="none" src="/gacha/lanyard-id-card.png"
xmlns="http://www.w3.org/2000/svg" alt="Lanyard IMPHNEN"
> className="w-20 h-20 object-contain"
<path />
d="M12 4V20M4 12H20" <div>
stroke="currentColor" <h3 className="font-medium">Lanyard IMPHNEN</h3>
strokeWidth="2" <div className="flex items-center gap-2 text-sm text-gray-500">
strokeLinecap="round" <span>Prize {item}</span>
/> <span>•</span>
</svg> <span>Chance Rate: (1%)</span>
</button> </div>
</div> </div>
</div>
{/* Gacha Items List */} <div className="flex gap-2">
<div className="flex flex-col gap-4"> <button className="text-gray-500 hover:text-primary-500">
{[1, 2, 3, 4].map((item) => ( Edit
<div </button>
key={item} <button className="text-gray-500 hover:text-red-500">
className="bg-white rounded-md shadow p-4 flex justify-between items-center" Delete
> </button>
<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>
</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>
))} </section>
</div> </div>
</div>
{/* Right side illustration */} {/* Right-side illustration */}
<div className="fixed right-8 bottom-8 pointer-events-none z-0"> <img src="gacha.png" alt="" width={436} className="rounded-md" />
<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> </div>
</main> </main>
); );