From bd5e46e712f26e4b1d074eb6a9fc6a288e00ea6d Mon Sep 17 00:00:00 2001 From: Hafid Nur Date: Thu, 27 Mar 2025 07:46:15 +0700 Subject: [PATCH] feat: Draft dashboard AI-generated --- apps/backoffice/public/logos/simple.svg | 9 ++ apps/backoffice/src/app/dashboard/layout.tsx | 18 +++ apps/backoffice/src/app/dashboard/page.tsx | 133 ++++++++++++++++++ .../backoffice-sidebar/backoffice-sidebar.tsx | 95 +++++++++++++ .../src/organisms/backoffice-sidebar/index.ts | 1 + libs/ui/src/organisms/index.ts | 3 +- 6 files changed, 258 insertions(+), 1 deletion(-) create mode 100644 apps/backoffice/public/logos/simple.svg create mode 100644 apps/backoffice/src/app/dashboard/layout.tsx create mode 100644 apps/backoffice/src/app/dashboard/page.tsx create mode 100644 libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx create mode 100644 libs/ui/src/organisms/backoffice-sidebar/index.ts diff --git a/apps/backoffice/public/logos/simple.svg b/apps/backoffice/public/logos/simple.svg new file mode 100644 index 0000000..0fd70f3 --- /dev/null +++ b/apps/backoffice/public/logos/simple.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/apps/backoffice/src/app/dashboard/layout.tsx b/apps/backoffice/src/app/dashboard/layout.tsx new file mode 100644 index 0000000..0f4db25 --- /dev/null +++ b/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 ( +
+
+ +
+ +
+
+
+ ); +}; + +export default AppLayout; diff --git a/apps/backoffice/src/app/dashboard/page.tsx b/apps/backoffice/src/app/dashboard/page.tsx new file mode 100644 index 0000000..21b343c --- /dev/null +++ b/apps/backoffice/src/app/dashboard/page.tsx @@ -0,0 +1,133 @@ +import { FC, ReactElement } from 'react'; + +export const Components: FC = (): ReactElement => { + return ( +
+ {/* Dashboard Header */} +
+

Dashboard

+
+ + {/* Summary Section */} +
+

Summary

+
+ {/* Summary Cards */} + {[1, 2, 3, 4].map((item) => ( +
+
+ + + + + +
+
+

1000

+

Total Participants

+
+
+ ))} +
+
+ + {/* Gacha Items Section */} +
+
+

Gacha Items

+ +
+ + {/* Gacha Items List */} +
+ {[1, 2, 3, 4].map((item) => ( +
+
+ Lanyard IMPHNEN +
+

Lanyard IMPHNEN

+
+ Prize {item} + • + Chance Rate: (1%) +
+
+
+
+ + +
+
+ ))} +
+
+ + {/* Right side illustration */} +
+
+ Lanyard + Pin + Sticker + Certificate + Gelang Karet +
+
+
+ ); +}; + +export default Components; diff --git a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx new file mode 100644 index 0000000..bd2e665 --- /dev/null +++ b/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 ( + + ); +}; diff --git a/libs/ui/src/organisms/backoffice-sidebar/index.ts b/libs/ui/src/organisms/backoffice-sidebar/index.ts new file mode 100644 index 0000000..cc302f9 --- /dev/null +++ b/libs/ui/src/organisms/backoffice-sidebar/index.ts @@ -0,0 +1 @@ +export * from './backoffice-sidebar' diff --git a/libs/ui/src/organisms/index.ts b/libs/ui/src/organisms/index.ts index 1665ad1..541cfeb 100644 --- a/libs/ui/src/organisms/index.ts +++ b/libs/ui/src/organisms/index.ts @@ -1,2 +1,3 @@ -export * from './navbar'; +export * from "./navbar"; export * from "./modals-gacha"; +export * from "./backoffice-sidebar"