@plutonhq/core-frontend 0.0.1

package/src/styles/global.scss

@@ -0,0 +1,360 @@
+@use '../assets/fonts/fonts.css' as *;
+@use '../assets/fileicons.css' as *;
+
+:root {
+   font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
+   line-height: 1.5;
+   font-weight: 400;
+   font-size: 16px;
+   color-scheme: light dark;
+
+   font-synthesis: none;
+   text-rendering: optimizeLegibility;
+   -webkit-font-smoothing: antialiased;
+   -moz-osx-font-smoothing: grayscale;
+   --container-width: 1200px;
+   --border-radius: 12px;
+   --line-color: #f1f2fd;
+   --line-active-color: #cccdd3;
+   --field-line-color: #e0e1ef;
+   --primary-color: #575aff;
+   --primary-color-mid: #aaacff;
+   --primary-hover-color: #373af3;
+   --primary-color-light: #eeeffd;
+   --primary-color-lighter: #f6f7ff;
+   --primary-text-color: #fff;
+   --background-color: #f5f8ff;
+   --background-text-color: #8485a3;
+   --background-text-color-dark: #7f7f7f;
+   --content-background-color: #fff;
+   --content-shadow-color: #e9effe;
+   --content-title-color: #444;
+   --content-subtitle-color: #666;
+   --content-text-color: #525252;
+   --content-text-color-light: #8b8b8b;
+   --nav-color: #b7baca;
+   --content-font-size: 13px;
+
+   --error-bg-color: #ffecec;
+   --error-bg-active: #f45959;
+   --error-active-text: #fff;
+   --error-bg-color-active: #ffd4d4;
+   --error-text-color: #8d2f2f;
+   --error-button-color: #dd6b6b;
+
+   --success-bg-color: #dcfffa;
+   --success-bg-color-active: #b4fdf2;
+   --success-text-color: #06ba9f;
+   --success-label: #84e8d0;
+
+   --warning-bg-color: #fff6e4;
+   --warning-button-color: #df9a07;
+   --warning-text-color: #b97f03;
+
+   --modal-bg: #ffffffa8;
+   --modal-shadow-color: rgba(0, 0, 0, 0.06);
+   --modal-shadow-color-light: rgba(255, 255, 255, 0.6);
+   --field-bg: #fff;
+   --icon-color: #aaa;
+   --scrollbar-color: #ddd;
+
+   --toastify-toast-min-height: 34px;
+
+   --light-grey: #f2f2f2;
+}
+
+/* ================================== */
+/* ========= DARK THEME ============= */
+/* ================================== */
+[data-theme='dark'] {
+   --line-color: #292929;
+   --line-active-color: #444444;
+   --field-line-color: #373737;
+   --primary-color-light: #212235;
+   --primary-color-lighter: #1a1a1e;
+   --primary-text-color: #fff;
+   --background-color: #141414;
+   --content-background-color: #1c1c1c;
+   --field-bg: #1e1e1e;
+   --text-primary: #e1e1e1;
+   --text-secondary: #c0c0c0;
+   --text-light: #888888;
+   --content-title-color: var(--text-primary);
+   --content-subtitle-color: var(--text-secondary);
+   --content-text-color: var(--text-secondary);
+   --content-text-color-light: var(--text-light);
+   --background-text-color: var(--text-light);
+   --background-text-color-dark: #999999;
+   --nav-color: #888888;
+   --icon-color: #888888;
+   --scrollbar-color: #444444;
+   --shadow-color: rgba(0, 0, 0, 0.2);
+   --modal-bg: #000000a8;
+   --modal-shadow-color: rgba(0, 0, 0, 0.3);
+   --modal-shadow-color-light: rgba(0, 0, 0, 0.7);
+   --content-shadow-color: rgba(0, 0, 0, 0.3);
+   --light-grey: #292929;
+
+   --error-bg-color: #342424;
+   --error-bg-color-active: #774141;
+   --success-label: #3bc1a1;
+}
+
+#root {
+   width: 100%;
+   min-height: 100vh;
+}
+
+a {
+   font-weight: 500;
+   color: #646cff;
+   text-decoration: inherit;
+}
+a:hover {
+   color: #535bf2;
+}
+
+button,
+input,
+select,
+textarea {
+   font-family: inherit;
+}
+
+body {
+   margin: 0;
+   display: flex;
+   place-items: center;
+   min-width: 320px;
+   min-height: 100vh;
+   background-color: var(--background-color);
+   color: var(--content-text-color);
+   font-size: var(--content-font-size);
+}
+
+h1 {
+   font-size: 3.2em;
+   line-height: 1.1;
+}
+
+button {
+   background-color: transparent;
+   border: none;
+   cursor: pointer;
+   font-size: 0.75rem;
+   &.notAllowed {
+      cursor: not-allowed;
+   }
+}
+
+.tooltipBorderd {
+   border: 1px solid var(--line-color);
+   background-color: var(--content-background-color) !important;
+   color: var(--content-text-color) !important;
+   box-shadow: 0 0 7px var(--content-shadow-color);
+   border-radius: 5px !important;
+}
+.tooltipBorderdArrow {
+   background-color: var(--content-background-color);
+   border-bottom: 1px solid var(--line-color);
+   border-right: 1px solid var(--line-color);
+}
+
+.loadingScreen {
+   width: 100%;
+   height: 100vh;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   & > .icon {
+      opacity: 0.4;
+   }
+}
+
+// Empty Objects Container
+.empty_container {
+   width: 100%;
+   height: 200px;
+   text-align: center;
+   box-sizing: border-box;
+   display: flex;
+   flex-direction: row;
+   justify-content: center;
+   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);
+
+   button {
+      color: var(--primary-color);
+      padding: 0;
+      font-weight: 600;
+   }
+}
+
+// MODAL
+.modalChildren p {
+   line-height: 1.7em;
+}
+
+.modalError {
+   background-color: #c1434321;
+   color: #dd6b6b;
+   border: 1px solid #c1434321;
+   padding: 7px;
+   margin-top: 8px;
+   border-radius: 4px;
+}
+.modalActions {
+   margin-top: 20px;
+   text-align: right;
+}
+
+.modalButton {
+   padding: 8px 20px;
+   margin-left: 10px;
+   border-radius: 4px;
+   font-weight: 600;
+   font-size: 0.75rem;
+   color: inherit;
+   background: var(--line-color);
+   &.modalButton--ok {
+      position: relative;
+      z-index: 1;
+      background: var(--primary-color);
+      color: var(--primary-text-color);
+      transition: all 0.15s linear;
+
+      &:hover {
+         background: var(--primary-hover-color);
+      }
+   }
+   & > .icon {
+      position: relative;
+      top: 1px;
+   }
+}
+
+// Labels
+.label {
+   font-size: 0.6875rem;
+   // line-height: 14px;
+   font-weight: 400;
+   padding: 2px 10px;
+   border-radius: 20px;
+   color: #fff;
+   margin-left: 5px;
+   margin-right: 5px;
+
+   &.in_progress {
+      background-color: var(--primary-color-light);
+      color: var(--primary-color);
+   }
+   &.warn {
+      background-color: var(--warning-bg-color);
+      color: var(--warning-text-color);
+   }
+   &.error {
+      background-color: var(--error-bg-color);
+      color: var(--error-button-color);
+   }
+   &.success {
+      background-color: rgb(220 255 250);
+      color: rgb(6 186 159);
+   }
+   &.disabled {
+      background-color: var(--line-color);
+      color: var(--icon-color);
+   }
+   &.label--square {
+      border-radius: 4px;
+   }
+   &.label--lg {
+      font-size: 0.8rem;
+      padding: 6px 12px;
+      border-radius: 4px;
+      margin-left: 0;
+      margin-right: 0;
+   }
+   &.label--topMargin {
+      margin-top: 12px;
+   }
+   &.label--bottomMargin {
+      margin-bottom: 12px;
+   }
+}
+
+i.pipe {
+   font-style: normal;
+   font-size: 0.5rem;
+   margin: 0 0.6rem;
+   position: relative;
+   top: -2px;
+   color: var(--icon-color);
+}
+
+.skeleton-box {
+   display: inline-block;
+   position: relative;
+   overflow: hidden;
+   background-color: var(--primary-color-light);
+
+   &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(-100%);
+      background-image: linear-gradient(90deg, rgba(#fff, 0) 0, rgba(#fff, 0.2) 20%, rgba(#fff, 0.5) 60%, rgba(#fff, 0));
+      animation: shimmer 3s infinite;
+      content: '';
+   }
+}
+
+.icon {
+   position: relative;
+   top: 2px;
+}
+
+.styled__scrollbar {
+   overflow: auto;
+   scrollbar-color: var(--scrollbar-color) transparent;
+   scrollbar-width: thin;
+
+   &::-webkit-scrollbar {
+      width: 12px;
+      border-radius: 12px;
+      background: transparent;
+      border: 0px solid transparent;
+   }
+   &::-webkit-scrollbar-thumb {
+      width: 10px;
+      border-radius: 16px;
+      border: 3px solid transparent;
+      box-shadow: inset 0 0 0 3px;
+      color: var(--scrollbar-color);
+   }
+}
+
+.react_toaster,
+.react-tooltip {
+   z-index: 999999999 !important;
+}
+
+.Toastify__toast-icon {
+   width: 18px;
+}
+.Toastify__toast-theme--dark {
+   background: var(--modal-shadow-color);
+}
+
+@keyframes shimmer {
+   100% {
+      transform: translateX(100%);
+   }
+}

package/src/styles/steps.scss

@@ -0,0 +1,67 @@
+%modalSteps {
+   width: 100%;
+   padding: 10px 15px;
+   padding-bottom: 5px;
+   box-sizing: border-box;
+   border-bottom: 1px solid var(--content-shadow-color);
+   background: var(--background-color);
+   ul {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      &:before {
+         content: '';
+         position: absolute;
+         width: calc(100% - 60px);
+         height: 2px;
+         background-color: var(--content-shadow-color);
+         z-index: 0;
+         top: 12px;
+         left: 25px;
+      }
+      li {
+         padding: 3px;
+         display: flex;
+         flex-direction: column;
+         justify-content: center;
+         align-items: center;
+         position: relative;
+         i {
+            font-style: normal;
+            font-size: 0.75rem;
+            margin-top: 5px;
+            color: var(--content-text-color-light);
+         }
+         & > span {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 20px;
+            height: 20px;
+            font-size: 0.75rem;
+            border-radius: 50%;
+            background-color: var(--content-shadow-color);
+            text-align: center;
+            box-sizing: border-box;
+         }
+         &.stepCurrent {
+            & > span {
+               background-color: var(--primary-color);
+               color: var(--primary-text-color);
+            }
+            i {
+               color: var(--primary-color);
+               font-weight: 600;
+            }
+         }
+         &.stepPassed {
+            & > span {
+               background-color: var(--primary-color);
+            }
+         }
+      }
+   }
+}

package/src/utils/constants.ts

@@ -0,0 +1,89 @@
+import { NewPlanSettings } from '../@types/plans';
+
+export const DEV_MODE = import.meta.env.MODE !== 'production';
+export const API_URL = DEV_MODE ? `${import.meta.env.VITE_BACKEND_URL}/api` : `${window.location.origin}/api`;
+export const APP_NAME = import.meta.env.VITE_APP_NAME || 'Pluton';
+export const DEFAULT_PLAN_SETTINGS: NewPlanSettings = {
+   title: 'New Backup',
+   method: 'backup',
+   sourceId: 'main',
+   sourceType: 'device',
+   sourceConfig: {
+      includes: [],
+      excludes: [],
+   },
+   storage: { id: 's89hibdias67', name: '' },
+   storagePath: '',
+   settings: {
+      interval: { type: 'daily', time: '10:00AM', days: '', hours: '', minutes: 5 },
+      compression: false,
+      encryption: true,
+      retries: 5,
+      retryDelay: 300, // in seconds
+      notification: {
+         email: {
+            enabled: false,
+            case: 'failure',
+            type: 'smtp',
+            emails: '',
+         },
+         webhook: {
+            enabled: false,
+            case: 'failure',
+            method: 'POST',
+            contentType: 'application/json',
+            url: '',
+         },
+         push: {
+            enabled: false,
+            url: '',
+            case: 'failure',
+            authType: 'none',
+            authToken: '',
+            tags: '',
+         },
+      },
+      prune: {
+         snapCount: 5,
+         policy: 'forgetByAge',
+         forgetAge: '1m',
+         revisions: true,
+      },
+      performance: {
+         scan: true,
+      },
+      integrity: {
+         enabled: false,
+         interval: { type: 'weekly', time: '10:00AM', days: 'sun', hours: '', minutes: 5 },
+         method: 'no-read',
+         notification: {
+            email: {
+               enabled: false,
+               type: 'smtp',
+               emails: '',
+            },
+            webhook: {
+               enabled: false,
+               method: 'POST',
+               contentType: 'application/json',
+               url: '',
+            },
+            push: {
+               enabled: false,
+               url: '',
+               authType: 'none',
+               authToken: '',
+               tags: '',
+            },
+         },
+      },
+      scripts: {
+         onBackupStart: [],
+         onBackupEnd: [],
+         onBackupError: [],
+         onBackupFailure: [],
+         onBackupComplete: [],
+      },
+   },
+   tags: [],
+};

package/src/utils/getIconNameforFile.ts

@@ -0,0 +1,142 @@
+import { extensions } from './supportedExtensions';
+
+// We only care about 'icon' and 'extensions' from the rules now
+interface ISimpleExtensionIcon {
+   icon: string;
+   extensions?: string[];
+   filename?: boolean; // Still needed to *filter* rules
+   filenamesGlob?: string[]; // Still needed to *filter* rules
+   disabled?: boolean;
+   // Other fields are ignored for mapping
+}
+
+// --- End Type Definitions ---
+
+// --- LOOKUP TABLE ---
+// Simple map: lowercase extension -> icon name
+const simpleExtensionToIconNameMap = new Map<string, string>();
+
+// --- CONSTANTS ---
+const DEFAULT_ICON_NAME: string = extensions.default?.file?.icon ? extensions.default.file.icon : 'file';
+
+// --- HELPER FUNCTION ---
+const getFileExtension = (filename: string): string => {
+   if (!filename || typeof filename !== 'string') return '';
+   const lastDot = filename.lastIndexOf('.');
+   if (lastDot === -1 || lastDot === 0 || lastDot === filename.length - 1) {
+      return '';
+   }
+   return filename.substring(lastDot + 1).toLowerCase();
+};
+
+// --- SIMPLIFIED INITIALIZATION LOGIC ---
+function initializeSimpleIconMappings(): void {
+   simpleExtensionToIconNameMap.clear();
+
+   // Iterate through rules ONCE
+   (extensions.supported || []).forEach((item: ISimpleExtensionIcon) => {
+      // Skip disabled rules or rules meant for specific filenames/patterns
+      if (item.disabled || item.filename || item.filenamesGlob || !item.icon || !item.extensions) {
+         return;
+      }
+
+      const iconName = item.icon;
+
+      // Map extensions from this generic rule
+      item.extensions.forEach((ext: string) => {
+         const cleanExt = ext.toLowerCase().replace(/^\./, '');
+         if (cleanExt) {
+            // First rule encountered for an extension wins
+            if (!simpleExtensionToIconNameMap.has(cleanExt)) {
+               simpleExtensionToIconNameMap.set(cleanExt, iconName);
+            }
+         }
+      });
+   });
+
+   // *** Explicit Overrides for Common/Ambiguous Types ***
+   // Ensure common types map correctly, overriding any conflicts from earlier rules.
+   const overrides: { [key: string]: string[] } = {
+      image: ['jpeg', 'jpg', 'gif', 'png', 'bmp', 'tiff', 'heic', 'ico', 'icns', 'webp', 'avif'],
+      text: ['txt'],
+      json: ['json', 'jsonc', 'jsonl'],
+      yaml: ['yaml', 'yml'],
+      xml: ['xml', 'xsd', 'xsl', 'xslt'],
+      pdf: ['pdf'],
+      word: ['doc', 'docx', 'docm', 'dot', 'dotx', 'dotm', 'wll'],
+      excel: ['xls', 'xlsx', 'xlsm', 'ods', 'fods', 'xlsb'],
+      powerpoint: ['ppt', 'pptx', 'pps', 'ppsx', 'pot', 'potx'],
+      zip: ['zip', 'rar', '7z', 'tar', 'gz', 'bz2', 'xz'],
+      audio: ['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a'],
+      video: ['mp4', 'mov', 'avi', 'mkv', 'webm', 'wmv', 'flv'],
+      font: ['woff', 'woff2', 'ttf', 'otf', 'eot'],
+      markdown: ['md', 'markdown', 'mdown'],
+      css: ['css'],
+      html: ['html', 'htm'],
+      js: ['js', 'cjs', 'mjs'],
+      typescript: ['ts', 'cts', 'mts'],
+      reactts: ['tsx'],
+      docker: ['dockerignore', 'Dockerfile'],
+      git: ['gitignore', 'gitattributes', 'gitmodules'],
+      eslint: ['eslintignore', 'eslintrc'],
+      toml: ['toml'],
+   };
+
+   for (const iconName in overrides) {
+      overrides[iconName].forEach((ext) => {
+         const cleanExt = ext.toLowerCase().replace(/^\./, '');
+         if (cleanExt) {
+            simpleExtensionToIconNameMap.set(cleanExt, iconName);
+         }
+      });
+   }
+
+   // console.log("Simple Extension Map Initialized:", simpleExtensionToIconNameMap);
+}
+
+initializeSimpleIconMappings();
+
+// --- SIMPLIFIED RESOLVER FUNCTION ---
+export function getIconNameForFile(filename?: string | null): string {
+   if (!filename) {
+      return DEFAULT_ICON_NAME;
+   }
+
+   // Get the actual filename part, lowercased (e.g., '.gitignore', 'dockerfile', 'myfile.txt')
+   const baseFilenameLower = getBaseFilename(filename).toLowerCase();
+
+   // --- Check 1: Match filename-like keys added via overrides ---
+
+   // First, check using the exact base filename (handles 'dockerfile')
+   if (simpleExtensionToIconNameMap.has(baseFilenameLower)) {
+      return simpleExtensionToIconNameMap.get(baseFilenameLower)!;
+   }
+
+   // Second, if it starts with a dot, check using the name *without* the dot
+   // (handles '.gitignore' lookup using the 'gitignore' key from overrides)
+   if (baseFilenameLower.startsWith('.')) {
+      const nameWithoutDot = baseFilenameLower.substring(1);
+      if (simpleExtensionToIconNameMap.has(nameWithoutDot)) {
+         // Found a match for the dotless version (like 'gitignore')
+         return simpleExtensionToIconNameMap.get(nameWithoutDot)!;
+      }
+   }
+
+   // --- Check 2: Match by actual file extension ---
+   const extension = getFileExtension(filename); // Extracts 'txt', 'js', etc. Returns '' for '.gitignore'
+   if (extension && simpleExtensionToIconNameMap.has(extension)) {
+      // Found a match based on the extension (like 'txt' -> 'text')
+      return simpleExtensionToIconNameMap.get(extension)!;
+   }
+
+   // --- Fallback: Default Icon ---
+   return DEFAULT_ICON_NAME;
+}
+
+// Ensure getBaseFilename and getFileExtension helpers are present and correct
+const getBaseFilename = (filenameWithMaybePath: string): string => {
+   if (!filenameWithMaybePath || typeof filenameWithMaybePath !== 'string') return '';
+   const lastSlash = Math.max(filenameWithMaybePath.lastIndexOf('/'), filenameWithMaybePath.lastIndexOf('\\'));
+   // Return filename including leading dot if present
+   return filenameWithMaybePath.substring(lastSlash + 1);
+};