repair: sparepart brand-device
This commit is contained in:
@@ -20,7 +20,6 @@ const CustomSparepartCard = ({
|
||||
}) => {
|
||||
const [previewModalVisible, setPreviewModalVisible] = useState(false);
|
||||
|
||||
// Construct image source with proper fallback
|
||||
const getImageSrc = () => {
|
||||
if (sparepart.sparepart_foto) {
|
||||
if (sparepart.sparepart_foto.startsWith('http')) {
|
||||
@@ -56,7 +55,6 @@ const CustomSparepartCard = ({
|
||||
const getCardActions = () => {
|
||||
const actions = [];
|
||||
|
||||
// Preview button
|
||||
if (showPreview) {
|
||||
actions.push(
|
||||
<Button
|
||||
@@ -73,7 +71,6 @@ const CustomSparepartCard = ({
|
||||
);
|
||||
}
|
||||
|
||||
// Delete button without confirmation
|
||||
if (showDelete && !isReadOnly) {
|
||||
actions.push(
|
||||
<Button
|
||||
@@ -93,7 +90,6 @@ const CustomSparepartCard = ({
|
||||
return actions;
|
||||
};
|
||||
|
||||
// Get card styling based on size
|
||||
const getCardStyle = () => {
|
||||
const baseStyle = {
|
||||
borderRadius: '12px',
|
||||
@@ -132,11 +128,13 @@ const CustomSparepartCard = ({
|
||||
<Card
|
||||
hoverable={!!onCardClick && !isReadOnly}
|
||||
style={getCardStyle()}
|
||||
bodyStyle={{
|
||||
padding: 0,
|
||||
height: 'calc(100% - 48px)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
styles={{
|
||||
body: {
|
||||
padding: 0,
|
||||
height: 'calc(100% - 48px)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}
|
||||
}}
|
||||
actions={getCardActions()}
|
||||
onClick={handleCardClick}
|
||||
@@ -244,55 +242,65 @@ const CustomSparepartCard = ({
|
||||
{sparepart.sparepart_name || sparepart.name || 'Unnamed'}
|
||||
</Title>
|
||||
|
||||
{size !== 'small' && (
|
||||
<>
|
||||
<Text
|
||||
type="secondary"
|
||||
{/* Stock and Quantity Information */}
|
||||
<div style={{ marginBottom: size === 'small' ? '6px' : '8px' }}>
|
||||
{/* Stock Status Tag */}
|
||||
<div style={{ marginBottom: '4px' }}>
|
||||
<Tag
|
||||
color={sparepart.sparepart_stok === 'Available' ? 'green' : 'red'}
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
display: 'block',
|
||||
marginBottom: '6px',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap'
|
||||
fontSize: size === 'small' ? '9px' : '10px',
|
||||
padding: '0 4px',
|
||||
margin: 0,
|
||||
height: 'auto'
|
||||
}}
|
||||
>
|
||||
Stock: {sparepart.sparepart_stock || sparepart.sparepart_stok || '0'} {sparepart.sparepart_unit || 'pcs'}
|
||||
{sparepart.sparepart_stok || 'Not Available'}
|
||||
</Tag>
|
||||
</div>
|
||||
|
||||
{/* Quantity */}
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: size === 'small' ? '10px' : '11px',
|
||||
fontWeight: 500,
|
||||
color: '#262626',
|
||||
marginRight: '4px'
|
||||
}}
|
||||
>
|
||||
qty:
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: size === 'small' ? '10px' : '11px',
|
||||
color: sparepart.sparepart_qty > 0 ? '#52c41a' : '#ff4d4f',
|
||||
fontWeight: 600
|
||||
}}
|
||||
>
|
||||
{sparepart.sparepart_qty || 0}
|
||||
{sparepart.sparepart_unit ? ` ${sparepart.sparepart_unit}` : ''}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '6px' }}>
|
||||
<Text
|
||||
code
|
||||
style={{
|
||||
fontSize: '11px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
padding: '2px 6px',
|
||||
borderRadius: '3px'
|
||||
}}
|
||||
>
|
||||
{sparepart.sparepart_code || 'No code'}
|
||||
</Text>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{size === 'small' && (
|
||||
<div style={{ marginBottom: size === 'small' ? '4px' : '6px' }}>
|
||||
<Text
|
||||
code
|
||||
style={{
|
||||
fontSize: '10px',
|
||||
fontSize: size === 'small' ? '10px' : '11px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
display: 'block',
|
||||
marginBottom: '4px'
|
||||
padding: '2px 6px',
|
||||
borderRadius: '3px'
|
||||
}}
|
||||
>
|
||||
{sparepart.sparepart_code || 'No code'}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(sparepart.sparepart_merk || sparepart.sparepart_model) && (
|
||||
<div style={{
|
||||
fontSize: size === 'small' ? '10px' : '11px',
|
||||
fontSize: size === 'small' ? '9px' : '10px',
|
||||
color: '#666',
|
||||
lineHeight: '1.4',
|
||||
marginBottom: '4px'
|
||||
@@ -332,23 +340,24 @@ const CustomSparepartCard = ({
|
||||
Close
|
||||
</Button>
|
||||
]}
|
||||
width={700}
|
||||
width={800}
|
||||
centered
|
||||
bodyStyle={{ padding: '24px' }}
|
||||
styles={{ body: { padding: '24px' } }}
|
||||
>
|
||||
<Row gutter={[24, 24]}>
|
||||
<Col span={8}>
|
||||
<Col span={10}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#f0f0f0',
|
||||
width: '200px',
|
||||
height: '200px',
|
||||
width: '220px',
|
||||
height: '220px',
|
||||
margin: '0 auto 16px',
|
||||
position: 'relative',
|
||||
borderRadius: '8px',
|
||||
borderRadius: '12px',
|
||||
overflow: 'hidden',
|
||||
border: '1px solid #E0E0E0',
|
||||
boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
|
||||
}}
|
||||
>
|
||||
<img
|
||||
@@ -360,116 +369,138 @@ const CustomSparepartCard = ({
|
||||
objectFit: 'cover'
|
||||
}}
|
||||
onError={(e) => {
|
||||
e.target.src = 'https://via.placeholder.com/200x200/d9d9d9/666666?text=No+Image';
|
||||
e.target.src = 'https://via.placeholder.com/220x220/d9d9d9/666666?text=No+Image';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Item Type Tag */}
|
||||
{sparepart.sparepart_item_type && (
|
||||
<Tag color="blue" style={{ marginTop: '12px' }}>
|
||||
{sparepart.sparepart_item_type}
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col span={16}>
|
||||
<div>
|
||||
<Title level={3} style={{ marginBottom: '16px' }}>
|
||||
{sparepart.sparepart_name || 'Unnamed'}
|
||||
</Title>
|
||||
|
||||
<Row gutter={[16, 16]} style={{ marginBottom: '16px' }}>
|
||||
<Col span={12}>
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
||||
Code:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '16px', marginLeft: '8px' }}>
|
||||
{sparepart.sparepart_code || 'N/A'}
|
||||
</Text>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
||||
Status:
|
||||
</Text>
|
||||
<Tag
|
||||
color={sparepart.is_active ? 'green' : 'red'}
|
||||
style={{ marginLeft: '8px', fontSize: '14px' }}
|
||||
>
|
||||
{sparepart.is_active ? 'Active' : 'Inactive'}
|
||||
</Tag>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{sparepart.sparepart_description && (
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
||||
Description:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '16px', marginLeft: '8px' }}>
|
||||
{sparepart.sparepart_description}
|
||||
</Text>
|
||||
<div style={{ marginBottom: '12px' }}>
|
||||
<Tag color="blue" style={{ fontSize: '14px', padding: '4px 12px' }}>
|
||||
{sparepart.sparepart_item_type}
|
||||
</Tag>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
||||
Stock:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '16px', marginLeft: '8px' }}>
|
||||
{sparepart.sparepart_stock || sparepart.sparepart_stok || '0'}
|
||||
{sparepart.sparepart_unit ? ` ${sparepart.sparepart_unit}` : ' units'}
|
||||
</Text>
|
||||
{/* Stock Status and Quantity */}
|
||||
<div style={{
|
||||
textAlign: 'left',
|
||||
background: '#f8f9fa',
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
marginTop: '25px'
|
||||
}}>
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Text strong style={{ fontSize: '14px', color: '#262626' }}>Stock Status:</Text>
|
||||
<Tag
|
||||
color={sparepart.sparepart_stok === 'Available' ? 'green' : 'red'}
|
||||
style={{ marginLeft: '8px', fontSize: '12px' }}
|
||||
>
|
||||
{sparepart.sparepart_stok || 'Not Available'}
|
||||
</Tag>
|
||||
</div>
|
||||
<div>
|
||||
<Text strong style={{ fontSize: '14px', color: '#262626' }}>Quantity:</Text>
|
||||
<Text style={{ fontSize: '14px', marginLeft: '8px', fontWeight: 600 }}>
|
||||
{sparepart.sparepart_qty || 0} {sparepart.sparepart_unit || ''}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col span={14}>
|
||||
<div>
|
||||
{/* Sparepart Name */}
|
||||
<Title level={3} style={{ marginBottom: '20px', color: '#262626' }}>
|
||||
{sparepart.sparepart_name || 'Unnamed'}
|
||||
</Title>
|
||||
|
||||
{/* Basic Information */}
|
||||
<div style={{ marginBottom: '24px' }}>
|
||||
<Row gutter={[16, 12]}>
|
||||
<Col span={24}>
|
||||
<div style={{
|
||||
padding: '12px',
|
||||
backgroundColor: '#fafafa',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #f0f0f0'
|
||||
}}>
|
||||
<Row gutter={16}>
|
||||
<Col span={8}>
|
||||
<div>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>Code</Text>
|
||||
<div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
|
||||
{sparepart.sparepart_code || 'N/A'}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<div>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>Brand</Text>
|
||||
<div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
|
||||
{sparepart.sparepart_merk || '-'}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<div>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>Unit</Text>
|
||||
<div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
|
||||
{sparepart.sparepart_unit || '-'}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
{sparepart.sparepart_model && (
|
||||
<Col span={24}>
|
||||
<div>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>Model</Text>
|
||||
<div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
|
||||
{sparepart.sparepart_model}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
)}
|
||||
|
||||
{sparepart.sparepart_description && (
|
||||
<Col span={24}>
|
||||
<div>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>Description</Text>
|
||||
<div style={{ fontSize: '15px', marginTop: '2px', lineHeight: '1.5' }}>
|
||||
{sparepart.sparepart_description}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<Row gutter={[16, 16]} style={{ marginBottom: '16px' }}>
|
||||
{sparepart.sparepart_merk && (
|
||||
<Col span={8}>
|
||||
<div>
|
||||
<Text strong style={{ fontSize: '14px', color: '#262626' }}>
|
||||
Brand:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '14px', marginLeft: '8px' }}>
|
||||
{sparepart.sparepart_merk}
|
||||
</Text>
|
||||
</div>
|
||||
</Col>
|
||||
)}
|
||||
{sparepart.sparepart_model && (
|
||||
<Col span={8}>
|
||||
<div>
|
||||
<Text strong style={{ fontSize: '14px', color: '#262626' }}>
|
||||
Model:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '14px', marginLeft: '8px' }}>
|
||||
{sparepart.sparepart_model}
|
||||
</Text>
|
||||
</div>
|
||||
</Col>
|
||||
)}
|
||||
{sparepart.sparepart_unit && (
|
||||
<Col span={8}>
|
||||
<div>
|
||||
<Text strong style={{ fontSize: '14px', color: '#262626' }}>
|
||||
Unit:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '14px', marginLeft: '8px' }}>
|
||||
{sparepart.sparepart_unit}
|
||||
</Text>
|
||||
</div>
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
|
||||
{sparepart.updated_at && (
|
||||
<div style={{ marginTop: '24px', paddingTop: '16px', borderTop: '1px solid #f0f0f0' }}>
|
||||
<Text type="secondary" style={{ fontSize: '14px' }}>
|
||||
Last updated: {dayjs(sparepart.updated_at).format('DD MMMM YYYY, HH:mm')}
|
||||
</Text>
|
||||
{/* Timeline Information */}
|
||||
{sparepart.created_at && (
|
||||
<div>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<div>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>Created</Text>
|
||||
<div style={{ fontSize: '13px', marginTop: '2px' }}>
|
||||
{dayjs(sparepart.created_at).format('DD MMM YYYY, HH:mm')}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<div>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>Last Updated</Text>
|
||||
<div style={{ fontSize: '13px', marginTop: '2px' }}>
|
||||
{dayjs(sparepart.updated_at).format('DD MMM YYYY, HH:mm')}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user