@plutonhq/core-frontend 0.0.1

package/src/components/index.ts

@@ -0,0 +1,117 @@
+/**
+ * Component exports
+ */
+
+// App components
+export { default as App } from './App/App/App';
+export { default as AppContent } from './App/AppContent/AppContent';
+export { default as Footer } from './App/Footer/Footer';
+export { default as PageTitle } from './App/PageTitle/PageTitle';
+export { default as SideNav } from './App/SideNav/SideNav';
+
+// Common components
+export { default as ActionModal } from './common/ActionModal/ActionModal';
+export { default as AnimatedWrapper } from './common/AnimatedWrapper/AnimatedWrapper';
+export { default as Button } from './common/Button/Button';
+export { default as FileIcon } from './common/FileIcon/FileIcon';
+export { FileManager } from './common/FileManager/FileManager';
+export { default as FolderPicker } from './common/FolderPicker/FolderPicker';
+export { default as Icon } from './common/Icon/Icon';
+export { default as ItemsLayout } from './common/ItemsLayout/ItemsLayout';
+export { default as Logo } from './common/Logo/Logo';
+export { default as LogViewer } from './common/LogViewer/LogViewer';
+export { default as Modal } from './common/Modal/Modal';
+export { default as NotFound } from './common/NotFound/NotFound';
+export { default as PageHeader } from './common/PageHeader/PageHeader';
+export { default as PathPicker } from './common/PathPicker/PathPicker';
+export { default as SearchItems } from './common/SearchItems/SearchItems';
+export { default as SidePanel } from './common/SidePanel/SidePanel';
+export { default as SortItems } from './common/SortItems/SortItems';
+export { default as StatusLabel } from './common/StatusLabel/StatusLabel';
+export { default as Tabs, TabList, TabPanel, Tab } from './common/Tabs/Tabs';
+export { default as TagsFilter } from './common/TagsFilter/TagsFilter';
+
+// Form components
+export { default as FormField } from './common/form/FormField/FormField';
+export { default as Input } from './common/form/Input/Input';
+export { default as IntervalField } from './common/form/IntervalField/IntervalField';
+export { default as MultiSelect } from './common/form/MultiSelect/MultiSelect';
+export { default as NumberInput } from './common/form/NumberInput/NumberInput';
+export { default as PasswordField } from './common/form/PasswordField/PasswordField';
+export { default as RadioIconSelect } from './common/form/RadioIconSelect/RadioIconSelect';
+export { default as Select } from './common/form/Select/Select';
+export { default as SizePicker } from './common/form/SizePicker/SizePicker';
+export { default as StoragePicker } from './common/form/StoragePicker/StoragePicker';
+export { default as TagsInput } from './common/form/TagsInput/TagsInput';
+export { default as TimePicker } from './common/form/TimePicker/TimePicker';
+export { default as Toggle } from './common/form/Toggle/Toggle';
+export { default as Tristate } from './common/form/Tristate/Tristate';
+
+// Device components
+export { default as DeviceBackups } from './Device/DeviceBackups/DeviceBackups';
+export { default as DeviceCPU } from './Device/DeviceCPU/DeviceCPU';
+export { default as DeviceInfo } from './Device/DeviceInfo/DeviceInfo';
+export { default as DeviceItem } from './Device/DeviceItem/DeviceItem';
+export { default as DeviceMemory } from './Device/DeviceMemory/DeviceMemory';
+export { default as DeviceNetworks } from './Device/DeviceNetworks/DeviceNetworks';
+export { default as DeviceRcloneSettings } from './Device/DeviceRcloneSettings/DeviceRcloneSettings';
+export { default as DeviceResticSettings } from './Device/DeviceResticSettings/DeviceResticSettings';
+export { default as DeviceStorageDisks } from './Device/DeviceStorageDisks/DeviceStorageDisks';
+export { default as DeviceStorageDrives } from './Device/DeviceStorageDrives/DeviceStorageDrives';
+export { default as DeviceSystem } from './Device/DeviceSystem/DeviceSystem';
+export { default as EditDevice } from './Device/EditDevice/EditDevice';
+
+// Plan components
+export { default as AddPlan } from './Plan/AddPlan/AddPlan';
+export { default as BackupEvents } from './Plan/BackupEvents/BackupEvents';
+export { default as BackupProgress } from './Plan/BackupProgress/BackupProgress';
+export { default as Backups } from './Plan/Backups/Backups';
+export { default as EditPlan } from './Plan/EditPlan/EditPlan';
+export { default as PlanBackups } from './Plan/PlanBackups/PlanBackups';
+export { default as PlanForm } from './Plan/PlanForm/PlanForm';
+export { default as PlanFormNav } from './Plan/PlanForm/PlanFormNav';
+export { default as PlanHistory } from './Plan/PlanHistory/PlanHistory';
+export { default as PlanItem } from './Plan/PlanItems/PlanItem';
+export { default as PlanLogs } from './Plan/PlanLogs/PlanLogs';
+export { default as PlanPendingBackup } from './Plan/PlanPendingBackup/PlanPendingBackup';
+export { default as PlanProgress } from './Plan/PlanProgress/PlanProgress';
+export { default as PlanPruneModal } from './Plan/PlanPruneModal/PlanPruneModal';
+export { default as PlanRemoveModal } from './Plan/PlanRemoveModal/PlanRemoveModal';
+export { default as PlanAdvancedSettings } from './Plan/PlanSettings/PlanAdvancedSettings';
+export { default as PlanGeneralSettings } from './Plan/PlanSettings/PlanGeneralSettings';
+export { default as PlanNotificationSettings } from './Plan/PlanSettings/PlanNotificationSettings';
+export { default as PlanPerformanceSettings } from './Plan/PlanSettings/PlanPerformanceSettings';
+export { default as PlanPruneSettings } from './Plan/PlanSettings/PlanPruneSettings';
+export { default as PlanScriptsSettings } from './Plan/PlanSettings/PlanScriptsSettings';
+export { default as PlanSourceSettings } from './Plan/PlanSettings/PlanSourceSettings';
+export { default as PlanStrategySettings } from './Plan/PlanSettings/PlanStrategySettings';
+export { default as PlanTypeSettings } from './Plan/PlanSettings/PlanTypeSettings';
+export { default as PlanStats } from './Plan/PlanStats/PlanStats';
+export { default as PlanUnlockModal } from './Plan/PlanUnlockModal/PlanUnlockModal';
+
+// Restore components
+export { default as PlanRestores } from './Plan/Restores/Restores';
+export { default as RestoreChangeViewer } from './Restore/RestoreChangeViewer/RestoreChangeViewer';
+export { default as RestoredFileBrowser } from './Restore/RestoredFileBrowser/RestoredFileBrowser';
+export { default as RestoreFileSelector } from './Restore/RestoreFileSelector/RestoreFileSelector';
+export { default as RestoreConfirmStep } from './Restore/RestoreWizard/RestoreConfirmStep';
+export { default as RestoreFileSelectorStep } from './Restore/RestoreWizard/RestoreFileSelectorStep';
+export { default as RestorePreviewStep } from './Restore/RestoreWizard/RestorePreviewStep';
+export { default as RestoreSettingsStep } from './Restore/RestoreWizard/RestoreSettingsStep';
+export { default as RestoreWizard } from './Restore/RestoreWizard/RestoreWizard';
+
+// Settings components
+export { default as AppLogs } from './Settings/AppLogs/AppLogs';
+export { default as GeneralSettings } from './Settings/GeneralSettings/GeneralSettings';
+export { default as IntegrationSettings } from './Settings/IntegrationSettings/IntegrationSettings';
+export { default as SMTPSettings } from './Settings/IntegrationSettings/SMTPSettings';
+
+// Skeleton components
+export { default as SkeletonItems } from './Skeleton/SkeletonItems';
+
+// Storage components
+export { default as AddStorage } from './Storage/AddStorage/AddStorage';
+export { default as EditStorage } from './Storage/EditStorage/EditStorage';
+export { default as StorageAuthSettings } from './Storage/StorageAuthSettings/StorageAuthSettings';
+export { default as StorageItem } from './Storage/StorageItem/StorageItem';
+export { default as StorageSettings } from './Storage/StorageSettings/StorageSettings';

package/src/config/features.ts

@@ -0,0 +1,4 @@
+export const FEATURES = {
+   basicBackup: true,
+   newDevices: import.meta.env.VITE_PRO_VERSION === 'true',
+};

package/src/context/ComponentOverrideContext.tsx

@@ -0,0 +1,25 @@
+import React, { createContext, ReactNode, useContext } from 'react';
+
+// Define a type for the component map
+interface ComponentOverrides {
+   [key: string]: React.ComponentType<any>;
+}
+
+// Create the context with an empty object as default value
+export const ComponentOverrideContext = createContext<ComponentOverrides>({});
+
+// Provider component that will wrap your application
+interface ComponentProviderProps {
+   overrides: ComponentOverrides;
+   children: ReactNode;
+}
+
+export const ComponentProvider: React.FC<ComponentProviderProps> = ({ overrides, children }) => {
+   return <ComponentOverrideContext.Provider value={overrides}>{children}</ComponentOverrideContext.Provider>;
+};
+
+// Custom hook to use in components that might be overridden
+export const useComponentOverride = (componentKey: string, DefaultComponent: React.ComponentType<any>) => {
+   const overrides = useContext(ComponentOverrideContext);
+   return overrides[componentKey] || DefaultComponent;
+};

package/src/context/ThemeContext.tsx

@@ -0,0 +1,68 @@
+import { createContext, useContext, useState, useEffect, ReactNode, useCallback } from 'react';
+
+type ThemeSetting = 'light' | 'dark' | 'auto';
+type AppliedTheme = 'light' | 'dark';
+
+type ThemeContextType = {
+   theme: AppliedTheme;
+   setTheme: (themeSetting: ThemeSetting) => void;
+};
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+// A helper function to read the initial state from localStorage
+const getInitialThemeSetting = (): ThemeSetting => {
+   if (typeof window === 'undefined') {
+      return 'auto';
+   }
+   const storedTheme = window.localStorage.getItem('themeSetting');
+   if (storedTheme === 'light' || storedTheme === 'dark' || storedTheme === 'auto') {
+      return storedTheme;
+   }
+   return 'auto'; // Default to 'auto'
+};
+
+export const ThemeProvider = ({ children }: { children: ReactNode }) => {
+   // Initialize state directly from localStorage
+   const [themeSetting, setThemeSetting] = useState<ThemeSetting>(getInitialThemeSetting);
+   const [appliedTheme, setAppliedTheme] = useState<AppliedTheme>('light');
+
+   // This effect applies the theme to the DOM and listens for system changes
+   useEffect(() => {
+      const applyTheme = (t: AppliedTheme) => {
+         document.documentElement.setAttribute('data-theme', t);
+         setAppliedTheme(t);
+      };
+
+      if (themeSetting === 'auto') {
+         const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+         applyTheme(mediaQuery.matches ? 'dark' : 'light');
+
+         const handleChange = (e: MediaQueryListEvent) => {
+            applyTheme(e.matches ? 'dark' : 'light');
+         };
+
+         mediaQuery.addEventListener('change', handleChange);
+         return () => mediaQuery.removeEventListener('change', handleChange);
+      } else {
+         applyTheme(themeSetting);
+      }
+   }, [themeSetting]);
+
+   // This is the function that will be exposed to other components
+   const handleSetTheme = useCallback((newSetting: ThemeSetting) => {
+      // Persist the user's *choice* to localStorage
+      localStorage.setItem('themeSetting', newSetting);
+      setThemeSetting(newSetting);
+   }, []);
+
+   return <ThemeContext.Provider value={{ theme: appliedTheme, setTheme: handleSetTheme }}>{children}</ThemeContext.Provider>;
+};
+
+export const useTheme = () => {
+   const context = useContext(ThemeContext);
+   if (context === undefined) {
+      throw new Error('useTheme must be used within a ThemeProvider');
+   }
+   return context;
+};

package/src/context/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Context exports
+ */
+
+export * from './ComponentOverrideContext';
+export * from './ThemeContext';

package/src/hooks/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Hooks exports
+ */
+
+export * from './usePlanSingleActions';
+export * from './usePwaAutoUpdate';

package/src/hooks/usePlanSingleActions.tsx

@@ -0,0 +1,137 @@
+import { useState } from 'react';
+import { useParams } from 'react-router';
+import { toast } from 'react-toastify';
+import { useGetPlan, usePausePlan, usePerformBackup, useResumePlan } from '../services/plans';
+import { Plan } from '../@types/plans';
+import { Backup } from '../@types/backups';
+import { RestoreSlim } from '../@types/restores';
+
+export const usePlanSingleActions = (): {
+   showDeleteModal: boolean;
+   setShowDeleteModal: (show: boolean) => void;
+   showEditModal: boolean;
+   setShowEditModal: (show: boolean) => void;
+   showPruneModal: boolean;
+   setShowPruneModal: (show: boolean) => void;
+   showLogsModal: boolean;
+   setShowLogsModal: (show: boolean) => void;
+   showUnlockModal: boolean;
+   setShowUnlockModal: (show: boolean) => void;
+   plan: Plan;
+   isLoading: boolean;
+   refetchPlan: () => void;
+   sortedHistory: Backup[];
+   activeBackups: Backup[];
+   activeRestores: RestoreSlim[];
+   lastBackupItem: Backup;
+   actionInProgress: boolean;
+   taskPending: boolean;
+   planError: any;
+   changeStatus: () => void;
+   backupNow: () => void;
+} => {
+   const [showDeleteModal, setShowDeleteModal] = useState(false);
+   const [showEditModal, setShowEditModal] = useState(false);
+   const [showUnlockModal, setShowUnlockModal] = useState(false);
+   const [showPruneModal, setShowPruneModal] = useState(false);
+   const [showLogsModal, setShowLogsModal] = useState(false);
+
+   const { id } = useParams();
+
+   const performBackupMutation = usePerformBackup();
+   const pauseMutation = usePausePlan();
+   const resumeMutation = useResumePlan();
+
+   const { data, isLoading, refetch: refetchPlan, error: planError } = useGetPlan(id as string);
+   const plan: Plan = data?.result || {};
+
+   const isSync = plan.method === 'sync';
+
+   const sortedHistory = [...(plan.backups || [])].sort((a, b) => b.started - a.started);
+   const activeBackups = sortedHistory.filter((s) => s.inProgress);
+   const activeRestores = (plan.restores || []).filter((s) => s.status === 'started');
+   const lastBackupItem = sortedHistory[0];
+   const actionInProgress = activeBackups.length > 0 || activeRestores.length > 0;
+   const taskPending = pauseMutation.isPending || resumeMutation.isPending || performBackupMutation.isPending;
+
+   const changeStatus = () => {
+      if (activeBackups.length > 0) {
+         return toast.error(`Can't pause a Plan while a Backup is in progress.`);
+      }
+      if (plan.inProgress || taskPending) {
+         return;
+      }
+      // isActive, set it to false, else true
+      // When the action is being performed, the item should grey out and stay inaccessible.
+      if (plan.isActive) {
+         toast.promise(pauseMutation.mutateAsync(plan.id), {
+            pending: 'Pausing backup Plan...',
+            success: 'Backup Plan Paused',
+            error: {
+               render({ data }: any) {
+                  return `Failed to Pause Backup Plan. ${data?.message || 'Unknown Error.'}`;
+               },
+            },
+         });
+      } else {
+         toast.promise(resumeMutation.mutateAsync(plan.id), {
+            pending: 'Resuming backup Plan...',
+            success: 'Backup Plan Resumed',
+            error: {
+               render({ data }: any) {
+                  return `Failed to Resume Backup Plan. ${data?.message || 'Unknown Error.'}`;
+               },
+            },
+         });
+      }
+   };
+
+   const backupNow = () => {
+      if (actionInProgress) {
+         return toast.error('A Backup/Restore Process is in Progress.');
+      }
+      if (taskPending) {
+         return;
+      }
+
+      toast.promise(performBackupMutation.mutateAsync(plan.id), {
+         pending: `Starting ${isSync ? 'Sync' : 'Backup'}...`,
+         success: `${isSync ? 'Sync' : 'Backup'} initiated successfully! 🚀`,
+         error: {
+            render({ data }: any) {
+               return `${isSync ? 'Sync' : 'Backup'} failed to start. ${data?.message || 'Unknown Error.'}`;
+            },
+         },
+      });
+   };
+
+   return {
+      // State
+      showDeleteModal,
+      setShowDeleteModal,
+      showEditModal,
+      setShowEditModal,
+      showPruneModal,
+      setShowPruneModal,
+      showLogsModal,
+      setShowLogsModal,
+      showUnlockModal,
+      setShowUnlockModal,
+
+      // Data
+      plan,
+      isLoading,
+      refetchPlan,
+      sortedHistory,
+      activeBackups,
+      activeRestores,
+      lastBackupItem,
+      actionInProgress,
+      taskPending,
+      planError,
+
+      // Actions
+      changeStatus,
+      backupNow,
+   };
+};

package/src/hooks/usePwaAutoUpdate.ts

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+import { useRegisterSW } from 'virtual:pwa-register/react';
+
+/**
+ * This hook handles the PWA auto-update logic in the background.
+ * It's completely silent and requires no user interaction.
+ */
+export function usePwaAutoUpdate() {
+   const {
+      offlineReady: [offlineReady, setOfflineReady],
+      needRefresh: [needRefresh],
+      updateServiceWorker,
+   } = useRegisterSW();
+
+   useEffect(() => {
+      // This effect triggers when a new service worker is ready to take over.
+      if (needRefresh) {
+         // This immediately tells the new service worker to take control,
+         // which will force a hard reload of the page.
+         updateServiceWorker(true);
+      }
+
+      // This effect triggers when the app's assets are fully cached and ready for offline use.
+      // We won't show a toast, but we'll log it for debugging purposes.
+      if (offlineReady) {
+         console.log('PWA is ready for offline use.');
+         // Reset the state to prevent this log from firing on every render.
+         setOfflineReady(false);
+      }
+   }, [needRefresh, offlineReady, setOfflineReady, updateServiceWorker]);
+
+   // This hook doesn't need to return anything as it performs its job in the background.
+}

package/src/index.ts

@@ -0,0 +1,26 @@
+/**
+ * @plutonhq/core-frontend
+ * Main library entry point
+ *
+ * This file only exports types. For better organization and IDE auto-complete:
+ * - Import components from '@plutonhq/core-frontend/components'
+ * - Import services from '@plutonhq/core-frontend/services'
+ * - Import hooks from '@plutonhq/core-frontend/hooks'
+ * - Import utils from '@plutonhq/core-frontend/utils'
+ * - Import contexts from '@plutonhq/core-frontend/context'
+ * - Import routes from '@plutonhq/core-frontend/routes'
+ * - Import router from '@plutonhq/core-frontend/router'
+ */
+
+// Export all types under a namespace to avoid conflicts with components
+import * as PlutoTypes from './@types/index';
+export { PlutoTypes as Types };
+
+// Also export types directly for type-only imports
+export type * from './@types/backups';
+export type * from './@types/devices';
+export type * from './@types/plans';
+export type * from './@types/restores';
+export type * from './@types/settings';
+export type * from './@types/storages';
+export type * from './@types/system';

package/src/main.tsx

@@ -0,0 +1,24 @@
+import { createRoot } from 'react-dom/client';
+import { RouterProvider } from 'react-router';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { router } from './router';
+import { ThemeProvider } from './context/ThemeContext';
+import './styles/global.scss';
+
+const queryClient = new QueryClient();
+
+function AppWrapper() {
+   return (
+      <ThemeProvider>
+         <RouterProvider router={router} />
+      </ThemeProvider>
+   );
+}
+
+createRoot(document.getElementById('root')!).render(
+   <QueryClientProvider client={queryClient}>
+      <AppWrapper />
+      <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
+   </QueryClientProvider>,
+);

package/src/router.tsx

@@ -0,0 +1,48 @@
+import { createBrowserRouter, createRoutesFromElements, Route, Navigate } from 'react-router';
+import Plans from './routes/Plans/Plans';
+import Login from './routes/Login/Login';
+import { useAuth } from './services/users';
+import App from './components/App/App/App';
+import Settings from './routes/Settings/Settings';
+import Storages from './routes/Storages/Storages';
+import Sources from './routes/Sources/Sources';
+import PlanSingle from './routes/PlanSingle/PlanSingle';
+import DeviceSingle from './routes/DeviceSingle/DeviceSingle';
+import Footer from './components/App/Footer/Footer';
+import NotFoundRoute from './routes/NotFoundRoute/NotFoundRoute';
+
+function ProtectedLayout() {
+   const { data, isError } = useAuth();
+   console.log('User data :', data);
+   // if (isLoading)
+   //    return (
+   //       <div className="loadingScreen">
+   //          <Icon size={60} type="loading" />{' '}
+   //       </div>
+   //    );
+   if (isError) return <Navigate to="/login" replace />;
+
+   return (
+      <>
+         <App />
+         <Footer version={data?.appVersion} />
+      </>
+   );
+}
+
+export const router = createBrowserRouter(
+   createRoutesFromElements(
+      <>
+         <Route path="/" element={<ProtectedLayout />}>
+            <Route index element={<Plans />} />
+            <Route path="settings" element={<Settings />} />
+            <Route path="storages" element={<Storages />} />
+            <Route path="sources" element={<Sources />} />
+            <Route path={'device/:id'} element={<DeviceSingle />} />
+            <Route path={'plan/:id'} element={<PlanSingle />} />
+            <Route path="*" element={<NotFoundRoute />} />
+         </Route>
+         <Route path="login" element={<Login />} />
+      </>,
+   ),
+);

package/src/routes/DeviceSingle/DeviceSingle.module.scss

@@ -0,0 +1,105 @@
+.deviceContent {
+   width: 100%;
+   position: relative;
+   padding: 30px;
+   border-radius: 7px;
+   box-sizing: border-box;
+   background-color: var(--content-background-color);
+   color: var(--content-text-color-light);
+   box-shadow: 0 0 15px var(--content-shadow-color);
+   min-height: 200px;
+   margin-top: 20px;
+   display: flex;
+   flex-direction: column;
+}
+
+.noMetrics {
+   text-align: center;
+   align-items: center;
+   align-self: center;
+   width: 100%;
+}
+
+.titleSkeleton {
+   width: 200px;
+   height: 30px;
+   // background-color: var(--line-color);
+}
+
+.version {
+   display: flex;
+   align-items: center;
+   :global(.icon) {
+      position: relative;
+      top: 2px;
+      margin-right: 5px;
+      opacity: 0.5;
+   }
+   i {
+      font-style: normal;
+   }
+   b {
+      margin-left: 3px;
+      color: #06ba9f;
+   }
+   &.versionUpdate {
+      cursor: pointer;
+      &:hover {
+         color: var(--primary-color);
+      }
+   }
+
+   &.agentUpdateBtn {
+      svg {
+         margin-right: 4px;
+         color: var(--icon-color);
+      }
+   }
+}
+
+.moreOptions {
+   position: absolute;
+   width: max-content;
+   top: 35px;
+   right: 10px;
+   margin: 0;
+   padding: 0;
+   z-index: 9;
+   background-color: var(--content-background-color);
+   border: 1px solid var(--line-color);
+   border-radius: 6px;
+   list-style-type: none;
+   li {
+      cursor: pointer;
+      padding: 5px 15px;
+      font-size: 0.9em;
+      color: var(--content-text-color-light);
+
+      &:hover {
+         background-color: var(--primary-color-light);
+         color: var(--primary-color);
+      }
+   }
+}
+
+.connectionStatus {
+   width: 12px;
+   height: 12px;
+   border-radius: 50%;
+   background-color: var(--line-active-color);
+   margin-left: 4px;
+   &.connected {
+      background-color: turquoise;
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .device {
+      :global([class*='_header_']) {
+         flex-direction: column;
+      }
+      .deviceContent {
+         padding: 20px;
+      }
+   }
+}