@plutonhq/core-frontend 0.0.1

package/dist/components/Plan/PlanHistory/PlanHistory.js

@@ -0,0 +1,49 @@
+import { jsxs as v, jsx as m } from "react/jsx-runtime";
+import { formatDateTime as p, formatDuration as c } from "../../../utils/helpers.js";
+import o from "./PlanHistory.module.scss.js";
+const w = ({ planId: r, history: s, itemsCount: a = 10 }) => {
+  const l = s.length < a ? a - s.length : 0, u = {
+    completed: "✔️ Completed",
+    failed: "❌ Failed",
+    started: "⏳ In Progress",
+    cancelled: "🛇 Cancelled"
+  }, $ = (t) => {
+    const e = (t == null ? void 0 : t.new) || 0, d = (t == null ? void 0 : t.modified) || 0, n = (t == null ? void 0 : t.removed) || 0, i = [];
+    return e > 0 && i.push(`${e} New`), d > 0 && i.push(`${d} Modified`), n > 0 && i.push(`${n} Removed`), i.length > 0 ? i.join(" / ") : "No Changes";
+  };
+  return /* @__PURE__ */ v("div", { className: `${o.history} ${a > 10 ? o.historyFull : ""}`, children: [
+    l > 0 && [...Array(l)].map((t, e) => /* @__PURE__ */ m(
+      "div",
+      {
+        className: o.historyItemEmpty,
+        "data-tooltip-id": "appTooltip",
+        "data-tooltip-content": "No History",
+        "data-tooltip-place": "top"
+      },
+      `${r}-empty-${e}`
+    )),
+    s.slice(0, a).map((t, e) => {
+      const d = t.duration || (t.ended ? (new Date(t.ended).getTime() - new Date(t.started).getTime()) / 1e3 : 0);
+      return /* @__PURE__ */ m(
+        "div",
+        {
+          className: `${t.status === "completed" ? o.historyItemSuccess : ""} ${t.status === "failed" || t.status === "cancelled" ? o.historyItemFailed : ""} ${t.inProgress ? o.historyItemPending : ""}`,
+          "data-tooltip-id": "htmlToolTip",
+          "data-tooltip-html": `
+                  <div><b>Status</b>: ${u[t.status] || "Unknown"}</div>
+                  <div><b>Changes</b>: ${$(t.changes)}</div>
+                  <div><b>Started</b>: ${p(t.started)}</div>
+                  <div><b>Ended</b>: ${t.ended ? p(t.ended) : " - "}</div>
+                  <div><b>Duration</b>: ${d ? c(d) : "0ms"} </div>
+               `,
+          "data-tooltip-place": "top"
+        },
+        `${r}-history-${e}`
+      );
+    })
+  ] });
+};
+export {
+  w as default
+};
+//# sourceMappingURL=PlanHistory.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlanHistory.js","sources":["../../../../src/components/Plan/PlanHistory/PlanHistory.tsx"],"sourcesContent":["import { Plan } from '../../../@types/plans';\r\nimport { formatDateTime, formatDuration } from '../../../utils/helpers';\r\nimport classes from './PlanHistory.module.scss';\r\n\r\ninterface PlanHistoryProps {\r\n   planId: string;\r\n   history: Plan['backups'];\r\n   itemsCount?: number;\r\n}\r\nconst PlanHistory = ({ planId, history, itemsCount = 10 }: PlanHistoryProps) => {\r\n   const emptySlots = history.length < itemsCount ? itemsCount - history.length : 0;\r\n   const statusVals = {\r\n      completed: '✔️ Completed',\r\n      failed: '❌ Failed',\r\n      started: '⏳ In Progress',\r\n      cancelled: '🛇 Cancelled',\r\n   };\r\n\r\n   const backupChanges = (changes: { new?: number; modified?: number; removed?: number }) => {\r\n      const newCount = changes?.new || 0;\r\n      const modifiedCount = changes?.modified || 0;\r\n      const removedCount = changes?.removed || 0;\r\n      const parts = [];\r\n      if (newCount > 0) parts.push(`${newCount} New`);\r\n      if (modifiedCount > 0) parts.push(`${modifiedCount} Modified`);\r\n      if (removedCount > 0) parts.push(`${removedCount} Removed`);\r\n      return parts.length > 0 ? parts.join(' / ') : 'No Changes';\r\n   };\r\n\r\n   return (\r\n      <div className={`${classes.history} ${itemsCount > 10 ? classes.historyFull : ''}`}>\r\n         {emptySlots > 0 &&\r\n            [...Array(emptySlots)].map((_, i) => (\r\n               <div\r\n                  className={classes.historyItemEmpty}\r\n                  key={`${planId}-empty-${i}`}\r\n                  data-tooltip-id=\"appTooltip\"\r\n                  data-tooltip-content=\"No History\"\r\n                  data-tooltip-place=\"top\"\r\n               ></div>\r\n            ))}\r\n\r\n         {history.slice(0, itemsCount).map((h, i) => {\r\n            const duration = h.duration || (h.ended ? (new Date(h.ended).getTime() - new Date(h.started).getTime()) / 1000 : 0);\r\n            return (\r\n               <div\r\n                  className={`${h.status === 'completed' ? classes.historyItemSuccess : ''} ${h.status === 'failed' || h.status === 'cancelled' ? classes.historyItemFailed : ''} ${h.inProgress ? classes.historyItemPending : ''}`}\r\n                  key={`${planId}-history-${i}`}\r\n                  data-tooltip-id=\"htmlToolTip\"\r\n                  data-tooltip-html={`\r\n                  <div><b>Status</b>: ${statusVals[h.status as keyof typeof statusVals] || 'Unknown'}</div>\r\n                  <div><b>Changes</b>: ${backupChanges(h.changes)}</div>\r\n                  <div><b>Started</b>: ${formatDateTime(h.started)}</div>\r\n                  <div><b>Ended</b>: ${h.ended ? formatDateTime(h.ended) : ' - '}</div>\r\n                  <div><b>Duration</b>: ${duration ? formatDuration(duration) : '0ms'} </div>\r\n               `}\r\n                  data-tooltip-place=\"top\"\r\n               ></div>\r\n            );\r\n         })}\r\n      </div>\r\n   );\r\n};\r\n\r\nexport default PlanHistory;\r\n"],"names":["PlanHistory","planId","history","itemsCount","emptySlots","statusVals","backupChanges","changes","newCount","modifiedCount","removedCount","parts","jsxs","classes","_","i","jsx","h","duration","formatDateTime","formatDuration"],"mappings":";;;AASA,MAAMA,IAAc,CAAC,EAAE,QAAAC,GAAQ,SAAAC,GAAS,YAAAC,IAAa,SAA2B;AAC7E,QAAMC,IAAaF,EAAQ,SAASC,IAAaA,IAAaD,EAAQ,SAAS,GACzEG,IAAa;AAAA,IAChB,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,EAAA,GAGRC,IAAgB,CAACC,MAAmE;AACvF,UAAMC,KAAWD,KAAA,gBAAAA,EAAS,QAAO,GAC3BE,KAAgBF,KAAA,gBAAAA,EAAS,aAAY,GACrCG,KAAeH,KAAA,gBAAAA,EAAS,YAAW,GACnCI,IAAQ,CAAA;AACd,WAAIH,IAAW,KAAGG,EAAM,KAAK,GAAGH,CAAQ,MAAM,GAC1CC,IAAgB,KAAGE,EAAM,KAAK,GAAGF,CAAa,WAAW,GACzDC,IAAe,KAAGC,EAAM,KAAK,GAAGD,CAAY,UAAU,GACnDC,EAAM,SAAS,IAAIA,EAAM,KAAK,KAAK,IAAI;AAAA,EACjD;AAEA,SACG,gBAAAC,EAAC,OAAA,EAAI,WAAW,GAAGC,EAAQ,OAAO,IAAIV,IAAa,KAAKU,EAAQ,cAAc,EAAE,IAC5E,UAAA;AAAA,IAAAT,IAAa,KACX,CAAC,GAAG,MAAMA,CAAU,CAAC,EAAE,IAAI,CAACU,GAAGC,MAC5B,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,WAAWH,EAAQ;AAAA,QAEnB,mBAAgB;AAAA,QAChB,wBAAqB;AAAA,QACrB,sBAAmB;AAAA,MAAA;AAAA,MAHd,GAAGZ,CAAM,UAAUc,CAAC;AAAA,IAAA,CAK9B;AAAA,IAEHb,EAAQ,MAAM,GAAGC,CAAU,EAAE,IAAI,CAACc,GAAGF,MAAM;AACzC,YAAMG,IAAWD,EAAE,aAAaA,EAAE,SAAS,IAAI,KAAKA,EAAE,KAAK,EAAE,QAAA,IAAY,IAAI,KAAKA,EAAE,OAAO,EAAE,QAAA,KAAa,MAAO;AACjH,aACG,gBAAAD;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,WAAW,GAAGC,EAAE,WAAW,cAAcJ,EAAQ,qBAAqB,EAAE,IAAII,EAAE,WAAW,YAAYA,EAAE,WAAW,cAAcJ,EAAQ,oBAAoB,EAAE,IAAII,EAAE,aAAaJ,EAAQ,qBAAqB,EAAE;AAAA,UAEhN,mBAAgB;AAAA,UAChB,qBAAmB;AAAA,wCACGR,EAAWY,EAAE,MAAiC,KAAK,SAAS;AAAA,yCAC3DX,EAAcW,EAAE,OAAO,CAAC;AAAA,yCACxBE,EAAeF,EAAE,OAAO,CAAC;AAAA,uCAC3BA,EAAE,QAAQE,EAAeF,EAAE,KAAK,IAAI,KAAK;AAAA,0CACtCC,IAAWE,EAAeF,CAAQ,IAAI,KAAK;AAAA;AAAA,UAEnE,sBAAmB;AAAA,QAAA;AAAA,QATd,GAAGjB,CAAM,YAAYc,CAAC;AAAA,MAAA;AAAA,IAYpC,CAAC;AAAA,EAAA,GACJ;AAEN;"}

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

@@ -0,0 +1,44 @@
+.history {
+   position: relative;
+   display: flex;
+   flex-direction: row;
+   height: 20px;
+   gap: 5px;
+   & > div {
+      width: 5px;
+      border-radius: 3px;
+   }
+
+   &.historyFull {
+      flex-wrap: wrap;
+      height: 50px;
+      padding-top: 10px;
+   }
+}
+
+.historyItemEmpty {
+   background-color: var(--line-color);
+}
+.historyItemSuccess {
+   background-color: var(--success-label);
+}
+.historyItemFailed {
+   background-color: #e88b84;
+}
+.historyItemCancelled {
+   background-color: #aaa;
+}
+.historyItemPending {
+   background-color: #e8e184;
+}
+
+@media only screen and (max-width: 768px) {
+   .history.historyFull {
+      height: 160px;
+      gap: 8px;
+      & > div {
+         width: 20px;
+         border-radius: 2px;
+      }
+   }
+}

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

@@ -0,0 +1,18 @@
+const t = "PlanHistory-module__history___O70vk", s = "PlanHistory-module__historyFull___pqpqE", o = "PlanHistory-module__historyItemEmpty___4Je-7", e = "PlanHistory-module__historyItemSuccess___KfwQp", i = "PlanHistory-module__historyItemFailed___xoTS-", _ = "PlanHistory-module__historyItemPending___emyV6", y = {
+  history: t,
+  historyFull: s,
+  historyItemEmpty: o,
+  historyItemSuccess: e,
+  historyItemFailed: i,
+  historyItemPending: _
+};
+export {
+  y as default,
+  t as history,
+  s as historyFull,
+  o as historyItemEmpty,
+  i as historyItemFailed,
+  _ as historyItemPending,
+  e as historyItemSuccess
+};
+//# sourceMappingURL=PlanHistory.module.scss.js.map

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

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

package/dist/components/Plan/PlanItems/PlanItem.d.ts

@@ -0,0 +1,8 @@
+import { Plan } from '../../../@types/plans';
+interface PlanItemProps {
+    plan: Plan;
+    layout?: 'grid' | 'list';
+}
+declare const PlanItem: ({ plan, layout }: PlanItemProps) => import("react/jsx-runtime").JSX.Element;
+export default PlanItem;
+//# sourceMappingURL=PlanItem.d.ts.map

package/dist/components/Plan/PlanItems/PlanItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlanItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Plan/PlanItems/PlanItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAQ7C,UAAU,aAAa;IACpB,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAED,QAAA,MAAM,QAAQ,GAAI,kBAA2B,aAAa,4CAuLzD,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/Plan/PlanItems/PlanItem.js

@@ -0,0 +1,171 @@
+import { jsxs as i, jsx as e, Fragment as M } from "react/jsx-runtime";
+import { useState as R } from "react";
+import { toast as P } from "react-toastify";
+import { NavLink as F } from "react-router";
+import { formatBytes as H, timeAgo as j, formatDateTime as D } from "../../../utils/helpers.js";
+import n from "../../common/Icon/Icon.js";
+import t from "./PlanItem.module.scss.js";
+import { useDeletePlan as L, usePerformBackup as U, usePausePlan as G, useResumePlan as W } from "../../../services/plans.js";
+import { planIntervalName as Y } from "../../../utils/plans.js";
+import q from "../PlanHistory/PlanHistory.js";
+const ie = ({ plan: b, layout: B = "list" }) => {
+  const {
+    id: o,
+    title: z,
+    sourceConfig: l = { includes: [], excludes: [] },
+    settings: S,
+    inProgress: p,
+    lastBackupTime: c = "",
+    stats: u,
+    backups: T = [],
+    storage: h,
+    isActive: a = !1,
+    verified: d,
+    device: r,
+    method: y = "backup"
+  } = b, { interval: w = { type: "daily", time: "10:00AM" }, encryption: E = !1, compression: A = !1 } = S, [g, k] = R(!1), C = L(), f = U(), v = G(), N = W(), $ = v.isPending || N.isPending || f.isPending || C.isPending, m = y === "sync", I = () => {
+    p || $ || (console.log(" changeStatus:", !a), a ? P.promise(v.mutateAsync(o), {
+      pending: "Pausing backup Plan...",
+      success: "Backup Plan Paused",
+      error: {
+        render({ data: s }) {
+          return `Failed to Pause Backup Plan. ${(s == null ? void 0 : s.message) || "Unknown Error."}`;
+        }
+      }
+    }) : P.promise(N.mutateAsync(o), {
+      pending: "Resuming backup Plan...",
+      success: "Backup Plan Resumed",
+      error: {
+        render({ data: s }) {
+          return `Failed to Resume Backup Plan. ${(s == null ? void 0 : s.message) || "Unknown Error."}`;
+        }
+      }
+    }));
+  }, x = () => {
+    $ || (P.promise(
+      f.mutateAsync(o),
+      {
+        pending: `Starting ${m ? "Sync" : "Backup"}...`,
+        success: `${m ? "Sync" : "Backup"} initiated successfully! 🚀`,
+        error: {
+          render({ data: s }) {
+            return `Failed to start ${m ? "Sync" : "Backup"}. ${(s == null ? void 0 : s.message) || "Unknown Error."}`;
+          }
+        }
+      },
+      {
+        style: {
+          minWidth: "250px"
+        }
+      }
+    ), k(!1));
+  };
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: `${t.plan} ${B === "grid" ? t.planGrid : t.planList} ${d && d.hasError ? t.planHasError : ""}`,
+      children: [
+        /* @__PURE__ */ i("div", { className: t.leftContent, children: [
+          /* @__PURE__ */ e("div", { className: `${t.status} ${a ? "" : t.paused}`, children: /* @__PURE__ */ e(n, { type: y === "backup" ? "plans" : "sync", size: 28 }) }),
+          /* @__PURE__ */ e("div", { className: t.content, children: /* @__PURE__ */ i(F, { to: `/plan/${o}`, children: [
+            /* @__PURE__ */ i("div", { className: t.title, children: [
+              /* @__PURE__ */ e("h4", { children: z }),
+              E && /* @__PURE__ */ e("i", { "data-tooltip-id": "appTooltip", "data-tooltip-content": "Encrypted", "data-tooltip-place": "top", children: /* @__PURE__ */ e(n, { type: "encrypted", size: 14 }) }),
+              A && /* @__PURE__ */ e("i", { "data-tooltip-id": "appTooltip", "data-tooltip-content": "Compressed", "data-tooltip-place": "top", children: /* @__PURE__ */ e(n, { type: "compressed", size: 14 }) }),
+              !a && /* @__PURE__ */ e("i", { "data-tooltip-id": "appTooltip", "data-tooltip-content": "Plan Paused", "data-tooltip-place": "top", children: /* @__PURE__ */ e(n, { type: "pause", size: 14 }) }),
+              d && d.hasError && /* @__PURE__ */ e("i", { "data-tooltip-id": "appTooltip", "data-tooltip-content": "Plan Has Error", "data-tooltip-place": "top", children: /* @__PURE__ */ e(n, { size: 14, type: "error-circle-filled", color: "#dd6b6b" }) })
+            ] }),
+            /* @__PURE__ */ i("div", { className: t.sources, children: [
+              /* @__PURE__ */ i(
+                "span",
+                {
+                  "data-tooltip-id": "htmlToolTip",
+                  "data-tooltip-place": "top",
+                  "data-tooltip-html": l != null && l.includes ? l.includes.map((s) => `<div>${s}</div>`).join("") : "",
+                  children: [
+                    (r == null ? void 0 : r.name) && /* @__PURE__ */ i(M, { children: [
+                      /* @__PURE__ */ e(n, { type: r.id === "main" ? "computer" : "computer-remote", size: 13 }),
+                      " ",
+                      r.name
+                    ] }),
+                    /* @__PURE__ */ e("span", { className: t.sourceCount, children: l.includes.length })
+                  ]
+                }
+              ),
+              " ",
+              "-->",
+              " ",
+              h.type && /* @__PURE__ */ e("img", { src: `/providers/${h.type}.png` }),
+              h.name
+            ] })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ i("div", { className: t.rightContent, children: [
+          /* @__PURE__ */ i(
+            "div",
+            {
+              className: t.size,
+              "data-tooltip-id": "appTooltip",
+              "data-tooltip-place": "top",
+              "data-tooltip-hidden": !u.snapshots || y === "sync",
+              "data-tooltip-content": `Total Snapshots: ${u.snapshots.length}`,
+              children: [
+                /* @__PURE__ */ e(n, { type: "disk", size: 14 }),
+                " ",
+                /* @__PURE__ */ e("i", { children: H(u.size) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ i("div", { className: t.interval, children: [
+            /* @__PURE__ */ e(n, { type: "interval", size: 14 }),
+            " ",
+            /* @__PURE__ */ e("i", { children: Y(w) })
+          ] }),
+          /* @__PURE__ */ i(
+            "div",
+            {
+              className: t.time,
+              "data-tooltip-id": "appTooltip",
+              "data-tooltip-content": c ? `Last backed up on ${D(c)}` : "Hasn't been backed up yet",
+              "data-tooltip-place": "top",
+              "data-tooltip-hidden": p,
+              children: [
+                /* @__PURE__ */ e(n, { type: p ? "loading" : "clock", size: 14 }),
+                " ",
+                p ? "In Progress" : c ? j(new Date(c)) : "Not Yet"
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(q, { planId: o, history: T }),
+          /* @__PURE__ */ e("button", { className: `${t.moreBtn} ${g ? t.moreBtnActive : ""}`, onClick: () => k(!g), children: /* @__PURE__ */ e(n, { type: "dots-vertical", size: 14 }) })
+        ] }),
+        g && /* @__PURE__ */ i("div", { className: t.settings, children: [
+          /* @__PURE__ */ i("button", { onClick: x, children: [
+            /* @__PURE__ */ e(n, { type: "backup", size: 14 }),
+            " ",
+            m ? "Sync" : "Backup",
+            " Now"
+          ] }),
+          /* @__PURE__ */ i(
+            "button",
+            {
+              onClick: () => {
+                I(), k(!1);
+              },
+              children: [
+                /* @__PURE__ */ e(n, { type: a ? "pause" : "resume", size: 14 }),
+                " ",
+                a ? "Pause Plan" : "Resume Plan"
+              ]
+            }
+          )
+        ] })
+      ]
+    },
+    o
+  );
+};
+export {
+  ie as default
+};
+//# sourceMappingURL=PlanItem.js.map

package/dist/components/Plan/PlanItems/PlanItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlanItem.js","sources":["../../../../src/components/Plan/PlanItems/PlanItem.tsx"],"sourcesContent":["import { useState } from 'react';\r\nimport { toast } from 'react-toastify';\r\nimport { NavLink } from 'react-router';\r\nimport { Plan } from '../../../@types/plans';\r\nimport { formatBytes, formatDateTime, timeAgo } from '../../../utils/helpers';\r\nimport Icon from '../../common/Icon/Icon';\r\nimport classes from './PlanItem.module.scss';\r\nimport { useDeletePlan, usePausePlan, usePerformBackup, useResumePlan } from '../../../services/plans';\r\nimport { planIntervalName } from '../../../utils/plans';\r\nimport PlanHistory from '../PlanHistory/PlanHistory';\r\n\r\ninterface PlanItemProps {\r\n   plan: Plan;\r\n   layout?: 'grid' | 'list';\r\n}\r\n\r\nconst PlanItem = ({ plan, layout = 'list' }: PlanItemProps) => {\r\n   const {\r\n      id,\r\n      title,\r\n      sourceConfig = { includes: [], excludes: [] },\r\n      settings,\r\n      inProgress,\r\n      lastBackupTime = '',\r\n      stats,\r\n      backups = [],\r\n      storage,\r\n      isActive = false,\r\n      verified,\r\n      device,\r\n      method = 'backup',\r\n   } = plan;\r\n\r\n   const { interval = { type: 'daily', time: '10:00AM' }, encryption = false, compression = false } = settings;\r\n   const [showSettings, setShowSettings] = useState(false);\r\n\r\n   const deletePlanMutation = useDeletePlan();\r\n   const performBackupMutation = usePerformBackup();\r\n   const pauseMutation = usePausePlan();\r\n   const resumeMutation = useResumePlan();\r\n   const shouldBeInaccessible =\r\n      pauseMutation.isPending || resumeMutation.isPending || performBackupMutation.isPending || deletePlanMutation.isPending;\r\n   const isSync = method === 'sync';\r\n   const changeStatus = () => {\r\n      if (inProgress || shouldBeInaccessible) {\r\n         return;\r\n      }\r\n      // isActive, set it to false, else true\r\n      // When the action is being performed, the item should grey out and stay inaccessible.\r\n      // When this happens, the server should stop the restic Cron schedule\r\n      console.log(' changeStatus:', !isActive);\r\n      if (isActive) {\r\n         toast.promise(pauseMutation.mutateAsync(id), {\r\n            pending: 'Pausing backup Plan...',\r\n            success: 'Backup Plan Paused',\r\n            error: {\r\n               render({ data }: any) {\r\n                  return `Failed to Pause Backup Plan. ${data?.message || 'Unknown Error.'}`;\r\n               },\r\n            },\r\n         });\r\n      } else {\r\n         toast.promise(resumeMutation.mutateAsync(id), {\r\n            pending: 'Resuming backup Plan...',\r\n            success: 'Backup Plan Resumed',\r\n            error: {\r\n               render({ data }: any) {\r\n                  return `Failed to Resume Backup Plan. ${data?.message || 'Unknown Error.'}`;\r\n               },\r\n            },\r\n         });\r\n      }\r\n   };\r\n\r\n   const backupNow = () => {\r\n      if (shouldBeInaccessible) {\r\n         return;\r\n      }\r\n      toast.promise(\r\n         performBackupMutation.mutateAsync(id),\r\n         {\r\n            pending: `Starting ${isSync ? 'Sync' : 'Backup'}...`,\r\n            success: `${isSync ? 'Sync' : 'Backup'} initiated successfully! 🚀`,\r\n            error: {\r\n               render({ data }: any) {\r\n                  // When the promise reject, data will contains the error\r\n                  return `Failed to start ${isSync ? 'Sync' : 'Backup'}. ${data?.message || 'Unknown Error.'}`;\r\n               },\r\n            },\r\n         },\r\n         {\r\n            style: {\r\n               minWidth: '250px',\r\n            },\r\n         },\r\n      );\r\n      setShowSettings(false);\r\n   };\r\n\r\n   return (\r\n      <div\r\n         key={id}\r\n         className={`${classes.plan} ${layout === 'grid' ? classes.planGrid : classes.planList} ${verified && verified.hasError ? classes.planHasError : ''}`}\r\n      >\r\n         <div className={classes.leftContent}>\r\n            <div className={`${classes.status} ${!isActive ? classes.paused : ''}`}>\r\n               <Icon type={method === 'backup' ? 'plans' : 'sync'} size={28} />\r\n            </div>\r\n\r\n            <div className={classes.content}>\r\n               <NavLink to={`/plan/${id}`}>\r\n                  <div className={classes.title}>\r\n                     <h4>{title}</h4>\r\n                     {encryption && (\r\n                        <i data-tooltip-id=\"appTooltip\" data-tooltip-content={`Encrypted`} data-tooltip-place=\"top\">\r\n                           <Icon type=\"encrypted\" size={14} />\r\n                        </i>\r\n                     )}\r\n                     {compression && (\r\n                        <i data-tooltip-id=\"appTooltip\" data-tooltip-content={`Compressed`} data-tooltip-place=\"top\">\r\n                           <Icon type=\"compressed\" size={14} />\r\n                        </i>\r\n                     )}\r\n                     {!isActive && (\r\n                        <i data-tooltip-id=\"appTooltip\" data-tooltip-content={`Plan Paused`} data-tooltip-place=\"top\">\r\n                           <Icon type=\"pause\" size={14} />\r\n                        </i>\r\n                     )}\r\n                     {verified && verified.hasError && (\r\n                        <i data-tooltip-id=\"appTooltip\" data-tooltip-content={`Plan Has Error`} data-tooltip-place=\"top\">\r\n                           <Icon size={14} type={'error-circle-filled'} color=\"#dd6b6b\" />\r\n                        </i>\r\n                     )}\r\n                  </div>\r\n                  <div className={classes.sources}>\r\n                     <span\r\n                        data-tooltip-id=\"htmlToolTip\"\r\n                        data-tooltip-place=\"top\"\r\n                        data-tooltip-html={sourceConfig?.includes ? sourceConfig.includes.map((p) => `<div>${p}</div>`).join('') : ''}\r\n                     >\r\n                        {device?.name && (\r\n                           <>\r\n                              <Icon type={device.id === 'main' ? 'computer' : 'computer-remote'} size={13} /> {device.name}\r\n                           </>\r\n                        )}\r\n                        <span className={classes.sourceCount}>{sourceConfig.includes.length}</span>\r\n                     </span>{' '}\r\n                     {'-->'} {storage.type && <img src={`/providers/${storage.type}.png`} />}\r\n                     {storage.name}\r\n                     {/* {storagePath && storagePath !== '/' && '/' + storagePath} */}\r\n                  </div>\r\n               </NavLink>\r\n            </div>\r\n         </div>\r\n         <div className={classes.rightContent}>\r\n            <div\r\n               className={classes.size}\r\n               data-tooltip-id=\"appTooltip\"\r\n               data-tooltip-place=\"top\"\r\n               data-tooltip-hidden={!stats.snapshots || method === 'sync'}\r\n               data-tooltip-content={`Total Snapshots: ${stats.snapshots.length}`}\r\n            >\r\n               <Icon type=\"disk\" size={14} /> <i>{formatBytes(stats.size)}</i>\r\n            </div>\r\n            <div className={classes.interval}>\r\n               <Icon type=\"interval\" size={14} /> <i>{planIntervalName(interval)}</i>\r\n            </div>\r\n            <div\r\n               className={classes.time}\r\n               data-tooltip-id=\"appTooltip\"\r\n               data-tooltip-content={lastBackupTime ? `Last backed up on ${formatDateTime(lastBackupTime as string)}` : \"Hasn't been backed up yet\"}\r\n               data-tooltip-place=\"top\"\r\n               data-tooltip-hidden={inProgress}\r\n            >\r\n               <Icon type={inProgress ? 'loading' : 'clock'} size={14} />{' '}\r\n               {inProgress ? 'In Progress' : lastBackupTime ? timeAgo(new Date(lastBackupTime as string)) : 'Not Yet'}\r\n            </div>\r\n            <PlanHistory planId={id} history={backups} />\r\n            <button className={`${classes.moreBtn} ${showSettings ? classes.moreBtnActive : ''}`} onClick={() => setShowSettings(!showSettings)}>\r\n               <Icon type=\"dots-vertical\" size={14} />\r\n            </button>\r\n         </div>\r\n         {showSettings && (\r\n            <div className={classes.settings}>\r\n               <button onClick={backupNow}>\r\n                  <Icon type=\"backup\" size={14} /> {isSync ? 'Sync' : 'Backup'} Now\r\n               </button>\r\n               <button\r\n                  onClick={() => {\r\n                     changeStatus();\r\n                     setShowSettings(false);\r\n                  }}\r\n               >\r\n                  <Icon type={isActive ? 'pause' : 'resume'} size={14} /> {isActive ? 'Pause Plan' : 'Resume Plan'}\r\n               </button>\r\n            </div>\r\n         )}\r\n      </div>\r\n   );\r\n};\r\n\r\nexport default PlanItem;\r\n"],"names":["PlanItem","plan","layout","id","title","sourceConfig","settings","inProgress","lastBackupTime","stats","backups","storage","isActive","verified","device","method","interval","encryption","compression","showSettings","setShowSettings","useState","deletePlanMutation","useDeletePlan","performBackupMutation","usePerformBackup","pauseMutation","usePausePlan","resumeMutation","useResumePlan","shouldBeInaccessible","isSync","changeStatus","toast","data","backupNow","jsxs","classes","jsx","Icon","NavLink","p","Fragment","formatBytes","planIntervalName","formatDateTime","timeAgo","PlanHistory"],"mappings":";;;;;;;;;;AAgBA,MAAMA,KAAW,CAAC,EAAE,MAAAC,GAAM,QAAAC,IAAS,aAA4B;AAC5D,QAAM;AAAA,IACH,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC,IAAe,EAAE,UAAU,IAAI,UAAU,CAAA,EAAC;AAAA,IAC1C,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,OAAAC;AAAA,IACA,SAAAC,IAAU,CAAA;AAAA,IACV,SAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,EAAA,IACRd,GAEE,EAAE,UAAAe,IAAW,EAAE,MAAM,SAAS,MAAM,UAAA,GAAa,YAAAC,IAAa,IAAO,aAAAC,IAAc,GAAA,IAAUZ,GAC7F,CAACa,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAEhDC,IAAqBC,EAAA,GACrBC,IAAwBC,EAAA,GACxBC,IAAgBC,EAAA,GAChBC,IAAiBC,EAAA,GACjBC,IACHJ,EAAc,aAAaE,EAAe,aAAaJ,EAAsB,aAAaF,EAAmB,WAC1GS,IAAShB,MAAW,QACpBiB,IAAe,MAAM;AACxB,IAAIzB,KAAcuB,MAMlB,QAAQ,IAAI,kBAAkB,CAAClB,CAAQ,GACnCA,IACDqB,EAAM,QAAQP,EAAc,YAAYvB,CAAE,GAAG;AAAA,MAC1C,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,QACJ,OAAO,EAAE,MAAA+B,KAAa;AACnB,iBAAO,iCAAgCA,KAAA,gBAAAA,EAAM,YAAW,gBAAgB;AAAA,QAC3E;AAAA,MAAA;AAAA,IACH,CACF,IAEDD,EAAM,QAAQL,EAAe,YAAYzB,CAAE,GAAG;AAAA,MAC3C,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,QACJ,OAAO,EAAE,MAAA+B,KAAa;AACnB,iBAAO,kCAAiCA,KAAA,gBAAAA,EAAM,YAAW,gBAAgB;AAAA,QAC5E;AAAA,MAAA;AAAA,IACH,CACF;AAAA,EAEP,GAEMC,IAAY,MAAM;AACrB,IAAIL,MAGJG,EAAM;AAAA,MACHT,EAAsB,YAAYrB,CAAE;AAAA,MACpC;AAAA,QACG,SAAS,YAAY4B,IAAS,SAAS,QAAQ;AAAA,QAC/C,SAAS,GAAGA,IAAS,SAAS,QAAQ;AAAA,QACtC,OAAO;AAAA,UACJ,OAAO,EAAE,MAAAG,KAAa;AAEnB,mBAAO,mBAAmBH,IAAS,SAAS,QAAQ,MAAKG,KAAA,gBAAAA,EAAM,YAAW,gBAAgB;AAAA,UAC7F;AAAA,QAAA;AAAA,MACH;AAAA,MAEH;AAAA,QACG,OAAO;AAAA,UACJ,UAAU;AAAA,QAAA;AAAA,MACb;AAAA,IACH,GAEHd,EAAgB,EAAK;AAAA,EACxB;AAEA,SACG,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MAEE,WAAW,GAAGC,EAAQ,IAAI,IAAInC,MAAW,SAASmC,EAAQ,WAAWA,EAAQ,QAAQ,IAAIxB,KAAYA,EAAS,WAAWwB,EAAQ,eAAe,EAAE;AAAA,MAElJ,UAAA;AAAA,QAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAQ,aACrB,UAAA;AAAA,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAW,GAAGD,EAAQ,MAAM,IAAKzB,IAA4B,KAAjByB,EAAQ,MAAW,IACjE,UAAA,gBAAAC,EAACC,KAAK,MAAMxB,MAAW,WAAW,UAAU,QAAQ,MAAM,GAAA,CAAI,EAAA,CACjE;AAAA,UAEA,gBAAAuB,EAAC,OAAA,EAAI,WAAWD,EAAQ,SACrB,4BAACG,GAAA,EAAQ,IAAI,SAASrC,CAAE,IACrB,UAAA;AAAA,YAAA,gBAAAiC,EAAC,OAAA,EAAI,WAAWC,EAAQ,OACrB,UAAA;AAAA,cAAA,gBAAAC,EAAC,QAAI,UAAAlC,EAAA,CAAM;AAAA,cACVa,KACE,gBAAAqB,EAAC,KAAA,EAAE,mBAAgB,cAAa,wBAAsB,aAAa,sBAAmB,OACnF,4BAACC,GAAA,EAAK,MAAK,aAAY,MAAM,IAAI,GACpC;AAAA,cAEFrB,KACE,gBAAAoB,EAAC,KAAA,EAAE,mBAAgB,cAAa,wBAAsB,cAAc,sBAAmB,OACpF,4BAACC,GAAA,EAAK,MAAK,cAAa,MAAM,IAAI,GACrC;AAAA,cAEF,CAAC3B,KACC,gBAAA0B,EAAC,KAAA,EAAE,mBAAgB,cAAa,wBAAsB,eAAe,sBAAmB,OACrF,4BAACC,GAAA,EAAK,MAAK,SAAQ,MAAM,IAAI,GAChC;AAAA,cAEF1B,KAAYA,EAAS,8BAClB,KAAA,EAAE,mBAAgB,cAAa,wBAAsB,kBAAkB,sBAAmB,OACxF,UAAA,gBAAAyB,EAACC,KAAK,MAAM,IAAI,MAAM,uBAAuB,OAAM,WAAU,EAAA,CAChE;AAAA,YAAA,GAEN;AAAA,YACA,gBAAAH,EAAC,OAAA,EAAI,WAAWC,EAAQ,SACrB,UAAA;AAAA,cAAA,gBAAAD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACE,mBAAgB;AAAA,kBAChB,sBAAmB;AAAA,kBACnB,qBAAmB/B,KAAA,QAAAA,EAAc,WAAWA,EAAa,SAAS,IAAI,CAACoC,MAAM,QAAQA,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI;AAAA,kBAE1G,UAAA;AAAA,qBAAA3B,KAAA,gBAAAA,EAAQ,SACN,gBAAAsB,EAAAM,GAAA,EACG,UAAA;AAAA,sBAAA,gBAAAJ,EAACC,GAAA,EAAK,MAAMzB,EAAO,OAAO,SAAS,aAAa,mBAAmB,MAAM,GAAA,CAAI;AAAA,sBAAE;AAAA,sBAAEA,EAAO;AAAA,oBAAA,GAC3F;AAAA,sCAEF,QAAA,EAAK,WAAWuB,EAAQ,aAAc,UAAAhC,EAAa,SAAS,OAAA,CAAO;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAC/D;AAAA,cACP;AAAA,cAAM;AAAA,cAAEM,EAAQ,QAAQ,gBAAA2B,EAAC,OAAA,EAAI,KAAK,cAAc3B,EAAQ,IAAI,OAAA,CAAQ;AAAA,cACpEA,EAAQ;AAAA,YAAA,EAAA,CAEZ;AAAA,UAAA,EAAA,CACH,EAAA,CACH;AAAA,QAAA,GACH;AAAA,QACA,gBAAAyB,EAAC,OAAA,EAAI,WAAWC,EAAQ,cACrB,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,WAAWC,EAAQ;AAAA,cACnB,mBAAgB;AAAA,cAChB,sBAAmB;AAAA,cACnB,uBAAqB,CAAC5B,EAAM,aAAaM,MAAW;AAAA,cACpD,wBAAsB,oBAAoBN,EAAM,UAAU,MAAM;AAAA,cAEhE,UAAA;AAAA,gBAAA,gBAAA6B,EAACC,GAAA,EAAK,MAAK,QAAO,MAAM,IAAI;AAAA,gBAAE;AAAA,gBAAC,gBAAAD,EAAC,KAAA,EAAG,UAAAK,EAAYlC,EAAM,IAAI,EAAA,CAAE;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAE9D,gBAAA2B,EAAC,OAAA,EAAI,WAAWC,EAAQ,UACrB,UAAA;AAAA,YAAA,gBAAAC,EAACC,GAAA,EAAK,MAAK,YAAW,MAAM,IAAI;AAAA,YAAE;AAAA,YAAC,gBAAAD,EAAC,KAAA,EAAG,UAAAM,EAAiB5B,CAAQ,EAAA,CAAE;AAAA,UAAA,GACrE;AAAA,UACA,gBAAAoB;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,WAAWC,EAAQ;AAAA,cACnB,mBAAgB;AAAA,cAChB,wBAAsB7B,IAAiB,qBAAqBqC,EAAerC,CAAwB,CAAC,KAAK;AAAA,cACzG,sBAAmB;AAAA,cACnB,uBAAqBD;AAAA,cAErB,UAAA;AAAA,gBAAA,gBAAA+B,EAACC,KAAK,MAAMhC,IAAa,YAAY,SAAS,MAAM,IAAI;AAAA,gBAAG;AAAA,gBAC1DA,IAAa,gBAAgBC,IAAiBsC,EAAQ,IAAI,KAAKtC,CAAwB,CAAC,IAAI;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEhG,gBAAA8B,EAACS,GAAA,EAAY,QAAQ5C,GAAI,SAASO,GAAS;AAAA,UAC3C,gBAAA4B,EAAC,UAAA,EAAO,WAAW,GAAGD,EAAQ,OAAO,IAAIlB,IAAekB,EAAQ,gBAAgB,EAAE,IAAI,SAAS,MAAMjB,EAAgB,CAACD,CAAY,GAC/H,UAAA,gBAAAmB,EAACC,KAAK,MAAK,iBAAgB,MAAM,GAAA,CAAI,EAAA,CACxC;AAAA,QAAA,GACH;AAAA,QACCpB,KACE,gBAAAiB,EAAC,OAAA,EAAI,WAAWC,EAAQ,UACrB,UAAA;AAAA,UAAA,gBAAAD,EAAC,UAAA,EAAO,SAASD,GACd,UAAA;AAAA,YAAA,gBAAAG,EAACC,GAAA,EAAK,MAAK,UAAS,MAAM,IAAI;AAAA,YAAE;AAAA,YAAER,IAAS,SAAS;AAAA,YAAS;AAAA,UAAA,GAChE;AAAA,UACA,gBAAAK;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,SAAS,MAAM;AACZ,gBAAAJ,EAAA,GACAZ,EAAgB,EAAK;AAAA,cACxB;AAAA,cAEA,UAAA;AAAA,gBAAA,gBAAAkB,EAACC,KAAK,MAAM3B,IAAW,UAAU,UAAU,MAAM,IAAI;AAAA,gBAAE;AAAA,gBAAEA,IAAW,eAAe;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACtF,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,IA9FET;AAAA,EAAA;AAkGd;"}

package/dist/components/Plan/PlanItems/PlanItem.module.scss

@@ -0,0 +1,332 @@
+.plan {
+   position: relative;
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+   padding: 10px;
+   margin-bottom: 20px;
+   gap: 10px;
+   border-radius: 7px;
+   background-color: var(--content-background-color);
+   color: var(--content-text-color-light);
+   box-shadow: 0 0 15px var(--content-shadow-color);
+   transition: all 0.2s linear;
+   &:hover {
+      box-shadow: 0 0 20px var(--content-shadow-color);
+   }
+
+   .leftContent {
+      flex-basis: 60%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+   }
+   .rightContent {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      flex-basis: 40%;
+      justify-content: right;
+      gap: 20px;
+   }
+
+   .status {
+      display: flex;
+      align-items: center;
+      margin-right: 10px;
+      margin-left: 5px;
+      position: relative;
+      color: var(--success-label);
+      &.paused {
+         color: var(--icon-color);
+      }
+   }
+
+   .statusPaused {
+      background-color: #e4e4e4;
+      button {
+         color: inherit;
+      }
+   }
+
+   .content {
+      display: flex;
+      flex-direction: column;
+      color: var(--content-text-color-light);
+      a {
+         color: inherit;
+         &:hover {
+            color: inherit;
+            h4 {
+               color: var(--primary-color);
+            }
+         }
+      }
+   }
+
+   .title {
+      display: flex;
+      flex-direction: row;
+      h4 {
+         margin: 0;
+         margin-bottom: 4px;
+         color: var(--content-text-color);
+         display: flex;
+         align-items: center;
+      }
+      :global(.icon) {
+         position: relative;
+         top: 2px;
+         margin-left: 5px;
+         opacity: 0.5;
+      }
+   }
+
+   .sources {
+      font-size: 0.75rem;
+      img {
+         width: auto;
+         max-height: 13px;
+         vertical-align: middle;
+         margin-right: 3px;
+      }
+      i {
+         font-style: normal;
+         background: var(--line-color);
+         border-radius: 20px;
+         padding: 1px 6px;
+         font-size: 0.6875rem;
+         margin-left: 5px;
+      }
+      .sourceCount {
+         font-size: 0.8em;
+         padding: 1px 7px;
+         border-radius: 20px;
+         margin-left: 4px;
+         background-color: var(--background-color);
+      }
+   }
+
+   .interval {
+      min-width: 120px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      :global(.icon) {
+         position: relative;
+         top: 2px;
+         margin-right: 5px;
+         opacity: 0.5;
+      }
+      i {
+         text-transform: capitalize;
+         font-style: normal;
+         margin-left: 5px;
+      }
+   }
+
+   .time,
+   .size {
+      min-width: 120px;
+      display: flex;
+      align-items: center;
+      i {
+         font-style: normal;
+      }
+      :global(.icon) {
+         position: relative;
+         top: 2px;
+         margin-right: 5px;
+         opacity: 0.5;
+      }
+   }
+
+   .size {
+      min-width: 90px;
+   }
+
+   .moreBtn {
+      color: var(--content-text-color-light);
+      padding: 3px 6px;
+      border-radius: 4px;
+      &.moreBtnActive {
+         background-color: var(--primary-color-light);
+         color: var(--primary-color);
+      }
+   }
+
+   .settings {
+      position: absolute;
+      z-index: 99;
+      top: 45px;
+      right: 15px;
+      display: flex;
+      flex-direction: column;
+      justify-content: left;
+      width: 120px;
+      text-align: left;
+      align-items: center;
+      background: var(--content-background-color);
+      border: 1px solid var(--line-color);
+      border-radius: 6px;
+      button {
+         padding: 6px 10px;
+         width: 100%;
+         text-align: left;
+         color: var(--content-text-color-light);
+         &:hover {
+            background-color: var(--primary-color-light);
+            color: var(--primary-color);
+         }
+      }
+   }
+
+   &.planHasError {
+      border: 1px solid var(--error-bg-color-active);
+      .status {
+         color: var(--error-button-color);
+      }
+   }
+}
+
+// MODALS
+.removeModalContent {
+   position: relative;
+   .deleteLoader {
+      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;
+   }
+   .removeModalActions {
+      margin-top: 20px;
+      justify-content: right;
+      display: flex;
+      flex-direction: row;
+      gap: 10px;
+      button {
+         background-color: var(--line-color);
+         color: var(--content-text-color);
+         padding: 6px 12px;
+         border-radius: 4px;
+         transition: all 0.12s linear;
+         &:nth-child(2) {
+            background-color: var(--error-button-color);
+            color: var(--error-active-text);
+         }
+         &:hover {
+            filter: brightness(105%);
+         }
+      }
+   }
+}
+
+.planGrid {
+   width: 100%;
+   flex-direction: column;
+   margin: 0;
+   align-items: flex-start;
+   box-sizing: border-box;
+   padding: 0;
+   gap: 0;
+
+   .leftContent {
+      width: 100%;
+      padding: 15px;
+      box-sizing: border-box;
+      .status {
+         position: absolute;
+         right: 0;
+         margin-top: -15px;
+         transform: scale(0.8);
+      }
+      .title h4 {
+         margin-bottom: 8px;
+      }
+   }
+   .rightContent {
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      row-gap: 0;
+      column-gap: 12px;
+      border-top: 1px solid var(--line-color);
+      padding-top: 10px;
+      margin-top: 5px;
+      font-size: 0.9em;
+      background-color: var(--primary-color-lighter);
+      :global([class*='_history_']) {
+         width: 100%;
+         margin-top: 10px;
+         border-top: 1px solid var(--line-color);
+         background-color: var(--content-background-color);
+         padding: 10px;
+         border-radius: 0 0 6px 6px;
+      }
+      .moreBtn {
+         margin-left: auto;
+         position: absolute;
+         right: 10px;
+         bottom: 10px;
+      }
+      .interval,
+      .time,
+      .size {
+         min-width: unset;
+      }
+      .size {
+         padding-left: 15px;
+      }
+   }
+   .settings {
+      bottom: 10px;
+      top: auto;
+      right: 40px;
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .plan {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0;
+
+      .title {
+         margin-bottom: 5px;
+      }
+      .status {
+         position: absolute;
+         right: 0;
+         margin-top: -15px;
+         transform: scale(0.8);
+         opacity: 0.7;
+      }
+      .leftContent {
+         width: 100%;
+      }
+      .rightContent {
+         width: 100%;
+         gap: 0px;
+         padding-top: 10px;
+         border-top: 1px solid var(--line-color);
+         margin-top: 10px;
+         justify-content: flex-start;
+         .interval {
+            display: none !important;
+         }
+         :global([class*='_history_']) {
+            margin-left: auto;
+         }
+         .moreBtn {
+            margin-left: 0;
+         }
+      }
+   }
+}