fixing layout mobile detail notification
This commit is contained in:
@@ -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,58 +542,25 @@ 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}>
|
||||||
|
<div>
|
||||||
<Card
|
<Card
|
||||||
hoverable
|
hoverable
|
||||||
bodyStyle={{ padding: '12px', textAlign: 'center' }}
|
bodyStyle={{ padding: '12px'}}
|
||||||
>
|
>
|
||||||
<Space>
|
<Space>
|
||||||
<BookOutlined
|
<BookOutlined
|
||||||
style={{ fontSize: '16px', color: '#1890ff' }}
|
style={{ fontSize: '16px', color: '#1890ff' }}
|
||||||
/>
|
/>
|
||||||
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
<Text
|
||||||
|
strong
|
||||||
|
style={{ fontSize: '16px', color: '#262626' }}
|
||||||
|
>
|
||||||
Handling Guideline
|
Handling Guideline
|
||||||
</Text>
|
</Text>
|
||||||
</Space>
|
</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
|
<Space
|
||||||
direction="vertical"
|
direction="vertical"
|
||||||
size="small"
|
size="small"
|
||||||
@@ -607,7 +574,8 @@ const NotificationDetailTab = (props) => {
|
|||||||
.map((sol, index) => (
|
.map((sol, index) => (
|
||||||
<div
|
<div
|
||||||
key={
|
key={
|
||||||
sol.brand_code_solution_id || index
|
sol.brand_code_solution_id ||
|
||||||
|
index
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{sol.path_document ? (
|
{sol.path_document ? (
|
||||||
@@ -622,7 +590,8 @@ const NotificationDetailTab = (props) => {
|
|||||||
<Text
|
<Text
|
||||||
type="secondary"
|
type="secondary"
|
||||||
style={{
|
style={{
|
||||||
fontSize: '10px',
|
fontSize:
|
||||||
|
'10px',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
PDF
|
PDF
|
||||||
@@ -634,7 +603,8 @@ const NotificationDetailTab = (props) => {
|
|||||||
display: 'flex',
|
display: 'flex',
|
||||||
justifyContent:
|
justifyContent:
|
||||||
'space-between',
|
'space-between',
|
||||||
alignItems: 'center',
|
alignItems:
|
||||||
|
'center',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
@@ -690,7 +660,8 @@ const NotificationDetailTab = (props) => {
|
|||||||
<Text
|
<Text
|
||||||
type="secondary"
|
type="secondary"
|
||||||
style={{
|
style={{
|
||||||
fontSize: '10px',
|
fontSize:
|
||||||
|
'10px',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{sol.type_solution.toUpperCase()}
|
{sol.type_solution.toUpperCase()}
|
||||||
@@ -700,7 +671,8 @@ const NotificationDetailTab = (props) => {
|
|||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
marginTop: '4px',
|
marginTop:
|
||||||
|
'4px',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{sol.text_solution}
|
{sol.text_solution}
|
||||||
@@ -724,13 +696,26 @@ const NotificationDetailTab = (props) => {
|
|||||||
)}
|
)}
|
||||||
</Space>
|
</Space>
|
||||||
</Card>
|
</Card>
|
||||||
|
</div>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs={24} md={8}>
|
<Col xs={24} md={8}>
|
||||||
|
<div>
|
||||||
<Card
|
<Card
|
||||||
size="small"
|
hoverable
|
||||||
title="Required Spare Parts"
|
bodyStyle={{ padding: '12px'}}
|
||||||
style={{ height: '100%' }}
|
|
||||||
>
|
>
|
||||||
|
<Space>
|
||||||
|
<ToolOutlined
|
||||||
|
style={{ fontSize: '16px', color: '#1890ff' }}
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
strong
|
||||||
|
style={{ fontSize: '16px', color: '#262626' }}
|
||||||
|
>
|
||||||
|
Spare Part
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
|
||||||
<Space
|
<Space
|
||||||
direction="vertical"
|
direction="vertical"
|
||||||
size="small"
|
size="small"
|
||||||
@@ -814,9 +799,11 @@ const NotificationDetailTab = (props) => {
|
|||||||
marginTop: '8px',
|
marginTop: '8px',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Kode: {sparepart.sparepart_code}{' '}
|
Kode:{' '}
|
||||||
| Qty: {sparepart.sparepart_qty}{' '}
|
{sparepart.sparepart_code} |
|
||||||
| Unit:{' '}
|
Qty:{' '}
|
||||||
|
{sparepart.sparepart_qty} |
|
||||||
|
Unit:{' '}
|
||||||
{sparepart.sparepart_unit}
|
{sparepart.sparepart_unit}
|
||||||
</div>
|
</div>
|
||||||
</Space>
|
</Space>
|
||||||
@@ -837,9 +824,23 @@ const NotificationDetailTab = (props) => {
|
|||||||
)}
|
)}
|
||||||
</Space>
|
</Space>
|
||||||
</Card>
|
</Card>
|
||||||
|
</div>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs={24} md={8}>
|
<Col xs={24} md={8}>
|
||||||
<Card size="small" style={{ height: '100%' }}>
|
<div>
|
||||||
|
<Card bodyStyle={{ padding: '12px'}}>
|
||||||
|
<Space>
|
||||||
|
<HistoryOutlined
|
||||||
|
style={{ fontSize: '16px', color: '#1890ff' }}
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
strong
|
||||||
|
style={{ fontSize: '16px', color: '#262626' }}
|
||||||
|
>
|
||||||
|
Log Activity
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
|
||||||
<Space
|
<Space
|
||||||
direction="vertical"
|
direction="vertical"
|
||||||
size="small"
|
size="small"
|
||||||
@@ -849,7 +850,9 @@ const NotificationDetailTab = (props) => {
|
|||||||
size="small"
|
size="small"
|
||||||
bodyStyle={{
|
bodyStyle={{
|
||||||
padding: '8px 12px',
|
padding: '8px 12px',
|
||||||
backgroundColor: isAddingLog ? '#fafafa' : '#fff',
|
backgroundColor: isAddingLog
|
||||||
|
? '#fafafa'
|
||||||
|
: '#fff',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Space
|
<Space
|
||||||
@@ -859,7 +862,10 @@ const NotificationDetailTab = (props) => {
|
|||||||
>
|
>
|
||||||
{isAddingLog && (
|
{isAddingLog && (
|
||||||
<>
|
<>
|
||||||
<Text strong style={{ fontSize: '12px' }}>
|
<Text
|
||||||
|
strong
|
||||||
|
style={{ fontSize: '12px' }}
|
||||||
|
>
|
||||||
Add New Log / Update Progress
|
Add New Log / Update Progress
|
||||||
</Text>
|
</Text>
|
||||||
<Input.TextArea
|
<Input.TextArea
|
||||||
@@ -867,7 +873,9 @@ const NotificationDetailTab = (props) => {
|
|||||||
placeholder="Tuliskan update penanganan di sini..."
|
placeholder="Tuliskan update penanganan di sini..."
|
||||||
value={newLogDescription}
|
value={newLogDescription}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
setNewLogDescription(e.target.value)
|
setNewLogDescription(
|
||||||
|
e.target.value
|
||||||
|
)
|
||||||
}
|
}
|
||||||
disabled={submitLoading}
|
disabled={submitLoading}
|
||||||
/>
|
/>
|
||||||
@@ -919,18 +927,22 @@ const NotificationDetailTab = (props) => {
|
|||||||
>
|
>
|
||||||
<Paragraph
|
<Paragraph
|
||||||
style={{ fontSize: '12px', margin: 0 }}
|
style={{ fontSize: '12px', margin: 0 }}
|
||||||
ellipsis={{ rows: 2 }}
|
// ellipsis={{ rows: 2 }}
|
||||||
>
|
>
|
||||||
<Text strong>{log.addedBy.name}:</Text>{' '}
|
<Text strong>{log.addedBy.name}:</Text>{' '}
|
||||||
{log.description}
|
{log.description}
|
||||||
</Paragraph>
|
</Paragraph>
|
||||||
<Text type="secondary" style={{ fontSize: '11px' }}>
|
<Text
|
||||||
|
type="secondary"
|
||||||
|
style={{ fontSize: '11px' }}
|
||||||
|
>
|
||||||
{log.timestamp}
|
{log.timestamp}
|
||||||
</Text>
|
</Text>
|
||||||
</Card>
|
</Card>
|
||||||
))}
|
))}
|
||||||
</Space>
|
</Space>
|
||||||
</Card>
|
</Card>
|
||||||
|
</div>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</Space>
|
</Space>
|
||||||
|
|||||||
Reference in New Issue
Block a user