diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/category/components/Breadcrumb.jsx | 103 | ||||
| -rw-r--r-- | src/lib/transaction/components/Transactions.jsx | 22 | ||||
| -rw-r--r-- | src/pages/my/menu.jsx | 11 |
3 files changed, 78 insertions, 58 deletions
diff --git a/src/lib/category/components/Breadcrumb.jsx b/src/lib/category/components/Breadcrumb.jsx index 127904ee..e691e379 100644 --- a/src/lib/category/components/Breadcrumb.jsx +++ b/src/lib/category/components/Breadcrumb.jsx @@ -1,56 +1,87 @@ -import odooApi from '@/core/api/odooApi' -import { createSlug } from '@/core/utils/slug' +import odooApi from '@/core/api/odooApi'; +import { createSlug } from '@/core/utils/slug'; import { Breadcrumb as ChakraBreadcrumb, BreadcrumbItem, BreadcrumbLink, - Skeleton -} from '@chakra-ui/react' -import Link from 'next/link' -import React from 'react' -import { useQuery } from 'react-query' + Skeleton, +} from '@chakra-ui/react'; +import Link from 'next/link'; +import React from 'react'; +import { useQuery } from 'react-query'; -/** - * Render a breadcrumb component. - * - * @param {object} categoryId - The ID of the category. - * @return {JSX.Element} The breadcrumb component. - */ const Breadcrumb = ({ categoryId }) => { const breadcrumbs = useQuery( - `category-breadcrumbs/${categoryId}`, - async () => await odooApi('GET', `/api/v1/category/${categoryId}/category-breadcrumb`) - ) + ['category-breadcrumbs', categoryId], + async () => + await odooApi('GET', `/api/v1/category/${categoryId}/category-breadcrumb`) + ); + + const items = breadcrumbs.data ?? []; + const lastIdx = items.length - 1; return ( <div className='container mx-auto py-4 md:py-6'> <Skeleton isLoaded={!breadcrumbs.isLoading} className='w-2/3'> - <ChakraBreadcrumb> + <ChakraBreadcrumb + spacing='8px' + sx={{ + // mobile boleh wrap; desktop tetap 1 baris + '& ol': { + display: 'flex', + flexWrap: { base: 'wrap', md: 'nowrap' }, + alignItems: 'center', + }, + '& li': { display: 'inline-flex', alignItems: 'center' }, + // semua item sebelum terakhir: jangan pernah wrap (tetap di baris atas) + '& li:not(:last-of-type)': { + flex: '0 0 auto', + whiteSpace: 'nowrap', + }, + // item terakhir: boleh ambil sisa lebar & wrap jika perlu + '& li:last-of-type': { + flex: '1 1 auto', + minWidth: 0, + }, + }} + > + {/* Home */} <BreadcrumbItem> - <BreadcrumbLink as={Link} href='/' className='!text-danger-500 whitespace-nowrap'> + <BreadcrumbLink as={Link} href='/' className='!text-danger-500'> Home </BreadcrumbLink> </BreadcrumbItem> - {breadcrumbs.data?.map((category, index) => ( - <BreadcrumbItem key={index} isCurrentPage={index === breadcrumbs.data.length - 1}> - {index === breadcrumbs.data.length - 1 ? ( - <BreadcrumbLink className='whitespace-nowrap'>{category.name}</BreadcrumbLink> - ) : ( - <BreadcrumbLink - as={Link} - href={createSlug('/shop/category/', category.name, category.id)} - className='!text-danger-500 whitespace-nowrap' - > - {category.name} - </BreadcrumbLink> - )} - </BreadcrumbItem> - ))} + {/* Categories */} + {items.map((category, index) => { + const isLast = index === lastIdx; + return ( + <BreadcrumbItem key={index} isCurrentPage={isLast}> + {isLast ? ( + // HANYA yang terakhir boleh turun/wrap di mobile + <BreadcrumbLink className='block whitespace-normal break-words md:whitespace-nowrap'> + {category.name} + </BreadcrumbLink> + ) : ( + <BreadcrumbLink + as={Link} + href={createSlug( + '/shop/category/', + category.name, + category.id + )} + className='!text-danger-500' + > + {category.name} + </BreadcrumbLink> + )} + </BreadcrumbItem> + ); + })} </ChakraBreadcrumb> </Skeleton> </div> - ) -} + ); +}; -export default Breadcrumb +export default Breadcrumb; diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx index 5e37be50..7efa773a 100644 --- a/src/lib/transaction/components/Transactions.jsx +++ b/src/lib/transaction/components/Transactions.jsx @@ -451,12 +451,12 @@ const Transactions = ({ context = '' }) => { return ( <> <MobileView> - <div className='p-4 flex flex-col gap-y-4'> - <div className='grid grid-cols-[30%_30%_40%] justify-between items-center gap-2 w-full '> + <div className=' flex flex-col gap-y-4'> + <div className='grid grid-cols-[40%_40%_15%] 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-2 py-1 text-xs bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500' + className='border border-gray-300 rounded-lg px-2 py-2 text-xs bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500' > {statuses.map((status) => ( <option key={status.id} value={status.id}> @@ -467,7 +467,7 @@ const Transactions = ({ context = '' }) => { <select value={sortNew} onChange={(e) => setSortNew(e.target.value)} - className='border border-gray-300 rounded-lg px-2 py-1 text-xs bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500' + className='border border-gray-300 rounded-lg px-2 py-2 text-xs bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500' > {sortes.map((status) => ( <option key={status.id} value={status.id}> @@ -478,14 +478,14 @@ const Transactions = ({ context = '' }) => { <div ref={calendarRef} className="relative inline-block"> <button type='button' - className='p-2 w-auto h-auto cursor-pointer hover:bg-gray-100 rounded transition duration-150 ease-in-out flex items-center justify-center' + 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={16} className="text-gray-500" /> + <Calendar size={20} className="text-gray-500" /> )} </span> </button> @@ -634,7 +634,7 @@ const Transactions = ({ context = '' }) => { > <div className='flex flex-row justify-between items-start'> <Link href={`${router.pathname}/${saleOrder.id}`}> - <h2 className='text-danger-500'>{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> @@ -662,8 +662,8 @@ const Transactions = ({ context = '' }) => { </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'> + <span className=' text-black text-sm'>Nomor PO:</span> + <span className=' text-red-500 font-semibold text-sm'> {saleOrder.purchaseOrderName || '-'} </span> </p> @@ -718,8 +718,8 @@ const Transactions = ({ context = '' }) => { <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'>Total Harga</p> - <p className='font-semibold'> + <p className='font-extralight text-sm'>Total Harga</p> + <p className='font-semibold text-lg'> {currencyFormat(saleOrder.amountTotal)} </p> </div> diff --git a/src/pages/my/menu.jsx b/src/pages/my/menu.jsx index 2a46d866..fa656ed4 100644 --- a/src/pages/my/menu.jsx +++ b/src/pages/my/menu.jsx @@ -48,17 +48,6 @@ export default function Menu() { <MenuHeader>Aktivitas Pembelian</MenuHeader> <div className='divide-y divide-gray_r-6 border-y border-gray_r-6 mt-4'> - <LinkItem href='/my/quotations'> - {' '} - <div className='flex gap-x-3 items-center'> - <ImageNext - src='/images/icon/icon_daftar_quotation.svg' - width={18} - height={20} - /> - <p>Daftar Quotation</p> - </div> - </LinkItem> <LinkItem href='/my/transactions'> <div className='flex gap-x-3 items-center'> <ImageNext |