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"