bundler config for prod build

src/officesense_pi/src/api/management/adminjs.routes.ts

@@ -2,7 +2,7 @@ import AdminJS from "adminjs";
 import AdminJSExpress from "@adminjs/express";
 import * as AdminJSPrisma from "@adminjs/prisma";
 import session from "express-session";
-import { componentLoader, Components } from "./components.js";
+import { componentLoader, Components } from "./components.bundler.js";
 
 import userResource from "./resources/adminjs.user.resource.js";
 import tagResource from "./resources/adminjs.tag.resource.js";
@@ -16,13 +16,16 @@ AdminJS.registerAdapter({
 async function createAdmin() {
     const admin = new AdminJS({
         rootPath: "/admin",
-        resources: [userResource, tagResource, roomResource],
         branding: { companyName: "OfficeSense", logo: false },
-        dashboard: { component: Components.Dashboard },
         componentLoader,
+        resources: [userResource, tagResource, roomResource],
+        dashboard: { component: Components.Dashboard },
     });
 
+    if (process.env.NODE_ENV === "development")
         await admin.watch();
+    else
+        await admin.initialize();
 
     const router = AdminJSExpress.buildAuthenticatedRouter(
         admin,

src/officesense_pi/src/api/management/bundler.ts

@@ -0,0 +1,9 @@
+import { bundle } from "@adminjs/bundler";
+import { componentLoader } from "./components.bundler.js";
+
+void (async () => {
+    await bundle({
+        componentLoader,
+        destinationDir: "./.adminjs",
+    });
+})();

src/officesense_pi/src/api/management/components.bundler.ts

@@ -0,0 +1,15 @@
+import { ComponentLoader } from "adminjs";
+import path from "path";
+import * as url from "url";
+
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+export const componentLoader = new ComponentLoader();
+
+const add = (filePath: string, componentName: string): string =>
+    componentLoader.add(componentName, path.join(__dirname, filePath));
+
+export const Components = {
+    Dashboard: add("components/Dashboard", "Dashboard"),
+    UploadFace: add("components/UploadFace", "UploadFace"),
+    FaceEmbeddingField: add("components/FaceEmbeddingField", "FaceEmbeddingField"),
+};

src/officesense_pi/src/api/management/components/FaceEmbeddingField.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { BasePropertyProps } from "adminjs";
+import type { BasePropertyProps } from "adminjs";
 import { Label } from "@adminjs/design-system";
 
 const FaceEmbeddingField: React.FC<BasePropertyProps> = ({ record, property }) => {

src/officesense_pi/src/api/management/components/UploadFace.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef } from "react";
 import { Box, H3, Text, Button, MessageBox } from "@adminjs/design-system";
-import { ActionProps, useRecord } from "adminjs";
+import type { ActionProps } from "adminjs";
 
 const UploadFace: React.FC<ActionProps> = ({ record, action }) => {
     const [preview, setPreview] = useState<string | null>(null);
@@ -18,7 +18,7 @@ const UploadFace: React.FC<ActionProps> = ({ record, action }) => {
         reader.onload = () => {
             const result = reader.result as string;
             setPreview(result);
-            setBase64(result.split(",")[1]); // strip data:image/jpeg;base64,
+            setBase64(result.split(",")[1] ?? null); // strip data:image/jpeg;base64,
         };
         reader.readAsDataURL(file);
     };

src/officesense_pi/src/api/management/resources/adminjs.user.resource.ts

@@ -1,7 +1,7 @@
 import { prisma } from "../../../lib/prisma.js";
 import { getModelByName } from "@adminjs/prisma";
 import { spawn } from "child_process";
-import { Components } from "../components.js";
+import { Components } from "../components.bundler.js";
 import { fileURLToPath } from "url";
 import path from "path";