@plutonhq/core-frontend 0.0.1

package/src/components/common/ItemsLayout/ItemsLayout.module.scss

@@ -0,0 +1,51 @@
+.layoutSelector {
+   position: relative;
+}
+
+.layoutActive {
+   span {
+      opacity: 1;
+      color: inherit;
+   }
+}
+
+.lists {
+   border: 1px solid var(--line-color);
+   margin-top: -1px;
+   position: absolute;
+   z-index: 9999;
+   background: var(--field-bg);
+   width: calc(100% - 2px);
+   border-radius: 0 0 4px 4px;
+   max-height: 200px;
+   overflow: auto;
+   font-size: 0.75rem;
+   right: 0;
+   border-radius: 6px;
+   ul {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+
+      li {
+         padding: 8px 10px;
+         cursor: pointer;
+
+         &.selectedItem {
+            color: var(--field-bg);
+            background: var(--primary-color);
+         }
+
+         &:hover {
+            background: var(--background-color);
+            color: inherit;
+         }
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .layoutSelector {
+      display: none;
+   }
+}

package/src/components/common/ItemsLayout/ItemsLayout.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import Icon from '../Icon/Icon';
+import classes from './ItemsLayout.module.scss';
+
+type ItemsLayoutProps = {
+   onChange: (value: ItemsLayoutProps['value']) => void;
+   type: string;
+   value: 'list' | 'grid';
+};
+
+const ItemsLayout = ({ onChange, type, value = 'list' }: ItemsLayoutProps) => {
+   const [selected, setSelected] = useState<'list' | 'grid'>(value);
+   const options = [
+      { label: 'Grid', value: 'grid', icon: 'columns' },
+      { label: 'List', value: 'list', icon: 'rows' },
+   ];
+   const selectedLabel = options.find((item) => item.value === selected) || options[0];
+
+   const switchLayout = () => {
+      const newValue = selected === 'list' ? 'grid' : 'list';
+      setSelected(newValue);
+      onChange(newValue);
+      localStorage.setItem(`${type}_layout`, newValue);
+   };
+
+   return (
+      <div className={classes.layoutSelector}>
+         <button
+            className={selected ? classes.layoutActive : ''}
+            onClick={() => switchLayout()}
+            data-tooltip-id="appTooltip"
+            data-tooltip-content="Change layout"
+            aria-label="Item Layout"
+            data-tooltip-place="top"
+            data-tooltip-delay-show={500}
+         >
+            {selectedLabel && <Icon type={selectedLabel.icon} size={18} />}
+         </button>
+      </div>
+   );
+};
+
+export default ItemsLayout;

package/src/components/common/LogViewer/LogViewer.module.scss

@@ -0,0 +1,188 @@
+.logViewer {
+   display: flex;
+   flex-direction: column;
+   height: 100%;
+   border: 1px solid var(--line-color);
+   border-radius: 8px;
+   overflow: hidden;
+   .toolbar {
+      display: flex;
+      padding: 12px;
+      border-bottom: 1px solid var(--line-color);
+      gap: 15px;
+      align-items: center;
+      justify-content: space-between;
+      .toolbarRight {
+         display: flex;
+         flex-direction: row;
+         gap: 15px;
+         justify-content: space-between;
+
+         button {
+            color: var(--icon-color);
+            &:hover {
+               color: var(--primary-color);
+            }
+         }
+         .filters {
+            display: flex;
+            gap: 12px;
+            input {
+               accent-color: var(--primary-color);
+            }
+            label {
+               display: flex;
+               align-items: center;
+               gap: 4px;
+               text-transform: capitalize;
+            }
+         }
+
+         .search {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 4px 12px;
+            border: 1px solid var(--line-color);
+            border-radius: 6px;
+            margin-left: auto;
+
+            input {
+               border: none;
+               outline: none;
+               font-size: 0.75rem;
+               background-color: var(--content-background-color);
+            }
+         }
+      }
+   }
+   .logsTable {
+      .logsHeader {
+         display: grid;
+         grid-template-columns: repeat(4, 1fr) 55%;
+         padding: 12px;
+         background: var(--background-color);
+         font-weight: 600;
+         .logsHeaderItemTime {
+            width: 170px;
+         }
+      }
+      .logs {
+         height: calc(100vh - 290px);
+         overflow: auto;
+
+         .log {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr) 55%;
+            padding: 8px 12px;
+            border-bottom: 1px solid var(--line-color);
+            position: relative;
+            .logTime {
+               width: 170px;
+            }
+            .logType {
+               padding: 2px 12px;
+               font-size: 0.7rem;
+               background-color: var(--background-color);
+               border-radius: 20px;
+               text-transform: capitalize;
+               display: inline-block;
+               width: max-content;
+               height: max-content;
+               &.logType--error {
+                  background-color: #ffdada;
+                  color: #c43e3e;
+               }
+               &.logType--warn {
+                  background-color: #fff2d9;
+                  color: #d19628;
+               }
+               &.logType--info {
+                  background-color: #e7edff;
+                  color: #6182e4;
+               }
+            }
+            .logMessage {
+               overflow: auto;
+            }
+            &.log--backupStart {
+               border-top: 1px solid #e4e6ff;
+               margin-top: 30px;
+               padding-top: 20px;
+            }
+         }
+         .backupStartLabel {
+            position: absolute;
+            background: var(--primary-color-light);
+            color: var(--primary-color);
+            font-weight: 600;
+            font-size: 0.7rem;
+            padding: 2px 12px;
+            border-radius: 30px;
+            left: 0;
+            right: 0;
+            top: -12px;
+            margin: 0 auto;
+            width: max-content;
+         }
+      }
+   }
+   .pagination {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 8px;
+      padding: 12px;
+      border-top: 1px solid var(--line-color);
+
+      .paginationButton {
+         padding: 6px 12px;
+         border: 1px solid var(--line-color);
+         border-radius: 6px;
+         background: transparent;
+         cursor: pointer;
+         font-size: 0.875rem;
+         transition: all 0.2s;
+         color: var(--content-text-color-light);
+
+         &:hover:not(:disabled) {
+            background: var(--primary-color-light);
+            color: var(--primary-color);
+            border-color: var(--primary-color);
+         }
+
+         &:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+         }
+
+         &.paginationButtonActive {
+            background: var(--primary-color);
+            color: white;
+            border-color: var(--primary-color);
+         }
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .logViewer {
+      .toolbar {
+         flex-direction: column;
+         align-items: baseline;
+         .toolbarRight {
+            justify-content: space-between;
+            flex-wrap: wrap;
+         }
+      }
+      .logsTable {
+         overflow-x: auto;
+         overflow-y: hidden;
+         width: 100%;
+         .logs,
+         .logsHeader {
+            width: 1100px;
+         }
+      }
+   }
+}

package/src/components/common/LogViewer/LogViewer.tsx

@@ -0,0 +1,161 @@
+import { useState } from 'react';
+import Icon from '../Icon/Icon';
+import classes from './LogViewer.module.scss';
+import { useGetDownloadLogs } from '../../../services/plans';
+import { getLogLevelName } from '../../../utils/helpers';
+import { useGetDownloadAppLogs } from '../../../services/settings';
+import MultiSelect from '../form/MultiSelect/MultiSelect';
+import { LogItem } from '../../../@types/settings';
+
+interface LogViewerProps {
+   type: string;
+   planId?: string;
+   planMethod?: string;
+   sourceType?: string;
+   settingsID?: string;
+   isLoading: boolean;
+   logs: LogItem[];
+}
+
+const logTypes = ['info', 'error', 'warn'];
+const ITEMS_PER_PAGE = 500;
+const PAGINATION_THRESHOLD = 1000;
+
+const LogViewer = ({ type = '', planMethod = 'backup', logs = [], planId, settingsID = '1', isLoading }: LogViewerProps) => {
+   const allTaskTypes = [...new Set(logs.map((log) => log.module))];
+   const [search, setSearch] = useState('');
+   const [filters, setFilters] = useState<string[]>(['info', 'error', 'warn']);
+   const [taskTypes, setTaskTypes] = useState<string[]>(allTaskTypes);
+   const [currentPage, setCurrentPage] = useState(1);
+   const downloadPlanLogsMutation = useGetDownloadLogs();
+   const downloadAppLogsMutation = useGetDownloadAppLogs();
+
+   const theLogs = logs.filter((log) => {
+      const matchesSearch = log.msg?.toLowerCase().includes(search.toLowerCase());
+      const matchesBackupId = log.backupId?.toLowerCase().includes(search.toLowerCase());
+      const logType = getLogLevelName(log.level);
+      const matchesFilter = filters.includes(logType);
+      const matchesTaskType = taskTypes.includes(log.module);
+      return (matchesSearch || matchesBackupId) && matchesFilter && matchesTaskType;
+   });
+
+   const showPagination = theLogs.length > PAGINATION_THRESHOLD;
+   const totalPages = Math.ceil(theLogs.length / ITEMS_PER_PAGE);
+   const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+   const endIndex = startIndex + ITEMS_PER_PAGE;
+   const paginatedLogs = showPagination ? theLogs.slice(startIndex, endIndex) : theLogs;
+
+   const handlePageChange = (page: number) => {
+      setCurrentPage(page);
+   };
+
+   const getPageNumbers = () => {
+      const pages = [];
+      const maxVisiblePages = 5;
+      let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
+      let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+
+      if (endPage - startPage < maxVisiblePages - 1) {
+         startPage = Math.max(1, endPage - maxVisiblePages + 1);
+      }
+
+      for (let i = startPage; i <= endPage; i++) {
+         pages.push(i);
+      }
+      return pages;
+   };
+
+   return (
+      <div className={classes.logViewer}>
+         <div className={classes.toolbar}>
+            <div className={classes.toolbarLeft}>
+               <div className={classes.toolbarSummary}>
+                  {theLogs.length}/{logs.length} log items
+                  {showPagination && ` (Page ${currentPage} of ${totalPages})`}
+               </div>
+            </div>
+            <div className={classes.toolbarRight}>
+               <div className={classes.filters}>
+                  <MultiSelect
+                     title="Log Levels"
+                     fieldValue={filters}
+                     options={logTypes.map((logType) => ({ label: logType, value: logType }))}
+                     onUpdate={(updatedLogTypes) => setFilters(updatedLogTypes)}
+                  />
+               </div>
+               <div className={classes.filters}>
+                  <MultiSelect
+                     title={type === 'plan' ? 'Task Type' : 'Module Type'}
+                     fieldValue={taskTypes}
+                     options={allTaskTypes.map((taskType) => ({ label: taskType || 'General', value: taskType }))}
+                     onUpdate={(updatedTaskTypes) => setTaskTypes(updatedTaskTypes)}
+                  />
+               </div>
+               <div className={classes.search}>
+                  <Icon type="search" size={16} />
+                  <input type="text" placeholder="Search Log Messages..." value={search} onChange={(e) => setSearch(e.target.value)} />
+               </div>
+               <button
+                  onClick={() => (type === 'plan' && planId ? downloadPlanLogsMutation.mutate(planId) : downloadAppLogsMutation.mutate(settingsID))}
+               >
+                  <Icon type="download" size={16} />
+                  <span>Download</span>
+               </button>
+            </div>
+         </div>
+         <div className={classes.logsTable}>
+            <div className={classes.logsHeader}>
+               <div className={classes.logsHeaderItem}>Level</div>
+               <div className={`${classes.logsHeaderItem} ${classes.logsHeaderItemTime}`}>Time</div>
+               <div className={classes.logsHeaderItem}>{type === 'plan' ? 'Task' : 'Module'}</div>
+               <div className={classes.logsHeaderItem}>{type === 'plan' && planMethod !== 'sync' ? 'Backup Id' : 'PID'}</div>
+               <div className={classes.logsHeaderItem}>Message</div>
+            </div>
+            <div className={classes.logs}>
+               {!isLoading &&
+                  paginatedLogs.map((log, index) => {
+                     const logType = getLogLevelName(log.level);
+                     // const isBackupLogStart = type === 'plan' && log.backupId && log.msg.includes('Started');
+                     return (
+                        <div key={index} className={`${classes.log}`}>
+                           <div className={`${classes.logType} ${classes[`logType--${logType.toLowerCase()}`]}`}>
+                              <Icon type={`log-${logType.toLowerCase()}`} size={13} /> {logType}
+                           </div>
+                           <div className={classes.logTime}>{new Date(log.time).toLocaleString()}</div>
+                           <div className={classes.logModule}>{log.module}</div>
+                           <div className={classes.logID}>{type === 'plan' && planMethod !== 'sync' ? log.backupId || 'N/A' : log.pid || 'N/A'}</div>
+                           <div className={classes.logMessage}>{log.msg}</div>
+                        </div>
+                     );
+                  })}
+               {isLoading && (
+                  <div className={classes.loading}>
+                     <Icon type="loading" size={20} />
+                  </div>
+               )}
+            </div>
+         </div>
+         {showPagination && !isLoading && (
+            <div className={classes.pagination}>
+               <button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1} className={classes.paginationButton}>
+                  <Icon type="arrow-left" size={16} />
+               </button>
+               {getPageNumbers().map((page) => (
+                  <button
+                     key={page}
+                     onClick={() => handlePageChange(page)}
+                     className={`${classes.paginationButton} ${currentPage === page ? classes.paginationButtonActive : ''}`}
+                  >
+                     {page}
+                  </button>
+               ))}
+               <button onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages} className={classes.paginationButton}>
+                  <Icon type="arrow-right" size={16} />
+               </button>
+            </div>
+         )}
+      </div>
+   );
+};
+
+export default LogViewer;

package/src/components/common/Logo/Logo.tsx

@@ -0,0 +1,19 @@
+interface LogoProps {
+   size: number;
+   color?: string;
+   faceColor?: string;
+   emotion?: string;
+}
+
+const Logo = ({ size = 60, color = '' }: LogoProps) => {
+   return (
+      <svg enableBackground="new 0 0 120 120" height={size} viewBox="0 0 120 120" width={size} xmlns="http://www.w3.org/2000/svg">
+         <path
+            d="M71,5.08V20.17L109.12,2.61c0,.55.08,1,.08,1.35q0,32.1,0,64.19h0A49.21,49.21,0,1,1,35.53,25.48l34-19.65c.36-.21.74-.41,1.39-.76ZM60,40.87a27.35,27.35,0,1,0,19.3,8,27.32,27.32,0,0,0-19.3-8Z"
+            fill={color || 'currentColor'}
+         />
+      </svg>
+   );
+};
+
+export default Logo;

package/src/components/common/Modal/Modal.module.scss

@@ -0,0 +1,81 @@
+.modal {
+   position: fixed;
+   width: 100%;
+   height: 100vh;
+   top: 0;
+   left: 0;
+   z-index: 99999999;
+   background: var(--modal-shadow-color-light);
+   opacity: 0;
+   overflow: auto;
+   transition: opacity 0.3s ease-out;
+
+   .modalContent {
+      position: absolute;
+      width: 70%;
+      background: var(--content-background-color);
+      color: var(--content-text-color);
+      border-radius: 8px;
+      border: 1px solid var(--content-shadow-color);
+      margin: 0 auto;
+      left: 0;
+      right: 0;
+      top: 20%;
+      padding: 20px;
+      box-sizing: border-box;
+      box-shadow: 0 0 20px var(--modal-shadow-color);
+      word-break: break-word;
+      transform: translateY(-30px);
+      opacity: 0;
+      transition:
+         transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
+         opacity 0.3s ease-out;
+
+      &.active {
+         transform: translateY(0);
+         opacity: 1;
+      }
+
+      h3 {
+         margin-top: 0;
+         color: var(--content-text-color);
+      }
+   }
+
+   .modalClose {
+      position: absolute;
+      right: 0;
+      top: 0;
+      margin: 10px;
+      background: transparent;
+      opacity: 0.5;
+      color: var(--content-text-color);
+      transition: all 0.2s linear;
+      &:hover {
+         opacity: 1;
+         transform: rotate(90deg);
+      }
+   }
+
+   &.active {
+      opacity: 1;
+   }
+
+   &.autoVertical {
+      .modalContent {
+         top: 50%;
+         transform: translateY(-50%);
+         transition: none;
+         &.active {
+            transform: translateY(-50%);
+            opacity: 1;
+         }
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .modal .modalContent {
+      max-width: 90%;
+   }
+}

package/src/components/common/Modal/Modal.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Icon from '../Icon/Icon';
+import classes from './Modal.module.scss';
+import { createPortal } from 'react-dom';
+
+export interface ModalProps {
+   children: React.ReactNode;
+   width?: string;
+   title?: string;
+   classNames?: string;
+   disablePortal?: boolean;
+   disableBackdropClick?: boolean;
+   closeModal: () => void;
+}
+
+const Modal = ({ children, width, closeModal, title, disablePortal = false, classNames = '', disableBackdropClick = false }: ModalProps) => {
+   const [isActive, setIsActive] = useState(false);
+   const [isAutoVertical, setIsAutoVertical] = useState(false);
+   const modalContentRef = useRef<HTMLDivElement>(null);
+   const animationDuration = 300;
+
+   useEffect(() => {
+      const closeModalOnEsc = (event: KeyboardEvent) => {
+         if (event.key === 'Escape') {
+            closeModal();
+         }
+      };
+      window.addEventListener('keydown', closeModalOnEsc, false);
+
+      // Trigger animation after component mounts
+      setTimeout(() => {
+         setIsActive(true);
+      }, 10);
+
+      return () => {
+         window.removeEventListener('keydown', closeModalOnEsc, false);
+      };
+   }, [closeModal]);
+
+   useEffect(() => {
+      const checkModalHeight = () => {
+         if (modalContentRef.current) {
+            const height = modalContentRef.current.offsetHeight;
+            setIsAutoVertical(height > 500);
+         }
+      };
+      checkModalHeight();
+   }, [isActive, children]);
+
+   const handleClose = () => {
+      setIsActive(false);
+      // Wait for animation to complete before actually closing
+      setTimeout(() => {
+         closeModal();
+      }, animationDuration);
+   };
+
+   const closeOnBGClick = (e: React.SyntheticEvent) => {
+      if (disableBackdropClick) return;
+      e.stopPropagation();
+      e.nativeEvent.stopImmediatePropagation();
+      if (e.target === e.currentTarget) {
+         handleClose();
+      }
+   };
+
+   const renderModalContent = () => {
+      return (
+         <div
+            className={`${classes.modal} ${classNames} ${isAutoVertical ? classes.autoVertical : ''} ${isActive ? classes.active : ''}`}
+            onClick={closeOnBGClick}
+            data-testid="modal"
+         >
+            <div className={`${classes.modalContent} ${isActive ? classes.active : ''}`} style={{ width: width }} ref={modalContentRef}>
+               {title && <h3>{title}</h3>}
+               <button className={classes.modalClose} onClick={handleClose}>
+                  <Icon type="close" size={24} />
+               </button>
+               <div className={classes.modalChildren}>{children}</div>
+            </div>
+         </div>
+      );
+   };
+
+   return disablePortal ? renderModalContent() : createPortal(renderModalContent(), document.body);
+};
+
+export default Modal;

package/src/components/common/NotFound/NotFound.module.scss

@@ -0,0 +1,36 @@
+.notFound {
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+   align-items: center;
+   padding: 6rem 1rem;
+   text-align: center;
+   box-sizing: border-box;
+   font-weight: bold;
+   color: var(--content-text-color-light);
+   background-color: var(--content-background-color);
+   border-radius: 6px;
+   margin-top: 100px;
+   box-shadow: 0 0 15px var(--content-shadow-color);
+
+   h1 {
+      font-size: 6rem;
+      margin: 1rem 0;
+      margin-bottom: 0;
+      color: var(--primary-color-light);
+   }
+   h3 {
+      text-transform: capitalize;
+      margin: 0;
+      margin-top: -0.2rem;
+      color: var(--primary-color);
+      font-size: 1.2rem;
+      background: var(--primary-color-lighter);
+      padding: 0 20px;
+      font-weight: 600;
+   }
+
+   p {
+      font-weight: normal;
+   }
+}

package/src/components/common/NotFound/NotFound.tsx

@@ -0,0 +1,22 @@
+import { Link } from 'react-router';
+import classes from './NotFound.module.scss';
+
+interface NotFoundProps {
+   name: string;
+   link: string;
+   linkText?: string;
+}
+
+const NotFound = ({ name = 'page', link = '/', linkText }: NotFoundProps) => {
+   return (
+      <div className={classes.notFound}>
+         <h1>404</h1>
+         <h3>{name} Not Found</h3>
+         <p>
+            The {name} you are looking for does not exist. <Link to={link}>{linkText || `View All ${name}s`}</Link>
+         </p>
+      </div>
+   );
+};
+
+export default NotFound;