From 59f2d458548e8768443aeb73aefd16461db895a3 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Tue, 9 Sep 2025 01:25:50 +0700
Subject: [PATCH] update add vendor

---
 .../apps/vendor/list/AddVendorDrawer.tsx      | 99 +++++++++++++++++++
 1 file changed, 99 insertions(+)

diff --git a/src/views/apps/vendor/list/AddVendorDrawer.tsx b/src/views/apps/vendor/list/AddVendorDrawer.tsx
index 5980159..42a1c3d 100644
--- a/src/views/apps/vendor/list/AddVendorDrawer.tsx
+++ b/src/views/apps/vendor/list/AddVendorDrawer.tsx
@@ -57,6 +57,7 @@ const AddVendorDrawer = (props: Props) => {
       nomorRekening: ''
     }
   ])
+  const [showPemetaanAkun, setShowPemetaanAkun] = useState(false)
 
   // Hooks
   const {
@@ -137,6 +138,7 @@ const AddVendorDrawer = (props: Props) => {
       }
     ])
     setShowMore(false)
+    setShowPemetaanAkun(false)
   }
 
   const handleReset = () => {
@@ -152,6 +154,7 @@ const AddVendorDrawer = (props: Props) => {
       }
     ])
     setShowMore(false)
+    setShowPemetaanAkun(false)
   }
 
   return (
@@ -531,6 +534,102 @@ const AddVendorDrawer = (props: Props) => {
                     </Typography>
                   </div>
 
+                  <div className='flex items-center gap-3 mt-2' onClick={() => setShowPemetaanAkun(!showPemetaanAkun)}>
+                    <i className={showPemetaanAkun ? 'tabler-minus text-blue-500' : 'tabler-plus text-blue-500'} />
+                    <Typography variant='body1' color='primary' className='cursor-pointer'>
+                      {showPemetaanAkun ? 'Sembunyikan pemetaan akun' : 'Tampilkan pemetaan akun'}
+                    </Typography>
+                  </div>
+
+                  {/* Konten Pemetaan Akun */}
+                  {showPemetaanAkun && (
+                    <div className='mt-6 p-4 border border-gray-200 rounded-lg'>
+                      {/* Akun Hutang */}
+                      <Grid container spacing={6} className='mb-4'>
+                        <Grid size={6}>
+                          <Typography variant='body2' className='mb-2 font-medium'>
+                            Akun Hutang
+                          </Typography>
+                          <CustomTextField select fullWidth defaultValue='2-20100 Hutang Usaha'>
+                            <MenuItem value='2-20100 Hutang Usaha'>2-20100 Hutang Usaha</MenuItem>
+                            <MenuItem value='2-20200 Hutang Bank'>2-20200 Hutang Bank</MenuItem>
+                            <MenuItem value='2-20300 Hutang Lainnya'>2-20300 Hutang Lainnya</MenuItem>
+                          </CustomTextField>
+                        </Grid>
+                        <Grid size={6}>
+                          <Typography variant='body2' className='mb-2 font-medium'>
+                            Maksimal Hutang
+                            <i className='tabler-help-circle text-gray-400 ml-1' />
+                          </Typography>
+                          <CustomTextField fullWidth type='number' defaultValue='0' placeholder='0' />
+                        </Grid>
+                      </Grid>
+
+                      {/* Akun Piutang */}
+                      <Grid container spacing={6} className='mb-4'>
+                        <Grid size={6}>
+                          <Typography variant='body2' className='mb-2 font-medium'>
+                            Akun Piutang
+                          </Typography>
+                          <CustomTextField select fullWidth defaultValue='1-10100 Piutang Usaha'>
+                            <MenuItem value='1-10100 Piutang Usaha'>1-10100 Piutang Usaha</MenuItem>
+                            <MenuItem value='1-10200 Piutang Karyawan'>1-10200 Piutang Karyawan</MenuItem>
+                            <MenuItem value='1-10300 Piutang Lainnya'>1-10300 Piutang Lainnya</MenuItem>
+                          </CustomTextField>
+                        </Grid>
+                        <Grid size={6}>
+                          <Typography variant='body2' className='mb-2 font-medium'>
+                            Maksimal Piutang
+                            <i className='tabler-help-circle text-gray-400 ml-1' />
+                          </Typography>
+                          <CustomTextField fullWidth type='number' defaultValue='0' placeholder='0' />
+                        </Grid>
+                      </Grid>
+
+                      {/* Kena Pajak */}
+                      <div className='mb-4'>
+                        <Typography variant='body2' className='mb-3 font-medium'>
+                          Kena pajak ?
+                        </Typography>
+                        <div className='flex items-center'>
+                          <input
+                            type='checkbox'
+                            className='toggle-switch'
+                            style={{
+                              appearance: 'none',
+                              width: '60px',
+                              height: '30px',
+                              backgroundColor: '#3b82f6',
+                              borderRadius: '15px',
+                              position: 'relative',
+                              cursor: 'pointer',
+                              outline: 'none'
+                            }}
+                          />
+                          <style>
+                            {`
+                              .toggle-switch::before {
+                                content: '';
+                                position: absolute;
+                                top: 3px;
+                                left: 3px;
+                                width: 24px;
+                                height: 24px;
+                                background-color: white;
+                                border-radius: 50%;
+                                transition: transform 0.3s ease;
+                                transform: translateX(0);
+                              }
+                              .toggle-switch:checked::before {
+                                transform: translateX(30px);
+                              }
+                            `}
+                          </style>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
                   <Grid container spacing={6} className='mt-4'>
                     <Grid size={6}>
                       <Typography variant='body2' className='mb-2'>