feat(tasks): allow management of job intervals and disabling them (#3408)

packages/ui/package.json

@@ -7,7 +7,8 @@
   "exports": {
     ".": "./index.ts",
     "./styles.css": "./src/styles.css",
-    "./hooks": "./src/hooks/index.ts"
+    "./hooks": "./src/hooks/index.ts",
+    "./icons": "./src/icons/index.ts"
   },
   "typesVersions": {
     "*": {
@@ -36,7 +37,8 @@
     "mantine-react-table": "2.0.0-beta.9",
     "next": "15.3.4",
     "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react-dom": "19.1.0",
+    "svgson": "^5.3.1"
   },
   "devDependencies": {
     "@homarr/eslint-config": "workspace:^0.2.0",

packages/ui/src/icons/create.ts

@@ -0,0 +1,27 @@
+import type { IconNode } from "@tabler/icons-react";
+import { createReactComponent } from "@tabler/icons-react";
+import { parseSync } from "svgson";
+
+import { capitalize } from "@homarr/common";
+
+interface CustomIconOptions {
+  name: string;
+  svgContent: string;
+  type: "outline" | "filled";
+}
+
+export const createCustomIcon = ({ svgContent, type, name }: CustomIconOptions) => {
+  const icon = parseSync(svgContent);
+
+  const children = icon.children.map(({ name, attributes }, i) => {
+    attributes.key = `svg-${i}`;
+
+    attributes.strokeWidth = attributes["stroke-width"] ?? "2";
+    delete attributes["stroke-width"];
+
+    return [name, attributes] satisfies IconNode[number];
+  });
+
+  const pascalCaseName = `Icon${capitalize(name.replace("-", ""))}`;
+  return createReactComponent(type, name, pascalCaseName, children);
+};

packages/ui/src/icons/index.ts

@@ -0,0 +1,12 @@
+import { createCustomIcon } from "./create";
+
+export const IconPowerOff = createCustomIcon({
+  svgContent: `<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-power-off">
+        <path xmlns="http://www.w3.org/2000/svg" d="M3 3l18 18"/>
+	<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+	<path d="M7 6a7.75 7.75 0 1 0 10 0" />
+	<path d="M12 4l0 4" />
+</svg>`,
+  type: "outline",
+  name: "power-off",
+});