<Miqdad> Button

1 files changed, 158 insertions, 102 deletions

diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx
index 7efa773a..fab9eb5c 100644
--- a/src/lib/transaction/components/Transactions.jsx
+++ b/src/lib/transaction/components/Transactions.jsx
@@ -475,21 +475,21 @@ const Transactions = ({ context = '' }) => {
                 </option>
               ))}
             </select>
-            <div ref={calendarRef} className="relative inline-block">
-                <button
-                  type='button'
-                  className='p-1 w-full h-auto cursor-pointer border hover:bg-gray-100 rounded transition duration-150 ease-in-out flex items-center justify-center'
-                  onClick={() => setIsOpenCalender((prev) => !prev)}
-                >
-                  <span className='text-nowrap px-1 truncate flex items-center gap-1'>
-                      {state[0]?.startDate ? (
-                        `${state[0].startDate.toLocaleDateString()} - ${state[0].endDate.toLocaleDateString()}`
-                      ) : (
-                        <Calendar size={20} className="text-gray-500" />
-                      )}
-                  </span>
-                </button>
-                {isOpenCalender && (
+            <div ref={calendarRef} className='relative inline-block'>
+              <button
+                type='button'
+                className='p-1 w-full h-auto cursor-pointer border hover:bg-gray-100 rounded transition duration-150 ease-in-out flex items-center justify-center'
+                onClick={() => setIsOpenCalender((prev) => !prev)}
+              >
+                <span className='text-nowrap px-1 truncate flex items-center gap-1'>
+                  {state[0]?.startDate ? (
+                    `${state[0].startDate.toLocaleDateString()} - ${state[0].endDate.toLocaleDateString()}`
+                  ) : (
+                    <Calendar size={20} className='text-gray-500' />
+                  )}
+                </span>
+              </button>
+              {isOpenCalender && (
                 <div className='absolute right-1 mt-2 bg-white p-4 rounded shadow-lg z-50'>
                   {/* Tombol silang di sudut kanan atas */}
                   <button
@@ -549,8 +549,8 @@ const Transactions = ({ context = '' }) => {
                     </button>
                   </div>
                 </div>
-                )}
-              </div>
+              )}
+            </div>
             {/* <div className='border border-gray-300 rounded-lg px-1 py-1 bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 text-xs'>
               <DatePicker
                 closeOnScroll={(e) => e.target === document}
@@ -634,7 +634,9 @@ const Transactions = ({ context = '' }) => {
             >
               <div className='flex flex-row justify-between items-start'>
                 <Link href={`${router.pathname}/${saleOrder.id}`}>
-                  <h2 className='text-danger-500 text-base'>{saleOrder.name}</h2>
+                  <h2 className='text-danger-500 text-base'>
+                    {saleOrder.name}
+                  </h2>
                   <span className='font-medium text-black opacity-75'>
                     {formatDate(saleOrder.dateOrder.split(' ')[0]) || '-'}
                   </span>
@@ -690,20 +692,21 @@ const Transactions = ({ context = '' }) => {
                               />
                             ))}
                           {saleOrder.products.length > 4 ? (
-                              <Link
-                                href={`${router.pathname}/${saleOrder?.id}`}
-                                className='text-red-500 text-nowrap'
-                              >
-                                +{saleOrder.products.length - 4} lihat semua produk
-                              </Link>
-                            ) : (
-                              <Link
-                                href={`${router.pathname}/${saleOrder?.id}`}
-                                className='text-red-500 text-nowrap'
-                              >
-                                Lihat semua produk
-                              </Link>
-                            )}
+                            <Link
+                              href={`${router.pathname}/${saleOrder?.id}`}
+                              className='text-red-500 text-nowrap'
+                            >
+                              +{saleOrder.products.length - 4} lihat semua
+                              produk
+                            </Link>
+                          ) : (
+                            <Link
+                              href={`${router.pathname}/${saleOrder?.id}`}
+                              className='text-red-500 text-nowrap'
+                            >
+                              Lihat semua produk
+                            </Link>
+                          )}
                         </div>
                       )}
                     </div>
@@ -716,21 +719,38 @@ const Transactions = ({ context = '' }) => {
                   </div>
                 </div>
                 <div className='col-span-2 h-[1px] w-full bg-gray-300'></div>
-                <div className='flex flex-row gap-3 justify-between items-center text-sm'>
-                  <div className='flex flex-col text-black text-xs'>
-                    <p className='font-extralight text-sm'>Total Harga</p>
+                <div className='flex flex-col gap-3 text-sm'>
+                  <div className='flex flex-col text-black'>
+                    <p className='font-extralight'>Total Harga</p>
                     <p className='font-semibold text-lg'>
                       {currencyFormat(saleOrder.amountTotal)}
                     </p>
                   </div>
-                  <div>
+
+                  {/* Tombol aksi: vertikal & full width, responsif */}
+                  <div className='flex flex-col gap-2 w-full'>
                     <button
                       type='button'
-                      onClick={() => handleBuyBack(saleOrder.products)}
-                      className='flex-1 py-2 btn-solid-red text-nowrap'
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleBuyBack(saleOrder.products);
+                      }}
+                      className='w-full py-2 btn-solid-red text-center rounded-md'
                     >
                       Beli Lagi
                     </button>
+
+                    <button
+                      type='button'
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                      }}
+                      className='w-full py-2 text-center rounded-md border border-red-300 text-red-500 bg-white'
+                    >
+                      Lanjutkan Transaksi
+                    </button>
                   </div>
                 </div>
 
@@ -917,7 +937,8 @@ const Transactions = ({ context = '' }) => {
                 <div className='text-justify flex flex-col gap-1'>
                   <p className='font-bold text-black'>Info Transaksi</p>
                   <span className='text-black'>
-                    Gunakan filter status untuk mempermudah pencarian transaksi anda di Daftar Transaksi
+                    Gunakan filter status untuk mempermudah pencarian transaksi
+                    anda di Daftar Transaksi
                   </span>
                 </div>
               </div>
@@ -928,23 +949,32 @@ const Transactions = ({ context = '' }) => {
                   <span className='text-base font-semibold text-gray-600'>
                     Status
                   </span>
-                  <div className="relative w-full overflow-hidden">
+                  <div className='relative w-full overflow-hidden'>
                     {/* Container flex: tombol prev - swiper - tombol next */}
-                    <div className="flex items-center space-x-2">
-                      
+                    <div className='flex items-center space-x-2'>
                       {/* Prev */}
-                      <button className="custom-prev w-8 h-8 flex-shrink-0 flex items-center justify-center bg-white border rounded-full shadow z-1">
-                        <svg className="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                      <button className='custom-prev w-8 h-8 flex-shrink-0 flex items-center justify-center bg-white border rounded-full shadow z-1'>
+                        <svg
+                          className='w-4 h-4 text-gray-500'
+                          fill='none'
+                          stroke='currentColor'
+                          viewBox='0 0 24 24'
+                        >
+                          <path
+                            strokeLinecap='round'
+                            strokeLinejoin='round'
+                            strokeWidth={2}
+                            d='M15 19l-7-7 7-7'
+                          />
                         </svg>
                       </button>
 
                       {/* Swiper container scrollable */}
-                      <div className="w-full overflow-hidden">
+                      <div className='w-full overflow-hidden'>
                         <Swiper
                           spaceBetween={10}
-                          slidesPerView="auto"
-                          className="status-swiper"
+                          slidesPerView='auto'
+                          className='status-swiper'
                           modules={[Navigation]}
                           navigation={{
                             nextEl: '.custom-next',
@@ -952,12 +982,13 @@ const Transactions = ({ context = '' }) => {
                           }}
                         >
                           {statuses.map((status) => (
-                            <SwiperSlide key={status.id} className="!w-auto">
+                            <SwiperSlide key={status.id} className='!w-auto'>
                               <button
                                 className={`px-4 py-1 text-sm font-medium border rounded-lg transition whitespace-nowrap
-                                  ${statusNew === status.id
-                                    ? 'border-red-500 text-red-500 bg-white'
-                                    : 'border-gray-300 text-gray-400 bg-gray-100 hover:bg-gray-200'
+                                  ${
+                                    statusNew === status.id
+                                      ? 'border-red-500 text-red-500 bg-white'
+                                      : 'border-gray-300 text-gray-400 bg-gray-100 hover:bg-gray-200'
                                   }`}
                                 onClick={() => handleStatusChange(status.id)}
                               >
@@ -969,9 +1000,19 @@ const Transactions = ({ context = '' }) => {
                       </div>
 
                       {/* Next */}
-                      <button className="custom-next w-8 h-8 flex-shrink-0 flex items-center justify-center bg-white border rounded-full shadow z-10">
-                        <svg className="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                      <button className='custom-next w-8 h-8 flex-shrink-0 flex items-center justify-center bg-white border rounded-full shadow z-10'>
+                        <svg
+                          className='w-4 h-4 text-gray-500'
+                          fill='none'
+                          stroke='currentColor'
+                          viewBox='0 0 24 24'
+                        >
+                          <path
+                            strokeLinecap='round'
+                            strokeLinejoin='round'
+                            strokeWidth={2}
+                            d='M9 5l7 7-7 7'
+                          />
                         </svg>
                       </button>
                     </div>
@@ -1038,41 +1079,43 @@ const Transactions = ({ context = '' }) => {
                     <option value={10}>10</option>
                     <option value={15}>15</option>
                     <option value={20}>20</option>
-                    <option value={transactions?.data?.saleOrderTotal}>Semua</option>
+                    <option value={transactions?.data?.saleOrderTotal}>
+                      Semua
+                    </option>
                   </select>
-                  <div ref={calendarRef} className="relative inline-block">
+                  <div ref={calendarRef} className='relative inline-block'>
                     <button
                       type='button'
                       className='p-2 w-auto h-auto cursor-pointer border hover:bg-gray-100 rounded transition duration-150 ease-in-out flex items-center justify-center'
                       onClick={() => setIsOpenCalender((prev) => !prev)}
                     >
                       <span className='text-nowrap px-1 truncate flex items-center gap-1'>
-                          {state[0]?.startDate ? (
-                            `${state[0].startDate.toLocaleDateString()} - ${state[0].endDate.toLocaleDateString()}`
-                          ) : (
-                            <Calendar size={16} className="text-gray-500" />
-                          )}
+                        {state[0]?.startDate ? (
+                          `${state[0].startDate.toLocaleDateString()} - ${state[0].endDate.toLocaleDateString()}`
+                        ) : (
+                          <Calendar size={16} className='text-gray-500' />
+                        )}
                       </span>
                     </button>
                     {isOpenCalender && (
-                    <div className='absolute right-10 mt-2 bg-white p-4 rounded shadow-lg z-50'>
-                      {/* Tombol silang di sudut kanan atas */}
-                      <button
-                        onClick={() => setIsOpenCalender(false)}
-                        className='absolute top-2 right-2 text-gray-600 hover:text-black text-xl font-bold'
-                      >
-                        &times;
-                      </button>
-                      <DateRangePicker
-                        onChange={(item) => setState([item.selection])}
-                        showSelectionPreview={false}
-                        maxDate={new Date()}
-                        moveRangeOnFirstSelection={false}
-                        months={1}
-                        ranges={state}
-                        className='w-full'
-                      />
-                      <style>{`
+                      <div className='absolute right-10 mt-2 bg-white p-4 rounded shadow-lg z-50'>
+                        {/* Tombol silang di sudut kanan atas */}
+                        <button
+                          onClick={() => setIsOpenCalender(false)}
+                          className='absolute top-2 right-2 text-gray-600 hover:text-black text-xl font-bold'
+                        >
+                          &times;
+                        </button>
+                        <DateRangePicker
+                          onChange={(item) => setState([item.selection])}
+                          showSelectionPreview={false}
+                          maxDate={new Date()}
+                          moveRangeOnFirstSelection={false}
+                          months={1}
+                          ranges={state}
+                          className='w-full'
+                        />
+                        <style>{`
                         /* Atur container agar menjadi column */
                         .rdrCalendarWrapper {
                           display: flex;
@@ -1105,15 +1148,15 @@ const Transactions = ({ context = '' }) => {
                           width: -moz-available;
                         }
                       `}</style>
-                      <div className='flex flex-row justify-end gap-3 mt-2'>
-                        <button
-                          className='px-4 py-1 bg-red-500 text-white rounded'
-                          onClick={handleReset}
-                        >
-                          Reset
-                        </button>
+                        <div className='flex flex-row justify-end gap-3 mt-2'>
+                          <button
+                            className='px-4 py-1 bg-red-500 text-white rounded'
+                            onClick={handleReset}
+                          >
+                            Reset
+                          </button>
+                        </div>
                       </div>
-                    </div>
                     )}
                   </div>
                 </div>
@@ -1220,7 +1263,8 @@ const Transactions = ({ context = '' }) => {
                                             href={`${router.pathname}/${saleOrder?.id}`}
                                             className='text-red-500 text-nowrap'
                                           >
-                                            +{saleOrder.products.length - 4} lihat semua produk
+                                            +{saleOrder.products.length - 4}{' '}
+                                            lihat semua produk
                                           </Link>
                                         ) : (
                                           <Link
@@ -1245,24 +1289,36 @@ const Transactions = ({ context = '' }) => {
                               </div>
                             </div>
                             <div className='w-[1px] h-24 bg-gray-300'></div>
-                            <div className='w-1/4 flex flex-row gap-3 justify-center items-center'>
-                              <div className='flex flex-col text-black'>
+                            <div className='w-1/4 flex flex-col gap-2 items-end justify-center'>
+                              <div className='flex flex-col text-black w-full'>
                                 <p>Total Harga</p>
                                 <p className='font-bold'>
                                   {currencyFormat(saleOrder.amountTotal)}
                                 </p>
                               </div>
-                              <div>
-                                <button
-                                  type='button'
-                                  onClick={() =>
-                                    handleBuyBack(saleOrder.products)
-                                  }
-                                  className='flex-1 py-2 btn-solid-red text-nowrap'
-                                >
-                                  Beli Lagi
-                                </button>
-                              </div>
+
+                              <button
+                                type='button'
+                                onClick={(e) => {
+                                  e.preventDefault();
+                                  e.stopPropagation();
+                                  handleBuyBack(saleOrder.products);
+                                }}
+                                className='w-full py-2 btn-solid-red text-nowrap rounded-md'
+                              >
+                                Beli Lagi
+                              </button>
+
+                              <button
+                                type='button'
+                                onClick={(e) => {
+                                  e.preventDefault();
+                                  e.stopPropagation();
+                                }}
+                                className='w-full py-2 btn-light text-nowrap border border-red-500 text-red-500 rounded-md'
+                              >
+                                Lanjutkan Transaksi
+                              </button>
                             </div>
                           </div>
                         </Link>