-
diff --git a/apps/backoffice/src/app/(protected)/roadmap-dimentorin/_components/modal/create-roadmap/index.tsx b/apps/backoffice/src/app/(protected)/roadmap-dimentorin/_components/modal/create-roadmap/index.tsx
new file mode 100644
index 0000000..0c4e3f1
--- /dev/null
+++ b/apps/backoffice/src/app/(protected)/roadmap-dimentorin/_components/modal/create-roadmap/index.tsx
@@ -0,0 +1,85 @@
+import { ArrowRightOutlined } from "@ant-design/icons";
+import { Button, Input, Select, Textarea } from "@imphnen-frontend-service/ui/atoms";
+import { Accordion, Modal, ModalProps } from "@imphnen-frontend-service/ui/molecules";
+import { cn, For } from "@imphnen-frontend-service/utils";
+import { FC } from "react";
+
+const labelClass = cn('text-neutral-800 text-[10px] font-medium mb-1.5 inline-block md:text-xs md:mb-2 xl:text-p3')
+
+export const ModalCreateRoadmap: FC
> = ({ isOpen, onClose }) => {
+ return (
+
+
+
+ Create Roadmaps
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Roadmap Preview
+
+
+
+ {(_, index) => (
+
+ )}
+
+
+
+
+
+
+ {statusText[status]}
+
+ );
+ },
+ },
+ {
+ header: 'Action',
+ meta: { cellClassName: cn("w-72") },
+ cell: ({ row }) => (
+
+
+
+
+ ),
+ },
+ ]
+
+ const table = useReactTable({
+ data: mockData,
+ columns,
+ state: {
+ pagination,
+ rowSelection,
+ },
+ enableRowSelection: true,
+ onRowSelectionChange: setRowSelection,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ onPaginationChange: setPagination,
+ pageCount: Math.ceil(mockData.length / pagination.pageSize),
+ manualPagination: false,
+ });
+
+ return (
+
+ Content & Roadmap
+
+
+
+
AI Roadmaps
+
+
+
+
+
+
+ Detail Sesi
+
+
+
+
+
+
Mentor
+
+
Muhammad Firdaus Oi Oi Oi, S.H., M.H.
+
UI Designer at Oray orayan Studios
+
+
+
+
+
+
+
+
Mentee
+
+
Muhammad Firdaus Oi Oi Oi, S.H., M.H.
+
UI Designer at Oray orayan Studios
+
+
+
+
Status
+
+ Finished
+
+
+
+
+
+
+
Topics
+
+
+ {(item, index) => (
+
+ {item.icon}
+ {item.name}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {statusText[status]}
+
+ );
+ },
+ },
+ {
+ header: 'Action',
+ meta: { cellClassName: cn("w-52") },
+ cell: ({ row }) => (
+
+ ),
+ },
+ ]
+
+ const table = useReactTable({
+ data: mockData,
+ columns,
+ state: {
+ pagination,
+ rowSelection,
+ },
+ enableRowSelection: true,
+ onRowSelectionChange: setRowSelection,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ onPaginationChange: setPagination,
+ pageCount: Math.ceil(mockData.length / pagination.pageSize),
+ manualPagination: false,
+ });
+
+ return (
+
+ Session Management
+
+
+
+
+
+
+
+
General Settings
+
+
+
+
+
Platform Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Legal Settings
+
+
+
+
+
+
+
+
+
Notification Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Payment
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Invoice
+
+
+
+
+
+
+
+
+
+
+
Security Settings
+
+
+
+
+
+
Auto logout setelah X menit tidak aktif
+
+
+
+
+
Misal: 5 kali salah login = lock akun
+
+
+
+
+
+
+
+
+
+
+
+ ),
+ },
+ ]
+
+ const table = useReactTable({
+ data: mockData,
+ columns,
+ state: {
+ pagination,
+ rowSelection,
+ },
+ enableRowSelection: true,
+ onRowSelectionChange: setRowSelection,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ onPaginationChange: setPagination,
+ pageCount: Math.ceil(mockData.length / pagination.pageSize),
+ manualPagination: false,
+ });
+
+ return (
+
+
+
User Roles & Permissions
+
+
+
+
+
+
+
Settings
+
+
+
+
+ {(tab) => (
+
+ )}
+
+
+
+ {activeTab === TABS.general &&
}
+ {activeTab === TABS.userRolePermissions &&
}
+ {activeTab === TABS.notification &&
}
+ {activeTab === TABS.security &&
}
+ {activeTab === TABS.payment &&
}
+
+
+
+
+ Hapus Akun
+
+
+ Apakah kamu yakin untuk menghapus akun ini?
+
+
+
+
+
+
+
+
+
+ Setidaknya rekomendasi ukuran 240x240 px.
+ .jpg, .jpeg, .png diperbolehkan
+
+
+
+
+
+
+
+
+
Status Akun
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Muhammad Firdaus Oiwobo
+
Mentor
+
+
+
+
+
+
+
+
+
+
+
+
Description
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.
+
+
+
+
Personal Informations
+
+
+
+
+
+
+
rzalaxib23@gmail.com
+
Email Address
+
+
+
+
+
+
+
+
+62 888 8888 8888
+
Phone Number
+
+
+
+
+
+
+
+
Jl. Mergosari, Kec. Suryakencana, Banjaran
+
Location
+
+
+
+
+
+
+
+ Detail - Muhammad Firdaus Oiwobo
+
+
+
+
+ {(tab) => (
+
+ )}
+
+
+
+
+
+
+ Suspend/Ban
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {statusText[status]}
+
+ );
+ },
+ },
+ {
+ header: 'Action',
+ meta: { cellClassName: cn("w-72") },
+ cell: ({ row }) => (
+
+ ),
+ },
+ ]
+
+ const table = useReactTable({
+ data: mockData,
+ columns,
+ state: {
+ pagination,
+ rowSelection,
+ },
+ enableRowSelection: true,
+ onRowSelectionChange: setRowSelection,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ onPaginationChange: setPagination,
+ pageCount: Math.ceil(mockData.length / pagination.pageSize),
+ manualPagination: false,
+ });
+
+ return (
+
+
+
User Management
+
+
+ {(tab) => (
+
+ )}
+
+
+
+
+
+
+