apps/frontend/src/routes/_dashboardLayout/aspect/index.lazy.tsx

@@ -0,0 +1,93 @@
+import { aspectQueryOptions } from "@/modules/aspectManagement/queries/aspectQueries";
+import PageTemplate from "@/components/PageTemplate";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import AspectFormModal from "@/modules/aspectManagement/modals/AspectFormModal";
+import ExtractQueryDataType from "@/types/ExtractQueryDataType";
+import { createColumnHelper } from "@tanstack/react-table";
+import { Flex } from "@mantine/core";
+import createActionButtons from "@/utils/createActionButton";
+import { TbEye, TbPencil, TbTrash } from "react-icons/tb";
+import AspectDeleteModal from "@/modules/aspectManagement/modals/AspectDeleteModal";
+
+export const Route = createLazyFileRoute("/_dashboardLayout/aspect/")({
+    component: AspectPage,
+});
+
+type DataType = ExtractQueryDataType<typeof aspectQueryOptions>;
+
+const columnHelper = createColumnHelper<DataType>();
+
+export default function AspectPage() {
+    return (
+        <PageTemplate
+            title="Manajemen Aspek"
+            queryOptions={aspectQueryOptions}
+            modals={[<AspectFormModal />, <AspectDeleteModal />]}
+            columnDefs={[
+                // Number of columns
+                columnHelper.display({
+                    header: "#",
+                    cell: (props) => props.row.index + 1,
+                }),
+
+                // Aspect columns
+                columnHelper.display({
+                    header: "Nama Aspek",
+                    cell: (props) => props.row.original.name || "Tidak ada Aspek",
+                }),
+
+                // Sub aspect columns
+                columnHelper.display({
+                    header: "Sub Aspek",
+                    cell: (props) => {
+                        const subAspects = props.row.original.subAspects || [];
+                        return subAspects.length > 0 ? (
+                            <span>
+                                {subAspects.map((subAspect, index) => (
+                                    <span key={subAspect.id}>
+                                        {subAspect.name}
+                                        {index < subAspects.length - 1 ? ", " : ""}
+                                    </span>
+                                ))}
+                            </span>
+                        ) : (
+                            <span>Tidak ada Sub Aspek</span>
+                        );
+                    },
+                }),
+
+                // Actions columns
+                columnHelper.display({
+                    header: "Aksi",
+                    cell: (props) => (
+                        <Flex gap="xs">
+                            {createActionButtons([
+                                {
+                                    label: "Detail",
+                                    permission: true,
+                                    action: `?detail=${props.row.original.id}`,
+                                    color: "green",
+                                    icon: <TbEye />,
+                                },
+                                {
+                                    label: "Edit",
+                                    permission: true,
+                                    action: `?edit=${props.row.original.id}`,
+                                    color: "orange",
+                                    icon: <TbPencil />,
+                                },
+                                {
+                                    label: "Hapus",
+                                    permission: true,
+                                    action: `?delete=${props.row.original.id}`,
+                                    color: "red",
+                                    icon: <TbTrash />,
+                                },
+                            ])}
+                        </Flex>
+                    ),
+                }),
+            ]}
+        />
+    );
+}

apps/frontend/src/routes/_dashboardLayout/aspect/index.tsx

@@ -0,0 +1,18 @@
+import { aspectQueryOptions } from "@/modules/aspectManagement/queries/aspectQueries";
+import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod";
+
+const searchParamSchema = z.object({
+	create: z.boolean().default(false).optional(),
+	edit: z.string().default("").optional(),
+	delete: z.string().default("").optional(),
+	detail: z.string().default("").optional(),
+});
+
+export const Route = createFileRoute("/_dashboardLayout/aspect/")({
+	validateSearch: searchParamSchema,
+
+	loader: ({ context: { queryClient } }) => {
+		queryClient.ensureQueryData(aspectQueryOptions(0, 10));
+	},
+});