lavoce #37
@@ -697,8 +697,8 @@ const ListNotification = memo(function ListNotification(props) {
|
|||||||
{/* Kolom Kanan: Card */}
|
{/* Kolom Kanan: Card */}
|
||||||
<Col flex="auto">
|
<Col flex="auto">
|
||||||
<Card size="small" style={{ borderColor: '#91d5ff' }}>
|
<Card size="small" style={{ borderColor: '#91d5ff' }}>
|
||||||
<Row gutter={[16, 8]} align="middle">
|
<Row gutter={[16, 8]} align="top">
|
||||||
<Col xs={24} md={12}>
|
<Col xs={24} md={10}>
|
||||||
<Space direction="vertical" size={4}>
|
<Space direction="vertical" size={4}>
|
||||||
<Space>
|
<Space>
|
||||||
<ClockCircleOutlined />
|
<ClockCircleOutlined />
|
||||||
@@ -709,13 +709,16 @@ const ListNotification = memo(function ListNotification(props) {
|
|||||||
Added at {log.timestamp}
|
Added at {log.timestamp}
|
||||||
</Text>
|
</Text>
|
||||||
</Space>
|
</Space>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<Text strong>
|
<Text strong>
|
||||||
Added by: {log.addedBy.name}
|
{log.addedBy.name}
|
||||||
</Text>
|
</Text>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
<span
|
<span
|
||||||
style={{
|
style={{
|
||||||
marginLeft: '8px',
|
|
||||||
border: '1px solid #52c41a',
|
border: '1px solid #52c41a',
|
||||||
color: '#52c41a',
|
color: '#52c41a',
|
||||||
padding: '2px 6px',
|
padding: '2px 6px',
|
||||||
@@ -728,7 +731,8 @@ const ListNotification = memo(function ListNotification(props) {
|
|||||||
</div>
|
</div>
|
||||||
</Space>
|
</Space>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs={24} md={12}>
|
<Col xs={24} md={14}>
|
||||||
|
<Text strong>Description:</Text>
|
||||||
<Paragraph
|
<Paragraph
|
||||||
style={{
|
style={{
|
||||||
color: '#595959',
|
color: '#595959',
|
||||||
|
|||||||
@@ -542,395 +542,407 @@ const NotificationDetailTab = (props) => {
|
|||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
<Row gutter={[8, 8]} style={{ marginBottom: 'px' }}>
|
<Row gutter={[8, 8]}>
|
||||||
<Col xs={24} md={8}>
|
<Col xs={24} md={8}>
|
||||||
<Card
|
<div>
|
||||||
hoverable
|
<Card
|
||||||
bodyStyle={{ padding: '12px', textAlign: 'center' }}
|
hoverable
|
||||||
>
|
bodyStyle={{ padding: '12px'}}
|
||||||
<Space>
|
|
||||||
<BookOutlined
|
|
||||||
style={{ fontSize: '16px', color: '#1890ff' }}
|
|
||||||
/>
|
|
||||||
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
|
||||||
Handling Guideline
|
|
||||||
</Text>
|
|
||||||
</Space>
|
|
||||||
</Card>
|
|
||||||
</Col>
|
|
||||||
<Col xs={24} md={8}>
|
|
||||||
<Card
|
|
||||||
hoverable
|
|
||||||
bodyStyle={{ padding: '12px', textAlign: 'center' }}
|
|
||||||
>
|
|
||||||
<Space>
|
|
||||||
<ToolOutlined
|
|
||||||
style={{ fontSize: '16px', color: '#1890ff' }}
|
|
||||||
/>
|
|
||||||
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
|
||||||
Spare Part
|
|
||||||
</Text>
|
|
||||||
</Space>
|
|
||||||
</Card>
|
|
||||||
</Col>
|
|
||||||
<Col xs={24} md={8}>
|
|
||||||
<Card bodyStyle={{ padding: '12px', textAlign: 'center' }}>
|
|
||||||
<Space>
|
|
||||||
<HistoryOutlined
|
|
||||||
style={{ fontSize: '16px', color: '#1890ff' }}
|
|
||||||
/>
|
|
||||||
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
|
||||||
Log Activity
|
|
||||||
</Text>
|
|
||||||
</Space>
|
|
||||||
</Card>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
|
|
||||||
<Row gutter={[8, 8]} style={{ marginTop: '-12px' }}>
|
|
||||||
<Col xs={24} md={8}>
|
|
||||||
<Card
|
|
||||||
size="small"
|
|
||||||
title="Guideline Documents"
|
|
||||||
style={{ height: '100%' }}
|
|
||||||
>
|
|
||||||
<Space
|
|
||||||
direction="vertical"
|
|
||||||
size="small"
|
|
||||||
style={{ width: '100%' }}
|
|
||||||
>
|
>
|
||||||
{notification.error_code?.solution &&
|
<Space>
|
||||||
notification.error_code.solution.length > 0 ? (
|
<BookOutlined
|
||||||
<>
|
style={{ fontSize: '16px', color: '#1890ff' }}
|
||||||
{notification.error_code.solution
|
/>
|
||||||
.filter((sol) => sol.is_active) // Hanya tampilkan solusi yang aktif
|
<Text
|
||||||
.map((sol, index) => (
|
strong
|
||||||
<div
|
style={{ fontSize: '16px', color: '#262626' }}
|
||||||
key={
|
>
|
||||||
sol.brand_code_solution_id || index
|
Handling Guideline
|
||||||
}
|
</Text>
|
||||||
>
|
</Space>
|
||||||
{sol.path_document ? (
|
|
||||||
<Card
|
<Space
|
||||||
size="small"
|
direction="vertical"
|
||||||
bodyStyle={{
|
size="small"
|
||||||
padding: '8px 12px',
|
style={{ width: '100%' }}
|
||||||
marginBottom: '4px',
|
>
|
||||||
}}
|
{notification.error_code?.solution &&
|
||||||
hoverable
|
notification.error_code.solution.length > 0 ? (
|
||||||
extra={
|
<>
|
||||||
<Text
|
{notification.error_code.solution
|
||||||
type="secondary"
|
.filter((sol) => sol.is_active) // Hanya tampilkan solusi yang aktif
|
||||||
style={{
|
.map((sol, index) => (
|
||||||
fontSize: '10px',
|
<div
|
||||||
}}
|
key={
|
||||||
>
|
sol.brand_code_solution_id ||
|
||||||
PDF
|
index
|
||||||
</Text>
|
}
|
||||||
}
|
>
|
||||||
>
|
{sol.path_document ? (
|
||||||
<div
|
<Card
|
||||||
style={{
|
size="small"
|
||||||
display: 'flex',
|
bodyStyle={{
|
||||||
justifyContent:
|
padding: '8px 12px',
|
||||||
'space-between',
|
marginBottom: '4px',
|
||||||
alignItems: 'center',
|
|
||||||
}}
|
}}
|
||||||
>
|
hoverable
|
||||||
<div>
|
extra={
|
||||||
<Text
|
<Text
|
||||||
|
type="secondary"
|
||||||
style={{
|
style={{
|
||||||
fontSize:
|
fontSize:
|
||||||
'12px',
|
'10px',
|
||||||
color: '#262626',
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<FilePdfOutlined
|
PDF
|
||||||
style={{
|
|
||||||
marginRight:
|
|
||||||
'8px',
|
|
||||||
}}
|
|
||||||
/>{' '}
|
|
||||||
{sol.file_upload_name ||
|
|
||||||
'Solution Document.pdf'}
|
|
||||||
</Text>
|
</Text>
|
||||||
<Link
|
}
|
||||||
href={sol.path_document.replace(
|
>
|
||||||
'/detail-notification/pdf/',
|
|
||||||
'/notification-detail/pdf/'
|
|
||||||
)}
|
|
||||||
target="_blank"
|
|
||||||
style={{
|
|
||||||
fontSize:
|
|
||||||
'12px',
|
|
||||||
display:
|
|
||||||
'block',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
lihat disini
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
) : null}
|
|
||||||
{sol.type_solution === 'text' &&
|
|
||||||
sol.text_solution ? (
|
|
||||||
<Card
|
|
||||||
size="small"
|
|
||||||
title={
|
|
||||||
<Text strong>
|
|
||||||
{sol.solution_name}:
|
|
||||||
</Text>
|
|
||||||
}
|
|
||||||
bodyStyle={{
|
|
||||||
padding: '8px 12px',
|
|
||||||
marginBottom: '4px',
|
|
||||||
}}
|
|
||||||
extra={
|
|
||||||
<Text
|
|
||||||
type="secondary"
|
|
||||||
style={{
|
|
||||||
fontSize: '10px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{sol.type_solution.toUpperCase()}
|
|
||||||
</Text>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
marginTop: '4px',
|
display: 'flex',
|
||||||
|
justifyContent:
|
||||||
|
'space-between',
|
||||||
|
alignItems:
|
||||||
|
'center',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{sol.text_solution}
|
<div>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize:
|
||||||
|
'12px',
|
||||||
|
color: '#262626',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FilePdfOutlined
|
||||||
|
style={{
|
||||||
|
marginRight:
|
||||||
|
'8px',
|
||||||
|
}}
|
||||||
|
/>{' '}
|
||||||
|
{sol.file_upload_name ||
|
||||||
|
'Solution Document.pdf'}
|
||||||
|
</Text>
|
||||||
|
<Link
|
||||||
|
href={sol.path_document.replace(
|
||||||
|
'/detail-notification/pdf/',
|
||||||
|
'/notification-detail/pdf/'
|
||||||
|
)}
|
||||||
|
target="_blank"
|
||||||
|
style={{
|
||||||
|
fontSize:
|
||||||
|
'12px',
|
||||||
|
display:
|
||||||
|
'block',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
lihat disini
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Card>
|
||||||
</Card>
|
) : null}
|
||||||
) : null}
|
{sol.type_solution === 'text' &&
|
||||||
</div>
|
sol.text_solution ? (
|
||||||
))}
|
<Card
|
||||||
</>
|
size="small"
|
||||||
) : (
|
title={
|
||||||
<div
|
<Text strong>
|
||||||
style={{
|
{sol.solution_name}:
|
||||||
textAlign: 'center',
|
</Text>
|
||||||
padding: '20px',
|
}
|
||||||
color: '#8c8c8c',
|
bodyStyle={{
|
||||||
}}
|
padding: '8px 12px',
|
||||||
>
|
marginBottom: '4px',
|
||||||
Tidak ada dokumen solusi tersedia
|
}}
|
||||||
</div>
|
extra={
|
||||||
)}
|
<Text
|
||||||
</Space>
|
type="secondary"
|
||||||
</Card>
|
style={{
|
||||||
|
fontSize:
|
||||||
|
'10px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{sol.type_solution.toUpperCase()}
|
||||||
|
</Text>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
marginTop:
|
||||||
|
'4px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{sol.text_solution}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
textAlign: 'center',
|
||||||
|
padding: '20px',
|
||||||
|
color: '#8c8c8c',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Tidak ada dokumen solusi tersedia
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Space>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs={24} md={8}>
|
<Col xs={24} md={8}>
|
||||||
<Card
|
<div>
|
||||||
size="small"
|
<Card
|
||||||
title="Required Spare Parts"
|
hoverable
|
||||||
style={{ height: '100%' }}
|
bodyStyle={{ padding: '12px'}}
|
||||||
>
|
|
||||||
<Space
|
|
||||||
direction="vertical"
|
|
||||||
size="small"
|
|
||||||
style={{ width: '100%' }}
|
|
||||||
>
|
>
|
||||||
{notification.spareparts &&
|
<Space>
|
||||||
notification.spareparts.length > 0 ? (
|
<ToolOutlined
|
||||||
notification.spareparts.map((sparepart, index) => (
|
style={{ fontSize: '16px', color: '#1890ff' }}
|
||||||
<Card
|
/>
|
||||||
size="small"
|
<Text
|
||||||
key={index}
|
strong
|
||||||
bodyStyle={{ padding: '12px' }}
|
style={{ fontSize: '16px', color: '#262626' }}
|
||||||
hoverable
|
>
|
||||||
>
|
Spare Part
|
||||||
<Row gutter={16} align="top">
|
</Text>
|
||||||
<Col
|
</Space>
|
||||||
span={7}
|
|
||||||
style={{ textAlign: 'center' }}
|
<Space
|
||||||
>
|
direction="vertical"
|
||||||
<div
|
size="small"
|
||||||
style={{
|
style={{ width: '100%' }}
|
||||||
width: '100%',
|
>
|
||||||
height: '60px',
|
{notification.spareparts &&
|
||||||
backgroundColor: '#f0f0f0',
|
notification.spareparts.length > 0 ? (
|
||||||
display: 'flex',
|
notification.spareparts.map((sparepart, index) => (
|
||||||
alignItems: 'center',
|
<Card
|
||||||
justifyContent: 'center',
|
size="small"
|
||||||
borderRadius: '4px',
|
key={index}
|
||||||
marginBottom: '8px',
|
bodyStyle={{ padding: '12px' }}
|
||||||
}}
|
hoverable
|
||||||
|
>
|
||||||
|
<Row gutter={16} align="top">
|
||||||
|
<Col
|
||||||
|
span={7}
|
||||||
|
style={{ textAlign: 'center' }}
|
||||||
>
|
>
|
||||||
<ToolOutlined
|
|
||||||
style={{
|
|
||||||
fontSize: '24px',
|
|
||||||
color: '#bfbfbf',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
fontSize: '12px',
|
|
||||||
color:
|
|
||||||
sparepart.sparepart_stok ===
|
|
||||||
'Available' ||
|
|
||||||
sparepart.sparepart_stok ===
|
|
||||||
'available'
|
|
||||||
? '#52c41a'
|
|
||||||
: '#ff4d4f',
|
|
||||||
fontWeight: 500,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{sparepart.sparepart_stok}
|
|
||||||
</Text>
|
|
||||||
</Col>
|
|
||||||
<Col span={17}>
|
|
||||||
<Space
|
|
||||||
direction="vertical"
|
|
||||||
size={4}
|
|
||||||
style={{ width: '100%' }}
|
|
||||||
>
|
|
||||||
<Text strong>
|
|
||||||
{sparepart.sparepart_name}
|
|
||||||
</Text>
|
|
||||||
<Paragraph
|
|
||||||
style={{
|
|
||||||
fontSize: '12px',
|
|
||||||
margin: 0,
|
|
||||||
color: '#595959',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{sparepart.sparepart_description ||
|
|
||||||
'Deskripsi tidak tersedia'}
|
|
||||||
</Paragraph>
|
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
border: '1px solid #d9d9d9',
|
width: '100%',
|
||||||
|
height: '60px',
|
||||||
|
backgroundColor: '#f0f0f0',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
borderRadius: '4px',
|
borderRadius: '4px',
|
||||||
padding: '4px 8px',
|
marginBottom: '8px',
|
||||||
fontSize: '11px',
|
|
||||||
color: '#8c8c8c',
|
|
||||||
marginTop: '8px',
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Kode: {sparepart.sparepart_code}{' '}
|
<ToolOutlined
|
||||||
| Qty: {sparepart.sparepart_qty}{' '}
|
style={{
|
||||||
| Unit:{' '}
|
fontSize: '24px',
|
||||||
{sparepart.sparepart_unit}
|
color: '#bfbfbf',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Space>
|
<Text
|
||||||
</Col>
|
style={{
|
||||||
</Row>
|
fontSize: '12px',
|
||||||
</Card>
|
color:
|
||||||
))
|
sparepart.sparepart_stok ===
|
||||||
) : (
|
'Available' ||
|
||||||
<div
|
sparepart.sparepart_stok ===
|
||||||
style={{
|
'available'
|
||||||
textAlign: 'center',
|
? '#52c41a'
|
||||||
padding: '20px',
|
: '#ff4d4f',
|
||||||
color: '#8c8c8c',
|
fontWeight: 500,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Tidak ada spare parts terkait
|
{sparepart.sparepart_stok}
|
||||||
</div>
|
</Text>
|
||||||
)}
|
</Col>
|
||||||
</Space>
|
<Col span={17}>
|
||||||
</Card>
|
<Space
|
||||||
|
direction="vertical"
|
||||||
|
size={4}
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
>
|
||||||
|
<Text strong>
|
||||||
|
{sparepart.sparepart_name}
|
||||||
|
</Text>
|
||||||
|
<Paragraph
|
||||||
|
style={{
|
||||||
|
fontSize: '12px',
|
||||||
|
margin: 0,
|
||||||
|
color: '#595959',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{sparepart.sparepart_description ||
|
||||||
|
'Deskripsi tidak tersedia'}
|
||||||
|
</Paragraph>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
border: '1px solid #d9d9d9',
|
||||||
|
borderRadius: '4px',
|
||||||
|
padding: '4px 8px',
|
||||||
|
fontSize: '11px',
|
||||||
|
color: '#8c8c8c',
|
||||||
|
marginTop: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Kode:{' '}
|
||||||
|
{sparepart.sparepart_code} |
|
||||||
|
Qty:{' '}
|
||||||
|
{sparepart.sparepart_qty} |
|
||||||
|
Unit:{' '}
|
||||||
|
{sparepart.sparepart_unit}
|
||||||
|
</div>
|
||||||
|
</Space>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Card>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
textAlign: 'center',
|
||||||
|
padding: '20px',
|
||||||
|
color: '#8c8c8c',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Tidak ada spare parts terkait
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Space>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs={24} md={8}>
|
<Col xs={24} md={8}>
|
||||||
<Card size="small" style={{ height: '100%' }}>
|
<div>
|
||||||
<Space
|
<Card bodyStyle={{ padding: '12px'}}>
|
||||||
direction="vertical"
|
<Space>
|
||||||
size="small"
|
<HistoryOutlined
|
||||||
style={{ width: '100%' }}
|
style={{ fontSize: '16px', color: '#1890ff' }}
|
||||||
>
|
/>
|
||||||
<Card
|
<Text
|
||||||
size="small"
|
strong
|
||||||
bodyStyle={{
|
style={{ fontSize: '16px', color: '#262626' }}
|
||||||
padding: '8px 12px',
|
|
||||||
backgroundColor: isAddingLog ? '#fafafa' : '#fff',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Space
|
|
||||||
direction="vertical"
|
|
||||||
style={{ width: '100%' }}
|
|
||||||
size="small"
|
|
||||||
>
|
>
|
||||||
{isAddingLog && (
|
Log Activity
|
||||||
<>
|
</Text>
|
||||||
<Text strong style={{ fontSize: '12px' }}>
|
</Space>
|
||||||
Add New Log / Update Progress
|
|
||||||
</Text>
|
<Space
|
||||||
<Input.TextArea
|
direction="vertical"
|
||||||
rows={2}
|
size="small"
|
||||||
placeholder="Tuliskan update penanganan di sini..."
|
style={{ width: '100%' }}
|
||||||
value={newLogDescription}
|
>
|
||||||
onChange={(e) =>
|
|
||||||
setNewLogDescription(e.target.value)
|
|
||||||
}
|
|
||||||
disabled={submitLoading}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<Button
|
|
||||||
type={isAddingLog ? 'primary' : 'dashed'}
|
|
||||||
size="small"
|
|
||||||
block
|
|
||||||
icon={
|
|
||||||
submitLoading ? (
|
|
||||||
<LoadingOutlined />
|
|
||||||
) : (
|
|
||||||
!isAddingLog && <PlusOutlined />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
onClick={
|
|
||||||
isAddingLog
|
|
||||||
? handleSubmitLog
|
|
||||||
: () => setIsAddingLog(true)
|
|
||||||
}
|
|
||||||
loading={submitLoading}
|
|
||||||
disabled={submitLoading}
|
|
||||||
>
|
|
||||||
{isAddingLog ? 'Submit Log' : 'Add Log'}
|
|
||||||
</Button>
|
|
||||||
{isAddingLog && (
|
|
||||||
<Button
|
|
||||||
size="small"
|
|
||||||
block
|
|
||||||
onClick={() => {
|
|
||||||
setIsAddingLog(false);
|
|
||||||
setNewLogDescription('');
|
|
||||||
}}
|
|
||||||
disabled={submitLoading}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</Space>
|
|
||||||
</Card>
|
|
||||||
{logHistoryData.map((log) => (
|
|
||||||
<Card
|
<Card
|
||||||
key={log.id}
|
|
||||||
size="small"
|
size="small"
|
||||||
bodyStyle={{
|
bodyStyle={{
|
||||||
padding: '8px 12px',
|
padding: '8px 12px',
|
||||||
|
backgroundColor: isAddingLog
|
||||||
|
? '#fafafa'
|
||||||
|
: '#fff',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Paragraph
|
<Space
|
||||||
style={{ fontSize: '12px', margin: 0 }}
|
direction="vertical"
|
||||||
ellipsis={{ rows: 2 }}
|
style={{ width: '100%' }}
|
||||||
|
size="small"
|
||||||
>
|
>
|
||||||
<Text strong>{log.addedBy.name}:</Text>{' '}
|
{isAddingLog && (
|
||||||
{log.description}
|
<>
|
||||||
</Paragraph>
|
<Text
|
||||||
<Text type="secondary" style={{ fontSize: '11px' }}>
|
strong
|
||||||
{log.timestamp}
|
style={{ fontSize: '12px' }}
|
||||||
</Text>
|
>
|
||||||
|
Add New Log / Update Progress
|
||||||
|
</Text>
|
||||||
|
<Input.TextArea
|
||||||
|
rows={2}
|
||||||
|
placeholder="Tuliskan update penanganan di sini..."
|
||||||
|
value={newLogDescription}
|
||||||
|
onChange={(e) =>
|
||||||
|
setNewLogDescription(
|
||||||
|
e.target.value
|
||||||
|
)
|
||||||
|
}
|
||||||
|
disabled={submitLoading}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
type={isAddingLog ? 'primary' : 'dashed'}
|
||||||
|
size="small"
|
||||||
|
block
|
||||||
|
icon={
|
||||||
|
submitLoading ? (
|
||||||
|
<LoadingOutlined />
|
||||||
|
) : (
|
||||||
|
!isAddingLog && <PlusOutlined />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
onClick={
|
||||||
|
isAddingLog
|
||||||
|
? handleSubmitLog
|
||||||
|
: () => setIsAddingLog(true)
|
||||||
|
}
|
||||||
|
loading={submitLoading}
|
||||||
|
disabled={submitLoading}
|
||||||
|
>
|
||||||
|
{isAddingLog ? 'Submit Log' : 'Add Log'}
|
||||||
|
</Button>
|
||||||
|
{isAddingLog && (
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
block
|
||||||
|
onClick={() => {
|
||||||
|
setIsAddingLog(false);
|
||||||
|
setNewLogDescription('');
|
||||||
|
}}
|
||||||
|
disabled={submitLoading}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</Space>
|
||||||
</Card>
|
</Card>
|
||||||
))}
|
{logHistoryData.map((log) => (
|
||||||
</Space>
|
<Card
|
||||||
</Card>
|
key={log.id}
|
||||||
|
size="small"
|
||||||
|
bodyStyle={{
|
||||||
|
padding: '8px 12px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Paragraph
|
||||||
|
style={{ fontSize: '12px', margin: 0 }}
|
||||||
|
// ellipsis={{ rows: 2 }}
|
||||||
|
>
|
||||||
|
<Text strong>{log.addedBy.name}:</Text>{' '}
|
||||||
|
{log.description}
|
||||||
|
</Paragraph>
|
||||||
|
<Text
|
||||||
|
type="secondary"
|
||||||
|
style={{ fontSize: '11px' }}
|
||||||
|
>
|
||||||
|
{log.timestamp}
|
||||||
|
</Text>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</Space>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</Space>
|
</Space>
|
||||||
|
|||||||
Reference in New Issue
Block a user