@ocelescope/management 0.6.0 → 0.8.0

package/dist/index.js

@@ -1,11 +1,12 @@
 import { FullScreenUpload, UploadSection, defineModule, defineModuleRoute, useDownloadFlatOCEL, useDownloadOCEL, useDownloadResource, useDownloadResourceAsPnml, useInvalidate } from "@ocelescope/core";
-import { ActionIcon, Badge, Button, Container, Group, Loader, Menu, MenuItem, Modal, Select, Stack, TextInput, Title, Tooltip } from "@mantine/core";
+import { ActionIcon, Badge, Button, Container, Group, Loader, Menu, MenuItem, Modal, MultiSelect, Select, Stack, TextInput, Title, Tooltip } from "@mantine/core";
+import { useDebouncedValue } from "@mantine/hooks";
 import { generateColor } from "@marko19907/string-to-color";
-import { useDeleteOcel, useDeleteResource, useGetOcels, useGetResourceMeta, useGetSystemTasks, useObjectCounts, useRenameOcel, useRenameResource, useResources } from "@ocelescope/api-base";
+import { DownloadOCELExt, useDeleteOcel, useDeleteResource, useGetOcels, useGetSystemTasks, useObjectCounts, useRenameOcel, useRenameResource, useResources } from "@ocelescope/api-base";
 import { ResourceModal } from "@ocelescope/resources";
-import { CheckIcon, DownloadIcon, EllipsisVerticalIcon, EyeIcon, FilterIcon, PencilIcon, TrashIcon, XIcon } from "lucide-react";
+import { CheckIcon, DownloadIcon, EllipsisVerticalIcon, EyeIcon, FilterIcon, PencilIcon, SearchIcon, TrashIcon, XIcon } from "lucide-react";
 import { DataTable } from "mantine-datatable";
-import { useCallback, useMemo, useState } from "react";
+import { memo, useCallback, useMemo, useState } from "react";
 import dayjs from "dayjs";
 import isBetween from "dayjs/plugin/isBetween.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -14,6 +15,77 @@ dayjs.extend(isBetween);
 var dayjs_default = dayjs;
 const formatDateTime = (dateString) => dayjs(dateString).format("YYYY-MM-DD HH:mm");
 //#endregion
+//#region src/components/EntityActionsMenu.tsx
+const ocelExtensions = Object.values(DownloadOCELExt);
+const EntityActionsMenu = ({ entity, onRename, onInspect, onDownloadOcel, onExportAsXes, onDownloadResource, onDownloadResourceAsPnml, onDelete }) => {
+	const { id, type, entityTypeName, isUploading } = entity;
+	if (isUploading) return /* @__PURE__ */ jsx(Loader, { size: 20 });
+	return /* @__PURE__ */ jsxs(Menu, {
+		width: 200,
+		position: "left-start",
+		children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(ActionIcon, {
+			variant: "subtle",
+			onClick: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ jsx(EllipsisVerticalIcon, { size: 20 })
+		}) }), /* @__PURE__ */ jsxs(Menu.Dropdown, {
+			onClick: (e) => e.stopPropagation(),
+			children: [
+				/* @__PURE__ */ jsx(Menu.Item, {
+					leftSection: /* @__PURE__ */ jsx(PencilIcon, { size: 16 }),
+					onClick: () => onRename(entity),
+					children: "Rename"
+				}),
+				type === "resource" && /* @__PURE__ */ jsx(MenuItem, {
+					leftSection: /* @__PURE__ */ jsx(EyeIcon, { size: 16 }),
+					onClick: () => onInspect(id),
+					children: "Inspect"
+				}),
+				type === "ocel" ? /* @__PURE__ */ jsxs(Menu.Sub, {
+					position: "right-start",
+					children: [/* @__PURE__ */ jsx(Menu.Sub.Target, { children: /* @__PURE__ */ jsx(Menu.Sub.Item, {
+						leftSection: /* @__PURE__ */ jsx(DownloadIcon, { size: 16 }),
+						children: "Download"
+					}) }), /* @__PURE__ */ jsxs(Menu.Sub.Dropdown, { children: [ocelExtensions.map((extension) => /* @__PURE__ */ jsx(Menu.Item, {
+						onClick: () => onDownloadOcel(id, extension),
+						children: extension
+					}, extension)), /* @__PURE__ */ jsx(Menu.Item, {
+						onClick: () => onExportAsXes(id),
+						children: ".xes"
+					}, ".xes")] })]
+				}) : entityTypeName === "Petri Net" ? /* @__PURE__ */ jsxs(Menu.Sub, {
+					position: "right-start",
+					children: [/* @__PURE__ */ jsx(Menu.Sub.Target, { children: /* @__PURE__ */ jsx(Menu.Sub.Item, {
+						leftSection: /* @__PURE__ */ jsx(DownloadIcon, { size: 16 }),
+						children: "Download"
+					}) }), /* @__PURE__ */ jsxs(Menu.Sub.Dropdown, { children: [/* @__PURE__ */ jsx(Menu.Item, {
+						onClick: () => onDownloadResource(id),
+						children: ".ocelescope"
+					}), /* @__PURE__ */ jsx(Menu.Item, {
+						onClick: () => onDownloadResourceAsPnml(id),
+						children: ".pnml"
+					})] })]
+				}) : /* @__PURE__ */ jsx(Menu.Item, {
+					onClick: () => onDownloadResource(id),
+					leftSection: /* @__PURE__ */ jsx(DownloadIcon, { size: 16 }),
+					children: "Download"
+				}),
+				/* @__PURE__ */ jsx(Menu.Divider, {}),
+				/* @__PURE__ */ jsx(Menu.Item, {
+					leftSection: /* @__PURE__ */ jsx(TrashIcon, {
+						size: 16,
+						color: "red"
+					}),
+					color: "red",
+					fw: "bold",
+					onClick: () => onDelete(id, type),
+					children: "Delete"
+				})
+			]
+		})]
+	});
+};
+var EntityActionsMenu_default = memo(EntityActionsMenu);
+//#endregion
 //#region src/components/XESExportWindow.tsx
 const XESExportWindow = ({ ocelId, onClose }) => {
 	const { data: objectCounts } = useObjectCounts(ocelId ?? "", void 0, { query: { enabled: !!ocelId } });
@@ -46,11 +118,6 @@ const XESExportWindow = ({ ocelId, onClose }) => {
 };
 //#endregion
 //#region src/components/ResourceManagementTable.tsx
-const ocelExtensions = [
-	".sqlite",
-	".xml",
-	".json"
-];
 const ResourceManagementTable = () => {
 	const { data: ocels = [] } = useGetOcels();
 	const { data: resources = [] } = useResources();
@@ -63,7 +130,6 @@ const ResourceManagementTable = () => {
 	const { download: downloadOCEL } = useDownloadOCEL();
 	const { download: downloadResource } = useDownloadResource();
 	const { download: downloadResourceAsPnml } = useDownloadResourceAsPnml();
-	const { data: resourceMeta = {} } = useGetResourceMeta();
 	const { mutate: deleteResource } = useDeleteResource({ mutation: { onSuccess: () => invalidate(["resources"]) } });
 	const { mutate: deleteOcel } = useDeleteOcel({ mutation: { onSuccess: () => invalidate(["ocels"]) } });
 	const { mutate: renameOcel } = useRenameOcel({ mutation: { onSuccess: () => invalidate(["ocels"]) } });
@@ -73,9 +139,7 @@ const ResourceManagementTable = () => {
 			case "ocel":
 				deleteOcel({ ocelId: id });
 				break;
-			case "resource":
-				deleteResource({ resourceId: id });
-				break;
+			case "resource": deleteResource({ resourceId: id });
 		}
 	}, [deleteResource, deleteOcel]);
 	const renameEntity = useCallback((id, entityType, newName) => {
@@ -94,33 +158,39 @@ const ResourceManagementTable = () => {
 	}, [renameOcel, renameResource]);
 	const [renamedEntity, setRenamedEntity] = useState(void 0);
 	const [viewedResource, setViewedResource] = useState();
-	const entities = useMemo(() => {
-		const ocelEntities = ocels.map(({ name, created_at, id, extensions, filter_applied }) => ({
+	const [searchedName, setSearchedName] = useState(null);
+	const [debouncedSearch] = useDebouncedValue(searchedName, 200);
+	const allEntityTypes = useMemo(() => [...ocels.length > 0 || tasks.length > 0 ? ["OCEL"] : [], ...new Set(resources.map(({ resource_type_label }) => resource_type_label))], [
+		ocels,
+		resources,
+		tasks
+	]);
+	const [includedEntityTypes, setIncludedEntityTypes] = useState([]);
+	const [sortStatus, setSortStatus] = useState({
+		columnAccessor: "createdAt",
+		direction: "desc"
+	});
+	const allEntities = useMemo(() => {
+		const ocelEntities = ocels.map(({ name, created_at, id, filter_applied }) => ({
 			id,
 			name,
 			type: "ocel",
-			entityTypes: extensions.map(({ label }) => label),
-			createdAt: formatDateTime(created_at),
-			downloadFormats: [
-				".xml",
-				".json",
-				".sqlite"
-			],
+			entityTypeName: "OCEL",
+			createdAt: dayjs_default(created_at).toISOString(),
 			isFiltered: !!filter_applied
 		}));
-		const resourceEntities = resources.map(({ id, name, type, created_at }) => ({
+		const resourceEntities = resources.map(({ id, name, resource_type_label, created_at }) => ({
 			id,
 			name,
-			entityTypes: [resourceMeta[type]?.label ?? type],
+			entityTypeName: resource_type_label,
 			type: "resource",
-			resourceType: type,
-			createdAt: formatDateTime(dayjs_default(created_at).toISOString())
+			createdAt: dayjs_default(created_at).toISOString()
 		}));
 		const taskEntity = tasks.map(({ id, metadata }) => ({
 			id,
-			createdAt: metadata.uploaded_at,
+			createdAt: dayjs_default(metadata.uploaded_at).toISOString(),
 			name: metadata.fileName,
-			entityTypes: [],
+			entityTypeName: "OCEL",
 			type: "ocel",
 			isUploading: true
 		}));
@@ -132,9 +202,158 @@ const ResourceManagementTable = () => {
 	}, [
 		ocels,
 		resources,
-		tasks,
-		resourceMeta
+		tasks
 	]);
+	const entities = useMemo(() => {
+		const searchTerm = debouncedSearch?.trim().toLowerCase();
+		const includedTypes = new Set(includedEntityTypes);
+		const { columnAccessor, direction } = sortStatus;
+		const sign = direction === "desc" ? -1 : 1;
+		return allEntities.filter(({ name, entityTypeName }) => (!searchTerm || name.trim().toLowerCase().includes(searchTerm)) && (includedTypes.size === 0 || includedTypes.has(entityTypeName))).sort((a, b) => sign * String(a[columnAccessor] ?? "").localeCompare(String(b[columnAccessor] ?? ""), void 0, {
+			numeric: true,
+			sensitivity: "base"
+		}));
+	}, [
+		allEntities,
+		sortStatus,
+		debouncedSearch,
+		includedEntityTypes
+	]);
+	const startRename = useCallback(({ id, name }) => setRenamedEntity({
+		id,
+		value: name
+	}), []);
+	const downloadOcelAs = useCallback((id, extension) => downloadOCEL(id, { ext: extension }), [downloadOCEL]);
+	const columns = useMemo(() => [
+		{
+			accessor: "name",
+			sortable: true,
+			filter: /* @__PURE__ */ jsx(TextInput, {
+				placeholder: "Search by name ...",
+				leftSection: /* @__PURE__ */ jsx(SearchIcon, { size: 16 }),
+				rightSection: /* @__PURE__ */ jsx(ActionIcon, {
+					size: "sm",
+					variant: "transparent",
+					c: "dimmed",
+					onClick: () => setSearchedName(null),
+					children: /* @__PURE__ */ jsx(XIcon, { size: 14 })
+				}),
+				value: searchedName ?? "",
+				onChange: (value) => setSearchedName(value.currentTarget.value ?? null)
+			}),
+			filtering: !!searchedName,
+			render: ({ id, type, name, isFiltered }) => /* @__PURE__ */ jsx(Fragment, { children: renamedEntity?.id === id ? /* @__PURE__ */ jsxs(Group, { children: [/* @__PURE__ */ jsx(TextInput, {
+				variant: "unstyled",
+				value: renamedEntity.value,
+				style: { borderBottom: "1px solid #9ca3af" },
+				onChange: (e) => {
+					setRenamedEntity({
+						id,
+						value: e.target.value
+					});
+				}
+			}), /* @__PURE__ */ jsxs(Group, {
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(ActionIcon, {
+					color: "green",
+					m: 0,
+					onClick: () => {
+						renameEntity(id, type, renamedEntity.value);
+						setRenamedEntity(void 0);
+					},
+					children: /* @__PURE__ */ jsx(CheckIcon, { size: 16 })
+				}), /* @__PURE__ */ jsx(ActionIcon, {
+					color: "red",
+					m: 0,
+					onClick: () => {
+						setRenamedEntity(void 0);
+					},
+					children: /* @__PURE__ */ jsx(XIcon, { size: 16 })
+				})]
+			})] }) : /* @__PURE__ */ jsxs(Group, {
+				gap: 6,
+				wrap: "nowrap",
+				children: [name, isFiltered && /* @__PURE__ */ jsx(Tooltip, {
+					label: "This log has been filtered",
+					children: /* @__PURE__ */ jsx(FilterIcon, {
+						size: 14,
+						color: "var(--mantine-color-blue-6)"
+					})
+				})]
+			}) })
+		},
+		{
+			accessor: "createdAt",
+			sortable: true,
+			render: ({ createdAt, isUploading }) => isUploading ? "uploading" : formatDateTime(createdAt)
+		},
+		{
+			accessor: "entityTypeName",
+			sortable: true,
+			title: "Type",
+			filter: /* @__PURE__ */ jsx(MultiSelect, {
+				placeholder: "Filter by type ...",
+				data: allEntityTypes,
+				leftSection: /* @__PURE__ */ jsx(SearchIcon, { size: 16 }),
+				value: includedEntityTypes,
+				onChange: setIncludedEntityTypes,
+				clearable: true,
+				searchable: true,
+				maw: 300,
+				comboboxProps: { withinPortal: false },
+				renderOption: ({ option, checked }) => /* @__PURE__ */ jsxs(Group, {
+					gap: "xs",
+					wrap: "nowrap",
+					children: [checked && /* @__PURE__ */ jsx(CheckIcon, { size: 14 }), /* @__PURE__ */ jsx(Badge, {
+						color: generateColor(option.value),
+						children: option.label
+					})]
+				}),
+				renderPill: ({ option, onRemove, disabled }) => /* @__PURE__ */ jsx(Badge, {
+					color: generateColor(String(option.value)),
+					style: { cursor: disabled ? void 0 : "pointer" },
+					rightSection: !disabled && /* @__PURE__ */ jsx(XIcon, { size: 12 }),
+					onMouseDown: (event) => {
+						event.preventDefault();
+						onRemove?.();
+					},
+					children: option.label
+				})
+			}),
+			filtering: includedEntityTypes.length > 0,
+			render: ({ entityTypeName }) => /* @__PURE__ */ jsx(Badge, {
+				color: generateColor(entityTypeName),
+				children: entityTypeName
+			})
+		},
+		{
+			accessor: "",
+			textAlign: "right",
+			width: "0%",
+			render: (entity) => /* @__PURE__ */ jsx(EntityActionsMenu_default, {
+				entity,
+				onRename: startRename,
+				onInspect: setViewedResource,
+				onDownloadOcel: downloadOcelAs,
+				onExportAsXes: setExportOcelId,
+				onDownloadResource: downloadResource,
+				onDownloadResourceAsPnml: downloadResourceAsPnml,
+				onDelete: deleteEntity
+			})
+		}
+	], [
+		searchedName,
+		renamedEntity,
+		renameEntity,
+		allEntityTypes,
+		includedEntityTypes,
+		startRename,
+		downloadOcelAs,
+		downloadResource,
+		downloadResourceAsPnml,
+		deleteEntity
+	]);
+	const hasEntities = allEntityTypes.length > 0;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		viewedResource && /* @__PURE__ */ jsx(ResourceModal, {
 			id: viewedResource,
@@ -144,140 +363,13 @@ const ResourceManagementTable = () => {
 			ocelId: exportOcelId,
 			onClose: () => setExportOcelId(void 0)
 		}, exportOcelId),
-		entities.length ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FullScreenUpload, {}), /* @__PURE__ */ jsx(DataTable, {
+		hasEntities ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FullScreenUpload, {}), /* @__PURE__ */ jsx(DataTable, {
 			withTableBorder: true,
 			borderRadius: "md",
 			idAccessor: "id",
-			columns: [
-				{
-					accessor: "name",
-					render: ({ id, type, name, isFiltered }) => /* @__PURE__ */ jsx(Fragment, { children: renamedEntity?.id === id ? /* @__PURE__ */ jsxs(Group, { children: [/* @__PURE__ */ jsx(TextInput, {
-						variant: "unstyled",
-						value: renamedEntity.value,
-						style: { borderBottom: "1px solid #9ca3af" },
-						onChange: (e) => {
-							setRenamedEntity({
-								id,
-								value: e.target.value
-							});
-						}
-					}), /* @__PURE__ */ jsxs(Group, {
-						gap: "xs",
-						children: [/* @__PURE__ */ jsx(ActionIcon, {
-							color: "green",
-							m: 0,
-							onClick: () => {
-								renameEntity(id, type, renamedEntity.value);
-								setRenamedEntity(void 0);
-							},
-							children: /* @__PURE__ */ jsx(CheckIcon, { size: 16 })
-						}), /* @__PURE__ */ jsx(ActionIcon, {
-							color: "red",
-							m: 0,
-							onClick: () => {
-								setRenamedEntity(void 0);
-							},
-							children: /* @__PURE__ */ jsx(XIcon, { size: 16 })
-						})]
-					})] }) : /* @__PURE__ */ jsxs(Group, {
-						gap: 6,
-						wrap: "nowrap",
-						children: [name, isFiltered && /* @__PURE__ */ jsx(Tooltip, {
-							label: "This log has been filtered",
-							children: /* @__PURE__ */ jsx(FilterIcon, {
-								size: 14,
-								color: "var(--mantine-color-blue-6)"
-							})
-						})]
-					}) })
-				},
-				{
-					accessor: "createdAt",
-					render: ({ createdAt, isUploading }) => isUploading ? "uploading" : formatDateTime(createdAt)
-				},
-				{
-					accessor: "entityTypes",
-					title: "Type",
-					render: ({ type, entityTypes }) => /* @__PURE__ */ jsx(Group, {
-						gap: "xs",
-						children: [...type === "ocel" ? ["OCEL"] : [], ...entityTypes].map((entityType) => /* @__PURE__ */ jsx(Badge, {
-							color: generateColor(entityType),
-							children: entityType
-						}, entityType))
-					})
-				},
-				{
-					accessor: "",
-					textAlign: "right",
-					width: "0%",
-					render: ({ type, resourceType, id, name, isUploading }) => isUploading ? /* @__PURE__ */ jsx(Loader, { size: 20 }) : /* @__PURE__ */ jsxs(Menu, {
-						width: 200,
-						position: "left-start",
-						children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(ActionIcon, {
-							variant: "subtle",
-							onClick: (e) => e.stopPropagation(),
-							children: /* @__PURE__ */ jsx(EllipsisVerticalIcon, { size: 20 })
-						}) }), /* @__PURE__ */ jsxs(Menu.Dropdown, {
-							onClick: (e) => e.stopPropagation(),
-							children: [
-								/* @__PURE__ */ jsx(Menu.Item, {
-									leftSection: /* @__PURE__ */ jsx(PencilIcon, { size: 16 }),
-									onClick: () => setRenamedEntity({
-										id,
-										value: name
-									}),
-									children: "Rename"
-								}),
-								type === "resource" && /* @__PURE__ */ jsx(MenuItem, {
-									leftSection: /* @__PURE__ */ jsx(EyeIcon, { size: 16 }),
-									onClick: () => setViewedResource(id),
-									children: "Inspect"
-								}),
-								type === "ocel" ? /* @__PURE__ */ jsxs(Menu.Sub, {
-									position: "right-start",
-									children: [/* @__PURE__ */ jsx(Menu.Sub.Target, { children: /* @__PURE__ */ jsx(Menu.Sub.Item, {
-										leftSection: /* @__PURE__ */ jsx(DownloadIcon, { size: 16 }),
-										children: "Download"
-									}) }), /* @__PURE__ */ jsxs(Menu.Sub.Dropdown, { children: [ocelExtensions.map((extension) => /* @__PURE__ */ jsx(Menu.Item, {
-										onClick: () => downloadOCEL(id, { ext: extension }),
-										children: extension
-									}, extension)), /* @__PURE__ */ jsx(Menu.Item, {
-										onClick: () => setExportOcelId(id),
-										children: ".xes"
-									}, ".xes")] })]
-								}) : resourceType === "PetriNet" ? /* @__PURE__ */ jsxs(Menu.Sub, {
-									position: "right-start",
-									children: [/* @__PURE__ */ jsx(Menu.Sub.Target, { children: /* @__PURE__ */ jsx(Menu.Sub.Item, {
-										leftSection: /* @__PURE__ */ jsx(DownloadIcon, { size: 16 }),
-										children: "Download"
-									}) }), /* @__PURE__ */ jsxs(Menu.Sub.Dropdown, { children: [/* @__PURE__ */ jsx(Menu.Item, {
-										onClick: () => downloadResource(id),
-										children: ".ocelescope"
-									}), /* @__PURE__ */ jsx(Menu.Item, {
-										onClick: () => downloadResourceAsPnml(id),
-										children: ".pnml"
-									})] })]
-								}) : /* @__PURE__ */ jsx(Menu.Item, {
-									onClick: () => downloadResource(id),
-									leftSection: /* @__PURE__ */ jsx(DownloadIcon, { size: 16 }),
-									children: "Download"
-								}),
-								/* @__PURE__ */ jsx(Menu.Divider, {}),
-								/* @__PURE__ */ jsx(Menu.Item, {
-									leftSection: /* @__PURE__ */ jsx(TrashIcon, {
-										size: 16,
-										color: "red"
-									}),
-									color: "red",
-									fw: "bold",
-									onClick: () => deleteEntity(id, type),
-									children: "Delete"
-								})
-							]
-						})]
-					})
-				}
-			],
+			columns,
+			sortStatus,
+			onSortStatusChange: setSortStatus,
 			records: entities
 		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Title, {
 			size: "h3",
@@ -290,6 +382,7 @@ const ResourceManagementTable = () => {
 const ResourceManagementPage = ({ children }) => {
 	return /* @__PURE__ */ jsx(Container, {
 		h: "100%",
+		p: "md",
 		children: /* @__PURE__ */ jsxs(Stack, {
 			gap: "sm",
 			h: "100%",
@@ -297,6 +390,11 @@ const ResourceManagementPage = ({ children }) => {
 		})
 	});
 };
+var ResourceManagementPage_default = defineModuleRoute({
+	component: ResourceManagementPage,
+	label: "Management",
+	name: "management"
+});
 //#endregion
 //#region src/index.ts
 var src_default = defineModule({
@@ -304,11 +402,7 @@ var src_default = defineModule({
 	description: "A tool for managing Resources and OCEL",
 	label: "Resources",
 	authors: [{ name: "Öztürk, Görkem-Emre" }],
-	routes: [defineModuleRoute({
-		component: ResourceManagementPage,
-		label: "Management",
-		name: "management"
-	})]
+	routes: [ResourceManagementPage_default]
 });
 //#endregion
 export { src_default as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ocelescope/management",
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "A tool for managing Resources and OCEL",
   "author": "Görkem-Emre Öztürk <goerkem.oeztuerk@rwth-aachen.de>",
   "license": "MIT",
@@ -27,24 +27,25 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@mantine/core": "^9.4.2",
+    "@mantine/core": "^9.5.1",
+    "@mantine/hooks": "^9.5.1",
     "@marko19907/string-to-color": "*",
-    "dayjs": "^1.11.19",
+    "@ocelescope/api-base": "^0.8.0",
+    "@ocelescope/core": "^0.8.0",
+    "@ocelescope/resources": "^0.8.0",
+    "dayjs": "^1.11.23",
     "lucide-react": "^1.0.0",
     "mantine-datatable": "^9.4.0",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "@ocelescope/api-base": "^0.6.0",
-    "@ocelescope/resources": "^0.6.0",
-    "@ocelescope/core": "^0.6.0"
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
   },
   "devDependencies": {
-    "@tsdown/css": "^0.22.12",
-    "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "tsdown": "^0.22.12",
-    "typescript": "^5.9.3"
+    "@tsdown/css": "^0.23.0",
+    "@types/node": "^26.6.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "tsdown": "^0.23.0",
+    "typescript": "^6.0.3"
   },
   "scripts": {
     "build": "tsdown",