<iman> add feature pengajuan tempo

6 files changed, 145 insertions, 0 deletions

diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 4688b15b..b46d25b5 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -215,6 +215,11 @@ const CustomerGuide = () => (
           Tracking Order
         </InternalItemLink>
       </li>
+      <li>
+        <InternalItemLink href='/pengajuan-tempo'>
+          Pengajuan Tempo
+        </InternalItemLink>
+      </li>
     </ul>
   </div>
 );
diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
new file mode 100644
index 00000000..d7b45fda
--- /dev/null
+++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import Stepper from './Stepper';
+
+const PengajuanTempo = () => {
+  const [currentStep, setCurrentStep] = React.useState(0);
+  const NUMBER_OF_STEPS = 6;
+  const stepDivs = [
+    <div>Informasi Perusahaan</div>,
+    <div>Kontak Person</div>,
+    <div>Pengiriman</div>,
+    <div>Referensi</div>,
+    <div>Dokumen</div>,
+    <div>Konfirmasi</div>,
+  ];
+
+  const goToNextStep = () =>
+    setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev + 1));
+
+  const goToPreviousStep = () =>
+    setCurrentStep((prev) => (prev <= 0 ? prev : prev - 1));
+
+  return (
+    <>
+      <div className='container flex flex-col items-center '>
+        <h1 className='text-h-sm md:text-title-sm font-semibold text-center mb-6'>
+          Form Pengajuan Tempo
+        </h1>
+        <p className='text-center mb-4'>
+          Lorem ipsum dolor sit amet consectetur. Commodo suspendisse at enim
+          magnis ut quisque rhoncus. Felis volutpat fringilla sollicitudin
+          ultricies. Enim non eget in lorem netus. Nisl pharetra accumsan diam
+          suspendisse.
+        </p>
+      </div>
+      <div className='h-[2px] w-full mb-20 bg-gray_r-3' />
+      <div className='container mt-10 flex flex-col items-center '>
+        <Stepper currentStep={currentStep} numberOfSteps={NUMBER_OF_STEPS} />
+        <div>{stepDivs[currentStep]}</div>
+        <section className='flex gap-10 mt-10'>
+          <button
+            onClick={goToPreviousStep}
+            className='bg-blue-600 text-white p-2 rounded-md'
+            disabled={currentStep === 0} // Disable if on the first step
+          >
+            Previous step
+          </button>
+          <button
+            onClick={goToNextStep}
+            className='bg-blue-600 text-white p-2 rounded-md'
+            disabled={currentStep === NUMBER_OF_STEPS - 1} // Disable if on the last step
+          >
+            Next step
+          </button>
+        </section>
+      </div>
+    </>
+  );
+};
+
+export default PengajuanTempo;
diff --git a/src/lib/pengajuan-tempo/component/Stepper.jsx b/src/lib/pengajuan-tempo/component/Stepper.jsx
new file mode 100644
index 00000000..248eeffd
--- /dev/null
+++ b/src/lib/pengajuan-tempo/component/Stepper.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+const Stepper = ({ currentStep, numberOfSteps }) => {
+  const stepLabels = [
+    'Informasi Perusahaan',
+    'Kontak Person',
+    'Pengiriman',
+    'Referensi',
+    'Dokumen',
+    'Konfirmasi',
+  ];
+  console.log('currentStep', currentStep);
+  const activeColor = (index) =>
+    currentStep >= index ? 'bg-red-500' : 'bg-gray-300';
+  const activeColorBullet = (index) =>
+    currentStep >= index ? 'bg-red-500 ' : 'bg-white border-gray-300 border';
+  const isFinalStep = (index) => index === numberOfSteps - 1;
+  const isFirstStep = (index) => index === 0;
+  return (
+    <div className='flex items-center'>
+      {Array.from({ length: numberOfSteps }).map((_, index) => (
+        <React.Fragment key={index}>
+          {isFirstStep(index) ? null : (
+            <div className={`w-48 h-[0.8px] ${activeColor(index)}`}></div>
+          )}
+          <div
+            className={`w-6 h-6 ${
+              currentStep == index
+                ? 'border-red-500 border'
+                : `${activeColorBullet(index)} `
+            }  rounded-full flex justify-center items-center`}
+          >
+            <div className='relative text-xs'>
+              <div className='absolute z-10 -top-14  w-48 h-full  -left-24'>
+                <div
+                  className={`relative w-full max-w-md p-2 text-center ${
+                    currentStep == index ? 'text-red-500' : ''
+                  }  text-nowrap`}
+                >
+                  {stepLabels[index]}
+                </div>
+              </div>
+            </div>
+          </div>
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
+
+export default Stepper;
diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.tsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.tsx
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.tsx
diff --git a/src/lib/pengajuan-tempo/stores/useTempoStore.ts b/src/lib/pengajuan-tempo/stores/useTempoStore.ts
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/src/lib/pengajuan-tempo/stores/useTempoStore.ts
diff --git a/src/pages/pengajuan-tempo.jsx b/src/pages/pengajuan-tempo.jsx
new file mode 100644
index 00000000..f27fb907
--- /dev/null
+++ b/src/pages/pengajuan-tempo.jsx
@@ -0,0 +1,29 @@
+import Seo from '@/core/components/Seo';
+import dynamic from 'next/dynamic';
+import SimpleFooter from '@/core/components/elements/Footer/SimpleFooter';
+import BasicLayout from '@/core/components/layouts/BasicLayout';
+import DesktopView from '@/core/components/views/DesktopView';
+import MobileView from '@/core/components/views/MobileView';
+const PagePengajuanTempo = dynamic(() =>
+  import('@/lib/pengajuan-tempo/component/PengajuanTempo')
+);
+
+export default function TrackingOrder() {
+  return (
+    <>
+      <Seo title='Pengaajuan Tempo - Indoteknik.com' />
+
+      <DesktopView>
+        <BasicLayout>
+          <PagePengajuanTempo />
+        </BasicLayout>
+      </DesktopView>
+
+      <MobileView>
+        <BasicLayout>
+          <PagePengajuanTempo />
+        </BasicLayout>
+      </MobileView>
+    </>
+  );
+}