feat: add admin and dashboard layouts with context for improved structure and functionality

app/routes/_layout.admin.auth.login.tsx

@@ -0,0 +1,106 @@
+import { useState } from 'react'
+import { Link } from 'react-router'
+
+import { EyeIcon } from '~/components/icons/eye'
+import { Button } from '~/components/ui/button'
+import { APP } from '~/data/meta'
+
+const AuthLayout = () => {
+  const [showPassword, setShowPassword] = useState(false)
+
+  return (
+    <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]"
+          />
+        </div>
+        <p className="text-center">
+          Selamat Datang, silakan masukkan akun Anda untuk melanjutkan!
+        </p>
+        <div>
+          <form>
+            {/* Input Email / No Telepon */}
+            <div className="mb-4">
+              <label
+                htmlFor="email"
+                className="mb-1 block text-gray-700"
+              >
+                Email/No. Telepon
+              </label>
+              <input
+                type="text"
+                placeholder="Contoh: legal@legalgo.id"
+                className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
+              />
+            </div>
+
+            {/* Input Password */}
+            <div className="relative mb-4">
+              <label
+                htmlFor="password"
+                className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
+              >
+                Kata Sandi
+              </label>
+              <input
+                type={showPassword ? 'text' : 'password'}
+                placeholder="Masukkan Kata Sandi"
+                className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
+              />
+              <button
+                type="button"
+                className="absolute top-9 right-3 text-gray-500"
+                onClick={() => setShowPassword(!showPassword)}
+              >
+                {showPassword ? (
+                  <EyeIcon
+                    width={15}
+                    height={15}
+                  />
+                ) : (
+                  <EyeIcon
+                    width={15}
+                    height={15}
+                  />
+                )}
+              </button>
+            </div>
+
+            {/* Lupa Kata Sandi */}
+            <div className="mb-4 flex justify-between">
+              <span className="text-gray-600">Lupa Kata Sandi?</span>
+              <Link
+                to="/admin/auth/reset-password"
+                className="font-semibold text-[#2E2F7C]"
+              >
+                Reset Kata Sandi
+              </Link>
+            </div>
+
+            {/* Tombol Masuk */}
+            <Button className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+              Masuk
+            </Button>
+          </form>
+        </div>
+      </div>
+      {/* Link Daftar */}
+      <div className="mt-4 text-center text-sm">
+        Belum punya akun?{' '}
+        <Button
+          onClick={() => {}}
+          className="font-semibold text-[#2E2F7C]"
+          variant="link"
+          size="fit"
+        >
+          Daftar Disini
+        </Button>
+      </div>
+    </div>
+  )
+}
+export default AuthLayout

app/routes/_layout.admin.dashboard.tsx

@@ -1,4 +1,4 @@
-const AuthLayout = () => {
+const DashboardLayout = () => {
   return (
     <div className="relative">
       <div className="flex min-h-screen items-center justify-center bg-gray-100">
@@ -7,4 +7,4 @@ const AuthLayout = () => {
     </div>
   )
 }
-export default AuthLayout
+export default DashboardLayout

app/routes/_layout.admin.tsx

@@ -0,0 +1,16 @@
+import { Outlet } from 'react-router'
+
+import { AdminProvider } from '~/contexts/admin'
+import { AdminDefaultLayout } from '~/layouts/admin/default'
+
+const AdminLayout = () => {
+  return (
+    <AdminProvider>
+      <AdminDefaultLayout>
+        <Outlet />
+      </AdminDefaultLayout>
+    </AdminProvider>
+  )
+}
+
+export default AdminLayout

app/routes/_layout.dashboard.tsx

@@ -1,5 +0,0 @@
-const DashboardLayout = () => {
-  return <div>Dashboard</div>
-}
-
-export default DashboardLayout