<iman> add mobile

1 files changed, 177 insertions, 36 deletions

diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx
index 64ae9393..2ef50dcb 100644
--- a/src/lib/transaction/components/Transactions.jsx
+++ b/src/lib/transaction/components/Transactions.jsx
@@ -53,8 +53,6 @@ const Transactions = ({ context = '' }) => {
     isLoading,
     setIsloading,
   } = useProductCartContext();
-  console.log('context', context);
-  console.log('router.query', router.query);
   const [inputQuery, setInputQuery] = useState(q);
   const [toOthers, setToOthers] = useState(null);
   const [toCancel, setToCancel] = useState(null);
@@ -86,9 +84,7 @@ const Transactions = ({ context = '' }) => {
     { id: 'cancel', label: 'Pesanan Dibatalkan' },
   ];
 
-  console.log('query', query);
   const { transactions } = useTransactions({ query });
-  // console.log('transactions', transactions);
   const fetchSite = async () => {
     const site = await getSite();
     setListSites(site.sites);
@@ -285,8 +281,6 @@ const Transactions = ({ context = '' }) => {
         )
       );
 
-      // console.log(`Produk berhasil dimasukkan ke dalam cart`, results);
-
       // ✅ Panggil setRefreshCart(true) setiap kali satu produk berhasil ditambahkan
 
       setRefreshCart(true);
@@ -322,6 +316,8 @@ const Transactions = ({ context = '' }) => {
 
     if (status === 'all') {
       router.push('/my/transactions');
+    } else {
+      setPageNew(1);
     }
   };
 
@@ -329,18 +325,85 @@ const Transactions = ({ context = '' }) => {
     <>
       <MobileView>
         <div className='p-4 flex flex-col gap-y-4'>
-          <form className='flex gap-x-3' onSubmit={handleSubmit}>
-            <input
-              type='text'
-              className='form-input'
-              placeholder='Cari Transaksi...'
-              value={inputQuery}
-              onChange={(e) => setInputQuery(e.target.value)}
-            />
-            <button className='btn-light bg-transparent px-3' type='submit'>
-              <MagnifyingGlassIcon className='w-6' />
-            </button>
-          </form>
+          <div className='grid grid-cols-3 justify-between items-center gap-2 w-full '>
+            <select
+              value={statusNew}
+              onChange={(e) => handleStatusChange(e.target.value)}
+              className='border border-gray-300 rounded-lg px-3 py-1 text-sm bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500'
+            >
+              {statuses.map((status) => (
+                <option key={status.id} value={status.id}>
+                  {status.label}
+                </option>
+              ))}
+            </select>
+            <select
+              value={statusNew}
+              onChange={(e) => handleStatusChange(e.target.value)}
+              className='border border-gray-300 rounded-lg px-3 py-1 text-sm bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500'
+            >
+              {statuses.map((status) => (
+                <option key={status.id} value={status.id}>
+                  {status.label}
+                </option>
+              ))}
+            </select>
+            <select
+              value={statusNew}
+              onChange={(e) => setStatusNew(e.target.value)}
+              className='border border-gray-300 rounded-lg px-3 py-1 text-sm bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500'
+            >
+              {statuses.map((status) => (
+                <option key={status.id} value={status.id}>
+                  {status.label}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className='flex flex-row justify-between items-center gap-2'>
+            <form className='flex' onSubmit={handleSubmit}>
+              <button
+                className='btn-light border-r-0 rounded-r-none bg-transparent px-3'
+                type='submit'
+              >
+                <MagnifyingGlassIcon className='w-6' />
+              </button>
+              <input
+                type='text'
+                className='form-input border-l-0 rounded-l-none'
+                placeholder='Cari Transaksi...'
+                value={inputQuery}
+                onChange={(e) => setInputQuery(e.target.value)}
+              />
+            </form>
+            <div className='flex flex-row gap-2 items-center justify-center text-nowrap'>
+              <p>
+                Menampilkan {startItem}-
+                {endItem
+                  ? endItem
+                  : transactions?.data?.saleOrderTotal
+                  ? transactions?.data?.saleOrderTotal
+                  : limitNew * pageNew}{' '}
+                dari{' '}
+                {transactions?.data?.saleOrderTotal
+                  ? transactions?.data?.saleOrderTotal
+                  : limitNew * pageNew}
+              </p>
+              <select
+                id='limitSelect'
+                value={limitNew}
+                onChange={(e) => {
+                  setLimitNew(Number(e.target.value));
+                  setPageNew(1);
+                }}
+                className='border p-2'
+              >
+                <option value={10}>10</option>
+                <option value={15}>15</option>
+                <option value={20}>20</option>
+              </select>
+            </div>
+          </div>
 
           {transactions.isLoading && (
             <div className='flex justify-center my-4'>
@@ -357,15 +420,15 @@ const Transactions = ({ context = '' }) => {
 
           {transactions.data?.saleOrders?.map((saleOrder, index) => (
             <div
-              className='p-4 shadow border border-gray_r-3 rounded-md'
+              className='p-4 shadow border border-gray_r-3 text-xs rounded-md flex flex-col gap-2'
               key={index}
             >
-              <div className='grid grid-cols-2'>
+              <div className='flex flex-row justify-between items-start'>
                 <Link href={`${router.pathname}/${saleOrder.id}`}>
-                  <span className='text-caption-2 text-gray_r-11'>
-                    No. Transaksi
+                  <h2 className='text-danger-500'>{saleOrder.name}</h2>
+                  <span className='font-medium text-black opacity-75'>
+                    {saleOrder.dateOrder.split(' ')[0] || '-'}
                   </span>
-                  <h2 className='text-danger-500 mt-1'>{saleOrder.name}</h2>
                 </Link>
                 <div className='flex gap-x-1 justify-end'>
                   <TransactionStatusBadge status={saleOrder.status} />
@@ -375,8 +438,85 @@ const Transactions = ({ context = '' }) => {
                   />
                 </div>
               </div>
-              <Link href={`${router.pathname}/${saleOrder.id}`}>
-                <div className='grid grid-cols-2 mt-3'>
+              <div className='col-span-2 h-[1px] w-full bg-gray-300'></div>
+              <Link
+                href={`${router.pathname}/${saleOrder.id}`}
+                className='flex flex-col gap-2'
+              >
+                <div className='flex flex-row gap-2'>
+                  <div className='flex w-1/5'>
+                    <Image
+                      src={saleOrder.products[0]?.parent?.image}
+                      alt={saleOrder.products[0]?.name}
+                      className='object-contain object-center border border-gray_r-6 h-32 w-full rounded-md'
+                    />
+                  </div>
+                  <div className='flex w-4/5 flex-col gap-2 justify-start'>
+                    <p className='flex flex-row gap-2'>
+                      <span className=' text-black'>Nomor PO:</span>
+                      <span className=' text-red-500 font-semibold'>
+                        {saleOrder.purchaseOrderName || '-'}
+                      </span>
+                    </p>
+                    <p className='line-clamp-2 leading-6 tracking-wide opacity-90 !text-gray_r-12 font-semibold truncate text-sm'>
+                      {saleOrder.products[0]?.parent?.name}
+                    </p>
+                    <p className='opacity-85 !text-gray_r-12'>
+                      {saleOrder.products[0]?.quantity} x{' '}
+                      {currencyFormat(
+                        saleOrder.products[0]?.price?.priceDiscount
+                      )}
+                    </p>
+                    <div className='flex flex-row justify-start items-center'>
+                      {saleOrder.products?.length > 1 && (
+                        <div className='flex flex-row gap-1 justify-start items-center'>
+                          {saleOrder.products
+                            .slice(1, 6)
+                            .map((product, index) => (
+                              <Image
+                                key={index} // Tambahkan key untuk setiap elemen dalam map()
+                                src={product?.parent?.image}
+                                alt={product?.name}
+                                className='object-contain object-center border border-gray_r-6 h-8 w-8 rounded-md'
+                              />
+                            ))}
+                          <Link
+                            href={`/my/quotations/${saleOrder?.id}`}
+                            className=' text-red-500 text-nowrap'
+                          >
+                            Lihat semua produk
+                          </Link>
+                        </div>
+                      )}
+                    </div>
+                    <div className='flex flex-row w-full text-nowrap gap-2 text-black'>
+                      <span className=''>Pesanan dibuat oleh:</span>
+                      <p className=' font-semibold truncate'>
+                        {saleOrder.address.customer?.name || '-'}
+                      </p>
+                    </div>
+                  </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'>
+                    <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>
+                </div>
+
+                {/* <div className='grid grid-cols-2 mt-3'>
                   <div>
                     <span className='text-caption-2 text-gray_r-11'>
                       No. Purchase Order
@@ -393,8 +533,8 @@ const Transactions = ({ context = '' }) => {
                       {saleOrder.invoiceCount} Invoice
                     </p>
                   </div>
-                </div>
-                <div className='grid grid-cols-2 mt-3'>
+                </div> */}
+                {/* <div className='grid grid-cols-2 mt-3'>
                   <div>
                     <span className='text-caption-2 text-gray_r-11'>Sales</span>
                     <p className='mt-1 font-medium text-gray_r-12'>
@@ -409,15 +549,16 @@ const Transactions = ({ context = '' }) => {
                       {currencyFormat(saleOrder.amountTotal)}
                     </p>
                   </div>
-                </div>
+                </div> */}
               </Link>
             </div>
           ))}
 
           <Pagination
             pageCount={pageCount}
-            currentPage={parseInt(page)}
-            url={router.pathname + pageQuery}
+            currentPage={parseInt(pageNew)}
+            // url={router.pathname + pageQuery}
+            url={`/my/transactions?${toQuery(_.omit(query, ['page']))}`}
             className='mt-2 mb-2'
           />
 
@@ -568,7 +709,7 @@ const Transactions = ({ context = '' }) => {
             <div className='flex flex-col gap-y-2 border rounded mb-2'>
               <div className='p-2'>
                 <div className='flex items-center space-x-3'>
-                  <span className='text-sm font-medium text-gray-600'>
+                  <span className='text-base font-semibold text-gray-600'>
                     Status
                   </span>
                   <Swiper
@@ -636,11 +777,11 @@ const Transactions = ({ context = '' }) => {
                       ? endItem
                       : transactions?.data?.saleOrderTotal
                       ? transactions?.data?.saleOrderTotal
-                      : limitNew}{' '}
+                      : limitNew * pageNew}{' '}
                     dari{' '}
                     {transactions?.data?.saleOrderTotal
                       ? transactions?.data?.saleOrderTotal
-                      : limitNew}
+                      : limitNew * pageNew}
                   </p>
                   <select
                     id='limitSelect'
@@ -684,7 +825,7 @@ const Transactions = ({ context = '' }) => {
                         className='border p-2 hover:border-red-500 w-full rounded-sm'
                       >
                         <Link
-                          href={`/my/quotations/${saleOrder?.id}`}
+                          href={`/my/transactions/${saleOrder?.id}`}
                           className='hover:border-red-500 block w-full'
                         >
                           <div className='flex flex-row justify-between items-center py-2'>
@@ -713,7 +854,7 @@ const Transactions = ({ context = '' }) => {
                           <div className='flex flex-row gap-2 justify-between items-center '>
                             <div className='flex justify-start w-3/4 flex-col gap-2'>
                               <div className='flex gap-2'>
-                                <div>
+                                <div className='min-w-36 max-w-36'>
                                   <Image
                                     src={saleOrder.products[0]?.parent?.image}
                                     alt={saleOrder.products[0]?.name}
@@ -749,7 +890,7 @@ const Transactions = ({ context = '' }) => {
                                               key={index} // Tambahkan key untuk setiap elemen dalam map()
                                               src={product?.parent?.image}
                                               alt={product?.name}
-                                              className='object-contain object-center border border-gray_r-6 h-8 w-8 rounded-md'
+                                              className='object-contain object-center border border-gray_r-6 h-16 w-16 rounded-md'
                                             />
                                           ))}
                                         <Link