@plutonhq/core-frontend 0.0.1

package/dist/components/Device/EditDevice/EditDevice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditDevice.d.ts","sourceRoot":"","sources":["../../../../src/components/Device/EditDevice/EditDevice.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,MAAM,EAAkB,MAAM,yBAAyB,CAAC;AAQjE,KAAK,eAAe,GAAG;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,UAAU,GAAI,mBAAmB,eAAe,4CAqIrD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/Device/EditDevice/EditDevice.js

@@ -0,0 +1,130 @@
+import { jsxs as a, jsx as e, Fragment as N } from "react/jsx-runtime";
+import { useState as d, useEffect as w } from "react";
+import { toast as y } from "react-toastify";
+import l from "../../common/Icon/Icon.js";
+import T from "../../common/SidePanel/SidePanel.js";
+import s from "./EditDevice.module.scss.js";
+import U from "../../common/form/Input/Input.js";
+import { useUpdateDevice as R } from "../../../services/devices.js";
+import F from "../../common/FolderPicker/FolderPicker.js";
+import I from "../DeviceRcloneSettings/DeviceRcloneSettings.js";
+import M from "../DeviceResticSettings/DeviceResticSettings.js";
+import x, { TabList as z, Tab as p, TabPanel as g } from "../../common/Tabs/Tabs.js";
+const H = ({ close: S, device: n }) => {
+  var v, h, D, b;
+  const [c, m] = d({ name: "" }), [t, o] = d(() => ({
+    name: n.name,
+    settings: n.settings || {}
+  })), [E, u] = d(!1), f = R();
+  w(() => {
+    t.name && m((i) => ({ ...i, name: "" }));
+  }, [t.name]);
+  const k = () => {
+    console.log("newDevice :", t), m({ name: "" });
+    const i = { ...c };
+    t.name || (i.name = "Required"), m(i), Object.values(i).some((r) => r !== "") === !1 && f.mutate(
+      {
+        id: n.id,
+        data: t
+      },
+      {
+        onError: (r) => {
+          console.log("error :", r), y.error(r.message || "Error Updating Device.");
+        },
+        onSuccess: (r) => {
+          console.log("Success :", r), y.success("Device Updated!", { autoClose: 5e3 });
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ a(
+    T,
+    {
+      title: `Edit Device ${n.name}`,
+      icon: /* @__PURE__ */ e(l, { type: "devices", size: 20 }),
+      close: S,
+      footer: /* @__PURE__ */ a(N, { children: [
+        /* @__PURE__ */ e("div", { className: s.footerLeft, children: /* @__PURE__ */ e("div", { className: s.summary }) }),
+        /* @__PURE__ */ e("div", { className: s.footerRight, children: /* @__PURE__ */ a("button", { className: s.createButton, onClick: () => k(), children: [
+          /* @__PURE__ */ e(l, { type: "check", size: 12 }),
+          " Update Device"
+        ] }) })
+      ] }),
+      children: [
+        f.isPending && /* @__PURE__ */ e("div", { className: s.loader, children: /* @__PURE__ */ e(l, { size: 36, type: "loading" }) }),
+        /* @__PURE__ */ a("div", { className: s.field, children: [
+          /* @__PURE__ */ e("label", { className: s.label, children: "Device Name*" }),
+          c.name && /* @__PURE__ */ e("span", { className: s.fieldErrorLabel, children: c.name }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              className: s.titleInput,
+              type: "text",
+              placeholder: "Device Name",
+              value: t.name || "",
+              onChange: (i) => o({ ...t, name: i.target.value })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a(x, { defaultValue: "general", children: [
+          /* @__PURE__ */ a(z, { children: [
+            /* @__PURE__ */ e(p, { value: "general", label: "General", icon: "settings" }),
+            /* @__PURE__ */ e(p, { value: "restic", label: "Restic", icon: "restic" }),
+            /* @__PURE__ */ e(p, { value: "rclone", label: "Rclone", icon: "rclone" })
+          ] }),
+          /* @__PURE__ */ e(g, { value: "general", children: /* @__PURE__ */ e(N, { children: /* @__PURE__ */ a("div", { className: s.field, children: [
+            /* @__PURE__ */ e(
+              U,
+              {
+                label: "Temporary Working Directory",
+                fieldValue: ((v = t.settings) == null ? void 0 : v.tempDir) || "",
+                onUpdate: (i) => o({ ...t, settings: { ...t.settings, tempDir: i } }),
+                full: !0,
+                hint: "Where the backup, restores and downloads will be temporarily stored."
+              }
+            ),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                className: s.fileManagerBtn,
+                "data-tooltip-id": "appTooltip",
+                "data-tooltip-content": "Open FileManager to Select Directory",
+                "data-tooltip-place": "top",
+                onClick: () => u(!0),
+                children: /* @__PURE__ */ e(l, { type: "folders", size: 16 })
+              }
+            )
+          ] }) }) }),
+          /* @__PURE__ */ e(g, { value: "restic", children: /* @__PURE__ */ e(
+            M,
+            {
+              settings: (h = t.settings) == null ? void 0 : h.restic,
+              onUpdate: (i) => o({ ...t, settings: { ...t.settings, restic: i } })
+            }
+          ) }),
+          /* @__PURE__ */ e(g, { value: "rclone", children: /* @__PURE__ */ e(
+            I,
+            {
+              settings: (D = t.settings) == null ? void 0 : D.rclone,
+              onUpdate: (i) => o({ ...t, settings: { ...t.settings, rclone: i } })
+            }
+          ) })
+        ] }),
+        E && /* @__PURE__ */ e(
+          F,
+          {
+            deviceId: n.id,
+            title: "Select Temporary Working Directory",
+            selected: ((b = t.settings) == null ? void 0 : b.tempDir) || "",
+            close: () => u(!1),
+            onSelect: (i) => o({ ...t, settings: { ...t.settings, tempDir: i } })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  H as default
+};
+//# sourceMappingURL=EditDevice.js.map

package/dist/components/Device/EditDevice/EditDevice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditDevice.js","sources":["../../../../src/components/Device/EditDevice/EditDevice.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { toast } from 'react-toastify';\r\nimport Icon from '../../common/Icon/Icon';\r\nimport SidePanel from '../../common/SidePanel/SidePanel';\r\nimport classes from './EditDevice.module.scss';\r\nimport { Device, DeviceSettings } from '../../../@types/devices';\r\nimport Input from '../../common/form/Input/Input';\r\nimport { useUpdateDevice } from '../../../services/devices';\r\nimport FolderPicker from '../../common/FolderPicker/FolderPicker';\r\nimport DeviceRcloneSettings from '../DeviceRcloneSettings/DeviceRcloneSettings';\r\nimport DeviceResticSettings from '../DeviceResticSettings/DeviceResticSettings';\r\nimport Tabs, { Tab, TabList, TabPanel } from '../../common/Tabs/Tabs';\r\n\r\ntype EditDeviceProps = {\r\n   device: Device;\r\n   close: () => void;\r\n};\r\n\r\nconst EditDevice = ({ close, device }: EditDeviceProps) => {\r\n   const [inputError, setInputErrors] = useState({ name: '' });\r\n   const [newDevice, setNewDevice] = useState<{ name: string; settings: DeviceSettings | undefined }>(() => ({\r\n      name: device.name,\r\n      settings: device.settings || {},\r\n   }));\r\n   const [showFileManager, setShowFileManager] = useState(false);\r\n   const updateDeviceMutation = useUpdateDevice();\r\n\r\n   useEffect(() => {\r\n      if (newDevice.name) {\r\n         setInputErrors((currentState) => ({ ...currentState, name: '' }));\r\n      }\r\n   }, [newDevice.name]);\r\n\r\n   const updateDevice = () => {\r\n      console.log('newDevice :', newDevice);\r\n      setInputErrors({ name: '' });\r\n\r\n      const errors = { ...inputError };\r\n\r\n      if (!newDevice.name) {\r\n         errors.name = 'Required';\r\n      }\r\n\r\n      setInputErrors(errors);\r\n\r\n      if (Object.values(errors).some((error) => error !== '') === false) {\r\n         updateDeviceMutation.mutate(\r\n            {\r\n               id: device.id,\r\n               data: newDevice,\r\n            },\r\n            {\r\n               onError: (error: any) => {\r\n                  console.log('error :', error);\r\n                  toast.error(error.message || `Error Updating Device.`);\r\n               },\r\n               onSuccess: (data: any) => {\r\n                  console.log('Success :', data);\r\n                  toast.success(`Device Updated!`, { autoClose: 5000 });\r\n               },\r\n            },\r\n         );\r\n      }\r\n   };\r\n   return (\r\n      <SidePanel\r\n         title={`Edit Device ${device.name}`}\r\n         icon={<Icon type={'devices'} size={20} />}\r\n         close={close}\r\n         footer={\r\n            <>\r\n               <div className={classes.footerLeft}>\r\n                  <div className={classes.summary}></div>\r\n               </div>\r\n               <div className={classes.footerRight}>\r\n                  <button className={classes.createButton} onClick={() => updateDevice()}>\r\n                     <Icon type=\"check\" size={12} /> Update Device\r\n                  </button>\r\n               </div>\r\n            </>\r\n         }\r\n      >\r\n         {updateDeviceMutation.isPending && (\r\n            <div className={classes.loader}>\r\n               <Icon size={36} type=\"loading\" />\r\n            </div>\r\n         )}\r\n         <div className={classes.field}>\r\n            <label className={classes.label}>Device Name*</label>\r\n            {inputError.name && <span className={classes.fieldErrorLabel}>{inputError.name}</span>}\r\n            <input\r\n               className={classes.titleInput}\r\n               type=\"text\"\r\n               placeholder=\"Device Name\"\r\n               value={newDevice.name || ''}\r\n               onChange={(e) => setNewDevice({ ...newDevice, name: e.target.value })}\r\n            />\r\n         </div>\r\n         <Tabs defaultValue=\"general\">\r\n            <TabList>\r\n               <Tab value=\"general\" label=\"General\" icon=\"settings\" />\r\n               <Tab value=\"restic\" label=\"Restic\" icon=\"restic\" />\r\n               <Tab value=\"rclone\" label=\"Rclone\" icon=\"rclone\" />\r\n            </TabList>\r\n            <TabPanel value=\"general\">\r\n               <>\r\n                  <div className={classes.field}>\r\n                     <Input\r\n                        label=\"Temporary Working Directory\"\r\n                        fieldValue={newDevice.settings?.tempDir || ''}\r\n                        onUpdate={(val) => setNewDevice({ ...newDevice, settings: { ...newDevice.settings, tempDir: val } })}\r\n                        full={true}\r\n                        hint=\"Where the backup, restores and downloads will be temporarily stored.\"\r\n                     />\r\n                     <button\r\n                        className={classes.fileManagerBtn}\r\n                        data-tooltip-id=\"appTooltip\"\r\n                        data-tooltip-content=\"Open FileManager to Select Directory\"\r\n                        data-tooltip-place=\"top\"\r\n                        onClick={() => setShowFileManager(true)}\r\n                     >\r\n                        <Icon type=\"folders\" size={16} />\r\n                     </button>\r\n                  </div>\r\n               </>\r\n            </TabPanel>\r\n            <TabPanel value=\"restic\">\r\n               <DeviceResticSettings\r\n                  settings={newDevice.settings?.restic}\r\n                  onUpdate={(resticSettings) => setNewDevice({ ...newDevice, settings: { ...newDevice.settings, restic: resticSettings } })}\r\n               />\r\n            </TabPanel>\r\n            <TabPanel value=\"rclone\">\r\n               <DeviceRcloneSettings\r\n                  settings={newDevice.settings?.rclone}\r\n                  onUpdate={(rcloneSettings) => setNewDevice({ ...newDevice, settings: { ...newDevice.settings, rclone: rcloneSettings } })}\r\n               />\r\n            </TabPanel>\r\n         </Tabs>\r\n\r\n         {showFileManager && (\r\n            <FolderPicker\r\n               deviceId={device.id}\r\n               title=\"Select Temporary Working Directory\"\r\n               selected={newDevice.settings?.tempDir || ''}\r\n               close={() => setShowFileManager(false)}\r\n               onSelect={(val) => setNewDevice({ ...newDevice, settings: { ...newDevice.settings, tempDir: val } })}\r\n            />\r\n         )}\r\n      </SidePanel>\r\n   );\r\n};\r\n\r\nexport default EditDevice;\r\n"],"names":["EditDevice","close","device","inputError","setInputErrors","useState","newDevice","setNewDevice","showFileManager","setShowFileManager","updateDeviceMutation","useUpdateDevice","useEffect","currentState","updateDevice","errors","error","toast","data","jsxs","SidePanel","jsx","Icon","Fragment","classes","e","Tabs","TabList","Tab","TabPanel","Input","_a","val","DeviceResticSettings","_b","resticSettings","DeviceRcloneSettings","_c","rcloneSettings","FolderPicker","_d"],"mappings":"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"}

package/dist/components/Device/EditDevice/EditDevice.module.scss

@@ -0,0 +1,110 @@
+//Fields
+
+.field {
+   margin-bottom: 20px;
+   width: 100%;
+   position: relative;
+   .fieldErrorLabel {
+      position: absolute;
+      right: 10px;
+      top: 15px;
+      background-color: var(--error-bg-active);
+      color: var(--error-active-text);
+      padding: 1px 12px;
+      border-radius: 20px;
+      font-size: 0.75rem;
+      letter-spacing: 0.2px;
+      z-index: 2;
+   }
+   .fileManagerBtn {
+      position: absolute;
+      right: 0;
+      top: 22px;
+      padding: 10px;
+      cursor: pointer;
+      color: var(--icon-color);
+      &:hover {
+         color: var(--primary-color);
+      }
+   }
+}
+
+.label {
+   font-weight: 600;
+   display: block;
+   margin-bottom: 8px;
+   font-size: 0.75rem;
+}
+
+.titleInput {
+   width: 100%;
+   border: 1px solid var(--line-color);
+   background-color: var(--content-background-color);
+   color: var(--content-text-color);
+   padding: 15px;
+   font-size: 0.75rem;
+   border-radius: 6px;
+   box-sizing: border-box;
+   &:focus {
+      outline: none;
+      border-color: var(--line-active-color);
+   }
+}
+
+.createButton {
+   border-radius: 6px;
+   font-size: 0.75rem;
+   padding: 12px 20px;
+   color: var(--primary-text-color);
+   background-color: var(--primary-color);
+   cursor: pointer;
+}
+
+.loader {
+   position: absolute;
+   z-index: 9;
+   width: 100%;
+   height: 100%;
+   left: 0;
+   top: 0;
+   background-color: var(--content-background-color);
+   opacity: 0.7;
+   cursor: default;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+}
+
+.tabs {
+   padding: 10px;
+   border: 1px solid var(--line-color);
+   border-radius: 6px 6px 0 0;
+   ul {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+      display: flex;
+      gap: 10px;
+      li {
+         padding: 3px 12px;
+         border-radius: 20px;
+         cursor: pointer;
+         span {
+            color: var(--icon-color);
+         }
+         &.tabActive {
+            color: var(--primary-color);
+            background-color: var(--primary-color-light);
+            span {
+               color: var(--primary-color);
+            }
+         }
+      }
+   }
+}
+.tabContent {
+   padding: 20px;
+   border: 1px solid var(--line-color);
+   border-top: 0;
+   border-radius: 0 0 6px 6px;
+}

package/dist/components/Device/EditDevice/EditDevice.module.scss.js

@@ -0,0 +1,20 @@
+const e = "EditDevice-module__field___BvlEl", t = "EditDevice-module__fieldErrorLabel___q-MtO", l = "EditDevice-module__fileManagerBtn___Vybxr", _ = "EditDevice-module__label___TlxIz", i = "EditDevice-module__titleInput___tjChV", o = "EditDevice-module__createButton___LtDJ0", d = "EditDevice-module__loader___jATKz", a = {
+  field: e,
+  fieldErrorLabel: t,
+  fileManagerBtn: l,
+  label: _,
+  titleInput: i,
+  createButton: o,
+  loader: d
+};
+export {
+  o as createButton,
+  a as default,
+  e as field,
+  t as fieldErrorLabel,
+  l as fileManagerBtn,
+  _ as label,
+  d as loader,
+  i as titleInput
+};
+//# sourceMappingURL=EditDevice.module.scss.js.map

package/dist/components/Device/EditDevice/EditDevice.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditDevice.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/components/Plan/AddPlan/AddPlan.d.ts

@@ -0,0 +1,7 @@
+type AddPlanProps = {
+    isPRO?: boolean;
+    close: () => void;
+};
+declare const AddPlan: ({ close }: AddPlanProps) => import("react/jsx-runtime").JSX.Element;
+export default AddPlan;
+//# sourceMappingURL=AddPlan.d.ts.map

package/dist/components/Plan/AddPlan/AddPlan.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddPlan.d.ts","sourceRoot":"","sources":["../../../../src/components/Plan/AddPlan/AddPlan.tsx"],"names":[],"mappings":"AASA,KAAK,YAAY,GAAG;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,OAAO,GAAI,WAAW,YAAY,4CAuCvC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Plan/AddPlan/AddPlan.js

@@ -0,0 +1,38 @@
+import { jsx as u } from "react/jsx-runtime";
+import { useState as c } from "react";
+import { toast as s } from "react-toastify";
+import { useNavigate as m } from "react-router";
+import { DEFAULT_PLAN_SETTINGS as p } from "../../../utils/constants.js";
+import { useCreatePlan as g } from "../../../services/plans.js";
+import P from "../PlanForm/PlanForm.js";
+const k = ({ close: o }) => {
+  const [n, i] = c(p), r = g(), l = m(), a = () => {
+    console.log("newPlan :", n), r.mutate(n, {
+      onError: (e) => {
+        console.log("error :", e), s.error(e.message || "Error Creating New Backup Plan.");
+      },
+      onSuccess: (e) => {
+        if (console.log("Success :", e), s.success("New Backup Plan Created!", { autoClose: 5e3 }), o(), e != null && e.result) {
+          const t = Array.isArray(e.result) ? e.result[0].id : e.result.id;
+          t && l(`/plan/${t}?pendingbackup=1`);
+        }
+      }
+    });
+  };
+  return /* @__PURE__ */ u(
+    P,
+    {
+      title: "Add New Plan",
+      type: "add",
+      isSubmitting: r.isPending,
+      planSettings: n,
+      onPlanSettingsChange: i,
+      onSubmit: a,
+      close: o
+    }
+  );
+};
+export {
+  k as default
+};
+//# sourceMappingURL=AddPlan.js.map

package/dist/components/Plan/AddPlan/AddPlan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddPlan.js","sources":["../../../../src/components/Plan/AddPlan/AddPlan.tsx"],"sourcesContent":["import { useState } from 'react';\r\nimport { toast } from 'react-toastify';\r\nimport { useNavigate } from 'react-router';\r\nimport { NewPlanSettings } from '../../../@types/plans';\r\nimport { DEFAULT_PLAN_SETTINGS } from '../../../utils/constants';\r\nimport { useCreatePlan } from '../../../services/plans';\r\n\r\nimport PlanForm from '../PlanForm/PlanForm';\r\n\r\ntype AddPlanProps = {\r\n   isPRO?: boolean;\r\n   close: () => void;\r\n};\r\n\r\nconst AddPlan = ({ close }: AddPlanProps) => {\r\n   const [newPlan, setNewPlan] = useState<NewPlanSettings>(DEFAULT_PLAN_SETTINGS);\r\n\r\n   const createPlanMutation = useCreatePlan();\r\n   const navigate = useNavigate();\r\n\r\n   const createBackup = () => {\r\n      console.log('newPlan :', newPlan);\r\n\r\n      createPlanMutation.mutate(newPlan, {\r\n         onError: (error: any) => {\r\n            console.log('error :', error);\r\n            toast.error(error.message || `Error Creating New Backup Plan.`);\r\n         },\r\n         onSuccess: (data: any) => {\r\n            console.log('Success :', data);\r\n            toast.success(`New Backup Plan Created!`, { autoClose: 5000 });\r\n            close();\r\n            if (data?.result) {\r\n               const planID = Array.isArray(data.result) ? data.result[0].id : data.result.id;\r\n               if (planID) {\r\n                  navigate(`/plan/${planID}?pendingbackup=1`);\r\n               }\r\n            }\r\n         },\r\n      });\r\n   };\r\n\r\n   return (\r\n      <PlanForm\r\n         title=\"Add New Plan\"\r\n         type=\"add\"\r\n         isSubmitting={createPlanMutation.isPending}\r\n         planSettings={newPlan}\r\n         onPlanSettingsChange={setNewPlan}\r\n         onSubmit={createBackup}\r\n         close={close}\r\n      />\r\n   );\r\n};\r\n\r\nexport default AddPlan;\r\n"],"names":["AddPlan","close","newPlan","setNewPlan","useState","DEFAULT_PLAN_SETTINGS","createPlanMutation","useCreatePlan","navigate","useNavigate","createBackup","error","toast","data","planID","jsx","PlanForm"],"mappings":";;;;;;;AAcA,MAAMA,IAAU,CAAC,EAAE,OAAAC,QAA0B;AAC1C,QAAM,CAACC,GAASC,CAAU,IAAIC,EAA0BC,CAAqB,GAEvEC,IAAqBC,EAAA,GACrBC,IAAWC,EAAA,GAEXC,IAAe,MAAM;AACxB,YAAQ,IAAI,aAAaR,CAAO,GAEhCI,EAAmB,OAAOJ,GAAS;AAAA,MAChC,SAAS,CAACS,MAAe;AACtB,gBAAQ,IAAI,WAAWA,CAAK,GAC5BC,EAAM,MAAMD,EAAM,WAAW,iCAAiC;AAAA,MACjE;AAAA,MACA,WAAW,CAACE,MAAc;AAIvB,YAHA,QAAQ,IAAI,aAAaA,CAAI,GAC7BD,EAAM,QAAQ,4BAA4B,EAAE,WAAW,KAAM,GAC7DX,EAAA,GACIY,KAAA,QAAAA,EAAM,QAAQ;AACf,gBAAMC,IAAS,MAAM,QAAQD,EAAK,MAAM,IAAIA,EAAK,OAAO,CAAC,EAAE,KAAKA,EAAK,OAAO;AAC5E,UAAIC,KACDN,EAAS,SAASM,CAAM,kBAAkB;AAAA,QAEhD;AAAA,MACH;AAAA,IAAA,CACF;AAAA,EACJ;AAEA,SACG,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,OAAM;AAAA,MACN,MAAK;AAAA,MACL,cAAcV,EAAmB;AAAA,MACjC,cAAcJ;AAAA,MACd,sBAAsBC;AAAA,MACtB,UAAUO;AAAA,MACV,OAAAT;AAAA,IAAA;AAAA,EAAA;AAGT;"}

package/dist/components/Plan/AddPlan/AddPlan.module.scss

@@ -0,0 +1,191 @@
+//Fields
+
+.field {
+   margin-bottom: 20px;
+   width: 100%;
+   position: relative;
+   .fieldErrorLabel {
+      position: absolute;
+      right: 10px;
+      top: 15px;
+      background-color: var(--error-bg-active);
+      color: var(--error-active-text);
+      padding: 1px 12px;
+      border-radius: 20px;
+      font-size: 0.75rem;
+      letter-spacing: 0.2px;
+      z-index: 2;
+   }
+}
+
+.label {
+   font-weight: 600;
+   display: block;
+   margin-bottom: 8px;
+   font-size: 0.75rem;
+}
+
+.titleInput {
+   width: 100%;
+   border: 1px solid var(--field-line-color);
+   background-color: var(--content-background-color);
+   color: var(--content-text-color);
+   padding: 15px;
+   font-size: 0.75rem;
+   border-radius: 6px;
+   box-sizing: border-box;
+   transition: all 0.12s linear;
+   &:focus {
+      outline: none;
+      border-color: var(--line-active-color);
+   }
+}
+
+.typeFieldOptions {
+   display: flex;
+   gap: 12px;
+}
+
+.typeFieldOption {
+   display: flex;
+   flex: 1 1 0px;
+   align-items: center;
+   border: 1px solid var(--line-color);
+   padding: 15px;
+   padding-right: 25px;
+   border-radius: 6px;
+   cursor: pointer;
+   font-size: 0.75rem;
+   position: relative;
+
+   :global(.checkMark) {
+      color: var(--primary-color);
+      position: absolute;
+      top: 5px;
+      right: 5px;
+   }
+}
+
+.forgetByAgeField {
+   display: flex;
+   flex-direction: row;
+   gap: 10px;
+   width: 50%;
+}
+
+.customPolicyOption {
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+   margin-bottom: 10px;
+   & > div {
+      width: 100px;
+      margin: 0 10px;
+   }
+}
+
+.typeFieldActive {
+   background-color: var(--background-color);
+   border-color: var(--primary-color);
+}
+
+.typeFieldIcon {
+   margin-right: 10px;
+   opacity: 0.4;
+}
+
+.typeFieldContent {
+   h4 {
+      margin: 0;
+      margin-bottom: 5px;
+   }
+   p {
+      margin: 0;
+   }
+}
+
+.intervalField {
+   display: flex;
+   gap: 10px;
+   align-items: center;
+}
+
+.pathPickerField {
+   display: flex;
+   div[class*='_paths_'] {
+      border-radius: 0 4px 4px 4px;
+   }
+}
+
+.pathPickerFieldTabs {
+   display: flex;
+   margin: 0;
+   padding: 0;
+   li {
+      list-style-type: none;
+      cursor: pointer;
+      padding: 4px 12px;
+      border: 1px solid var(--content-background-color);
+      border-bottom-color: transparent;
+      border-radius: 4px 4px 0 0;
+      position: relative;
+      bottom: -1px;
+      &.pathPickerFieldActive {
+         border-color: var(--line-color);
+         border-bottom-color: var(--content-background-color);
+      }
+   }
+}
+
+.weekDays {
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+   border: 1px solid var(--line-color);
+   border-radius: 6px;
+
+   button {
+      padding: 6px 8px;
+      color: var(--content-text-color);
+      text-transform: capitalize;
+      font-size: 0.75rem;
+      span {
+         color: var(--icon-color);
+      }
+      &.weekDayActive {
+         background-color: var(--primary-color-light);
+         color: var(--primary-color);
+         span {
+            color: var(--primary-color);
+         }
+      }
+   }
+}
+
+.summary {
+   font-size: 0.75rem;
+}
+
+.createButton {
+   border-radius: 6px;
+   font-size: 0.75rem;
+   padding: 12px 20px;
+   color: var(--primary-text-color);
+   background-color: var(--primary-color);
+   cursor: pointer;
+}
+
+.loader {
+   position: absolute;
+   z-index: 9;
+   width: 100%;
+   height: 100%;
+   left: 0;
+   top: 0;
+   background-color: var(--content-background-color);
+   opacity: 0.7;
+   cursor: default;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+}

package/dist/components/Plan/AddPlan/AddPlan.module.scss.js

@@ -0,0 +1,20 @@
+const l = "AddPlan-module__field___ksmZa", e = "AddPlan-module__fieldErrorLabel___I5zbL", _ = "AddPlan-module__label___Efum0", d = "AddPlan-module__titleInput___ydqGk", t = "AddPlan-module__summary___Xb5je", a = "AddPlan-module__createButton___wUE0-", o = "AddPlan-module__loader___c02Ed", n = {
+  field: l,
+  fieldErrorLabel: e,
+  label: _,
+  titleInput: d,
+  summary: t,
+  createButton: a,
+  loader: o
+};
+export {
+  a as createButton,
+  n as default,
+  l as field,
+  e as fieldErrorLabel,
+  _ as label,
+  o as loader,
+  t as summary,
+  d as titleInput
+};
+//# sourceMappingURL=AddPlan.module.scss.js.map

package/dist/components/Plan/AddPlan/AddPlan.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddPlan.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/components/Plan/BackupEvents/BackupEvents.d.ts

@@ -0,0 +1,14 @@
+import { BackupProgressData } from '../../../@types/backups';
+interface BackupEventsProps {
+    id: string;
+    planId: string;
+    sourceId: string;
+    sourceType: string;
+    type?: 'backup' | 'restore';
+    inProgress?: boolean;
+    progressData?: BackupProgressData | null;
+    close: () => void;
+}
+declare const BackupEvents: ({ id, type, sourceId, sourceType, planId, inProgress, progressData, close }: BackupEventsProps) => import("react/jsx-runtime").JSX.Element;
+export default BackupEvents;
+//# sourceMappingURL=BackupEvents.d.ts.map

package/dist/components/Plan/BackupEvents/BackupEvents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackupEvents.d.ts","sourceRoot":"","sources":["../../../../src/components/Plan/BackupEvents/BackupEvents.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAO7D,UAAU,iBAAiB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACzC,KAAK,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,GAAI,6EAAwF,iBAAiB,4CAwF9H,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/Plan/BackupEvents/BackupEvents.js

@@ -0,0 +1,73 @@
+import { jsxs as s, jsx as o, Fragment as g } from "react/jsx-runtime";
+import n from "../../common/Icon/Icon.js";
+import k from "../../common/SidePanel/SidePanel.js";
+import { getBackupEventActionMessage as L, getRestoreEventActionMessage as D } from "../../../utils/progressHelpers.js";
+import r from "./BackupEvents.module.scss.js";
+import { useGetBackupProgressOnce as R } from "../../../services/backups.js";
+import { useGetRestoreProgressOnce as F } from "../../../services/restores.js";
+import { useState as M, useMemo as w } from "react";
+import I from "../../common/Modal/Modal.js";
+import { formatDuration as O } from "../../../utils/helpers.js";
+const v = ({ id: d, type: t = "backup", sourceId: m, sourceType: h, planId: E, inProgress: c, progressData: A, close: _ }) => {
+  var u;
+  const [p, f] = M(!1), { data: $ } = t === "backup" ? R({ id: d, sourceId: m, sourceType: h, planId: E }) : F({ id: d, sourceId: m, sourceType: h, planId: E }), i = A || $;
+  console.log("progressDataToUse :", i);
+  const l = w(() => {
+    if (!i || !i.events) return "";
+    let e = "";
+    return i.events.forEach((a) => {
+      a.action === "TASK_COMPLETED" ? e = "Completed" : a.action === "TASK_CANCELLED" ? e = "Cancelled" : a.action === "FAILED_PERMANENTLY" && (e = "Failed");
+    }), e;
+  }, [i]);
+  return /* @__PURE__ */ s(k, { title: `${t}-${d} Events`, width: "1000px", icon: /* @__PURE__ */ o(n, { type: "logs", size: 18 }), footer: /* @__PURE__ */ o(g, {}), close: _, children: [
+    /* @__PURE__ */ s("div", { className: r.backupEventsContainer, children: [
+      /* @__PURE__ */ s("div", { className: r.header, children: [
+        /* @__PURE__ */ s(
+          "div",
+          {
+            title: "Status",
+            className: `${r.status} ${c ? r.inProgress : ""} 
+               ${!c && l === "Completed" ? r.hasCompleted : ""} ${!c && l === "Failed" ? r.hasFailed : ""}`,
+            children: [
+              /* @__PURE__ */ o(n, { type: c ? "loading" : l === "Completed" ? "check-circle-filled" : "error-circle-filled", size: 14 }),
+              " ",
+              c ? `${t} In Progress` : `${t} ${l}` || "Unknown"
+            ]
+          }
+        ),
+        /* @__PURE__ */ s("div", { title: "Duration", className: r.duration, children: [
+          /* @__PURE__ */ o(n, { type: "clock", size: 14 }),
+          " ",
+          (i == null ? void 0 : i.duration) && O(i.duration / 1e3) || "N/A"
+        ] })
+      ] }),
+      i && i.events && i.events.length > 0 ? /* @__PURE__ */ o("ul", { className: r.eventList, children: i.events.map((e, a) => {
+        const T = e.phase === "finished" && e.action === "TASK_COMPLETED", C = e.phase === "finished" && e.action === "FAILED_PERMANENTLY", P = e.action.includes("RETRY_ATTEMPT_"), S = e.action === "TASK_FAILED", N = e.action === "BACKUP_WARNING" || e.action === "RESTORE_WARNING" || e.action === "POST_BACKUP_PRUNE_FAILED" || e.action === "POST_BACKUP_REPO_STATS_FAILED";
+        return /* @__PURE__ */ s(
+          "li",
+          {
+            className: `${r.eventItem} ${e.error ? r.error : ""} 
+                           ${T ? r.completed : ""} ${C ? r.failed : ""} 
+                           ${P ? r.retrying : ""} ${S ? r.isError : ""} 
+                           ${N ? r.isWarning : ""}`,
+            children: [
+              /* @__PURE__ */ o("span", { className: r.icon, children: /* @__PURE__ */ o(n, { type: e.error || N ? "error-circle-filled" : "check-circle-filled", size: 16 }) }),
+              /* @__PURE__ */ o("span", { className: r.time, children: new Date(e.timestamp).toLocaleTimeString() }),
+              /* @__PURE__ */ o("span", { className: r.phase, children: e.phase }),
+              /* @__PURE__ */ s("span", { className: r.action, children: [
+                t === "backup" ? L(e.action) : D(e.action),
+                e.error && /* @__PURE__ */ o("span", { className: r.viewError, onClick: () => f(a), children: "View Error" })
+              ] })
+            ]
+          },
+          a
+        );
+      }) }) : null
+    ] }),
+    p && /* @__PURE__ */ o(I, { title: "Error Details", closeModal: () => f(!1), width: "400px", children: /* @__PURE__ */ o("div", { className: r.errorDetails, children: ((u = i == null ? void 0 : i.events[p]) == null ? void 0 : u.error) || "Unknown error occurred." }) })
+  ] });
+};
+export {
+  v as default
+};
+//# sourceMappingURL=BackupEvents.js.map