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
+28 -52
View File
@@ -1,48 +1,50 @@
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>
<div className="flex justify-between gap-[40px] p-8 bg-white rounded-md">
<div className="w-full flex flex-col gap-[40px]">
{/* Summary Section */} {/* Summary Section */}
<div className="flex flex-col gap-4"> <section>
<h2 className="text-lg font-medium">Summary</h2> <h2 className="text-p2 font-medium text-primary-500 mb-8">
Summary
</h2>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
{/* Summary Cards */} {/* Summary Cards */}
{[1, 2, 3, 4].map((item) => ( {[1, 2, 3, 4].map((item) => (
<div <div
key={item} key={item}
className="bg-white rounded-md shadow p-4 flex items-center" className="bg-white rounded-md shadow py-3 px-6 flex items-center"
> >
<div className="mr-4 text-primary-500"> <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded border border-neutral-100">
<svg <ArrowDownOutlined className="text-[20px]" />
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>
<div> <div className="flex flex-col gap-1">
<h3 className="text-2xl font-bold">1000</h3> <h3 className="text-p1 font-semibold">1000</h3>
<p className="text-sm text-gray-500">Total Participants</p> <p className="text-label1 text-neutral-500">
Total Participants
</p>
</div> </div>
</div> </div>
))} ))}
</div> </div>
</div> </section>
{/* Gacha Items Section */} {/* Gacha Items Section */}
<div className="flex flex-col gap-4"> <section className="flex flex-col gap-4">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<h2 className="text-lg font-medium">Gacha Items</h2> <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"> <button className="bg-primary-500 text-white px-4 py-2 rounded-md flex items-center gap-2">
<span>Tambah Item</span> <span>Tambah Item</span>
<svg <svg
@@ -94,37 +96,11 @@ export const Components: FC = (): ReactElement => {
</div> </div>
))} ))}
</div> </div>
</section>
</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>
); );