From 23ac20c0176a332b13bf9c2c62d261a0ac82c29d Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Sun, 23 Feb 2025 10:22:51 +0800
Subject: [PATCH] feat: implement admin dashboard layout and update
 authentication flow

---
 app/layouts/admin/dashboard.tsx               | 14 ++++++++++++++
 app/routes/_layout.admin.auth.login.tsx       | 12 +++++++-----
 app/routes/_layout.admin.dashboard._index.tsx | 10 ++++++++++
 app/routes/_layout.admin.dashboard.tsx        | 12 +++++++-----
 4 files changed, 38 insertions(+), 10 deletions(-)
 create mode 100644 app/layouts/admin/dashboard.tsx
 create mode 100644 app/routes/_layout.admin.dashboard._index.tsx

diff --git a/app/layouts/admin/dashboard.tsx b/app/layouts/admin/dashboard.tsx
new file mode 100644
index 0000000..d56830c
--- /dev/null
+++ b/app/layouts/admin/dashboard.tsx
@@ -0,0 +1,14 @@
+import type { PropsWithChildren } from 'react'
+
+export const AdminDashboardLayout = (properties: PropsWithChildren) => {
+  const { children } = properties
+  return (
+    <div className="grid">
+      <div>Navbar</div>
+      <div className="flex">
+        <div>Sidebar</div>
+        <div>{children}</div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/routes/_layout.admin.auth.login.tsx b/app/routes/_layout.admin.auth.login.tsx
index 2726d17..dd5b951 100644
--- a/app/routes/_layout.admin.auth.login.tsx
+++ b/app/routes/_layout.admin.auth.login.tsx
@@ -12,11 +12,13 @@ const AuthLayout = () => {
     <div className="flex min-h-dvh min-w-dvw flex-col items-center justify-center space-y-8">
       <div className="grid max-w-lg items-center justify-center space-y-7 rounded-[20px] border border-[#E6E6E6] bg-white p-8">
         <div className="flex flex-col items-center">
-          <img
-            src={APP.logo}
-            alt={APP.title}
-            className="h-[80px]"
-          />
+          <Link to="/admin/dashboard">
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-[80px]"
+            />
+          </Link>
         </div>
         <p className="text-center">
           Selamat Datang, silakan masukkan akun Anda untuk melanjutkan!
diff --git a/app/routes/_layout.admin.dashboard._index.tsx b/app/routes/_layout.admin.dashboard._index.tsx
new file mode 100644
index 0000000..2709cd2
--- /dev/null
+++ b/app/routes/_layout.admin.dashboard._index.tsx
@@ -0,0 +1,10 @@
+const DashboardIndexLayout = () => {
+  return (
+    <div className="relative">
+      <div className="flex min-h-screen items-center justify-center bg-gray-100">
+        Dashboard Page
+      </div>
+    </div>
+  )
+}
+export default DashboardIndexLayout
diff --git a/app/routes/_layout.admin.dashboard.tsx b/app/routes/_layout.admin.dashboard.tsx
index d71ad97..20e8b85 100644
--- a/app/routes/_layout.admin.dashboard.tsx
+++ b/app/routes/_layout.admin.dashboard.tsx
@@ -1,10 +1,12 @@
+import { Outlet } from 'react-router'
+
+import { AdminDashboardLayout } from '~/layouts/admin/dashboard'
+
 const DashboardLayout = () => {
   return (
-    <div className="relative">
-      <div className="flex min-h-screen items-center justify-center bg-gray-100">
-        Login form
-      </div>
-    </div>
+    <AdminDashboardLayout>
+      <Outlet />
+    </AdminDashboardLayout>
   )
 }
 export default DashboardLayout