yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixing layout mobile detail notification

Browse Source
This commit is contained in:
Fachba
2026-01-08 14:17:38 +07:00
parent e08eaaa43e
commit d988d47e30
2 changed files with 375 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/notification/component/ListNotification.jsx
View File

@@ -697,8 +697,8 @@ const ListNotification = memo(function ListNotification(props) {
{/* Kolom Kanan: Card */}
<Col flex="auto">
<Card size="small" style={{ borderColor: '#91d5ff' }}>
<Row gutter={[16, 8]} align="middle">
<Col xs={24} md={12}>
<Row gutter={[16, 8]} align="top">
<Col xs={24} md={10}>
<Space direction="vertical" size={4}>
<Space>
<ClockCircleOutlined />
@@ -709,13 +709,16 @@ const ListNotification = memo(function ListNotification(props) {
Added at {log.timestamp}
</Text>
</Space>
<div>
<Text strong>
Added by: {log.addedBy.name}
{log.addedBy.name}
</Text>
</div>
<div>
<span
style={{
marginLeft: '8px',
border: '1px solid #52c41a',
color: '#52c41a',
padding: '2px 6px',
@@ -728,7 +731,8 @@ const ListNotification = memo(function ListNotification(props) {
</div>
</Space>
</Col>
<Col xs={24} md={12}>
<Col xs={24} md={14}>
<Text strong>Description:</Text>
<Paragraph
style={{
color: '#595959',

126
src/pages/notificationDetail/IndexNotificationDetail.jsx
View File

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