From da44e90efe705239ac7419da1874161acb88299a Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 15 Oct 2024 15:23:29 +0700
Subject: <iman> add feature pengajuan tempo

---
 .../pengajuan-tempo/component/PengajuanTempo.jsx   | 60 ++++++++++++++++++++++
 src/lib/pengajuan-tempo/component/Stepper.jsx      | 51 ++++++++++++++++++
 .../component/informasiPerusahaan.tsx              |  0
 src/lib/pengajuan-tempo/stores/useTempoStore.ts    |  0
 4 files changed, 111 insertions(+)
 create mode 100644 src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
 create mode 100644 src/lib/pengajuan-tempo/component/Stepper.jsx
 create mode 100644 src/lib/pengajuan-tempo/component/informasiPerusahaan.tsx
 create mode 100644 src/lib/pengajuan-tempo/stores/useTempoStore.ts

(limited to 'src/lib')

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
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
-- 
cgit v1.2.3