previous stats style adjusted

This commit was merged in pull request #759.
This commit is contained in:
victorAnumudu
2024-07-21 15:39:09 +01:00
parent ead1be773f
commit e5c511bd8f
2 changed files with 18 additions and 15 deletions
@@ -248,32 +248,35 @@ export default function ManageInterestOffer(props) {
<LoadingSpinner color='sky-blue' size='10' height='min-h-[40px]' />
:
<>
<div className='flex flex-col md:flex-row gap-4 justify-center items-center max-w-xl'>
<div className='w-full'>
<h1 className="text-xl font-extrabold text-black dark:text-white tracking-wide">Previous Job Statistics</h1>
</div>
<div className='p-2 flex flex-col md:flex-row gap-4 justify-center items-center max-w-3xl bg-sky-100'>
<div className='contents md:flex flex-col gap-3'>
<div className='flex items-center gap-4'>
<p className="min-w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Completed:</p>
<p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Completed:</p>
<p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_completed && interestStats.data?.job_completed}</p>
</div>
<div className="flex items-center gap-4">
<p className="min-w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Active:</p>
<p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Active:</p>
<p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_active && interestStats.data?.job_active}</p>
</div>
<div className="flex items-center gap-4">
<p className="min-w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">% Completion:</p>
<p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">% Completion:</p>
<p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_percent_complete && interestStats.data?.job_percent_complete}</p>
</div>
</div>
<div className='contents md:flex flex-col gap-3'>
<div className="flex items-center gap-4">
<p className="min-w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Last Completed:</p>
<p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Last Completed:</p>
<p className="min-w-[150px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_last_date && interestStats.data?.job_last_date}</p>
</div>
<div className="flex items-center gap-4">
<p className="min-w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Uncompleted:</p>
<p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Uncompleted:</p>
<p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_uncompleted && interestStats.data?.job_uncompleted}</p>
</div>
<div className="flex items-center gap-4">
<p className="min-w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Pending Offers:</p>
<p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Pending Offers:</p>
<p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_pending && interestStats.data?.job_pending}</p>
</div>
</div>