@plutonhq/core-frontend 0.0.1

package/src/assets/fonts/fonts.css

@@ -0,0 +1,29 @@
+@font-face {
+   font-family: 'Inter';
+   src:
+      url('Inter18pt-Regular.woff2') format('woff2'),
+      url('Inter18pt-Regular.woff') format('woff');
+   font-weight: normal;
+   font-style: normal;
+   font-display: swap;
+}
+
+@font-face {
+   font-family: 'Inter';
+   src:
+      url('Inter18pt-Bold.woff2') format('woff2'),
+      url('Inter18pt-Bold.woff') format('woff');
+   font-weight: bold;
+   font-style: normal;
+   font-display: swap;
+}
+
+@font-face {
+   font-family: 'Inter';
+   src:
+      url('Inter18pt-SemiBold.woff2') format('woff2'),
+      url('Inter18pt-SemiBold.woff') format('woff');
+   font-weight: 600;
+   font-style: normal;
+   font-display: swap;
+}

package/src/components/App/App/App.module.scss

@@ -0,0 +1,14 @@
+.app {
+   width: 100%;
+   display: flex;
+   justify-content: center;
+   min-height: calc(100vh - 60px);
+   padding: 0 20px;
+   box-sizing: border-box;
+}
+
+.appContainer {
+   width: var(--container-width);
+   padding-top: 6%;
+   display: flex;
+}

package/src/components/App/App/App.tsx

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+import { Outlet } from 'react-router';
+import { Tooltip } from 'react-tooltip';
+import { Slide, ToastContainer } from 'react-toastify';
+import SideNav from '../SideNav/SideNav';
+import { API_URL } from '../../../utils/constants';
+import AppContent from '../AppContent/AppContent';
+import classes from './App.module.scss';
+import { useTheme } from '../../../context/ThemeContext';
+import { usePwaAutoUpdate } from '../../../hooks/usePwaAutoUpdate';
+import { useGetSettings } from '../../../services/settings';
+
+function App() {
+   console.log('API_URL :', API_URL);
+   const { setTheme, theme } = useTheme();
+   const { data: settingsData } = useGetSettings();
+   usePwaAutoUpdate();
+
+   useEffect(() => {
+      const savedTheme = settingsData?.result?.settings?.theme;
+
+      // If a theme is saved on the backend, ensure our local state matches.
+      if (savedTheme && (savedTheme === 'light' || savedTheme === 'dark' || savedTheme === 'auto')) {
+         const currentLocalSetting = localStorage.getItem('themeSetting');
+
+         // If the backend setting is different from what's in localStorage, update it.
+         if (savedTheme !== currentLocalSetting) {
+            console.log('Syncing theme from backend:', savedTheme);
+            setTheme(savedTheme); // This will update context and localStorage.
+         }
+      }
+   }, [settingsData, setTheme]);
+
+   return (
+      <div className={classes.app}>
+         <div className={classes.appContainer}>
+            <SideNav />
+            <AppContent>
+               <Outlet />
+            </AppContent>
+
+            <Tooltip id="appTooltip" style={{ padding: '3px 8px', fontSize: '11px' }} />
+            <Tooltip id="hintTooltip" style={{ padding: '3px 8px', fontSize: '12px', maxWidth: '250px' }} />
+            <Tooltip id="htmlToolTip" className="tooltipBorderd" classNameArrow="tooltipBorderdArrow" style={{ maxWidth: '250px' }} />
+            <ToastContainer position="bottom-center" hideProgressBar={true} transition={Slide} theme={theme} autoClose={false} />
+         </div>
+      </div>
+   );
+}
+
+export default App;

package/src/components/App/AppContent/AppContent.module.scss

@@ -0,0 +1,12 @@
+.appContentWrap {
+   margin-left: 40px;
+   margin-bottom: 40px;
+   width: 100%;
+}
+
+@media only screen and (max-width: 768px) {
+   .appContentWrap {
+      margin-left: 0;
+      padding-bottom: 0;
+   }
+}

package/src/components/App/AppContent/AppContent.tsx

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+import classes from './AppContent.module.scss';
+
+const AppContent = ({ children }: PropsWithChildren) => {
+   return (
+      <div className={classes.appContentWrap}>
+         <div className={classes.appContent}>
+            <div className={classes.appContentInner}>{children}</div>
+         </div>
+      </div>
+   );
+};
+
+export default AppContent;

package/src/components/App/Footer/Footer.module.scss

@@ -0,0 +1,23 @@
+.footer {
+   width: 100%;
+   bottom: 0px;
+   padding: 20px 0;
+   left: 0;
+   right: 0;
+   margin: 0 auto;
+   text-align: center;
+   color: var(--icon-color);
+   font-size: 0.9em;
+   a {
+      color: inherit;
+      &:hover {
+         color: var(--background-text-color-dark);
+      }
+   }
+   button {
+      color: inherit;
+      &:hover {
+         color: var(--background-text-color);
+      }
+   }
+}

package/src/components/App/Footer/Footer.tsx

@@ -0,0 +1,34 @@
+import classes from './Footer.module.scss';
+
+interface FooterProps {
+   version: string;
+   hideUpgradeLink?: boolean;
+   changeLogUrl?: string;
+}
+
+const Footer = ({ version = '1.0.0', hideUpgradeLink = false, changeLogUrl }: FooterProps) => {
+   return (
+      <>
+         <div className={classes.footer}>
+            <span>Pluton v{version}</span> <i className="pipe">|</i>
+            {!hideUpgradeLink && (
+               <>
+                  <a href="https://usepluton.com/pro-upgrade" target="_blank">
+                     Upgrade
+                  </a>{' '}
+                  <i className="pipe">|</i>
+               </>
+            )}
+            <a href="https://docs.usepluton.com" target="_blank">
+               Documentation
+            </a>{' '}
+            <i className="pipe">|</i>
+            <a href={changeLogUrl || 'https://github.com/plutonhq/pluton/blob/main/CHANGELOG.md'} target="_blank">
+               Changelog
+            </a>
+         </div>
+      </>
+   );
+};
+
+export default Footer;

package/src/components/App/PageTitle/PageTitle.tsx

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router';
+import { APP_NAME } from '../../../utils/constants';
+
+const PageTitle = ({ title = '' }: { title: string }) => {
+   const location = useLocation();
+
+   useEffect(() => {
+      // if the provided title is
+      document.title = title + (title ? ' | ' : '') + (APP_NAME || 'Pluton');
+   }, [location, title]);
+
+   return null;
+};
+
+export default PageTitle;

package/src/components/App/SideNav/SideNav.module.scss

@@ -0,0 +1,58 @@
+.sideNav {
+   position: absolute;
+}
+
+.logo {
+   position: relative;
+   background-color: var(--primary-color);
+   padding: 10px;
+   border-radius: 50%;
+   box-sizing: border-box;
+   display: flex;
+}
+
+.navMenu {
+   display: flex;
+   flex-direction: column;
+   gap: 10px;
+   align-items: center;
+   margin-top: 10px;
+   & > a {
+      width: 50px;
+      height: 50px;
+      background: transparent;
+      border-radius: 50%;
+      color: var(--nav-color);
+      cursor: pointer;
+
+      &:global(.active) {
+         background-color: var(--content-background-color);
+         color: var(--primary-color);
+      }
+   }
+}
+
+.navMenuLabel {
+   padding: 10px;
+   display: block;
+   text-align: center;
+}
+
+@media only screen and (max-width: 768px) {
+   .logo {
+      display: none;
+   }
+   .navMenu {
+      position: fixed;
+      width: 100%;
+      left: 0;
+      bottom: 0;
+      z-index: 999;
+      flex-direction: row-reverse;
+      background: var(--content-background-color);
+      box-shadow: 0 0 15px var(--content-shadow-color);
+      margin-top: 0;
+      gap: 0;
+      justify-content: space-around;
+   }
+}

package/src/components/App/SideNav/SideNav.tsx

@@ -0,0 +1,106 @@
+import { NavLink } from 'react-router';
+import { useState } from 'react';
+import { useLogout } from '../../../services/users';
+import Icon from '../../common/Icon/Icon';
+import Logo from '../../common/Logo/Logo';
+import classes from './SideNav.module.scss';
+import Modal from '../../common/Modal/Modal';
+import { isMobile } from '../../../utils/helpers';
+
+const SideNav = () => {
+   const [showLogoutModal, setShowLogoutModal] = useState(false);
+   const logoutMutation = useLogout();
+
+   return (
+      <div className={classes.navMenu} tabIndex={-1}>
+         <div className={classes.logo}>
+            <Logo size={30} color="#fff" />
+         </div>
+         <nav className={classes.navMenu}>
+            <NavLink to="/" end aria-label="Backup Plans">
+               {() => (
+                  <span
+                     className={classes.navMenuLabel}
+                     data-tooltip-id="appTooltip"
+                     data-tooltip-content="Backup Plans"
+                     data-tooltip-place="left"
+                     data-tooltip-delay-show={500}
+                     data-tooltip-hidden={isMobile()}
+                  >
+                     <Icon type="plans" size={30} />
+                  </span>
+               )}
+            </NavLink>
+            <NavLink to="/storages" end aria-label="Storages">
+               {() => (
+                  <span
+                     className={classes.navMenuLabel}
+                     data-tooltip-id="appTooltip"
+                     data-tooltip-content="Storages"
+                     data-tooltip-place="left"
+                     data-tooltip-delay-show={500}
+                     data-tooltip-hidden={isMobile()}
+                  >
+                     <Icon type="storages" size={26} />
+                  </span>
+               )}
+            </NavLink>
+            <NavLink to="/sources" end aria-label="Sources">
+               {() => (
+                  <span
+                     className={classes.navMenuLabel}
+                     data-tooltip-id="appTooltip"
+                     data-tooltip-content="Sources"
+                     data-tooltip-place="left"
+                     data-tooltip-delay-show={500}
+                     data-tooltip-hidden={isMobile()}
+                  >
+                     <Icon type="sources" size={26} />
+                  </span>
+               )}
+            </NavLink>
+            <NavLink to="/settings" end aria-label="Settings">
+               {() => (
+                  <span
+                     className={classes.navMenuLabel}
+                     data-tooltip-id="appTooltip"
+                     data-tooltip-content="Settings"
+                     data-tooltip-place="left"
+                     data-tooltip-delay-show={500}
+                     data-tooltip-hidden={isMobile()}
+                  >
+                     <Icon type="settings" size={30} />
+                  </span>
+               )}
+            </NavLink>
+            <a onClick={() => setShowLogoutModal(true)} aria-label="Logout">
+               <span
+                  className={classes.navMenuLabel}
+                  data-tooltip-id="appTooltip"
+                  data-tooltip-content="Logout"
+                  data-tooltip-place="left"
+                  data-tooltip-delay-show={500}
+                  data-tooltip-hidden={isMobile()}
+               >
+                  <Icon type="logout" size={30} />
+               </span>
+            </a>
+         </nav>
+         {showLogoutModal && (
+            <Modal title="Logout" closeModal={() => setShowLogoutModal(false)} width="300px">
+               <p>Are you sure you want to Logout?</p>
+               <div className="modalActions">
+                  <button className="modalButton" onClick={() => setShowLogoutModal(false)}>
+                     Cancel
+                  </button>
+                  <button className="modalButton modalButton--ok" onClick={() => logoutMutation.mutate()}>
+                     <Icon type={logoutMutation.isPending ? 'loading' : 'logout'} size={12} /> Logout
+                  </button>
+               </div>
+            </Modal>
+         )}
+      </div>
+   );
+};
+
+export default SideNav;

package/src/components/Device/DeviceBackups/DeviceBackups.module.scss

@@ -0,0 +1,142 @@
+.devicePlans {
+   display: flex;
+   gap: 20px;
+   margin-bottom: 30px;
+
+   .widget {
+      border: 1px solid var(--line-color);
+      padding: 20px;
+      border-radius: 6px;
+      box-sizing: border-box;
+      width: calc(33.33% - 15px);
+      .widgetTitle {
+         padding: 2px 6px;
+         background-color: var(--content-background-color);
+         border: 1px solid var(--line-color);
+         color: var(--content-title-color);
+         border-radius: 4px;
+         font-size: 0.6875rem;
+         font-weight: 600;
+         width: max-content;
+         position: relative;
+         margin-top: -30px;
+         span {
+            color: var(--icon-color);
+         }
+      }
+      .widgetContent {
+         width: 100%;
+         display: flex;
+         flex-direction: column;
+         gap: 20px;
+         padding-top: 20px;
+         padding-bottom: 10px;
+
+         .noData {
+            width: 100%;
+            text-align: center;
+            font-size: 0.9em;
+            padding-top: 20px;
+         }
+      }
+   }
+
+   .plans,
+   .storages {
+      width: 40%;
+      .planItem {
+         display: flex;
+         .status {
+            display: flex;
+            align-items: center;
+            margin-right: 10px;
+            position: relative;
+            color: var(--success-label);
+            &.paused {
+               color: var(--icon-color);
+            }
+            .iconBlock {
+               width: 40px;
+               height: 40px;
+               flex: 0 0 40px;
+               display: flex;
+               align-items: center;
+               justify-content: center;
+               border-radius: 50%;
+               background-color: var(--background-color);
+            }
+         }
+         .planContent {
+            display: flex;
+            flex-direction: column;
+            font-size: 0.9em;
+            h4 {
+               margin: 0;
+               margin-bottom: 4px;
+               color: var(--content-title-color);
+               a {
+                  color: inherit;
+                  &:hover {
+                     color: var(--primary-color);
+                  }
+               }
+            }
+            .planStats {
+               display: flex;
+               flex-direction: row;
+               gap: 10px;
+            }
+         }
+      }
+   }
+
+   .paths {
+      .pathItem {
+         display: flex;
+         flex-direction: column;
+         font-size: 0.9em;
+         .pathPlanTitle {
+            color: var(--content-title-color);
+            margin-bottom: 4px;
+            :global(.icon) {
+               color: var(--icon-color);
+            }
+            a {
+               color: inherit;
+               &:hover {
+                  color: var(--primary-color);
+               }
+            }
+         }
+         .planPaths {
+            display: flex;
+            flex-direction: column;
+            gap: 3px;
+            padding-left: 20px;
+         }
+      }
+   }
+
+   .storages {
+      width: 25%;
+      .planItem {
+         .iconBlock {
+            img {
+               max-width: 16px;
+               height: auto;
+            }
+         }
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .devicePlans {
+      flex-direction: column;
+      .plans,
+      .storages,
+      .widget {
+         width: 100%;
+      }
+   }
+}

package/src/components/Device/DeviceBackups/DeviceBackups.tsx

@@ -0,0 +1,135 @@
+import { useMemo } from 'react';
+import { NavLink } from 'react-router';
+import { DevicePlan } from '../../../@types/devices';
+import Icon from '../../common/Icon/Icon';
+import classes from './DeviceBackups.module.scss';
+import { formatBytes } from '../../../utils/helpers';
+
+interface DeviceBackupsProps {
+   plans: DevicePlan[];
+}
+
+const DeviceBackups = ({ plans }: DeviceBackupsProps) => {
+   const plansStorages = useMemo(() => {
+      const storages: (DevicePlan['storage'] & { size: number })[] = [];
+
+      //first calculate each storage's size from the plan size.
+      const storageSizes: { [key: string]: number } = {};
+      plans.forEach((plan) => {
+         const planStorageId = plan.storage.id;
+         if (!storageSizes[planStorageId]) {
+            storageSizes[planStorageId] = 0;
+         }
+         storageSizes[planStorageId] += plan.size;
+      });
+
+      plans.forEach((plan) => {
+         if (!storages.some((storage) => storage.id === plan.storage.id)) {
+            // if (plan.storage.id !== 'local') {
+            // TODO: implement this check
+            storages.push({ ...plan.storage, size: storageSizes[plan.storage.id] });
+            // }
+         }
+      });
+      return storages;
+   }, [plans]);
+
+   console.log('plansStorages :', plansStorages);
+
+   return (
+      <div className={classes.devicePlans}>
+         {/* Backup Plans */}
+         <div className={`${classes.widget} ${classes.plans}`}>
+            <div className={classes.widgetTitle}>
+               <Icon type="plans" size={12} /> Backup Plans
+            </div>
+            <div className={classes.widgetContent}>
+               {plans.length === 0 && <div className={classes.noData}>No backup plans found for this device.</div>}
+               {plans.length > 0 &&
+                  plans.map(({ id, title, sourceConfig, storage, isActive, method, size }) => (
+                     <div key={id} className={classes.planItem}>
+                        <div className={`${classes.status} ${!isActive ? classes.paused : ''}`}>
+                           <div className={classes.iconBlock}>
+                              <Icon type={method === 'backup' ? 'plans' : 'sync'} size={20} />
+                           </div>
+                        </div>
+                        <div className={classes.planContent}>
+                           <h4>
+                              <NavLink to={`/plan/${id}`}>{title}</NavLink>
+                           </h4>
+                           <div className={classes.planStats}>
+                              <div>
+                                 <Icon type="folders" size={12} /> {sourceConfig.includes.length}{' '}
+                                 {sourceConfig.includes.length > 1 ? 'paths' : 'path'}
+                              </div>
+                              <div>
+                                 <Icon type="storages" size={12} /> {storage.name}
+                              </div>
+                              <div>
+                                 <Icon type="disk" size={12} /> {formatBytes(size)}
+                              </div>
+                           </div>
+                        </div>
+                     </div>
+                  ))}
+            </div>
+         </div>
+         {/* Protected Paths */}
+         <div className={`${classes.widget} ${classes.paths}`}>
+            <div className={classes.widgetTitle}>
+               <Icon type="folders" size={12} /> Protected Paths
+            </div>
+            <div className={classes.widgetContent}>
+               {plans.length === 0 && <div className={classes.noData}>No protected paths found for this device.</div>}
+
+               {plans.length > 0 &&
+                  plans.map(({ id, title, sourceConfig, method }) => (
+                     <div key={id} className={classes.pathItem}>
+                        <div className={classes.pathPlanTitle}>
+                           <NavLink to={`/plan/${id}`}>
+                              <>
+                                 <Icon type={method === 'backup' ? 'plans' : 'sync'} size={14} /> {title}
+                              </>
+                           </NavLink>
+                        </div>
+                        <div className={classes.planPaths}>
+                           {sourceConfig.includes.map((path, index) => (
+                              <div key={index} className={classes.path}>
+                                 <Icon type="folder" size={14} /> {path}
+                              </div>
+                           ))}
+                        </div>
+                     </div>
+                  ))}
+            </div>
+         </div>
+         {/* Connected Storages */}
+         <div className={`${classes.widget} ${classes.storages}`}>
+            <div className={classes.widgetTitle}>
+               <Icon type="storages" size={12} /> Connected Storages
+            </div>
+            <div className={classes.widgetContent}>
+               {plans.length === 0 && <div className={classes.noData}>No Remote storages are being used by this device.</div>}
+               {plans.length > 0 &&
+                  plansStorages.map(({ id, name, size, type, typeName }) => (
+                     <div key={id} className={classes.planItem}>
+                        <div className={`${classes.status}`}>
+                           <div className={classes.iconBlock} title={typeName}>
+                              {type === 'local' ? <Icon type="storages" size={12} /> : <img src={`/providers/${type}.png`} />}
+                           </div>
+                        </div>
+                        <div className={classes.planContent}>
+                           <h4>
+                              <NavLink to={`/storage/${id}`}>{name}</NavLink>
+                           </h4>
+                           <div className={classes.planStats}>{formatBytes(size)}</div>
+                        </div>
+                     </div>
+                  ))}
+            </div>
+         </div>
+      </div>
+   );
+};
+
+export default DeviceBackups;