125 lines
4.5 KiB
TypeScript
125 lines
4.5 KiB
TypeScript
import React from 'react';
|
|
import { Card, Col, Row } from 'antd';
|
|
import {
|
|
ArrowRightOutlined,
|
|
BankOutlined,
|
|
DollarOutlined,
|
|
ExclamationCircleOutlined,
|
|
} from '@ant-design/icons';
|
|
import { useNavigate } from 'react-router';
|
|
import { MARGIN_BOTTOM_16_STYLE, TODO_CARD_DANGER, TODO_CARD_DRAFT, TODO_CARD_OK, TODO_CARD_WARN } from './Dashboard.types';
|
|
|
|
export const DashboardTodoCards: React.FC<{
|
|
absentCount: number;
|
|
draftCount: number;
|
|
draftTotal: number;
|
|
pendingDeposits: number;
|
|
}> = ({ absentCount, draftCount, draftTotal, pendingDeposits }) => {
|
|
const navigate = useNavigate();
|
|
return (
|
|
<Card title="待办与异常" style={MARGIN_BOTTOM_16_STYLE}>
|
|
<Row gutter={[16, 16]}>
|
|
<Col xs={24} sm={8}>
|
|
<Card
|
|
style={absentCount > 0 ? TODO_CARD_WARN : TODO_CARD_OK}
|
|
styles={{ body: { padding: 16 } }}
|
|
onClick={() => navigate('/attendance')}
|
|
>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<ExclamationCircleOutlined
|
|
style={{ fontSize: 28, color: absentCount > 0 ? '#FF9500' : '#999' }}
|
|
/>
|
|
<ArrowRightOutlined style={{ color: '#bbb' }} />
|
|
</div>
|
|
<div style={{ marginTop: 8 }}>
|
|
<div
|
|
style={{
|
|
fontSize: 24,
|
|
fontWeight: 700,
|
|
color: absentCount > 0 ? '#FF9500' : '#999',
|
|
}}
|
|
>
|
|
{absentCount}
|
|
</div>
|
|
<div style={{ fontSize: 13, color: '#666', marginTop: 2 }}>今日缺勤人数</div>
|
|
{absentCount > 0 ? (
|
|
<div style={{ fontSize: 12, color: '#FF9500', marginTop: 4 }}>需要关注</div>
|
|
) : (
|
|
<div style={{ fontSize: 12, color: '#34C759', marginTop: 4 }}>全员到齐</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</Col>
|
|
|
|
<Col xs={24} sm={8}>
|
|
<Card
|
|
style={draftCount > 0 ? TODO_CARD_DRAFT : TODO_CARD_OK}
|
|
styles={{ body: { padding: 16 } }}
|
|
onClick={() => navigate('/bills')}
|
|
>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<DollarOutlined
|
|
style={{ fontSize: 28, color: draftCount > 0 ? '#AF52DE' : '#999' }}
|
|
/>
|
|
<ArrowRightOutlined style={{ color: '#bbb' }} />
|
|
</div>
|
|
<div style={{ marginTop: 8 }}>
|
|
<div
|
|
style={{
|
|
fontSize: 24,
|
|
fontWeight: 700,
|
|
color: draftCount > 0 ? '#AF52DE' : '#999',
|
|
}}
|
|
>
|
|
{draftCount}
|
|
</div>
|
|
<div style={{ fontSize: 13, color: '#666', marginTop: 2 }}>待处理账单</div>
|
|
<div
|
|
style={{ fontSize: 12, color: draftCount > 0 ? '#AF52DE' : '#999', marginTop: 4 }}
|
|
>
|
|
{draftCount > 0 ? `合计 ¥${draftTotal.toLocaleString()}` : '暂无待处理'}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</Col>
|
|
|
|
<Col xs={24} sm={8}>
|
|
<Card
|
|
style={pendingDeposits > 0 ? TODO_CARD_DANGER : TODO_CARD_OK}
|
|
styles={{ body: { padding: 16 } }}
|
|
onClick={() => navigate('/deposits')}
|
|
>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<BankOutlined
|
|
style={{ fontSize: 28, color: pendingDeposits > 0 ? '#FF3B30' : '#999' }}
|
|
/>
|
|
<ArrowRightOutlined style={{ color: '#bbb' }} />
|
|
</div>
|
|
<div style={{ marginTop: 8 }}>
|
|
<div
|
|
style={{
|
|
fontSize: 24,
|
|
fontWeight: 700,
|
|
color: pendingDeposits > 0 ? '#FF3B30' : '#999',
|
|
}}
|
|
>
|
|
¥{pendingDeposits.toLocaleString()}
|
|
</div>
|
|
<div style={{ fontSize: 13, color: '#666', marginTop: 2 }}>待退押金</div>
|
|
<div
|
|
style={{
|
|
fontSize: 12,
|
|
color: pendingDeposits > 0 ? '#FF3B30' : '#999',
|
|
marginTop: 4,
|
|
}}
|
|
>
|
|
{pendingDeposits > 0 ? '需要处理' : '暂无待退'}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
</Card>
|
|
);
|
|
};
|