feat: 添加耗材操作日志修改记录功能; feat: 最大库存支持无限制选项; fix: 修复Ant Design Card组件bodyStyle废弃警告和字体预加载警告

2026-01-30 14:01:23 +08:00
parent 2023a3e0c5
commit 5e3ac98bac
10 changed files with 483 additions and 44 deletions
@@ -33,8 +33,9 @@ const Consumable = sequelize.define('Consumable', {
  },
  maxStock: {
    type: DataTypes.INTEGER,
-    allowNull: false,
-    defaultValue: 100
+    allowNull: true,
+    defaultValue: null,
+    comment: '最大库存，null表示无限制'
  },
  unitPrice: {
    type: DataTypes.DECIMAL(10, 2),
@@ -53,6 +53,31 @@ const ConsumableLog = sequelize.define('ConsumableLog', {
  relatedId: {
    type: DataTypes.STRING,
    comment: '关联ID（如订单号、盘点ID等）'
+  },
+  isEditable: {
+    type: DataTypes.BOOLEAN,
+    defaultValue: true,
+    comment: '是否可编辑（创建、导入的记录可编辑，系统生成的出入库记录不可编辑）'
+  },
+  originalLogId: {
+    type: DataTypes.INTEGER,
+    allowNull: true,
+    comment: '原始日志ID（用于追踪修改历史链）'
+  },
+  modifiedBy: {
+    type: DataTypes.STRING,
+    allowNull: true,
+    comment: '修改人'
+  },
+  modifiedAt: {
+    type: DataTypes.DATE,
+    allowNull: true,
+    comment: '修改时间'
+  },
+  modificationReason: {
+    type: DataTypes.STRING,
+    allowNull: true,
+    comment: '修改原因'
  }
 }, {
  tableName: 'consumable_logs',
@@ -62,7 +87,9 @@ const ConsumableLog = sequelize.define('ConsumableLog', {
    { fields: ['consumableId'] },
    { fields: ['operationType'] },
    { fields: ['createdAt'] },
-    { fields: ['consumableId', 'createdAt'] }
+    { fields: ['consumableId', 'createdAt'] },
+    { fields: ['originalLogId'] },
+    { fields: ['isEditable'] }
  ]
 });

@@ -252,21 +252,21 @@ router.get('/inout/records', async (req, res) => {
 router.post('/quick-inout', async (req, res) => {
  const MAX_RETRIES = 3;
  let attempt = 0;
-  
+
  while (attempt < MAX_RETRIES) {
    const transaction = await sequelize.transaction();
    try {
      const { consumableId, type, quantity, operator, reason, notes } = req.body;
-      
+
      const consumable = await Consumable.findByPk(consumableId, { transaction });
      if (!consumable) {
        await transaction.rollback();
        return res.status(404).json({ error: '耗材不存在' });
      }
-      
+
      const previousStock = parseFloat(consumable.currentStock);
      let newStock;
-      
+
      if (type === 'in') {
        newStock = previousStock + parseFloat(quantity);
      } else if (type === 'out') {
@@ -279,21 +279,21 @@ router.post('/quick-inout', async (req, res) => {
        await transaction.rollback();
        return res.status(400).json({ error: '操作类型无效' });
      }
-      
+
      const [affectedRows] = await Consumable.update(
-        { 
+        {
          currentStock: newStock,
          version: sequelize.literal('version + 1')
        },
-        { 
-          where: { 
+        {
+          where: {
            consumableId,
            version: consumable.version
          },
-          transaction 
+          transaction
        }
      );
-      
+
      if (affectedRows === 0) {
        await transaction.rollback();
        attempt++;
@@ -302,7 +302,7 @@ router.post('/quick-inout', async (req, res) => {
        }
        continue;
      }
-      
+
      const record = await ConsumableRecord.create({
        consumableId,
        type,
@@ -313,7 +313,8 @@ router.post('/quick-inout', async (req, res) => {
        reason,
        notes
      }, { transaction });
-      
+
+      // 系统生成的出入库记录不可编辑
      await ConsumableLog.create({
        consumableId,
        consumableName: consumable.name,
@@ -323,11 +324,12 @@ router.post('/quick-inout', async (req, res) => {
        currentStock: newStock,
        operator,
        reason,
-        notes
+        notes,
+        isEditable: false
      }, { transaction });
-      
+
      await transaction.commit();
-      
+
      res.json({
        message: '操作成功',
        record,
@@ -407,6 +409,7 @@ router.post('/inout', async (req, res) => {
        notes
      }, { transaction });
      
+      // 系统生成的出入库记录不可编辑
      await ConsumableLog.create({
        consumableId,
        consumableName: consumable.name,
@@ -416,11 +419,12 @@ router.post('/inout', async (req, res) => {
        currentStock: newStock,
        operator,
        reason,
-        notes
+        notes,
+        isEditable: false
      }, { transaction });
-      
+
      await transaction.commit();
-      
+
      res.json({
        message: '操作成功',
        record,
@@ -499,6 +503,7 @@ router.post('/adjust', async (req, res) => {
      
      const changeQuantity = newStock - previousStock;
      
+      // 系统生成的调整记录不可编辑
      await ConsumableLog.create({
        consumableId,
        consumableName: consumable.name,
@@ -508,7 +513,8 @@ router.post('/adjust', async (req, res) => {
        currentStock: newStock,
        operator,
        reason: reason || (adjustType === 'set' ? '库存调整为 ' + newStock : reason),
-        notes: adjustType === 'set' ? `库存从 ${previousStock} 调整为 ${newStock}` : notes
+        notes: adjustType === 'set' ? `库存从 ${previousStock} 调整为 ${newStock}` : notes,
+        isEditable: false
      }, { transaction });
      
      await transaction.commit();
@@ -755,23 +761,23 @@ router.delete('/:id', async (req, res) => {
      await transaction.rollback();
      return res.status(404).json({ error: '耗材不存在' });
    }
-    
+
    const consumableId = consumable.consumableId;
    const consumableName = consumable.name;
    const currentStock = consumable.currentStock;
-    
+
    await ConsumableRecord.destroy({
      where: { consumableId },
      transaction
    });
-    
+
    await ConsumableLog.destroy({
      where: { consumableId },
      transaction
    });
-    
+
    await consumable.destroy({ transaction });
-    
+
    await transaction.commit();
    res.json({ message: '删除成功' });
  } catch (error) {
@@ -780,4 +786,79 @@ router.delete('/:id', async (req, res) => {
  }
 });

+// 修改日志记录
+router.put('/logs/:id', async (req, res) => {
+  const transaction = await sequelize.transaction();
+  try {
+    const { id } = req.params;
+    const { reason, notes, operator, modificationReason } = req.body;
+
+    const log = await ConsumableLog.findByPk(id, { transaction });
+    if (!log) {
+      await transaction.rollback();
+      return res.status(404).json({ error: '日志记录不存在' });
+    }
+
+    // 检查是否可编辑
+    if (!log.isEditable) {
+      await transaction.rollback();
+      return res.status(403).json({ error: '该记录为系统自动生成，不可修改' });
+    }
+
+    // 保存原始日志ID（用于追踪修改历史）
+    const originalLogId = log.originalLogId || log.id;
+
+    // 更新当前记录，并标记为已修改
+    await log.update({
+      reason: reason !== undefined ? reason : log.reason,
+      notes: notes !== undefined ? notes : log.notes,
+      modifiedBy: operator || '系统',
+      modifiedAt: new Date(),
+      modificationReason: modificationReason || '用户修改'
+    }, { transaction });
+
+    await transaction.commit();
+
+    res.json({
+      message: '日志修改成功',
+      log: await ConsumableLog.findByPk(id)
+    });
+  } catch (error) {
+    await transaction.rollback();
+    res.status(500).json({ error: error.message });
+  }
+});
+
+// 获取日志修改历史
+router.get('/logs/:id/history', async (req, res) => {
+  try {
+    const { id } = req.params;
+
+    const log = await ConsumableLog.findByPk(id);
+    if (!log) {
+      return res.status(404).json({ error: '日志记录不存在' });
+    }
+
+    // 查询该日志的所有修改历史（包括原始记录）
+    const originalLogId = log.originalLogId || log.id;
+
+    const history = await ConsumableLog.findAll({
+      where: {
+        [Op.or]: [
+          { id: originalLogId },
+          { originalLogId: originalLogId }
+        ]
+      },
+      order: [['createdAt', 'ASC']]
+    });
+
+    res.json({
+      current: log,
+      history: history
+    });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
 module.exports = router;
@@ -0,0 +1,118 @@
+/**
+ * 耗材操作日志表结构迁移脚本
+ * 添加修改记录相关字段
+ */
+
+const { sequelize } = require('../db');
+
+async function migrate() {
+  try {
+    console.log('开始迁移耗材操作日志表...');
+
+    // 检查并添加 isEditable 字段
+    try {
+      await sequelize.query(`
+        ALTER TABLE consumable_logs ADD COLUMN isEditable BOOLEAN DEFAULT 1
+      `);
+      console.log('✓ 添加 isEditable 字段成功');
+    } catch (err) {
+      if (err.message.includes('duplicate column name')) {
+        console.log('✓ isEditable 字段已存在');
+      } else {
+        throw err;
+      }
+    }
+
+    // 检查并添加 originalLogId 字段
+    try {
+      await sequelize.query(`
+        ALTER TABLE consumable_logs ADD COLUMN originalLogId INTEGER
+      `);
+      console.log('✓ 添加 originalLogId 字段成功');
+    } catch (err) {
+      if (err.message.includes('duplicate column name')) {
+        console.log('✓ originalLogId 字段已存在');
+      } else {
+        throw err;
+      }
+    }
+
+    // 检查并添加 modifiedBy 字段
+    try {
+      await sequelize.query(`
+        ALTER TABLE consumable_logs ADD COLUMN modifiedBy VARCHAR(255)
+      `);
+      console.log('✓ 添加 modifiedBy 字段成功');
+    } catch (err) {
+      if (err.message.includes('duplicate column name')) {
+        console.log('✓ modifiedBy 字段已存在');
+      } else {
+        throw err;
+      }
+    }
+
+    // 检查并添加 modifiedAt 字段
+    try {
+      await sequelize.query(`
+        ALTER TABLE consumable_logs ADD COLUMN modifiedAt DATETIME
+      `);
+      console.log('✓ 添加 modifiedAt 字段成功');
+    } catch (err) {
+      if (err.message.includes('duplicate column name')) {
+        console.log('✓ modifiedAt 字段已存在');
+      } else {
+        throw err;
+      }
+    }
+
+    // 检查并添加 modificationReason 字段
+    try {
+      await sequelize.query(`
+        ALTER TABLE consumable_logs ADD COLUMN modificationReason VARCHAR(255)
+      `);
+      console.log('✓ 添加 modificationReason 字段成功');
+    } catch (err) {
+      if (err.message.includes('duplicate column name')) {
+        console.log('✓ modificationReason 字段已存在');
+      } else {
+        throw err;
+      }
+    }
+
+    // 创建索引
+    try {
+      await sequelize.query(`
+        CREATE INDEX IF NOT EXISTS idx_consumable_logs_original_log_id ON consumable_logs(originalLogId)
+      `);
+      console.log('✓ 创建 originalLogId 索引成功');
+    } catch (err) {
+      console.log('! originalLogId 索引创建失败:', err.message);
+    }
+
+    try {
+      await sequelize.query(`
+        CREATE INDEX IF NOT EXISTS idx_consumable_logs_is_editable ON consumable_logs(isEditable)
+      `);
+      console.log('✓ 创建 isEditable 索引成功');
+    } catch (err) {
+      console.log('! isEditable 索引创建失败:', err.message);
+    }
+
+    // 更新现有记录：将出入库、调整等系统生成的记录标记为不可编辑
+    const [result] = await sequelize.query(`
+      UPDATE consumable_logs
+      SET isEditable = 0
+      WHERE operationType IN ('in', 'out', 'adjust')
+        AND (isEditable IS NULL OR isEditable = 1)
+    `);
+    console.log(`✓ 更新 ${result.changes || 0} 条系统生成记录为不可编辑状态`);
+
+    console.log('\n迁移完成！');
+    process.exit(0);
+  } catch (error) {
+    console.error('迁移失败:', error);
+    process.exit(1);
+  }
+}
+
+migrate();
@@ -4,8 +4,6 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IDC设备管理系统</title>
-  <!-- 预加载字体，确保本地资源可用 -->
-  <link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>
 </head>
 <body>
  <div id="root"></div>
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Table, Card, Space, Select, DatePicker, Input, Tag, Button, message, Modal, Upload, Radio, Dropdown } from 'antd';
-import { HistoryOutlined, SearchOutlined, FileTextOutlined, DownloadOutlined, UploadOutlined, FileExcelOutlined, FileOutlined, DownOutlined } from '@ant-design/icons';
+import { Table, Card, Space, Select, DatePicker, Input, Tag, Button, message, Modal, Upload, Radio, Dropdown, Form, Tooltip, Timeline } from 'antd';
+import { HistoryOutlined, SearchOutlined, FileTextOutlined, DownloadOutlined, UploadOutlined, FileExcelOutlined, FileOutlined, DownOutlined, EditOutlined, EyeOutlined } from '@ant-design/icons';
 import axios from 'axios';
 import dayjs from 'dayjs';
 import * as XLSX from 'xlsx';
@@ -20,6 +20,13 @@ function ConsumableLogs() {
  const [importModalVisible, setImportModalVisible] = useState(false);
  const [importType, setImportType] = useState('excel');
  const [importing, setImporting] = useState(false);
+  const [editModalVisible, setEditModalVisible] = useState(false);
+  const [historyModalVisible, setHistoryModalVisible] = useState(false);
+  const [currentLog, setCurrentLog] = useState(null);
+  const [logHistory, setLogHistory] = useState([]);
+  const [editLoading, setEditLoading] = useState(false);
+  const [historyLoading, setHistoryLoading] = useState(false);
+  const [form] = Form.useForm();
  const fileInputRef = useRef(null);

  const fetchLogs = async (page = 1, pageSize = 10, currentFilters = filters) => {
@@ -147,6 +154,34 @@ function ConsumableLogs() {
      width: 200,
      render: (value) => value || '-',
      ellipsis: true
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 120,
+      fixed: 'right',
+      render: (_, record) => (
+        <Space>
+          {record.isEditable && (
+            <Tooltip title="编辑">
+              <Button
+                type="link"
+                size="small"
+                icon={<EditOutlined />}
+                onClick={() => handleEdit(record)}
+              />
+            </Tooltip>
+          )}
+          <Tooltip title="查看历史">
+            <Button
+              type="link"
+              size="small"
+              icon={<EyeOutlined />}
+              onClick={() => handleViewHistory(record)}
+            />
+          </Tooltip>
+        </Space>
+      )
    }
  ];

@@ -314,15 +349,66 @@ function ConsumableLogs() {
        '备注': '示例备注'
      }
    ];
-    
+
    const ws = XLSX.utils.json_to_sheet(template);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, '日志模板');
    XLSX.writeFile(wb, '耗材操作日志导入模板.xlsx');
-    
+
    message.success('模板下载成功');
  };

+  // 编辑日志
+  const handleEdit = (record) => {
+    setCurrentLog(record);
+    form.setFieldsValue({
+      reason: record.reason,
+      notes: record.notes,
+      modificationReason: ''
+    });
+    setEditModalVisible(true);
+  };
+
+  // 提交编辑
+  const handleEditSubmit = async (values) => {
+    if (!currentLog) return;
+
+    setEditLoading(true);
+    try {
+      const response = await axios.put(`/api/consumables/logs/${currentLog.id}`, {
+        reason: values.reason,
+        notes: values.notes,
+        operator: values.operator || '管理员',
+        modificationReason: values.modificationReason
+      });
+
+      message.success('日志修改成功');
+      setEditModalVisible(false);
+      fetchLogs(pagination.current, pagination.pageSize);
+    } catch (error) {
+      message.error(error.response?.data?.error || '修改失败');
+    } finally {
+      setEditLoading(false);
+    }
+  };
+
+  // 查看修改历史
+  const handleViewHistory = async (record) => {
+    setCurrentLog(record);
+    setHistoryModalVisible(true);
+    setHistoryLoading(true);
+
+    try {
+      const response = await axios.get(`/api/consumables/logs/${record.id}/history`);
+      setLogHistory(response.data.history || []);
+    } catch (error) {
+      message.error('获取修改历史失败');
+      setLogHistory([]);
+    } finally {
+      setHistoryLoading(false);
+    }
+  };
+
  return (
    <div>
      <Card 
@@ -462,6 +548,105 @@ function ConsumableLogs() {
          </ul>
        </div>
      </Modal>
+
+      {/* 编辑日志弹窗 */}
+      <Modal
+        title="编辑日志记录"
+        open={editModalVisible}
+        onCancel={() => {
+          setEditModalVisible(false);
+          form.resetFields();
+        }}
+        onOk={() => form.submit()}
+        confirmLoading={editLoading}
+        width={600}
+      >
+        <Form
+          form={form}
+          layout="vertical"
+          onFinish={handleEditSubmit}
+        >
+          <Form.Item
+            label="操作原因"
+            name="reason"
+          >
+            <Input.TextArea rows={2} placeholder="请输入操作原因" />
+          </Form.Item>
+          <Form.Item
+            label="备注"
+            name="notes"
+          >
+            <Input.TextArea rows={3} placeholder="请输入备注信息" />
+          </Form.Item>
+          <Form.Item
+            label="修改原因"
+            name="modificationReason"
+            rules={[{ required: true, message: '请输入修改原因' }]}
+          >
+            <Input.TextArea rows={2} placeholder="请输入修改原因（必填）" />
+          </Form.Item>
+          <Form.Item
+            label="修改人"
+            name="operator"
+          >
+            <Input placeholder="请输入修改人姓名" />
+          </Form.Item>
+        </Form>
+      </Modal>
+
+      {/* 修改历史弹窗 */}
+      <Modal
+        title="日志修改历史"
+        open={historyModalVisible}
+        onCancel={() => {
+          setHistoryModalVisible(false);
+          setLogHistory([]);
+        }}
+        footer={null}
+        width={700}
+      >
+        {historyLoading ? (
+          <div style={{ textAlign: 'center', padding: '40px' }}>加载中...</div>
+        ) : logHistory.length <= 1 ? (
+          <div style={{ textAlign: 'center', padding: '40px', color: '#888' }}>
+            该记录暂无修改历史
+          </div>
+        ) : (
+          <Timeline mode="left">
+            {logHistory.map((item, index) => (
+              <Timeline.Item
+                key={item.id}
+                color={index === logHistory.length - 1 ? 'green' : 'blue'}
+                label={dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}
+              >
+                <div style={{ marginBottom: 8 }}>
+                  <Tag color={getOperationTag(item.operationType).props.color}>
+                    {getOperationTag(item.operationType).props.children}
+                  </Tag>
+                  {item.modifiedBy && (
+                    <Tag color="orange">已修改</Tag>
+                  )}
+                </div>
+                <div style={{ fontSize: 12, color: '#666' }}>
+                  <p><strong>耗材:</strong> {item.consumableName} ({item.consumableId})</p>
+                  <p><strong>操作人:</strong> {item.operator}</p>
+                  {item.reason && <p><strong>原因:</strong> {item.reason}</p>}
+                  {item.notes && <p><strong>备注:</strong> {item.notes}</p>}
+                  {item.modifiedBy && (
+                    <>
+                      <p><strong>修改人:</strong> {item.modifiedBy}</p>
+                      <p><strong>修改时间:</strong> {dayjs(item.modifiedAt).format('YYYY-MM-DD HH:mm:ss')}</p>
+                      {item.modificationReason && (
+                        <p><strong>修改原因:</strong> {item.modificationReason}</p>
+                      )}
+                    </>
+                  )}
+                </div>
+              </Timeline.Item>
+            ))}
+          </Timeline>
+        )}
+      </Modal>
    </div>
  );
 }
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { Table, Button, Modal, Form, Input, Select, InputNumber, message, Card, Space, Popconfirm, Upload, Table as AntTable, Progress } from 'antd';
+import { Table, Button, Modal, Form, Input, Select, InputNumber, message, Card, Space, Popconfirm, Upload, Table as AntTable, Progress, Checkbox } from 'antd';
 import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, ExportOutlined, ImportOutlined, UploadOutlined, FileExcelOutlined, InboxOutlined } from '@ant-design/icons';
 import axios from 'axios';

@@ -32,6 +32,7 @@ function ConsumableManagement() {
  const [stockRecord, setStockRecord] = useState(null);
  const [stockType, setStockType] = useState('in');
  const [stockForm] = Form.useForm();
+  const [maxStockUnlimited, setMaxStockUnlimited] = useState(false);

  const fetchConsumables = useCallback(async (page = 1, pageSize = 10) => {
    try {
@@ -66,8 +67,14 @@ function ConsumableManagement() {
  const showModal = useCallback((consumable = null) => {
    setEditingConsumable(consumable);
    if (consumable) {
-      form.setFieldsValue(consumable);
+      const isUnlimited = consumable.maxStock === null || consumable.maxStock === undefined;
+      setMaxStockUnlimited(isUnlimited);
+      form.setFieldsValue({
+        ...consumable,
+        maxStock: isUnlimited ? undefined : consumable.maxStock
+      });
    } else {
+      setMaxStockUnlimited(true);
      form.resetFields();
    }
    setModalVisible(true);
@@ -80,12 +87,16 @@ function ConsumableManagement() {

  const handleSubmit = useCallback(async (values) => {
    try {
+      const submitData = {
+        ...values,
+        maxStock: maxStockUnlimited ? null : values.maxStock
+      };
      if (editingConsumable) {
-        await axios.put(`/api/consumables/${editingConsumable.consumableId}`, values);
+        await axios.put(`/api/consumables/${editingConsumable.consumableId}`, submitData);
        message.success('耗材更新成功');
      } else {
        await axios.post('/api/consumables', {
-          ...values,
+          ...submitData,
          consumableId: `CON${Date.now()}`
        });
        message.success('耗材创建成功');
@@ -97,7 +108,7 @@ function ConsumableManagement() {
      message.error(editingConsumable ? '耗材更新失败' : '耗材创建失败');
      console.error('提交失败:', error);
    }
-  }, [editingConsumable, fetchConsumables]);
+  }, [editingConsumable, fetchConsumables, maxStockUnlimited]);

  const handleDelete = useCallback(async (consumableId) => {
    try {
@@ -447,7 +458,8 @@ function ConsumableManagement() {
      title: '最大库存',
      dataIndex: 'maxStock',
      key: 'maxStock',
-      width: 100
+      width: 100,
+      render: (value) => value === null || value === undefined ? '无限制' : value
    },
    {
      title: '单价(元)',
@@ -579,8 +591,25 @@ function ConsumableManagement() {
            <Form.Item name="minStock" label="最小库存" rules={[{ required: true, message: '请输入最小库存' }]}>
              <InputNumber min={0} style={{ width: '100%' }} />
            </Form.Item>
-            <Form.Item name="maxStock" label="最大库存" rules={[{ required: true, message: '请输入最大库存' }]}>
-              <InputNumber min={0} style={{ width: '100%' }} />
+            <Form.Item label="最大库存">
+              <Space direction="vertical" style={{ width: '100%' }}>
+                <Checkbox 
+                  checked={maxStockUnlimited}
+                  onChange={(e) => {
+                    setMaxStockUnlimited(e.target.checked);
+                    if (e.target.checked) {
+                      form.setFieldsValue({ maxStock: undefined });
+                    }
+                  }}
+                >
+                  无限制
+                </Checkbox>
+                {!maxStockUnlimited && (
+                  <Form.Item name="maxStock" noStyle rules={[{ required: true, message: '请输入最大库存' }]}>
+                    <InputNumber min={0} style={{ width: '100%' }} placeholder="请输入最大库存" />
+                  </Form.Item>
+                )}
+              </Space>
            </Form.Item>
          </Space>
          <Form.Item name="unitPrice" label="单价(元)">
@@ -741,7 +741,7 @@ function Dashboard() {
          style={cardStyle}
          onMouseEnter={() => setHoveredCard(statKey)}
          onMouseLeave={() => setHoveredCard(null)}
-          bodyStyle={{ padding: 'clamp(16px, 3vw, 24px)' }}
+          styles={{ body: { padding: 'clamp(16px, 3vw, 24px)' } }}
        >
          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px' }}>
@@ -173,7 +173,7 @@ const RackCard = ({ rack, onEdit, onDelete, onView, selected, onSelect }) => {
      }}
      onClick={() => onSelect(rack.rackId)}
      onDoubleClick={() => onView(rack)}
-      bodyStyle={{ padding: '20px' }}
+      styles={{ body: { padding: '20px' } }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '16px' }}>
        <div>
@@ -163,7 +163,7 @@ const RoomCard = ({ room, onEdit, onDelete, onView, selected, onSelect }) => {
      }}
      onClick={() => onSelect(room.roomId)}
      onDoubleClick={() => onView(room)}
-      bodyStyle={{ padding: '20px' }}
+      styles={{ body: { padding: '20px' } }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '16px' }}>
        <div>