@plutonhq/core-frontend 0.0.1

package/src/components/Settings/GeneralSettings/GeneralSettings.tsx

@@ -0,0 +1,65 @@
+import { useTheme } from '../../../context/ThemeContext';
+import Input from '../../common/form/Input/Input';
+import Tristate from '../../common/form/Tristate/Tristate';
+import classes from './GeneralSettings.module.scss';
+
+interface GeneralSettingsProps {
+   settingsID: number;
+   settings: Record<string, any>;
+   onUpdate: (settings: Record<string, any>) => void;
+}
+
+const GeneralSettings = ({ settings, onUpdate }: GeneralSettingsProps) => {
+   const { setTheme } = useTheme();
+
+   const handleThemeChange = (newThemeValue: 'auto' | 'light' | 'dark') => {
+      setTheme(newThemeValue);
+      onUpdate({ ...settings, theme: newThemeValue });
+   };
+
+   return (
+      <div>
+         <div className={classes.field}>
+            <Input
+               label="App Instance Title"
+               fieldValue={(settings?.title || '') as string}
+               onUpdate={(val) => onUpdate({ ...settings, title: val })}
+               inline={false}
+            />
+         </div>
+         <div className={classes.field}>
+            <Input
+               label="App Instance Description"
+               fieldValue={(settings?.description || '') as string}
+               onUpdate={(val) => onUpdate({ ...settings, description: val })}
+               inline={false}
+            />
+         </div>
+         <div className={classes.field}>
+            <Input
+               label="Admin Email"
+               fieldValue={settings.admin_email || ''}
+               onUpdate={(val) => onUpdate({ ...settings, admin_email: val })}
+               type="email"
+               placeholder="johndoe@mail.com"
+               inline={false}
+            />
+         </div>
+         <div className={classes.field}>
+            <Tristate
+               label="Color Scheme"
+               fieldValue={settings.theme as string}
+               options={[
+                  { label: 'Auto', value: 'auto' },
+                  { label: 'Dark', value: 'dark' },
+                  { label: 'Light', value: 'light' },
+               ]}
+               onUpdate={(val: string) => handleThemeChange(val as 'auto' | 'light' | 'dark')}
+               inline={true}
+            />
+         </div>
+      </div>
+   );
+};
+
+export default GeneralSettings;

package/src/components/Settings/IntegrationSettings/IntegrationSettings.module.scss

@@ -0,0 +1,38 @@
+.integrations {
+   width: 100%;
+   .tabs {
+      display: flex;
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+      gap: 10px;
+      margin-bottom: 20px;
+      li {
+         padding: 5px 15px;
+         border-radius: 6px;
+         font-size: 0.75rem;
+         font-weight: 500;
+         cursor: pointer;
+         &.tabActive {
+            color: var(--primary-color);
+            background: var(--background-color);
+         }
+      }
+   }
+   .field {
+      width: 420px;
+      margin-bottom: 20px;
+      position: relative;
+   }
+   .validateBtn {
+      color: var(--primary-color);
+      background: var(--background-color);
+      padding: 10px;
+      border-radius: 6px;
+      width: 100%;
+      transition: all 0.12s linear;
+      &:hover {
+         filter: contrast(0.95);
+      }
+   }
+}

package/src/components/Settings/IntegrationSettings/IntegrationSettings.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import classes from './IntegrationSettings.module.scss';
+import Input from '../../common/form/Input/Input';
+import ActionModal from '../../common/ActionModal/ActionModal';
+import { useValidateIntegration } from '../../../services/settings';
+import SMTPSettings from './SMTPSettings';
+
+interface IntegrationSettingsProps {
+   settingsID: number;
+   settings: Record<string, any>;
+   onUpdate: (settings: IntegrationSettingsProps['settings']) => void;
+}
+
+const IntegrationSettings = ({ settingsID, settings, onUpdate }: IntegrationSettingsProps) => {
+   const [testEmail, setTestEmail] = useState('');
+   const [showEmailTestModal, setShowEmailTestModal] = useState<'' | 'smtp'>('');
+   const integrationSettings = settings?.integration || {};
+   const { smtp } = integrationSettings || {};
+
+   const validationMutation = useValidateIntegration();
+
+   console.log('smtp :', smtp);
+
+   return (
+      <div className={classes.integrations}>
+         <div>
+            <SMTPSettings settings={smtp} onUpdate={onUpdate} showTestModal={setShowEmailTestModal} />
+         </div>
+         {showEmailTestModal && (
+            <ActionModal
+               title={`Test SMTP Integration`}
+               message={
+                  <>
+                     <Input
+                        label="Send Test Email to this email"
+                        full={true}
+                        fieldValue={testEmail}
+                        onUpdate={(val) => setTestEmail(val)}
+                        type="email"
+                        placeholder="test@test.com"
+                     />
+                  </>
+               }
+               errorMessage={validationMutation.error?.message}
+               successMessage={validationMutation.isSuccess ? 'Test email sent. Integration validated successfully.' : ''}
+               closeModal={() => setShowEmailTestModal('')}
+               width="400px"
+               secondaryAction={{ title: 'Close', action: () => setShowEmailTestModal('') }}
+               primaryAction={{
+                  title: `Send Test Email`,
+                  type: 'default',
+                  icon: 'email',
+                  isPending: validationMutation.isPending,
+                  action: () => validationMutation.mutate({ settingsID, type: 'smtp', settings: settings, test: { email: testEmail } }),
+               }}
+            />
+         )}
+      </div>
+   );
+};
+
+export default IntegrationSettings;

package/src/components/Settings/IntegrationSettings/SMTPSettings.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react';
+import Input from '../../common/form/Input/Input';
+import Icon from '../../common/Icon/Icon';
+import { isValidEmail } from '../../../utils/helpers';
+import { SmtpSettingsType } from '../../../@types/settings';
+import classes from './IntegrationSettings.module.scss';
+
+interface SMTPSettingsProps {
+   settings: SmtpSettingsType;
+   onUpdate: (settings: SmtpSettingsType) => void;
+   showTestModal: (type: 'smtp') => void;
+}
+
+const SMTPSettings = ({ settings, onUpdate, showTestModal }: SMTPSettingsProps) => {
+   const [errorFields, setErrorFields] = useState<{ server: string; port: string; senderEmail: string }>({
+      server: '',
+      port: '',
+      senderEmail: '',
+   });
+
+   const validateSettings = (e: React.FormEvent) => {
+      e.preventDefault();
+
+      const newErrors = { server: '', port: '', senderEmail: '' };
+
+      if (!settings?.server) {
+         newErrors.server = 'Server is required';
+      }
+      if (!settings?.port) {
+         newErrors.port = 'Port is required';
+      }
+      if (!settings?.senderEmail) {
+         newErrors.senderEmail = 'Sender Email is required';
+      } else if (!isValidEmail(settings.senderEmail)) {
+         newErrors.senderEmail = 'Invalid email';
+      }
+
+      setErrorFields(newErrors);
+      const hasErrors = Object.values(newErrors).some((error) => error !== '');
+      if (!hasErrors) {
+         showTestModal('smtp');
+      }
+   };
+
+   return (
+      <div>
+         <div className={classes.field}>
+            <Input
+               label="SMTP Server*"
+               fieldValue={(settings?.server || '') as string}
+               onUpdate={(val) => onUpdate({ ...settings, server: val })}
+               error={errorFields?.server}
+            />
+         </div>
+         <div className={classes.field}>
+            <Input
+               label="SMTP PORT*"
+               fieldValue={(settings?.port || '') as string}
+               onUpdate={(val) => onUpdate({ ...settings, port: parseInt(val, 10) })}
+               error={errorFields?.port}
+            />
+         </div>
+         <div className={classes.field}>
+            <Input
+               label="Sender Email*"
+               type="email"
+               fieldValue={(settings?.senderEmail || '') as string}
+               onUpdate={(val) => onUpdate({ ...settings, senderEmail: val })}
+               error={errorFields?.senderEmail}
+            />
+         </div>
+         <div className={classes.field}>
+            <Input
+               label="SMTP Username"
+               fieldValue={(settings?.username || '') as string}
+               onUpdate={(val) => onUpdate({ ...settings, username: val })}
+            />
+         </div>
+         <div className={classes.field}>
+            <Input
+               label="SMTP Password"
+               fieldValue={(settings?.password || '') as string}
+               type="password"
+               onUpdate={(val) => onUpdate({ ...settings, password: val })}
+            />
+         </div>
+
+         <div className={classes.field}>
+            <button className={classes.validateBtn} onClick={validateSettings} type="button">
+               <Icon type="check" size={10} /> {settings?.connected ? 'Re-validate SMTP' : 'Validate SMTP'}
+            </button>
+         </div>
+      </div>
+   );
+};
+
+export default SMTPSettings;

package/src/components/Skeleton/SkeletonItems.module.scss

@@ -0,0 +1,162 @@
+.skeletonItems {
+   display: flex;
+   flex-direction: column;
+
+   .skeletonItem {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 10px;
+      margin-bottom: 20px;
+      min-height: 41px;
+      gap: 10px;
+      border-radius: 7px;
+      overflow: hidden;
+      background-color: var(--content-background-color);
+      color: var(--content-text-color-light);
+      box-shadow: 0 0 15px var(--content-shadow-color);
+      // transition: all 0.2s linear;
+      .leftContent {
+         flex-basis: 60%;
+         display: flex;
+         flex-direction: row;
+         align-items: center;
+         .status {
+            width: 28px;
+            height: 28px;
+            margin-right: 10px;
+            margin-left: 5px;
+            border-radius: 6px;
+            border-radius: 50%;
+            background-color: var(--background-color);
+         }
+         .content {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            .title {
+               width: 150px;
+               height: 13px;
+               background-color: var(--content-shadow-color);
+               margin-bottom: 8px;
+               border-radius: 6px;
+            }
+            .sources {
+               width: 110px;
+               height: 11px;
+               background-color: var(--background-color);
+               border-radius: 6px;
+            }
+         }
+      }
+      .rightContent {
+         display: flex;
+         flex-direction: row;
+         align-items: center;
+         flex-basis: 40%;
+         justify-content: right;
+         gap: 20px;
+         padding-right: 30px;
+         & > div {
+            width: 110px;
+            height: 14px;
+            border-radius: 6px;
+            background-color: var(--background-color);
+         }
+      }
+
+      &::before {
+         content: '';
+         position: absolute;
+         top: 0;
+         left: -100%; /* Start off-screen to the left */
+         width: 100%; /* Adjust width for desired shine length */
+         height: 100%;
+         background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+         animation: shimmer 1.5s infinite linear; /* Apply the animation */
+      }
+   }
+   &.grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 15px;
+      .skeletonItem {
+         width: 100%;
+         flex-direction: column;
+         margin: 0;
+         align-items: flex-start;
+         box-sizing: border-box;
+         padding: 0;
+         gap: 0;
+         .leftContent {
+            width: 100%;
+            padding: 22px 15px;
+            box-sizing: border-box;
+            .status {
+               position: absolute;
+               right: 0;
+               margin-top: -15px;
+               transform: scale(0.8);
+            }
+            .content {
+               .sources {
+                  width: 190px;
+                  margin-top: 5px;
+               }
+            }
+         }
+         .rightContent {
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            row-gap: 0;
+            column-gap: 12px;
+            padding-top: 12px;
+            margin-top: 5px;
+            font-size: 0.9em;
+            width: 100%;
+            box-sizing: border-box;
+            border-top: 1px solid var(--line-color);
+            background-color: var(--primary-color-lighter);
+            padding-right: 0;
+            & > div {
+               width: 60px;
+            }
+            .history {
+               width: 100%;
+               margin-top: 10px;
+               border-top: 1px solid var(--line-color);
+               background-color: var(--content-background-color);
+               padding: 12px;
+               border-radius: 0 0 6px 6px;
+            }
+         }
+      }
+   }
+}
+
+@keyframes shimmer {
+   0% {
+      left: -100%; /* Start position */
+   }
+   100% {
+      left: 100%; /* End position, moving across the container */
+   }
+}
+
+@media only screen and (max-width: 1024px) {
+   .skeletonItems.grid {
+      grid-template-columns: repeat(2, 1fr);
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .skeletonItems.grid {
+      grid-template-columns: repeat(1, 1fr);
+   }
+   .skeletonItem {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0;
+   }
+}

package/src/components/Skeleton/SkeletonItems.tsx

@@ -0,0 +1,33 @@
+import classes from './SkeletonItems.module.scss';
+
+interface SkeletonItemsProps {
+   type?: 'plan' | 'storage' | 'source';
+   layout?: 'list' | 'grid';
+   count?: number;
+}
+
+const SkeletonItems = ({ type = 'plan', layout = 'list', count = 6 }: SkeletonItemsProps) => {
+   return (
+      <div className={`${classes.skeletonItems} ${layout === 'grid' ? classes.grid : classes.list}`}>
+         {Array.from({ length: count ? (layout === 'list' ? 3 : 6) : 6 }).map((_, index) => (
+            <div key={index} className={classes.skeletonItem}>
+               <div className={classes.leftContent}>
+                  <div className={classes.status} />
+                  <div className={classes.content}>
+                     <div className={classes.title} />
+                     <div className={classes.sources} />
+                  </div>
+               </div>
+               <div className={classes.rightContent}>
+                  <div />
+                  <div />
+                  {type === 'plan' && <div />}
+                  {type === 'plan' && <div className={classes.history} />}
+               </div>
+            </div>
+         ))}
+      </div>
+   );
+};
+
+export default SkeletonItems;

package/src/components/Storage/AddStorage/AddStorage.module.scss

@@ -0,0 +1,168 @@
+.addStorage {
+   position: relative;
+
+   & > div {
+      top: 10%;
+   }
+}
+
+.loader {
+   position: absolute;
+   z-index: 9;
+   width: 100%;
+   height: 100%;
+   left: 0;
+   top: 0;
+   background-color: var(--content-background-color);
+   opacity: 0.7;
+   cursor: default;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+}
+
+.field {
+   margin-bottom: 20px;
+   width: 100%;
+   position: relative;
+   .fieldErrorLabel {
+      position: absolute;
+      right: 10px;
+      top: 15px;
+      background-color: var(--error-bg-active);
+      color: var(--error-active-text);
+      padding: 1px 12px;
+      border-radius: 20px;
+      font-size: 0.75rem;
+      letter-spacing: 0.2px;
+      z-index: 2;
+   }
+}
+
+.label {
+   font-weight: 600;
+   display: block;
+   margin-bottom: 8px;
+   font-size: 0.75rem;
+}
+
+.input {
+   width: 100%;
+   border: 1px solid var(--field-line-color);
+   background-color: var(--content-background-color);
+   padding: 12px;
+   font-size: 0.75rem;
+   border-radius: 6px;
+   box-sizing: border-box;
+   &:focus {
+      outline: none;
+      border: 1px solid var(--line-active-color);
+   }
+   &.inputHasError {
+      border-color: var(--error-bg-color-active);
+   }
+   &:disabled {
+      background-color: var(--light-grey);
+      cursor: not-allowed;
+   }
+}
+
+.storageType {
+   width: 100%;
+   background-color: var(--light-grey);
+   border: 1px solid var(--line-color);
+   border-radius: 6px;
+   padding: 8px 12px;
+   cursor: not-allowed;
+   color: var(--content-text-color);
+   box-sizing: border-box;
+   img {
+      max-height: 18px;
+      width: auto;
+      margin-right: 5px;
+      vertical-align: middle;
+   }
+}
+
+.createButton {
+   width: 100%;
+   background: var(--primary-color);
+   padding: 12px;
+   font-size: 0.75rem;
+   border-radius: 6px;
+   color: var(--primary-text-color);
+}
+
+.advancedOptions {
+   padding: 20px;
+   border: 1px solid var(--line-color);
+   border-top: 0;
+   border-radius: 0 0 6px 6px;
+   input[class^='_input'] {
+      width: 100%;
+   }
+}
+.advancedButton {
+   display: flex;
+   width: 100%;
+   cursor: pointer;
+   justify-content: space-between;
+   font-weight: 500;
+   position: relative;
+   padding: 10px;
+   border: 1px solid var(--line-color);
+   border-radius: 6px 6px;
+   box-sizing: border-box;
+   user-select: none;
+
+   &:hover {
+      color: var(--primary-color);
+   }
+   &.advancedButtonActive {
+      border-radius: 6px 6px 0 0;
+   }
+}
+
+.authSettings {
+   margin-bottom: 20px;
+}
+
+.oauthDoc {
+   background-color: var(--background-color);
+   border: 1px solid var(--line-color);
+   border-radius: 6px;
+   box-sizing: border-box;
+   padding: 12px;
+   word-break: break-all;
+   h4 {
+      font-weight: 600;
+      margin: 0;
+      position: relative;
+      user-select: none;
+      cursor: pointer;
+      button {
+         position: absolute;
+         right: 0px;
+         color: var(--icon-color);
+      }
+   }
+   code {
+      background-color: rgba(0, 0, 0, 0.1);
+      color: var(--content-text-color);
+      padding: 2px 6px;
+      border-radius: 6px;
+   }
+   .codeBlock {
+      background-color: #333;
+      color: #ccc;
+      padding: 10px;
+      width: 100%;
+      display: block;
+      border-radius: 6px;
+      box-sizing: border-box;
+      margin: 10px 0;
+      strong {
+         color: var(--rt-color-success);
+      }
+   }
+}