gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-26 00:05:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE): Remove max-width constraints, use two-column grid

Browse Source
This commit is contained in:
rstubryan
2026-01-17 20:53:39 +07:00
parent 4391fe1de7
commit 0aa96b9c46
5 changed files with 136 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/expense/ExpenseDetail.tsx
+2 -2
View File
@@ -43,7 +43,7 @@ const ExpenseDetail: React.FC<ExpenseDetailProps> = ({ initialValues }) => {
return ( return (
<> <>
<section className='w-full max-w-7xl pb-16'> <section className='w-full max-w-full pb-16'>
<header className='flex flex-col gap-4'> <header className='flex flex-col gap-4'>
<Button <Button
href='/expense' href='/expense'
@@ -65,7 +65,7 @@ const ExpenseDetail: React.FC<ExpenseDetailProps> = ({ initialValues }) => {
tabs={expenseDetailTabs} tabs={expenseDetailTabs}
variant='lifted' variant='lifted'
className={{ className={{
wrapper: 'max-w-5xl mx-auto mt-4', wrapper: 'mx-auto mt-4',
}} }}
/> />
</section> </section>
src/components/pages/expense/ExpenseRealizationContent.tsx
+27 -13
View File
@@ -68,7 +68,7 @@ const ExpenseRealizationContent = ({
return ( return (
<div> <div>
<div className='w-full max-w-5xl mx-auto flex flex-col sm:flex-row justify-end gap-2'> <div className='w-full mx-auto flex flex-col sm:flex-row justify-end gap-2'>
<div className='w-full sm:w-fit sm:ml-2 flex flex-row gap-2 items-center'> <div className='w-full sm:w-fit sm:ml-2 flex flex-row gap-2 items-center'>
<RequirePermission permissions='lti.expense.update.realization'> <RequirePermission permissions='lti.expense.update.realization'>
<Button <Button
@@ -84,7 +84,7 @@ const ExpenseRealizationContent = ({
</div> </div>
</div> </div>
<div className='overflow-x-auto w-full max-w-5xl mx-auto'> <div className='overflow-x-auto w-full mx-auto'>
<table className='table table-sm table-zebra'> <table className='table table-sm table-zebra'>
<tbody> <tbody>
<tr> <tr>
@@ -179,7 +179,7 @@ const ExpenseRealizationContent = ({
</table> </table>
</div> </div>
<div className='w-full max-w-5xl mt-8 mx-auto'> <div className='w-full mt-8 mx-auto'>
<div className='flex flex-row gap-4'> <div className='flex flex-row gap-4'>
<Card variant='bordered' size='sm' className={{ wrapper: 'grow' }}> <Card variant='bordered' size='sm' className={{ wrapper: 'grow' }}>
<div className='w-full flex flex-col gap-2'> <div className='w-full flex flex-col gap-2'>
@@ -216,13 +216,15 @@ const ExpenseRealizationContent = ({
</div> </div>
</div> </div>
<div className='w-full max-w-5xl mt-8 mx-auto'> <div className='w-full mt-8 mx-auto grid grid-cols-2 gap-4'>
<div>
<h2 className='font-bold text-xl text-center'> <h2 className='font-bold text-xl text-center'>
Rincian Pengajuan Biaya Operasional Rincian Pengajuan Biaya Operasional
</h2> </h2>
<div className='w-full mt-2 flex flex-col gap-4'> <div className='w-full mt-2 flex flex-col gap-4'>
{initialValues?.kandangs.map((kandangExpense, kandangExpenseIdx) => { {initialValues?.kandangs.map(
(kandangExpense, kandangExpenseIdx) => {
let expenseGrandTotal = 0; let expenseGrandTotal = 0;
kandangExpense.pengajuans?.forEach( kandangExpense.pengajuans?.forEach(
@@ -258,7 +260,9 @@ const ExpenseRealizationContent = ({
<td>{pengajuanItem.nonstock.name}</td> <td>{pengajuanItem.nonstock.name}</td>
<td>{pengajuanItem.qty}</td> <td>{pengajuanItem.qty}</td>
<td>{formatCurrency(pengajuanItem.price)}</td> <td>{formatCurrency(pengajuanItem.price)}</td>
<td className='w-xs'>{pengajuanItem.note ?? '-'}</td> <td className='w-xs'>
{pengajuanItem.note ?? '-'}
</td>
</tr> </tr>
) )
)} )}
@@ -268,23 +272,27 @@ const ExpenseRealizationContent = ({
<th colSpan={2} className='text-right'> <th colSpan={2} className='text-right'>
Total Biaya Keseluruhan: Total Biaya Keseluruhan:
</th> </th>
<th colSpan={2}>{formatCurrency(expenseGrandTotal)}</th> <th colSpan={2}>
{formatCurrency(expenseGrandTotal)}
</th>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
</div> </div>
); );
})} }
)}
</div> </div>
</div> </div>
<div className='w-full max-w-5xl mt-8 mx-auto'> <div>
<h2 className='font-bold text-xl text-center'> <h2 className='font-bold text-xl text-center'>
Rincian Realisasi Biaya Operasional Rincian Realisasi Biaya Operasional
</h2> </h2>
<div className='w-full mt-2 flex flex-col gap-4'> <div className='w-full mt-2 flex flex-col gap-4'>
{initialValues?.kandangs.map((kandangExpense, kandangExpenseIdx) => { {initialValues?.kandangs.map(
(kandangExpense, kandangExpenseIdx) => {
let expenseGrandTotal = 0; let expenseGrandTotal = 0;
kandangExpense.realisasi?.forEach( kandangExpense.realisasi?.forEach(
@@ -320,7 +328,9 @@ const ExpenseRealizationContent = ({
<td>{realisasiItem.nonstock.name}</td> <td>{realisasiItem.nonstock.name}</td>
<td>{realisasiItem.qty}</td> <td>{realisasiItem.qty}</td>
<td>{formatCurrency(realisasiItem.price)}</td> <td>{formatCurrency(realisasiItem.price)}</td>
<td className='w-xs'>{realisasiItem.note ?? '-'}</td> <td className='w-xs'>
{realisasiItem.note ?? '-'}
</td>
</tr> </tr>
) )
)} )}
@@ -330,13 +340,17 @@ const ExpenseRealizationContent = ({
<th colSpan={2} className='text-right'> <th colSpan={2} className='text-right'>
Total Biaya Keseluruhan: Total Biaya Keseluruhan:
</th> </th>
<th colSpan={2}>{formatCurrency(expenseGrandTotal)}</th> <th colSpan={2}>
{formatCurrency(expenseGrandTotal)}
</th>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
</div> </div>
); );
})} }
)}
</div>
</div> </div>
</div> </div>
</div> </div>
src/components/pages/expense/ExpenseRequestContent.tsx
+4 -4
View File
@@ -273,7 +273,7 @@ const ExpenseRequestContent = ({
<> <>
<div> <div>
{initialValues && !isLoadingApprovalHistory && approvalHistory && ( {initialValues && !isLoadingApprovalHistory && approvalHistory && (
<div className='w-full max-w-5xl my-4 mx-auto'> <div className='w-full my-4 mx-auto'>
<ApprovalSteps approvals={approvalHistory} /> <ApprovalSteps approvals={approvalHistory} />
</div> </div>
)} )}
@@ -281,7 +281,7 @@ const ExpenseRequestContent = ({
<div className='w-full mt-4 flex flex-col gap-4'> <div className='w-full mt-4 flex flex-col gap-4'>
{/* TODO: apply RBAC */} {/* TODO: apply RBAC */}
<div className='w-full max-w-5xl mx-auto flex flex-col sm:flex-row justify-end gap-2'> <div className='w-full mx-auto flex flex-col sm:flex-row justify-end gap-2'>
{isCurrentApprovalOnHeadArea && ( {isCurrentApprovalOnHeadArea && (
<RequirePermission permissions='lti.expense.approve.head_area'> <RequirePermission permissions='lti.expense.approve.head_area'>
<Button <Button
@@ -414,7 +414,7 @@ const ExpenseRequestContent = ({
</div> </div>
</div> </div>
<div className='overflow-x-auto w-full max-w-5xl mx-auto'> <div className='overflow-x-auto w-full mx-auto'>
<table className='table table-sm table-zebra'> <table className='table table-sm table-zebra'>
<tbody> <tbody>
<tr> <tr>
@@ -608,7 +608,7 @@ const ExpenseRequestContent = ({
</table> </table>
</div> </div>
</div> </div>
<div className='w-full max-w-5xl mt-8 mx-auto'> <div className='w-full mt-8 mx-auto'>
<h2 className='font-bold text-xl text-center'> <h2 className='font-bold text-xl text-center'>
Rincian Pengajuan Biaya Operasional Rincian Pengajuan Biaya Operasional
</h2> </h2>
src/components/pages/expense/form/ExpenseRealizationForm.tsx
+1 -1
View File
@@ -249,7 +249,7 @@ const ExpenseRealizationForm = ({
}, [formikSetValues, getExpenseRealizationFormInitialValues, initialValues]); }, [formikSetValues, getExpenseRealizationFormInitialValues, initialValues]);
return ( return (
<section className='w-full max-w-5xl'> <section className='w-full'>
<header className='flex flex-col gap-4'> <header className='flex flex-col gap-4'>
<Button <Button
href='/expense' href='/expense'
src/components/pages/expense/form/ExpenseRequestForm.tsx
+1 -1
View File
@@ -360,7 +360,7 @@ const ExpenseRequestForm = ({
return ( return (
<> <>
<section className='w-full max-w-5xl'> <section className='w-full'>
<header className='flex flex-col gap-4'> <header className='flex flex-col gap-4'>
<Button <Button
href='/expense' href='/expense'