feat(backoffice): create a boilerplate page for Hackathon dashboard
- Create an empty page for Hackathon dashboard - Comment out and hide the existing backoffice sidebar
This commit is contained in:
@@ -0,0 +1,17 @@
|
|||||||
|
import { FC, ReactElement } from 'react';
|
||||||
|
|
||||||
|
export const HackathonDashboardPage: FC = (): ReactElement => {
|
||||||
|
return (
|
||||||
|
<main className="w-full px-12 py-10 flex flex-col gap-8">
|
||||||
|
<header className="bg-white py-4 px-8 rounded-lg shadow p-4">
|
||||||
|
<h1 className="text-p2 font-semibold">Hackathon Dashboard</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section className="bg-white rounded-lg shadow-sm p-8 border border-neutral-100">
|
||||||
|
<p className="text-label1 text-neutral-600">Boilerplate page for hackathon dashboard. Add KPIs and actions here.</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HackathonDashboardPage;
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
import { FC, ReactElement } from 'react';
|
||||||
|
|
||||||
|
export const HackathonSubmissionsPage: FC = (): ReactElement => {
|
||||||
|
return (
|
||||||
|
<main className="w-full px-12 py-10 flex flex-col gap-8">
|
||||||
|
<header className="bg-white py-4 px-8 rounded-lg shadow p-4">
|
||||||
|
<h1 className="text-p2 font-semibold">Hackathon Submissions</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section className="bg-white rounded-lg shadow-sm p-8 border border-neutral-100">
|
||||||
|
<p className="text-label1 text-neutral-600">Boilerplate page for managing submissions. Add table, filters, and review workspace here.</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HackathonSubmissionsPage;
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
import { FC, ReactElement } from 'react';
|
||||||
|
|
||||||
|
export const HackathonTeamsPage: FC = (): ReactElement => {
|
||||||
|
return (
|
||||||
|
<main className="w-full px-12 py-10 flex flex-col gap-8">
|
||||||
|
<header className="bg-white py-4 px-8 rounded-lg shadow p-4">
|
||||||
|
<h1 className="text-p2 font-semibold">Hackathon Teams</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section className="bg-white rounded-lg shadow-sm p-8 border border-neutral-100">
|
||||||
|
<p className="text-label1 text-neutral-600">Boilerplate page for managing teams. Add table, filters, and forms here.</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HackathonTeamsPage;
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
import { FC, ReactElement } from 'react';
|
||||||
|
|
||||||
|
export const HackathonUsersPage: FC = (): ReactElement => {
|
||||||
|
return (
|
||||||
|
<main className="w-full px-12 py-10 flex flex-col gap-8">
|
||||||
|
<header className="bg-white py-4 px-8 rounded-lg shadow p-4">
|
||||||
|
<h1 className="text-p2 font-semibold">Hackathon Users</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section className="bg-white rounded-lg shadow-sm p-8 border border-neutral-100">
|
||||||
|
<p className="text-label1 text-neutral-600">Boilerplate page for managing users. Add table, filters, and forms here.</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HackathonUsersPage;
|
||||||
@@ -88,7 +88,7 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!session) return redirect('/auth/login');
|
// if (!session) return redirect('/auth/login');
|
||||||
|
|
||||||
const matchedRoute = mappingRoutePermissions.find(
|
const matchedRoute = mappingRoutePermissions.find(
|
||||||
(route) => route.path === pathname
|
(route) => route.path === pathname
|
||||||
|
|||||||
@@ -18,27 +18,52 @@ import { Link, useLocation } from 'react-router-dom';
|
|||||||
import { cn, For, useSession } from '@imphnen-frontend-service/utils';
|
import { cn, For, useSession } from '@imphnen-frontend-service/utils';
|
||||||
|
|
||||||
const MENUS = [
|
const MENUS = [
|
||||||
{ label: 'Dashboard & Set Gacha', href: '/dashboard', icon: <AppstoreOutlined className="text-[20px]" /> },
|
{
|
||||||
{ label: 'Dashboard - Dimentorin', href: '/dashboard-dimentorin', icon: <AppstoreOutlined className="text-[20px]" /> },
|
label: 'Dashboard & Set Gacha',
|
||||||
{ label: 'Gacha Roll', href: '/gacha-roll', icon: <ReloadOutlined className="text-[20px]" /> },
|
href: '/dashboard',
|
||||||
{ label: 'Permissions', href: '/permissions', icon: <UserSwitchOutlined className="text-[20px]" /> },
|
icon: <AppstoreOutlined className="text-[20px]" />,
|
||||||
{ label: 'Roles', href: '/roles', icon: <UsergroupAddOutlined className="text-[20px]" /> },
|
},
|
||||||
{ label: 'Data Akun', href: '/accounts', icon: <UserOutlined className="text-[20px]" /> },
|
{
|
||||||
{ label: 'Validasi Transaksi', href: '/transactions', icon: <AuditOutlined className="text-[20px]" /> },
|
label: 'Hackathon Dashboard',
|
||||||
{ label: 'Data Pengiriman Hadiah', href: '/prizes', icon: <InboxOutlined className="text-[20px]" /> },
|
href: '/hackathon-dashboard',
|
||||||
{ label: 'User - Dimentorin', href: '/users-dimentorin', icon: <UserSwitchOutlined className="text-[20px]" /> },
|
icon: <AppstoreOutlined className="text-p3" />,
|
||||||
{ label: 'Session - Dimentorin', href: '/session-dimentorin', icon: <ScheduleOutlined className="text-[20px]" /> },
|
},
|
||||||
{ label: 'Content & Roadmap', href: '/roadmap-dimentorin', icon: <BookOutlined className="text-[20px]" /> },
|
{
|
||||||
{ label: 'Feedback & Review', href: '/feedback-review-dimentorin', icon: <CommentOutlined className="text-[20px]" /> },
|
label: 'Hackathon Users',
|
||||||
{ label: 'Settings - Dimentorin', href: '/settings-dimentorin', icon: <SettingOutlined className="text-[20px]" /> },
|
href: '/hackathon-users',
|
||||||
]
|
icon: <UserOutlined className="text-p3" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Hackathon Teams',
|
||||||
|
href: '/hackathon-teams',
|
||||||
|
icon: <UsergroupAddOutlined className="text-p3" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Hackathon Submissions',
|
||||||
|
href: '/hackathon-submissions',
|
||||||
|
icon: <AuditOutlined className="text-p3" />,
|
||||||
|
},
|
||||||
|
// { label: 'Dashboard - Dimentorin', href: '/dashboard-dimentorin', icon: <AppstoreOutlined className="text-[20px]" /> },
|
||||||
|
// { label: 'Gacha Roll', href: '/gacha-roll', icon: <ReloadOutlined className="text-[20px]" /> },
|
||||||
|
// { label: 'Permissions', href: '/permissions', icon: <UserSwitchOutlined className="text-[20px]" /> },
|
||||||
|
// { label: 'Roles', href: '/roles', icon: <UsergroupAddOutlined className="text-[20px]" /> },
|
||||||
|
// { label: 'Data Akun', href: '/accounts', icon: <UserOutlined className="text-[20px]" /> },
|
||||||
|
// { label: 'Validasi Transaksi', href: '/transactions', icon: <AuditOutlined className="text-[20px]" /> },
|
||||||
|
// { label: 'Data Pengiriman Hadiah', href: '/prizes', icon: <InboxOutlined className="text-[20px]" /> },
|
||||||
|
// { label: 'User - Dimentorin', href: '/users-dimentorin', icon: <UserSwitchOutlined className="text-[20px]" /> },
|
||||||
|
// { label: 'Session - Dimentorin', href: '/session-dimentorin', icon: <ScheduleOutlined className="text-[20px]" /> },
|
||||||
|
// { label: 'Content & Roadmap', href: '/roadmap-dimentorin', icon: <BookOutlined className="text-[20px]" /> },
|
||||||
|
// { label: 'Feedback & Review', href: '/feedback-review-dimentorin', icon: <CommentOutlined className="text-[20px]" /> },
|
||||||
|
// { label: 'Settings - Dimentorin', href: '/settings-dimentorin', icon: <SettingOutlined className="text-[20px]" /> },
|
||||||
|
];
|
||||||
|
|
||||||
export const BackofficeSidebar: FC = (): ReactElement => {
|
export const BackofficeSidebar: FC = (): ReactElement => {
|
||||||
const { signOut } = useSession();
|
const { signOut } = useSession();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const isActive = (path: string) => {
|
const isActive = (path: string) => {
|
||||||
if (path === '/dashboard' && location.pathname === '/dashboard-dimentorin') return false
|
if (path === '/dashboard' && location.pathname === '/dashboard-dimentorin')
|
||||||
return location.pathname.includes(path)
|
return false;
|
||||||
|
return location.pathname.includes(path);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -53,8 +78,10 @@ export const BackofficeSidebar: FC = (): ReactElement => {
|
|||||||
key={href}
|
key={href}
|
||||||
to={href}
|
to={href}
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex items-center justify-items-start gap-3 px-[8px] py-[10px]",
|
'flex items-center justify-items-start gap-3 px-[8px] py-[10px]',
|
||||||
isActive(href) ? "bg-primary-500 text-white rounded-md" : "text-gray-700 hover:bg-gray-100"
|
isActive(href)
|
||||||
|
? 'bg-primary-500 text-white rounded-md'
|
||||||
|
: 'text-gray-700 hover:bg-gray-100'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{icon}
|
{icon}
|
||||||
|
|||||||
Reference in New Issue
Block a user