YoBulk Cloud deployment

.env

@@ -1,5 +1,16 @@
 MONGODB_URI="mongodb://localhost:27017/yobulk"
-DATABASE_NAME="yobulk"
 #MONGODB_URI="mongodb://host.docker.internal:27017/yobulk"
-OPENAI_SECRET_KEY="your key"
+DATABASE_NAME="yobulk"
+
+OPENAI_SECRET_KEY='your-api-key'
+OPEN_API_LIMIT=25
+MEMORY_LIMIT = 25600
+
 BACKEND_SERVER_HOST="http://localhost:5050"
+NEXT_PUBLIC_SERVER_HOST='http://localhost:5050'
+
+AUTH0_SECRET=''
+AUTH0_BASE_URL=http://localhost:5050
+AUTH0_ISSUER_BASE_URL=''
+AUTH0_CLIENT_ID=''
+AUTH0_CLIENT_SECRET=''

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
-.next/
+.next/
+.env.local

components/authguard/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useUser } from '@auth0/nextjs-auth0/client';
+import { useRouter } from 'next/router';
+
+const AuthGuard = ({ children }) => {
+  const router = useRouter();
+
+  const { user, error, isLoading } = useUser();
+
+  if (isLoading) return <div></div>;
+
+  if (error) return <div>{error.message}</div>;
+
+  if (!user) {
+    router.push('/api/auth/login');
+    return <></>;
+  }
+  return <>{children}</>;
+};
+
+export default AuthGuard;

components/configuration/TestConfiguration/index.jsx

@@ -6,7 +6,7 @@ const TestConfiguration = ({ configId }) => {
       <YoButton
         btnText="Import CSV"
         importerId={configId}
-        yoHostUrl={'http://localhost:5050'}
+        yoHostUrl={process.env.NEXT_PUBLIC_SERVER_HOST}
       />
     </div>
   );

components/dataviewer/validatedcell/index.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import InputBox from './inputbox';
 
 const ValidatedCell = () => {
-  return <div>ValidatedCell</div>;
+  return <InputBox val="peter" />;
 };
 
 export default ValidatedCell;

components/dataviewer/validatedcell/inputbox.jsx

@@ -0,0 +1,28 @@
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { useState } from 'react';
+
+const InputBox = ({ val }) => {
+  const [value, setValue] = useState(val);
+  const onChange = (event) => {
+    setValue(event.target.value);
+  };
+  return (
+    <div class="relative text-gray-600 focus-within:text-gray-400">
+      <input
+        value={value}
+        onChange={onChange}
+        className="border text-white bg-gray-900 rounded-md py-2 text-sm pr-10 focus:outline-none focus:bg-white focus:text-gray-900"
+      />
+      <span class="relative inset-y-0 flex  items-center pl-2">
+        <button
+          type="submit"
+          class="p-1 focus:outline-none focus:shadow-outline"
+        >
+          <ExclamationTriangleIcon className="w-8 h-8 text-red-300" />
+        </button>
+      </span>
+    </div>
+  );
+};
+
+export default InputBox;

components/login/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import Image from 'next/image';
+import Logo from '../../public/yobulk_logo.png';
+import { BsGithub } from 'react-icons/bs';
+
+const Login = () => {
+  const router = useRouter();
+  const { data: session } = useSession();
+
+  if (session) {
+    router.push('/');
+  }
+
+  return (
+    <>
+      <section className="h-screen w-full flex justify-center items-center bg-[#FAFAFA]">
+        <div className='shadow-xl h-[500px] w-[500px]'>
+          <div className="flex flex-col justify-center items-center m-10">
+            <div className="h-1/2">
+              <Image src={Logo} alt="" className="cursor-pointer" />
+            </div>
+            <div className='mt-40'>
+              <button className='w-[400px] h-[50px] rounded-lg px-10 py-4 flex items-center justify-center bg-black text-white font-semibold hover:bg-gray-900'>
+                <BsGithub /> <span className='px-4'>Sign in with Github</span>
+              </button>
+            </div>
+          </div>
+        </div>
+
+      </section>
+    </>
+  );
+};
+
+export default Login;

components/onboarding/onboarding.js

@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from 'react';
+import Select from 'react-tailwindcss-select';
+
+const Onboarding = ({ children }) => {
+  const [isOnboarded, setIsOnboarded] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [company, setCompany] = useState();
+  const [role, setRole] = useState();
+  const [reason, setReason] = useState();
+  const [error, setError] = useState();
+
+  useEffect(() => {
+    fetch('/api/onboarding')
+      .then((res) => res.json())
+      .then((data) => {
+        setLoading(false);
+        setIsOnboarded(data?.onboarded);
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+  }, []);
+
+  const onboardUser = () => {
+    if (!company || !role || !reason) {
+      setError('Please select all the fields');
+      return;
+    }
+    fetch('/api/onboarding', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        company: company,
+        role: role.value,
+        reason: reason.value,
+      }),
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.success) {
+          setIsOnboarded(true);
+        } else {
+          setError('Sorry, Some unexpected error occurred. Please try again!');
+        }
+      });
+  };
+
+  return (
+    <>
+      {loading ? (
+        <div className="w-screen h-screen flex justify-center items-center">
+          Please wait while we take you to yobulk...
+        </div>
+      ) : (
+        <>
+          {isOnboarded ? (
+            children
+          ) : (
+            <div className="w-screen h-screen flex justify-center items-center">
+              <form className="w-[50vw] h-[50vh] flex flex-col justify-center items-center gap-10">
+                <h1 className="text-xl text-gray-700 font-bold">ONBOARDING</h1>
+                <div>
+                  <div className="text-base text-gray-700 my-2">
+                    Which company do you work for?
+                  </div>
+                  <input
+                    className="h-10 w-[260px] border rounded border-gray-400 active:outline-none focus:outline-none px-2 text-sm"
+                    value={company}
+                    onChange={(e) => setCompany(e.target.value)}
+                  />
+                </div>
+                <div class="inline-block relative w-64">
+                  <div className="text-base text-gray-700 my-2">
+                    Your role at company
+                  </div>
+                  <Select
+                    value={role}
+                    onChange={(e) => setRole(e)}
+                    options={[
+                      { value: 'Developer', label: 'Developer' },
+                      { value: 'Sales', label: 'Sales' },
+                      { value: 'Marketing', label: 'Marketing' },
+                      {
+                        value: 'Product_Management',
+                        label: 'Product Management',
+                      },
+                      { value: 'Director_VP', label: 'Director / VP' },
+                      { value: 'Founder_CXX', label: 'Founder / CXX' },
+                    ]}
+                  />
+                </div>
+                <div class="inline-block relative w-64">
+                  <div className="text-base text-gray-700 my-2">
+                    Reason for using YoBulk
+                  </div>
+                  <Select
+                    value={reason}
+                    onChange={(e) => setReason(e)}
+                    options={[
+                      {
+                        value:
+                          'I_am_looking_for_basic_CSV_importer_functionality',
+                        label:
+                          'I am looking for basic CSV importer functionality.',
+                      },
+                      {
+                        value: 'I_want_to_explore_YoBulk_AI_features',
+                        label: 'I want to explore YoBulk AI features.',
+                      },
+                      {
+                        value:
+                          'I_want_to_upload_large_CSV_files_and_get_it_cleaned',
+                        label:
+                          'I want to upload large CSV files and get it cleaned.',
+                      },
+                      {
+                        value: 'I_am_looking_for_an_open_source_CSV_importer',
+                        label: 'I am looking for an open source CSV importer.',
+                      },
+                      {
+                        value:
+                          'I_want_to_embed_a_CSV_importer_button_in_my_SaaS/WebApp',
+                        label:
+                          'I want to embed a CSV importer button in my SaaS/WebApp.',
+                      },
+                    ]}
+                  />
+                </div>
+                <div className="text-sm text-red-500 my-2">{error}</div>
+                <button
+                  type="button"
+                  className="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-3 px-4 border border-blue-500 hover:border-transparent rounded-full text-sm mr-2"
+                  onClick={onboardUser}
+                >
+                  Continue
+                </button>
+              </form>
+            </div>
+          )}
+        </>
+      )}
+    </>
+  );
+};
+
+export default Onboarding;

components/saasloadmapper/index.js

@@ -74,6 +74,7 @@ const SassLoadMapper = () => {
   const [loading, setLoading] = useState(false);
   const [progress, setProgress] = useState(0);
   const [duplicate, setDuplicate] = useState(false);
+  const [memoryLimitExceeded, setMemoryLimitExceeded] = useState(false);
 
   useEffect(() => {
     selectedTab === 0
@@ -128,7 +129,27 @@ const SassLoadMapper = () => {
       .catch((err) => console.log(err));
   };
 
-  const saveTemplate = () => {
+  const memoryLimitHandler = async (fileSize) => {
+    console.log(fileSize, 'LLLLLL')
+    const resp = await fetch('/api/usage', {
+      method: 'PUT',
+      body: JSON.stringify({ fileSize: fileSize }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    if (resp.status !== 200) {
+      return false;
+    }
+    return true;
+  };
+
+  const saveTemplate = async () => {
+    let allow = await memoryLimitHandler(state.curFile.size);
+    if (!allow) {
+      setMemoryLimitExceeded(true);
+      return;
+    }
     let labels = state.curSaasLoadMapperTemplate
       .filter((el) => el.is_imported)
       .map((el) => el.label);
@@ -343,6 +364,14 @@ const SassLoadMapper = () => {
                 </Tab.Panel>
               </Tab.Panels>
             </Tab.Group>
+            {memoryLimitExceeded && (
+              <div className='flex flex-col justify-center items-center'>
+                <div className="font-semibold text-red-500 text-lg">
+                  Memory Limit Exceeded
+                </div>
+                <p className="text-center text-red-500 text-sm">You do not have enough memory quota left to upload this file. Please upload a smaller file.</p>
+              </div>
+            )}
           </div>
           {/*  <div className="gap-1">
         <span className="break-all">{JSON.stringify(state)}</span>