Feat/backoffice dimentorin (#53)

* feat(backoffice): slicing backoffice dimentorin * feat(backoffice): slicing backoffice dimentorin - user management * feat(backoffice): slicing backoffice dimentorin - modal detail user management * feat(backoffice): slicing backoffice dimentorin - session management * feat(backoffice): slicing backoffice dimentorin - modal detail session * feat(backoffice): slicing backoffice dimentorin - modal detail session * feat(backoffice): slicing backoffice dimentorin - setting page * feat(backoffice): slicing backoffice dimentorin - content & roadmap * feat(backoffice): slicing backoffice dimentorin - feedback & review
2025-08-20 21:58:28 +07:00
parent 3c301ec2c4
commit b38afd2b44
37 changed files with 2422 additions and 95 deletions
@@ -0,0 +1,51 @@
+import { cn } from "@imphnen-frontend-service/utils"
+import { Icon } from '@iconify/react'
+import { FC, ReactElement, ReactNode } from "react"
+import { Button } from "../../atoms"
+
+export type TBackofficeWrapperProps = {
+  children: ReactNode
+  title?: string
+  className?: string
+  classHeader?: string
+  classTitle?: string
+}
+
+export const BackofficeWrapper: FC<TBackofficeWrapperProps> = ({
+  children,
+  title,
+  className,
+  classHeader,
+  classTitle,
+}): ReactElement => {
+  return (
+    <main className={cn("w-full px-[48px] py-[40px] flex flex-col gap-8", className)}>
+      <header className={cn("bg-white py-5 px-7 rounded-md shadow flex items-center justify-between", classHeader)}>
+        <h1 className={cn("text-[19px] text-primary-500 font-semibold", classTitle)}>{title}</h1>
+
+        <div className="flex items-center gap-x-6">
+          <Button
+            type="button"
+            variant="secondary"
+            className="max-h-full p-3"
+          >
+            <Icon icon="mdi:bell-outline" className="size-6" />
+          </Button>
+          <div className="flex items-center gap-x-6">
+            <div className="text-neutral-600 font-medium">
+              <p className="text-p3">Rizal Syaepulloh</p>
+              <p className="text-label1">Super Admin</p>
+            </div>
+            <div className="size-12 rounded-full overflow-hidden">
+              <img src="/images/asd687hwq6nds4dfjj2983.webp" alt="Profile" className="size-full object-cover" />
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <section>
+        {children}
+      </section>
+    </main>
+  )
+}