@plutonhq/core-frontend 0.0.1 → 0.0.3

package/{dist → dist-lib}/styles/global.scss

@@ -1,4 +1,4 @@
-@use '../assets/fonts/fonts.css' as *;
+@use '../assets/fonts.scss' as *;
 @use '../assets/fileicons.css' as *;
 
 :root {

package/package.json

@@ -1,14 +1,14 @@
 {
    "name": "@plutonhq/core-frontend",
    "description": "Pluton Core Frontend Library",
-   "version": "0.0.1",
+   "version": "0.0.3",
    "author": "Plutonhq",
    "license": "Apache-2.0",
    "publishConfig": {
       "access": "public"
    },
    "files": [
-      "dist",
+      "dist-lib",
       "src",
       "README.md",
       "LICENSE"
@@ -62,71 +62,71 @@
    },
    "exports": {
       ".": {
-         "types": "./dist/index.d.ts",
-         "import": "./dist/index.js",
-         "default": "./dist/index.js"
+         "types": "./dist-lib/index.d.ts",
+         "import": "./dist-lib/index.js",
+         "default": "./dist-lib/index.js"
       },
       "./components": {
-         "types": "./dist/components/index.d.ts",
-         "import": "./dist/components.js"
+         "types": "./dist-lib/components/index.d.ts",
+         "import": "./dist-lib/components.js"
       },
       "./components/*": {
-         "types": "./dist/components/*/index.d.ts",
-         "import": "./dist/components/*/index.js"
+         "types": "./dist-lib/components/*/index.d.ts",
+         "import": "./dist-lib/components/*/index.js"
       },
       "./routes": {
-         "types": "./dist/routes/index.d.ts",
-         "import": "./dist/routes.js"
+         "types": "./dist-lib/routes/index.d.ts",
+         "import": "./dist-lib/routes.js"
       },
       "./routes/*": {
-         "types": "./dist/routes/*/*.d.ts",
-         "import": "./dist/routes/*/*.js"
+         "types": "./dist-lib/routes/*/*.d.ts",
+         "import": "./dist-lib/routes/*/*.js"
       },
       "./routes/*/*": {
-         "import": "./dist/routes/*/*"
+         "import": "./dist-lib/routes/*/*"
       },
       "./components/*/*": {
-         "import": "./dist/components/*/*"
+         "import": "./dist-lib/components/*/*"
       },
       "./services": {
-         "types": "./dist/services/index.d.ts",
-         "import": "./dist/services.js"
+         "types": "./dist-lib/services/index.d.ts",
+         "import": "./dist-lib/services.js"
       },
       "./hooks": {
-         "types": "./dist/hooks/index.d.ts",
-         "import": "./dist/hooks.js"
+         "types": "./dist-lib/hooks/index.d.ts",
+         "import": "./dist-lib/hooks.js"
       },
       "./utils": {
-         "types": "./dist/utils/index.d.ts",
-         "import": "./dist/utils.js"
+         "types": "./dist-lib/utils/index.d.ts",
+         "import": "./dist-lib/utils.js"
       },
       "./context": {
-         "types": "./dist/context/index.d.ts",
-         "import": "./dist/context.js"
+         "types": "./dist-lib/context/index.d.ts",
+         "import": "./dist-lib/context.js"
       },
       "./types": {
-         "types": "./dist/@types/index.d.ts",
-         "import": "./dist/@types/index.js"
+         "types": "./dist-lib/@types/index.d.ts",
+         "import": "./dist-lib/@types/index.js"
       },
       "./@types/*": {
-         "types": "./dist/@types/*.d.ts"
+         "types": "./dist-lib/@types/*.d.ts"
       },
       "./config/*": {
-         "types": "./dist/config/*.d.ts",
-         "import": "./dist/config/*.js"
+         "types": "./dist-lib/config/*.d.ts",
+         "import": "./dist-lib/config/*.js"
       },
       "./styles/*": {
-         "import": "./dist/styles/*"
+         "import": "./dist-lib/styles/*"
       },
       "./router": {
-         "types": "./dist/router.d.ts",
-         "import": "./dist/router.js"
+         "types": "./dist-lib/router.d.ts",
+         "import": "./dist-lib/router.js"
       },
       "./package.json": "./package.json"
    },
-   "main": "./dist/index.js",
-   "module": "./dist/index.js",
-   "types": "./dist/index.d.ts",
+   "main": "./dist-lib/index.js",
+   "module": "./dist-lib/index.js",
+   "types": "./dist-lib/index.d.ts",
    "scripts": {
       "build": "tsc -b && vite build",
       "build:lib": "vite build --config vite.config.lib.ts && tsc -p tsconfig.lib.json",

package/src/assets/fonts.scss

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

package/src/components/Device/DeviceCPU/DeviceCPU.tsx

@@ -11,6 +11,7 @@ const DeviceCPU = ({ cpu }: DeviceCPUProps) => {
    const processorIcon = getProcessorIcon(cpu.manufacturer);
 
    const cpuPercent = cpu.load?.currentLoad ? Math.round(cpu.load?.currentLoad) : 0;
+   const cpuName = cpu.manufacturer && cpu.brand ? `${cpu.manufacturer} ${cpu.brand}` : 'Unknown';
 
    return (
       <div className={`${classes.widget} ${classes.cpu}`}>
@@ -24,7 +25,7 @@ const DeviceCPU = ({ cpu }: DeviceCPUProps) => {
                </div>
                <div className={classes.infoBlockRight}>
                   <span>Processor</span>
-                  <span title={`${cpu.manufacturer} ${cpu.brand}`}>{`${cpu.manufacturer} ${cpu.brand}`}</span>
+                  <span title={cpuName}>{cpuName}</span>
                </div>
             </div>
             <div className={classes.infoBlock}>

package/src/components/Device/DeviceMemory/DeviceMemory.tsx

@@ -24,7 +24,7 @@ const DeviceMemory = ({ memory }: DeviceMemoryProps) => {
       });
       const sortedGroups = Object.entries(memoryGroups).sort((a, b) => b[1] - a[1]);
       const primaryGroup = sortedGroups[0];
-      const mainText = `${primaryGroup[1]}x ${primaryGroup[0] || 'Unknown'}`;
+      const mainText = `${primaryGroup[1] || 1}x ${primaryGroup[0] || 'Unknown'}`;
       const remainingCount = sortedGroups.slice(1).reduce((sum, group) => sum + group[1], 0);
 
       if (remainingCount > 0) {

package/src/components/Plan/PlanForm/PlanForm.tsx

@@ -210,13 +210,15 @@ const PlanForm = ({ title, planSettings, type, onPlanSettingsChange, onSubmit, i
             )}
             {step === 3 && (
                <div className={PFClasses.planStep}>
-                  <IntervalField
-                     label="Backup Interval*"
-                     fieldValue={planSettings.settings.interval}
-                     onUpdate={(intervalSettings) =>
-                        onPlanSettingsChange({ ...planSettings, settings: { ...planSettings.settings, interval: intervalSettings } })
-                     }
-                  />
+                  <div className={classes.field} style={{ width: '150px' }}>
+                     <IntervalField
+                        label="Backup Interval*"
+                        fieldValue={planSettings.settings.interval}
+                        onUpdate={(intervalSettings) =>
+                           onPlanSettingsChange({ ...planSettings, settings: { ...planSettings.settings, interval: intervalSettings } })
+                        }
+                     />
+                  </div>
 
                   <div className={classes.field} style={{ width: '150px' }}>
                      <NumberInput

package/src/main.tsx

@@ -1,24 +1,20 @@
 import { createRoot } from 'react-dom/client';
-import { RouterProvider } from 'react-router';
+import { BrowserRouter } from 'react-router';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { router } from './router';
+import { AppRoutes } 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 />
+      <ThemeProvider>
+         <BrowserRouter>
+            <AppRoutes />
+         </BrowserRouter>
+      </ThemeProvider>
       <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
    </QueryClientProvider>,
 );

package/src/router.tsx

@@ -1,7 +1,9 @@
-import { createBrowserRouter, createRoutesFromElements, Route, Navigate } from 'react-router';
+import { Routes, Route, Navigate } from 'react-router';
 import Plans from './routes/Plans/Plans';
 import Login from './routes/Login/Login';
+import Setup from './routes/Setup/Setup';
 import { useAuth } from './services/users';
+import { useSetupStatus } from './services/settings';
 import App from './components/App/App/App';
 import Settings from './routes/Settings/Settings';
 import Storages from './routes/Storages/Storages';
@@ -10,29 +12,59 @@ 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';
+import Icon from './components/common/Icon/Icon';
 
 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 />;
+   // Check setup status FIRST - this endpoint doesn't require auth
+   // and tells us if we're in binary mode and if setup is pending
+   const { data: setupStatus, isLoading: setupLoading } = useSetupStatus();
+   const { data: authData, isError: authError, isLoading: authLoading } = useAuth();
+
+   // Show loading spinner while checking setup status
+   if (setupLoading) {
+      return (
+         <div className="loadingScreen">
+            <Icon size={60} type="loading" />
+         </div>
+      );
+   }
+
+   // If setup status check failed, we can still proceed with auth check
+   // (might be a network issue or old backend without setup endpoint)
+
+   // For binary installations with pending setup, redirect to setup page
+   // This check happens BEFORE auth check so unauthenticated users can access setup
+   if (setupStatus?.data?.isBinary && setupStatus?.data?.setupPending) {
+      return <Navigate to="/setup" replace />;
+   }
+
+   // Now check auth (setup is either complete or not a binary installation)
+   if (authLoading) {
+      return (
+         <div className="loadingScreen">
+            <Icon size={60} type="loading" />
+         </div>
+      );
+   }
+
+   // If auth failed, redirect to login
+   if (authError) {
+      return <Navigate to="/login" replace />;
+   }
+
+   console.log('User data :', authData);
 
    return (
       <>
          <App />
-         <Footer version={data?.appVersion} />
+         <Footer version={authData?.appVersion || ''} />
       </>
    );
 }
 
-export const router = createBrowserRouter(
-   createRoutesFromElements(
-      <>
+export function AppRoutes() {
+   return (
+      <Routes>
          <Route path="/" element={<ProtectedLayout />}>
             <Route index element={<Plans />} />
             <Route path="settings" element={<Settings />} />
@@ -43,6 +75,7 @@ export const router = createBrowserRouter(
             <Route path="*" element={<NotFoundRoute />} />
          </Route>
          <Route path="login" element={<Login />} />
-      </>,
-   ),
-);
+         <Route path="setup" element={<Setup />} />
+      </Routes>
+   );
+}

package/src/routes/Setup/BinarySetup.tsx

@@ -0,0 +1,33 @@
+import { Navigate } from 'react-router';
+import { Footer, Icon } from '../../components';
+import { useSetupStatus } from '../../services/settings';
+
+/**
+ * Component that checks setup status for binary installations
+ * This is a separate component so useSetupStatus is only called when needed
+ */
+const BinarySetup = ({ children, appVersion }: { children: React.ReactNode; appVersion: string }) => {
+   const { data: setupStatus, isLoading: setupLoading } = useSetupStatus();
+
+   if (setupLoading) {
+      return (
+         <div className="loadingScreen">
+            <Icon size={60} type="loading" />
+         </div>
+      );
+   }
+
+   // If setup is pending, redirect to setup page
+   if (setupStatus?.data?.setupPending) {
+      return <Navigate to="/setup" replace />;
+   }
+
+   return (
+      <>
+         {children}
+         <Footer version={appVersion} />
+      </>
+   );
+};
+
+export default BinarySetup;

package/src/routes/Setup/Setup.module.scss

@@ -0,0 +1,174 @@
+.setupPage {
+   width: 100%;
+   min-height: 100vh;
+   display: flex;
+   align-items: center;
+   justify-content: flex-start;
+   flex-direction: column;
+   box-sizing: border-box;
+}
+
+.setupLogo {
+   margin-bottom: 20px;
+   h3 {
+      display: flex;
+      align-items: center;
+      color: var(--primary-color);
+      font-size: 1.25rem;
+      text-transform: uppercase;
+      font-weight: 900;
+      span:nth-child(1) {
+         display: flex;
+         color: var(--primary-color);
+      }
+      span:nth-child(2) {
+         margin-left: 5px;
+      }
+   }
+}
+
+.setupContainer {
+   width: 400px;
+   max-width: 90%;
+   border-radius: 10px;
+   background-color: var(--content-background-color);
+   padding: 35px 30px;
+   box-shadow: 0 0 10px var(--content-shadow-color);
+}
+
+.setupHeader {
+   text-align: center;
+   margin-bottom: 25px;
+
+   h2 {
+      margin: 0 0 10px 0;
+      color: var(--content-text-color);
+      font-size: 1.3rem;
+   }
+
+   p {
+      margin: 0;
+      color: var(--content-text-muted-color);
+      font-size: 0.875rem;
+      line-height: 1.5;
+   }
+}
+
+.setupForm {
+   width: 100%;
+}
+
+.setupInput {
+   margin-bottom: 20px;
+   position: relative;
+
+   label {
+      display: block;
+      color: var(--content-text-color);
+      font-size: 0.8125rem;
+      font-weight: 600;
+      margin-bottom: 6px;
+   }
+
+   input {
+      border: 1px solid;
+      border-color: var(--line-color);
+      border-radius: 6px;
+      padding: 14px;
+      padding-left: 40px;
+      width: 100%;
+      box-sizing: border-box;
+      outline: none;
+      font-size: 0.875rem;
+      transition: border-color 0.2s ease;
+
+      &:focus {
+         outline: none;
+         border-color: var(--primary-color);
+         box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
+      }
+   }
+
+   .setupInputIcon {
+      position: absolute !important;
+      left: 14px;
+      top: 42px;
+      opacity: 0.6;
+   }
+
+   .inputHint {
+      margin-top: 6px;
+      font-size: 0.75rem;
+      color: var(--content-text-muted-color);
+   }
+}
+
+.setupButton {
+   background-color: var(--primary-color);
+   color: var(--primary-text-color);
+   font-size: 0.875rem;
+   border-radius: 6px;
+   width: 100%;
+   box-sizing: border-box;
+   padding: 14px;
+   font-weight: 600;
+   cursor: pointer;
+   transition: opacity 0.2s ease;
+   margin-top: 10px;
+
+   &:hover:not(:disabled) {
+      opacity: 0.9;
+   }
+
+   &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+   }
+}
+
+.setupErrorMsg {
+   color: var(--error-text-color);
+   background-color: var(--error-bg-color);
+   padding: 14px;
+   border-radius: 6px;
+   margin-top: 15px;
+   font-size: 0.875rem;
+}
+
+.setupSuccessMsg {
+   color: var(--success-text-color);
+   background-color: var(--success-bg-color);
+   padding: 14px;
+   border-radius: 6px;
+   margin-top: 15px;
+   font-size: 0.875rem;
+   text-align: center;
+}
+
+.setupInfoBox {
+   border-left: 4px solid var(--primary-color);
+   background-color: var(--primary-color-lighter);
+   padding: 15px;
+   border-radius: 6px;
+   margin-bottom: 25px;
+
+   h4 {
+      margin: 0 0 8px 0;
+      color: var(--content-text-color);
+      font-size: 0.9375rem;
+   }
+
+   p {
+      margin: 0;
+      color: var(--content-text-muted-color);
+      font-size: 0.8125rem;
+      line-height: 1.5;
+   }
+}
+
+.loadingSpinner {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   padding: 40px;
+}