feat: deduct personal expenses from deposit refunds

apps/admin/src/pages/Deposits/index.tsx

@@ -37,6 +37,8 @@ const isFormValidationError = (error: unknown) =>
   && error !== null
   && Array.isArray((error as { errorFields?: unknown }).errorFields);
 
+const moneyNumber = (value: unknown) => Number(Number(value || 0).toFixed(2));
+
 const DepositsPage: React.FC = () => {
   const [data, setData] = useState<any[]>([]);
   const [students, setStudents] = useState<any[]>([]);
@@ -350,7 +352,38 @@ const DepositsPage: React.FC = () => {
       >
         <Form form={refundForm} layout="vertical">
           <div style={{ marginBottom: 16, padding: 12, background: '#f5f5f5', borderRadius: 8 }}>
-            当前可用押金: <strong>¥{Number(refundModal?.amount || 0).toFixed(2)}</strong>
+            <div>
+              当前可用押金:{' '}
+              <strong>¥{moneyNumber(refundModal?.amount).toFixed(2)}</strong>
+            </div>
+            <div style={{ marginTop: 4 }}>
+              未出账个人附加费:{' '}
+              <strong>¥{moneyNumber(refundModal?.personalExpenseAmount).toFixed(2)}</strong>
+            </div>
+            <div style={{ marginTop: 4 }}>
+              自动扣除:{' '}
+              <strong style={{ color: '#fa8c16' }}>
+                ¥
+                {Math.min(
+                  moneyNumber(refundModal?.amount),
+                  moneyNumber(refundModal?.personalExpenseAmount),
+                ).toFixed(2)}
+              </strong>
+            </div>
+            <div style={{ marginTop: 4 }}>
+              实际退还:{' '}
+              <strong style={{ color: '#52c41a' }}>
+                ¥
+                {Math.max(
+                  0,
+                  moneyNumber(refundModal?.amount) -
+                    Math.min(
+                      moneyNumber(refundModal?.amount),
+                      moneyNumber(refundModal?.personalExpenseAmount),
+                    ),
+                ).toFixed(2)}
+              </strong>
+            </div>
           </div>
           <Form.Item name="refundDate" label="退还日期" rules={[{ required: true }]}>
             <DatePicker style={{ width: '100%' }} placeholder="选择退还日期" format="YYYY-MM-DD" />