@plutonhq/core-frontend 0.0.1

package/src/routes/Plans/Plans.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useMemo, useState } from 'react';
+import classes from './Plans.module.scss';
+import PageHeader from '../../components/common/PageHeader/PageHeader';
+import PlanItem from '../../components/Plan/PlanItems/PlanItem';
+import AddPlan from '../../components/Plan/AddPlan/AddPlan';
+import TagsFilter from '../../components/common/TagsFilter/TagsFilter';
+import SearchItems from '../../components/common/SearchItems/SearchItems';
+import SortItems from '../../components/common/SortItems/SortItems';
+import { useGetPlans } from '../../services/plans';
+import { Plan } from '../../@types/plans';
+import { useComponentOverride } from '../../context/ComponentOverrideContext';
+import ItemsLayout from '../../components/common/ItemsLayout/ItemsLayout';
+import SkeletonItems from '../../components/Skeleton/SkeletonItems';
+
+const Plans = () => {
+   const [showSidePanel, setShowSidePanel] = useState(false);
+   const [plans, setPlans] = useState<Plan[]>([]);
+   const [plansLayout, setPlansLayout] = useState<'list' | 'grid'>(() => (localStorage.getItem('plans_layout') === 'grid' ? 'grid' : 'list'));
+   const { data, isLoading } = useGetPlans();
+   // const data = { result: [] };
+   // const isLoading = true;
+
+   const fetchedPlans: Plan[] = data?.result || [];
+
+   const AddPlanModal = useComponentOverride('AddPlan', AddPlan);
+
+   useEffect(() => {
+      if (data?.result) {
+         setPlans(data.result);
+      }
+   }, [data]);
+
+   console.log('plans :', plans);
+
+   const allTags = useMemo(() => {
+      const tags: string[] = [];
+      if (plans && plans.length > 0) {
+         plans.forEach((plan) => {
+            plan.tags.forEach((tag) => {
+               if (!tags.includes(tag)) {
+                  tags.push(tag);
+               }
+            });
+         });
+      }
+
+      return tags;
+   }, [plans]);
+
+   const filterByTags = (tag: string) => {
+      if (tag) {
+         setPlans(fetchedPlans.filter((p) => p.tags.includes(tag)));
+      } else {
+         setPlans(fetchedPlans);
+      }
+   };
+
+   const searchPlans = (term: string) => {
+      if (term) {
+         setPlans(fetchedPlans.filter((p) => p.title.toLowerCase().includes(term.toLowerCase())));
+      } else {
+         setPlans(fetchedPlans);
+      }
+   };
+
+   const sortPlans = (sortBy: string) => {
+      switch (sortBy) {
+         case 'title_asc':
+            setPlans([...plans].sort((a, b) => a.title.localeCompare(b.title)));
+            break;
+         case 'title_desc':
+            setPlans([...plans].sort((a, b) => b.title.localeCompare(a.title)));
+            break;
+         case 'created_asc':
+            setPlans([...plans].sort((a, b) => Date.parse(a.createdAt) - Date.parse(b.createdAt)));
+            break;
+         case 'created_desc':
+            setPlans([...plans].sort((a, b) => Date.parse(b.createdAt) - Date.parse(a.createdAt)));
+            break;
+         case '':
+            setPlans([...plans]);
+            break;
+         default:
+            break;
+      }
+   };
+
+   return (
+      <div className={classes.plans}>
+         <PageHeader
+            title="Backup Plans"
+            icon="plans"
+            buttonTitle="+ New"
+            buttonAction={() => setShowSidePanel(true)}
+            rightSection={
+               <>
+                  <TagsFilter tags={allTags} onSelect={filterByTags} />
+                  <SearchItems onSearch={(term) => searchPlans(term)} itemName="Plans" />
+                  <SortItems
+                     options={[
+                        { label: 'Title (A to Z)', value: 'title_asc' },
+                        { label: 'Title (Z to A)', value: 'title_desc' },
+                        { label: 'Date Created (Oldest First)', value: 'created_asc' },
+                        { label: 'Date Created (Newest First)', value: 'created_desc' },
+                     ]}
+                     onSort={(sortBy) => sortPlans(sortBy)}
+                  />
+                  <ItemsLayout onChange={(value) => setPlansLayout(value)} type="plans" value={plansLayout} />
+               </>
+            }
+         />
+         <div className={` ${classes.planItems} ${plansLayout === 'grid' ? classes.plansGrid : classes.plansListView}`}>
+            {plans.length > 0 && plans.map((plan) => <PlanItem key={plan.id} plan={plan} layout={plansLayout} />)}
+            {plans.length === 0 && !isLoading && (
+               <div className="empty_container">
+                  <p>
+                     No Plans Created Yet. <button onClick={() => setShowSidePanel(true)}>+ Add a Plan</button> to backup your content.
+                  </p>
+               </div>
+            )}
+         </div>
+         {isLoading && <SkeletonItems type="plan" layout={plansLayout} count={6} />}
+         {showSidePanel && <AddPlanModal close={() => setShowSidePanel(false)} />}
+      </div>
+   );
+};
+
+export default Plans;

package/src/routes/Settings/Settings.module.scss

@@ -0,0 +1,112 @@
+.settings {
+   .settingsContent {
+      width: 100%;
+      position: relative;
+      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: 400px;
+      margin-top: 20px;
+
+      .sidebar {
+         width: 180px;
+         height: 100%;
+         position: absolute;
+         border-radius: 6px 0 0 6px;
+         padding: 20px;
+         box-sizing: border-box;
+         padding-left: 20px;
+         border-right: 1px solid var(--line-color);
+         display: flex;
+         flex-direction: column;
+         justify-content: space-between;
+      }
+
+      .updateBtn {
+         width: 100%;
+         padding: 12px;
+         background-color: var(--primary-color);
+         color: var(--primary-text-color);
+         border-radius: 6px;
+         font-weight: 600;
+      }
+
+      .tabs {
+         margin: 0;
+         list-style-type: none;
+         display: flex;
+         flex-direction: column;
+         padding: 0;
+         gap: 0.5rem;
+         li {
+            cursor: pointer;
+            padding: 10px 16px;
+            padding-left: 20px;
+            position: relative;
+            font-weight: 500;
+
+            &.tabActive {
+               border-right: 0;
+               border-radius: 6px;
+               color: var(--primary-color);
+               background: var(--background-color);
+            }
+         }
+      }
+
+      .content {
+         padding: 30px;
+         width: calc(100% - 180px);
+         min-height: 500px;
+         position: relative;
+         left: 180px;
+         box-sizing: border-box;
+         display: flex;
+         justify-content: flex-start;
+         overflow: hidden;
+         h4 {
+            color: var(--content-title-color);
+            margin-top: 0;
+         }
+         .field {
+            margin-bottom: 1rem;
+         }
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .settings {
+      .settingsContent {
+         .content {
+            left: 0;
+            width: 100%;
+            min-height: 600px;
+         }
+         .tabs {
+            flex-direction: row;
+            gap: 0;
+            li {
+               font-size: 0;
+            }
+         }
+         .sidebar {
+            position: relative;
+            width: 100%;
+            height: auto;
+            justify-content: space-between;
+            flex-direction: row;
+            border-bottom: 1px solid var(--line-color);
+            padding: 12px;
+            .updateBtn {
+               width: 90px;
+            }
+         }
+         // .integrationTab {
+         //     display: flex;
+         // }
+      }
+   }
+}

package/src/routes/Settings/Settings.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import Icon from '../../components/common/Icon/Icon';
+import PageHeader from '../../components/common/PageHeader/PageHeader';
+import classes from './Settings.module.scss';
+import { useGetSettings, useUpdateSettings } from '../../services/settings';
+import IntegrationSettings from '../../components/Settings/IntegrationSettings/IntegrationSettings';
+import AnimatedWrapper from '../../components/common/AnimatedWrapper/AnimatedWrapper';
+import AppLogs from '../../components/Settings/AppLogs/AppLogs';
+import SidePanel from '../../components/common/SidePanel/SidePanel';
+import GeneralSettings from '../../components/Settings/GeneralSettings/GeneralSettings';
+
+const Settings = () => {
+   const [tab, setTab] = useState(() => {
+      const params = new URLSearchParams(window.location.search);
+      return params.get('t') || 'general';
+   });
+   const [settings, setSettings] = useState<Record<string, any>>({});
+   const [showAppLogs, setShowAppLogs] = useState(false);
+   const { data } = useGetSettings();
+   const settingsMutation = useUpdateSettings();
+   const settingsID = data?.result?.id;
+   const rawSettings = data?.result?.settings;
+
+   console.log('Settings data :', settingsID, data);
+
+   useEffect(() => {
+      if (rawSettings) {
+         setSettings(rawSettings);
+      }
+   }, [rawSettings]);
+
+   const updateSettings = () => {
+      settingsMutation.mutate(
+         { id: settingsID, settings: settings },
+         {
+            onSuccess: () => toast.success('Settings Updated!', { autoClose: 5000 }),
+            onError: (error) => toast.error('Failed to Update Settings. ' + error?.message || ''),
+         },
+      );
+   };
+
+   return (
+      <div className={classes.settings}>
+         <PageHeader
+            title={'Settings'}
+            icon="settings"
+            rightSection={
+               <>
+                  <button onClick={() => setShowAppLogs(true)}>
+                     <Icon type="logs" size={16} /> App Logs
+                  </button>
+               </>
+            }
+         />
+         <div className={classes.settingsContent}>
+            <div className={classes.sidebar}>
+               <ul className={classes.tabs}>
+                  <li className={`${tab === 'general' ? classes.tabActive : ''}`} onClick={() => setTab('general')}>
+                     <Icon type="cog" size={13} /> General
+                  </li>
+                  <li className={`${tab === 'integration' ? classes.tabActive : ''}`} onClick={() => setTab('integration')}>
+                     <Icon type="integration" size={13} /> Integrations
+                  </li>
+               </ul>
+               <button className={classes.updateBtn} onClick={() => updateSettings()}>
+                  <Icon type={settingsMutation.isPending ? 'loading' : 'check'} size={11} /> {settingsMutation.isPending ? 'Updating...' : 'Update'}
+               </button>
+            </div>
+            <div className={classes.content}>
+               <AnimatedWrapper isVisible={tab === 'general'} animationType="slide-left" animationDuration={100} absolute={true}>
+                  <div className={classes.tabContent}>
+                     <h4>General Settings</h4>
+                     <GeneralSettings
+                        settingsID={settingsID}
+                        settings={settings}
+                        onUpdate={(st: Record<string, any>) => setSettings({ ...settings, ...st })}
+                     />
+                  </div>
+               </AnimatedWrapper>
+               <AnimatedWrapper isVisible={tab === 'integration'} animationType="slide-left" animationDuration={100} absolute={true}>
+                  <div className={classes.tabContent}>
+                     <h4>Notification Integration Settings</h4>
+                     <IntegrationSettings
+                        settingsID={settingsID}
+                        settings={settings}
+                        onUpdate={(st: Record<string, any>) => setSettings({ ...settings, integration: st })}
+                     />
+                  </div>
+               </AnimatedWrapper>
+            </div>
+         </div>
+         {showAppLogs && (
+            <SidePanel width="80%" title="App Logs" icon={<Icon type={'logs'} size={20} />} close={() => setShowAppLogs(false)}>
+               <AppLogs settingsID="1" />
+            </SidePanel>
+         )}
+      </div>
+   );
+};
+
+export default Settings;

package/src/routes/Sources/Sources.module.scss

@@ -0,0 +1,29 @@
+.devices {
+   width: 100%;
+}
+
+.deviceItems {
+   margin-top: 20px;
+}
+
+.devicesGrid {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   gap: 15px;
+}
+
+@media only screen and (max-width: 1024px) {
+   .deviceItems {
+      &.devicesGrid {
+         grid-template-columns: repeat(2, 1fr);
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .deviceItems {
+      &.devicesGrid {
+         grid-template-columns: repeat(1, 1fr);
+      }
+   }
+}

package/src/routes/Sources/Sources.tsx

@@ -0,0 +1,86 @@
+import PageHeader from '../../components/common/PageHeader/PageHeader';
+import DeviceItem from '../../components/Device/DeviceItem/DeviceItem';
+import TagsFilter from '../../components/common/TagsFilter/TagsFilter';
+import SearchItems from '../../components/common/SearchItems/SearchItems';
+import { useEffect, useMemo, useState } from 'react';
+import { Device } from '../../@types/devices';
+import { useGetDevices } from '../../services/devices';
+import classes from './Sources.module.scss';
+import ItemsLayout from '../../components/common/ItemsLayout/ItemsLayout';
+import SkeletonItems from '../../components/Skeleton/SkeletonItems';
+
+type SourcesProps = {
+   buttonTitle?: string;
+   buttonAction?: (bool: boolean) => void;
+};
+
+const Sources = ({ buttonTitle, buttonAction }: SourcesProps) => {
+   const [devices, setDevices] = useState<Device[]>([]);
+   const [devicesLayout, setDevicesLayout] = useState<'list' | 'grid'>(() => (localStorage.getItem('devices_layout') === 'grid' ? 'grid' : 'list'));
+   const { data, isLoading } = useGetDevices();
+   const fetchedDevices: Device[] = data?.result || [];
+
+   useEffect(() => {
+      if (data?.result) {
+         setDevices(data.result);
+      }
+   }, [data]);
+
+   const allTags = useMemo(() => {
+      const tags: string[] = [];
+      if (devices && devices.length > 0) {
+         devices.forEach(({ tags = [] }) => {
+            console.log('tags :', tags);
+            if (tags && Array.isArray(tags)) {
+               tags.forEach((tag) => {
+                  if (!tags.includes(tag)) {
+                     tags.push(tag);
+                  }
+               });
+            }
+         });
+      }
+
+      return tags;
+   }, [devices]);
+
+   const filterByTags = (tag: string) => {
+      if (tag) {
+         setDevices(fetchedDevices.filter((p) => p.tags.includes(tag)));
+      } else {
+         setDevices(fetchedDevices);
+      }
+   };
+
+   const searchStorages = (term: string) => {
+      if (term) {
+         setDevices(fetchedDevices.filter((p) => p.name.toLowerCase().includes(term.toLowerCase())));
+      } else {
+         setDevices(fetchedDevices);
+      }
+   };
+
+   return (
+      <div className={classes.devices}>
+         <PageHeader
+            title="Sources"
+            icon="sources"
+            buttonTitle={buttonTitle}
+            buttonAction={buttonAction}
+            rightSection={
+               <>
+                  <TagsFilter tags={allTags} onSelect={filterByTags} />
+                  <SearchItems onSearch={(term) => searchStorages(term)} itemName="Sources" />
+                  <ItemsLayout onChange={(value) => setDevicesLayout(value)} type="devices" value={devicesLayout} />
+               </>
+            }
+         />
+         <div className={`${classes.deviceItems} ${devicesLayout === 'grid' ? classes.devicesGrid : ''}`}>
+            {!isLoading && devices.length > 0 && devices.map((device) => <DeviceItem key={device.id} device={device} layout={devicesLayout} />)}
+         </div>
+         {isLoading && <SkeletonItems type="source" layout={devicesLayout} />}
+      </div>
+   );
+};
+
+export default Sources;

package/src/routes/Storages/Storages.module.scss

@@ -0,0 +1,30 @@
+.storages {
+   width: 100%;
+}
+
+.storageItems {
+   margin-top: 20px;
+}
+
+.storagesGrid {
+   width: 100%;
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   gap: 15px;
+}
+
+@media only screen and (max-width: 1024px) {
+   .storageItems {
+      &.storagesGrid {
+         grid-template-columns: repeat(2, 1fr);
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .storageItems {
+      &.storagesGrid {
+         grid-template-columns: repeat(1, 1fr);
+      }
+   }
+}

package/src/routes/Storages/Storages.tsx

@@ -0,0 +1,92 @@
+import classes from './Storages.module.scss';
+import PageHeader from '../../components/common/PageHeader/PageHeader';
+import { useEffect, useMemo, useState } from 'react';
+import StorageItem from '../../components/Storage/StorageItem/StorageItem';
+import TagsFilter from '../../components/common/TagsFilter/TagsFilter';
+import SearchItems from '../../components/common/SearchItems/SearchItems';
+import AddStorage from '../../components/Storage/AddStorage/AddStorage';
+import { useGetStorages } from '../../services/storage';
+import { Storage } from '../../@types/storages';
+import ItemsLayout from '../../components/common/ItemsLayout/ItemsLayout';
+import SkeletonItems from '../../components/Skeleton/SkeletonItems';
+
+const Storages = () => {
+   const [showSidePanel, setShowSidePanel] = useState(false);
+   const [storages, setStorages] = useState<Storage[]>([]);
+   const [storagesLayout, setStoragesLayout] = useState<'list' | 'grid'>(() =>
+      localStorage.getItem('storages_layout') === 'grid' ? 'grid' : 'list',
+   );
+
+   const { data, isLoading } = useGetStorages();
+   const fetchedStorages: Storage[] = data?.result || [];
+   console.log('fetchedStorages :', fetchedStorages);
+
+   const allTags = useMemo(() => {
+      const tags: string[] = [];
+      if (storages && storages.length > 0) {
+         storages.forEach((storage) => {
+            storage.tags.forEach((tag) => {
+               if (!tags.includes(tag)) {
+                  tags.push(tag);
+               }
+            });
+         });
+      }
+
+      return tags;
+   }, [storages]);
+
+   useEffect(() => {
+      if (data?.result) {
+         setStorages(data.result);
+      }
+   }, [data]);
+
+   const filterByTags = (tag: string) => {
+      if (tag) {
+         setStorages(fetchedStorages.filter((p) => p.tags.includes(tag)));
+      } else {
+         setStorages(fetchedStorages);
+      }
+   };
+
+   const searchStorages = (term: string) => {
+      if (term) {
+         setStorages(fetchedStorages.filter((p) => p.name.toLowerCase().includes(term.toLowerCase())));
+      } else {
+         setStorages(fetchedStorages);
+      }
+   };
+
+   return (
+      <div className={classes.storages}>
+         <PageHeader
+            title="Storages"
+            icon="storages"
+            buttonTitle="+ New"
+            buttonAction={() => setShowSidePanel(true)}
+            rightSection={
+               <>
+                  <TagsFilter tags={allTags} onSelect={filterByTags} />
+                  <SearchItems onSearch={(term) => searchStorages(term)} itemName="Storages" />
+                  <ItemsLayout onChange={(value) => setStoragesLayout(value)} type="storages" value={storagesLayout} />
+               </>
+            }
+         />
+         <div className={`${classes.storageItems} ${storagesLayout === 'grid' ? classes.storagesGrid : ''}`}>
+            {storages.length > 0 && storages.map((storage) => <StorageItem key={storage.id} storage={storage} layout={storagesLayout} />)}
+            {!isLoading && storages.length === 0 && (
+               <div className="empty_container">
+                  <p>
+                     No Storages Found. <button onClick={() => setShowSidePanel(true)}>+ Add a Storage</button> to backup your content.
+                  </p>
+               </div>
+            )}
+         </div>
+         {isLoading && <SkeletonItems type="storage" layout={storagesLayout} count={6} />}
+         {showSidePanel && <AddStorage close={() => setShowSidePanel(false)} />}
+      </div>
+   );
+};
+
+export default Storages;

package/src/routes/index.ts

@@ -0,0 +1,9 @@
+// Route Components
+export { default as DeviceSingle } from './DeviceSingle/DeviceSingle';
+export { default as Login } from './Login/Login';
+export { default as NotFoundRoute } from './NotFoundRoute/NotFoundRoute';
+export { default as Plans } from './Plans/Plans';
+export { default as PlanSingle } from './PlanSingle/PlanSingle';
+export { default as Settings } from './Settings/Settings';
+export { default as Sources } from './Sources/Sources';
+export { default as Storages } from './Storages/Storages';