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';
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>
<header className="bg-white py-4 px-8 rounded-md shadow p-4">
<h1 className="text-p2 font-semibold">Dashboard</h1>
</header>
{/* 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">
<div className="flex justify-between gap-[40px] p-8 bg-white rounded-md">
<div className="w-full flex flex-col gap-[40px]">
{/* Summary Section */}
<section>
<h2 className="text-p2 font-medium text-primary-500 mb-8">
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 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
className="w-6 h-6"
className="w-4 h-4"
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" />
<path
d="M12 4V20M4 12H20"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
</div>
<div>
<h3 className="text-2xl font-bold">1000</h3>
<p className="text-sm text-gray-500">Total Participants</p>
</div>
</button>
</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>
{/* 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 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>
))}
</section>
</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>
{/* Right-side illustration */}
<img src="gacha.png" alt="" width={436} className="rounded-md" />
</div>
</main>
);