@burdenoff/microfe-assethandler 2026.624.1 → 2026.625.2

package/dist/assethandler/pages/AiPredictionsPage.js

@@ -1,10 +1,11 @@
 import { useState as e } from "react";
 import { BrainCircuit as t } from "lucide-react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { gql as i } from "@apollo/client";
-import { useMutation as a, useQuery as o } from "@apollo/client/react";
+import { EmphasisPanel as n, GradientText as r, IllustratedEmptyState as i, PagePurpose as a } from "@burdenoff/fe-libs/ui";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { gql as c } from "@apollo/client";
+import { useMutation as l, useQuery as u } from "@apollo/client/react";
 //#region src/assethandler/pages/AiPredictionsPage.tsx
-var s = i`
+var d = c`
   query AssetHandlerAiPredictions {
     aiPredictions {
       id
@@ -17,33 +18,37 @@ var s = i`
       modelVersion
     }
   }
-`, c = i`
+`, f = c`
   mutation AssetHandlerRequestAiPrediction($input: RequestAIPredictionInput!) {
     requestAIPrediction(input: $input) {
       id
     }
   }
 `;
-function l() {
-	let [i, l] = e("AST-001"), { data: u, loading: d, refetch: f } = o(s, { fetchPolicy: "cache-and-network" }), [p, { loading: m }] = a(c, { onCompleted: () => {
-		f();
-	} }), h = u?.aiPredictions ?? [];
-	return /* @__PURE__ */ r("div", {
+function p() {
+	let [c, p] = e("AST-001"), { data: m, loading: h, refetch: g } = u(d, { fetchPolicy: "cache-and-network" }), [_, { loading: v }] = l(f, { onCompleted: () => {
+		g();
+	} }), y = m?.aiPredictions ?? [];
+	return /* @__PURE__ */ s("div", {
 		className: "space-y-4 p-4",
 		children: [
-			/* @__PURE__ */ r("h1", {
+			/* @__PURE__ */ s("h1", {
 				className: "flex items-center gap-2 text-2xl font-semibold",
-				children: [/* @__PURE__ */ n(t, { className: "h-6 w-6" }), " AI Predictions"]
-			}),
-			/* @__PURE__ */ n("p", {
-				className: "text-text-secondary",
-				children: "Predictive maintenance and asset risk scoring are enabled through real backend APIs."
+				children: [
+					/* @__PURE__ */ o(t, { className: "h-6 w-6" }),
+					" ",
+					/* @__PURE__ */ o(r, { children: "AI Predictions" })
+				]
 			}),
-			/* @__PURE__ */ r("form", {
-				className: "grid gap-3 rounded-lg border p-4 md:grid-cols-3",
+			/* @__PURE__ */ o(a, { children: "Forecast failures before they happen. Enter an asset and run a model to get a risk score, confidence level and a concrete recommendation — so you can schedule preventive maintenance instead of reacting to breakdowns. Use it to prioritise which high-value or aging assets to service next." }),
+			/* @__PURE__ */ s(n, { children: [/* @__PURE__ */ o("h2", {
+				className: "text-sm font-semibold mb-3",
+				children: "Run a prediction"
+			}), /* @__PURE__ */ s("form", {
+				className: "grid gap-3 md:grid-cols-3",
 				onSubmit: (e) => {
-					e.preventDefault(), p({ variables: { input: {
-						assetId: i,
+					e.preventDefault(), _({ variables: { input: {
+						assetId: c,
 						predictionType: "maintenance-risk",
 						featureVector: {
 							runtimeHours: 10240,
@@ -53,38 +58,40 @@ function l() {
 					} } });
 				},
 				children: [
-					/* @__PURE__ */ n("input", {
+					/* @__PURE__ */ o("input", {
 						className: "rounded-md border px-3 py-2",
-						value: i,
-						onChange: (e) => l(e.target.value)
+						value: c,
+						onChange: (e) => p(e.target.value),
+						"aria-label": "Asset ID"
 					}),
-					/* @__PURE__ */ n("div", {
+					/* @__PURE__ */ o("div", {
 						className: "text-sm text-text-secondary",
 						children: "Prediction Type: maintenance-risk"
 					}),
-					/* @__PURE__ */ n("button", {
+					/* @__PURE__ */ o("button", {
 						className: "rounded-md bg-action-primary-bg px-3 py-2 text-action-primary-text",
-						disabled: m,
+						disabled: v,
 						type: "submit",
-						children: m ? "Running..." : "Run Prediction"
+						children: v ? "Running..." : "Run Prediction"
 					})
 				]
-			}),
-			/* @__PURE__ */ r("div", {
+			})] }),
+			/* @__PURE__ */ s("div", {
 				className: "grid gap-3 md:grid-cols-2",
 				children: [
-					d && h.length === 0 ? /* @__PURE__ */ n("p", {
-						className: "text-sm text-text-secondary",
-						children: "Loading predictions..."
+					h && y.length === 0 ? /* @__PURE__ */ o("div", {
+						className: "space-y-2 px-4 py-4",
+						children: Array.from({ length: 4 }).map((e, t) => /* @__PURE__ */ o("div", { className: "h-8 rounded-md bg-bg-sunken motion-safe:animate-vc-shimmer" }, t))
 					}) : null,
-					!d && h.length === 0 ? /* @__PURE__ */ n("p", {
-						className: "text-sm text-text-secondary",
-						children: "No AI predictions available yet."
+					!h && y.length === 0 ? /* @__PURE__ */ o(i, {
+						illustration: "empty-data",
+						title: "No AI predictions available yet",
+						description: "AI-generated predictions for your assets will appear here."
 					}) : null,
-					h.map((e) => /* @__PURE__ */ r("article", {
+					y.map((e) => /* @__PURE__ */ s("article", {
 						className: "rounded-lg border p-4",
 						children: [
-							/* @__PURE__ */ r("p", {
+							/* @__PURE__ */ s("p", {
 								className: "text-xs uppercase tracking-wide text-text-secondary",
 								children: [
 									e.predictionType,
@@ -92,7 +99,7 @@ function l() {
 									e.assetId
 								]
 							}),
-							/* @__PURE__ */ r("h2", {
+							/* @__PURE__ */ s("h2", {
 								className: "mt-1 text-base font-semibold",
 								children: [
 									"Risk score ",
@@ -100,7 +107,7 @@ function l() {
 									"%"
 								]
 							}),
-							/* @__PURE__ */ r("p", {
+							/* @__PURE__ */ s("p", {
 								className: "mt-1 text-sm text-text-secondary",
 								children: [
 									"Confidence ",
@@ -108,11 +115,11 @@ function l() {
 									"%"
 								]
 							}),
-							/* @__PURE__ */ n("p", {
+							/* @__PURE__ */ o("p", {
 								className: "mt-2 text-sm",
 								children: e.recommendation
 							}),
-							/* @__PURE__ */ r("p", {
+							/* @__PURE__ */ s("p", {
 								className: "mt-2 text-xs text-text-secondary",
 								children: [
 									e.modelVersion,
@@ -128,6 +135,6 @@ function l() {
 	});
 }
 //#endregion
-export { l as AiPredictionsPage };
+export { p as AiPredictionsPage };
 
 //# sourceMappingURL=AiPredictionsPage.js.map

package/dist/assethandler/pages/AiPredictionsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AiPredictionsPage.js","names":[],"sources":["../../../src/assethandler/pages/AiPredictionsPage.tsx"],"sourcesContent":["import { BrainCircuit } from 'lucide-react';\nimport { useState } from 'react';\nimport { gql } from '@apollo/client';\nimport { useMutation, useQuery } from '@apollo/client/react';\n\nconst AI_PREDICTIONS_QUERY = gql`\n  query AssetHandlerAiPredictions {\n    aiPredictions {\n      id\n      assetId\n      predictionType\n      score\n      confidence\n      recommendation\n      generatedAt\n      modelVersion\n    }\n  }\n`;\n\nconst REQUEST_AI_PREDICTION_MUTATION = gql`\n  mutation AssetHandlerRequestAiPrediction($input: RequestAIPredictionInput!) {\n    requestAIPrediction(input: $input) {\n      id\n    }\n  }\n`;\n\nexport function AiPredictionsPage() {\n  const [assetId, setAssetId] = useState('AST-001');\n\n  const { data, loading, refetch } = useQuery<{\n    aiPredictions: Array<{\n      id: string;\n      assetId: string;\n      predictionType: string;\n      score: number;\n      confidence: number;\n      recommendation: string;\n      generatedAt: string;\n      modelVersion: string;\n    }>;\n  }>(AI_PREDICTIONS_QUERY, { fetchPolicy: 'cache-and-network' });\n\n  const [requestPrediction, { loading: requesting }] = useMutation(REQUEST_AI_PREDICTION_MUTATION, {\n    onCompleted: () => {\n      void refetch();\n    },\n  });\n\n  const predictions = data?.aiPredictions ?? [];\n\n  return (\n    <div className=\"space-y-4 p-4\">\n      <h1 className=\"flex items-center gap-2 text-2xl font-semibold\">\n        <BrainCircuit className=\"h-6 w-6\" /> AI Predictions\n      </h1>\n      <p className=\"text-text-secondary\">\n        Predictive maintenance and asset risk scoring are enabled through real backend APIs.\n      </p>\n      <form\n        className=\"grid gap-3 rounded-lg border p-4 md:grid-cols-3\"\n        onSubmit={(event) => {\n          event.preventDefault();\n          void requestPrediction({\n            variables: {\n              input: {\n                assetId,\n                predictionType: 'maintenance-risk',\n                featureVector: {\n                  runtimeHours: 10240,\n                  lastIncidentDaysAgo: 9,\n                  temperatureVariance: 0.23,\n                },\n              },\n            },\n          });\n        }}\n      >\n        <input\n          className=\"rounded-md border px-3 py-2\"\n          value={assetId}\n          onChange={(event) => setAssetId(event.target.value)}\n        />\n        <div className=\"text-sm text-text-secondary\">Prediction Type: maintenance-risk</div>\n        <button\n          className=\"rounded-md bg-action-primary-bg px-3 py-2 text-action-primary-text\"\n          disabled={requesting}\n          type=\"submit\"\n        >\n          {requesting ? 'Running...' : 'Run Prediction'}\n        </button>\n      </form>\n      <div className=\"grid gap-3 md:grid-cols-2\">\n        {loading && predictions.length === 0 ? (\n          <p className=\"text-sm text-text-secondary\">Loading predictions...</p>\n        ) : null}\n        {!loading && predictions.length === 0 ? (\n          <p className=\"text-sm text-text-secondary\">No AI predictions available yet.</p>\n        ) : null}\n        {predictions.map((prediction) => (\n          <article key={prediction.id} className=\"rounded-lg border p-4\">\n            <p className=\"text-xs uppercase tracking-wide text-text-secondary\">\n              {prediction.predictionType} • {prediction.assetId}\n            </p>\n            <h2 className=\"mt-1 text-base font-semibold\">\n              Risk score {(prediction.score * 100).toFixed(1)}%\n            </h2>\n            <p className=\"mt-1 text-sm text-text-secondary\">\n              Confidence {(prediction.confidence * 100).toFixed(1)}%\n            </p>\n            <p className=\"mt-2 text-sm\">{prediction.recommendation}</p>\n            <p className=\"mt-2 text-xs text-text-secondary\">\n              {prediction.modelVersion} • {new Date(prediction.generatedAt).toLocaleString()}\n            </p>\n          </article>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAKA,IAAM,IAAuB,CAAG;;;;;;;;;;;;;GAe1B,IAAiC,CAAG;;;;;;;AAQ1C,SAAgB,IAAoB;CAClC,IAAM,CAAC,GAAS,KAAc,EAAS,UAAU,EAE3C,EAAE,SAAM,YAAS,eAAY,EAWhC,GAAsB,EAAE,aAAa,qBAAqB,CAAC,EAExD,CAAC,GAAmB,EAAE,SAAS,OAAgB,EAAY,GAAgC,EAC/F,mBAAmB;AACZ,KAAS;IAEjB,CAAC,EAEI,IAAc,GAAM,iBAAiB,EAAE;AAE7C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,MAAD;IAAI,WAAU;cAAd,CACE,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA,EAAA,kBACjC;;GACL,kBAAC,KAAD;IAAG,WAAU;cAAsB;IAE/B,CAAA;GACJ,kBAAC,QAAD;IACE,WAAU;IACV,WAAW,MAAU;AAEd,KADL,EAAM,gBAAgB,EACjB,EAAkB,EACrB,WAAW,EACT,OAAO;MACL;MACA,gBAAgB;MAChB,eAAe;OACb,cAAc;OACd,qBAAqB;OACrB,qBAAqB;OACtB;MACF,EACF,EACF,CAAC;;cAhBN;KAmBE,kBAAC,SAAD;MACE,WAAU;MACV,OAAO;MACP,WAAW,MAAU,EAAW,EAAM,OAAO,MAAM;MACnD,CAAA;KACF,kBAAC,OAAD;MAAK,WAAU;gBAA8B;MAAuC,CAAA;KACpF,kBAAC,UAAD;MACE,WAAU;MACV,UAAU;MACV,MAAK;gBAEJ,IAAa,eAAe;MACtB,CAAA;KACJ;;GACP,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG,KAAW,EAAY,WAAW,IACjC,kBAAC,KAAD;MAAG,WAAU;gBAA8B;MAA0B,CAAA,GACnE;KACH,CAAC,KAAW,EAAY,WAAW,IAClC,kBAAC,KAAD;MAAG,WAAU;gBAA8B;MAAoC,CAAA,GAC7E;KACH,EAAY,KAAK,MAChB,kBAAC,WAAD;MAA6B,WAAU;gBAAvC;OACE,kBAAC,KAAD;QAAG,WAAU;kBAAb;SACG,EAAW;SAAe;SAAI,EAAW;SACxC;;OACJ,kBAAC,MAAD;QAAI,WAAU;kBAAd;SAA6C;UAC9B,EAAW,QAAQ,KAAK,QAAQ,EAAE;SAAC;SAC7C;;OACL,kBAAC,KAAD;QAAG,WAAU;kBAAb;SAAgD;UACjC,EAAW,aAAa,KAAK,QAAQ,EAAE;SAAC;SACnD;;OACJ,kBAAC,KAAD;QAAG,WAAU;kBAAgB,EAAW;QAAmB,CAAA;OAC3D,kBAAC,KAAD;QAAG,WAAU;kBAAb;SACG,EAAW;SAAa;SAAI,IAAI,KAAK,EAAW,YAAY,CAAC,gBAAgB;SAC5E;;OACI;QAdI,EAAW,GAcf,CACV;KACE;;GACF"}
+{"version":3,"file":"AiPredictionsPage.js","names":[],"sources":["../../../src/assethandler/pages/AiPredictionsPage.tsx"],"sourcesContent":["import { BrainCircuit } from 'lucide-react';\nimport { GradientText, IllustratedEmptyState, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { useState } from 'react';\nimport { gql } from '@apollo/client';\nimport { useMutation, useQuery } from '@apollo/client/react';\n\nconst AI_PREDICTIONS_QUERY = gql`\n  query AssetHandlerAiPredictions {\n    aiPredictions {\n      id\n      assetId\n      predictionType\n      score\n      confidence\n      recommendation\n      generatedAt\n      modelVersion\n    }\n  }\n`;\n\nconst REQUEST_AI_PREDICTION_MUTATION = gql`\n  mutation AssetHandlerRequestAiPrediction($input: RequestAIPredictionInput!) {\n    requestAIPrediction(input: $input) {\n      id\n    }\n  }\n`;\n\nexport function AiPredictionsPage() {\n  const [assetId, setAssetId] = useState('AST-001');\n\n  const { data, loading, refetch } = useQuery<{\n    aiPredictions: Array<{\n      id: string;\n      assetId: string;\n      predictionType: string;\n      score: number;\n      confidence: number;\n      recommendation: string;\n      generatedAt: string;\n      modelVersion: string;\n    }>;\n  }>(AI_PREDICTIONS_QUERY, { fetchPolicy: 'cache-and-network' });\n\n  const [requestPrediction, { loading: requesting }] = useMutation(REQUEST_AI_PREDICTION_MUTATION, {\n    onCompleted: () => {\n      void refetch();\n    },\n  });\n\n  const predictions = data?.aiPredictions ?? [];\n\n  return (\n    <div className=\"space-y-4 p-4\">\n      <h1 className=\"flex items-center gap-2 text-2xl font-semibold\">\n        <BrainCircuit className=\"h-6 w-6\" /> <GradientText>AI Predictions</GradientText>\n      </h1>\n      <PagePurpose>\n        Forecast failures before they happen. Enter an asset and run a model to get a risk score,\n        confidence level and a concrete recommendation — so you can schedule preventive maintenance\n        instead of reacting to breakdowns. Use it to prioritise which high-value or aging assets to\n        service next.\n      </PagePurpose>\n      <EmphasisPanel>\n        <h2 className=\"text-sm font-semibold mb-3\">Run a prediction</h2>\n        <form\n          className=\"grid gap-3 md:grid-cols-3\"\n          onSubmit={(event) => {\n          event.preventDefault();\n          void requestPrediction({\n            variables: {\n              input: {\n                assetId,\n                predictionType: 'maintenance-risk',\n                featureVector: {\n                  runtimeHours: 10240,\n                  lastIncidentDaysAgo: 9,\n                  temperatureVariance: 0.23,\n                },\n              },\n            },\n          });\n        }}\n        >\n          <input\n            className=\"rounded-md border px-3 py-2\"\n            value={assetId}\n            onChange={(event) => setAssetId(event.target.value)}\n            aria-label=\"Asset ID\"\n          />\n          <div className=\"text-sm text-text-secondary\">Prediction Type: maintenance-risk</div>\n          <button\n            className=\"rounded-md bg-action-primary-bg px-3 py-2 text-action-primary-text\"\n            disabled={requesting}\n            type=\"submit\"\n          >\n            {requesting ? 'Running...' : 'Run Prediction'}\n          </button>\n        </form>\n      </EmphasisPanel>\n      <div className=\"grid gap-3 md:grid-cols-2\">\n        {loading && predictions.length === 0 ? (\n          <div className=\"space-y-2 px-4 py-4\">\n            {Array.from({ length: 4 }).map((_, i) => (\n              <div key={i} className=\"h-8 rounded-md bg-bg-sunken motion-safe:animate-vc-shimmer\" />\n            ))}\n          </div>\n        ) : null}\n        {!loading && predictions.length === 0 ? (\n          <IllustratedEmptyState\n            illustration=\"empty-data\"\n            title=\"No AI predictions available yet\"\n            description=\"AI-generated predictions for your assets will appear here.\"\n          />\n        ) : null}\n        {predictions.map((prediction) => (\n          <article key={prediction.id} className=\"rounded-lg border p-4\">\n            <p className=\"text-xs uppercase tracking-wide text-text-secondary\">\n              {prediction.predictionType} • {prediction.assetId}\n            </p>\n            <h2 className=\"mt-1 text-base font-semibold\">\n              Risk score {(prediction.score * 100).toFixed(1)}%\n            </h2>\n            <p className=\"mt-1 text-sm text-text-secondary\">\n              Confidence {(prediction.confidence * 100).toFixed(1)}%\n            </p>\n            <p className=\"mt-2 text-sm\">{prediction.recommendation}</p>\n            <p className=\"mt-2 text-xs text-text-secondary\">\n              {prediction.modelVersion} • {new Date(prediction.generatedAt).toLocaleString()}\n            </p>\n          </article>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAMA,IAAM,IAAuB,CAAG;;;;;;;;;;;;;GAe1B,IAAiC,CAAG;;;;;;;AAQ1C,SAAgB,IAAoB;CAClC,IAAM,CAAC,GAAS,KAAc,EAAS,UAAU,EAE3C,EAAE,SAAM,YAAS,eAAY,EAWhC,GAAsB,EAAE,aAAa,qBAAqB,CAAC,EAExD,CAAC,GAAmB,EAAE,SAAS,OAAgB,EAAY,GAAgC,EAC/F,mBAAmB;AACZ,KAAS;IAEjB,CAAC,EAEI,IAAc,GAAM,iBAAiB,EAAE;AAE7C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,MAAD;IAAI,WAAU;cAAd;KACE,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA;;KAAC,kBAAC,GAAD,EAAA,UAAc,kBAA6B,CAAA;KAC7E;;GACL,kBAAC,GAAD,EAAA,UAAa,mSAKC,CAAA;GACd,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;cAA6B;IAAqB,CAAA,EAChE,kBAAC,QAAD;IACE,WAAU;IACV,WAAW,MAAU;AAEhB,KADL,EAAM,gBAAgB,EACjB,EAAkB,EACrB,WAAW,EACT,OAAO;MACL;MACA,gBAAgB;MAChB,eAAe;OACb,cAAc;OACd,qBAAqB;OACrB,qBAAqB;OACtB;MACF,EACF,EACF,CAAC;;cAhBJ;KAmBE,kBAAC,SAAD;MACE,WAAU;MACV,OAAO;MACP,WAAW,MAAU,EAAW,EAAM,OAAO,MAAM;MACnD,cAAW;MACX,CAAA;KACF,kBAAC,OAAD;MAAK,WAAU;gBAA8B;MAAuC,CAAA;KACpF,kBAAC,UAAD;MACE,WAAU;MACV,UAAU;MACV,MAAK;gBAEJ,IAAa,eAAe;MACtB,CAAA;KACJ;MACO,EAAA,CAAA;GAChB,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG,KAAW,EAAY,WAAW,IACjC,kBAAC,OAAD;MAAK,WAAU;gBACZ,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,MACjC,kBAAC,OAAD,EAAa,WAAU,8DAA+D,EAA5E,EAA4E,CACtF;MACE,CAAA,GACJ;KACH,CAAC,KAAW,EAAY,WAAW,IAClC,kBAAC,GAAD;MACE,cAAa;MACb,OAAM;MACN,aAAY;MACZ,CAAA,GACA;KACH,EAAY,KAAK,MAChB,kBAAC,WAAD;MAA6B,WAAU;gBAAvC;OACE,kBAAC,KAAD;QAAG,WAAU;kBAAb;SACG,EAAW;SAAe;SAAI,EAAW;SACxC;;OACJ,kBAAC,MAAD;QAAI,WAAU;kBAAd;SAA6C;UAC9B,EAAW,QAAQ,KAAK,QAAQ,EAAE;SAAC;SAC7C;;OACL,kBAAC,KAAD;QAAG,WAAU;kBAAb;SAAgD;UACjC,EAAW,aAAa,KAAK,QAAQ,EAAE;SAAC;SACnD;;OACJ,kBAAC,KAAD;QAAG,WAAU;kBAAgB,EAAW;QAAmB,CAAA;OAC3D,kBAAC,KAAD;QAAG,WAAU;kBAAb;SACG,EAAW;SAAa;SAAI,IAAI,KAAK,EAAW,YAAY,CAAC,gBAAgB;SAC5E;;OACI;QAdI,EAAW,GAcf,CACV;KACE;;GACF"}