69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
import { FC } from 'react';
|
|
import { Calendar } from 'react-big-calendar';
|
|
import { Stack } from '../../components';
|
|
import { Job } from '../../types/job';
|
|
import { formatDate } from '../../utils';
|
|
import { localizer } from '../../utils/calendar';
|
|
|
|
type BasicInfoProps = {
|
|
work: Job;
|
|
};
|
|
|
|
export const BasicInfo: FC<BasicInfoProps> = ({ work }) => {
|
|
return (
|
|
<Stack className="h-full w-full justify-center gap-2 bg-white p-4">
|
|
{/* <G></G> */}
|
|
<Stack className="gap-2 p-4">
|
|
<LabelWithText label="Job Name" value={work.jobId} />
|
|
<LabelWithText label="Contact Person" value={work.contactPerson.name} />
|
|
<LabelWithText
|
|
label="Contact Person Tel"
|
|
value={work.contactPerson.tel}
|
|
/>
|
|
<LabelWithText label="Created At" value={formatDate(work.createdAt)} />
|
|
<LabelWithText
|
|
label="Expected Period"
|
|
value={
|
|
work.expectedStartAt
|
|
? `${formatDate(work.expectedStartAt)} - ${formatDate(work.expectedEndAt)}`
|
|
: 'N/A'
|
|
}
|
|
/>
|
|
<LabelWithText
|
|
label="Site Period"
|
|
value={
|
|
work.siteStartAt
|
|
? `${formatDate(work.siteStartAt)} - ${formatDate(work.siteEndAt)}`
|
|
: 'N/A'
|
|
}
|
|
/>
|
|
<LabelWithText label="District" value={work.district || 'N/A'} />
|
|
<div className="flex gap-2">
|
|
<span className="font-medium">Description:</span>
|
|
<p className="whitespace-pre-wrap">{work.description || 'N/A'}</p>
|
|
</div>
|
|
</Stack>
|
|
<div className="h-full w-full">
|
|
<Calendar
|
|
localizer={localizer}
|
|
startAccessor="start"
|
|
endAccessor="end"
|
|
views={['month']}
|
|
/>
|
|
</div>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
const LabelWithText: FC<{ label: string; value: string }> = ({
|
|
label,
|
|
value,
|
|
}) => {
|
|
return (
|
|
<div className="flex gap-2">
|
|
<span className="font-medium">{label}:</span>
|
|
<span>{value}</span>
|
|
</div>
|
|
);
|
|
};
|