```
ERROR in src/pages/Assets/AssetGroups.tsx:273:11
TS2322: Type '(newTargetKeys: string[]) => void' is not assignable to type '(targetKeys: Key[], direction: TransferDirection, moveKeys: Key[]) => void'.
  Types of parameters 'newTargetKeys' and 'targetKeys' are incompatible.
    Type 'Key[]' is not assignable to type 'string[]'.
      Type 'Key' is not assignable to type 'string'.
        Type 'number' is not assignable to type 'string'.
    271 |           titles={['Available Assets', 'Group Members']}
    272 |           targetKeys={targetKeys}
  > 273 |           onChange={handleChange}
        |           ^^^^^^^^
    274 |           render={item => `${item.hostname} (${item.ip_address})`}
    275 |           rowKey={item => item.asset_id.toString()}
    276 |           listStyle={{

// src/pages/Assets/AssetGroups.tsx
import React, { useState, useEffect } from 'react';
import {
  Card, Table, Button, Space, Modal, Form,
  Input, Select, Tag, Popconfirm, message,
  Transfer, Typography, Spin
} from 'antd';
import {
  PlusOutlined, EditOutlined, DeleteOutlined,
  TeamOutlined, DesktopOutlined
} from '@ant-design/icons';
import { assetAPI } from '../../services/api';

const { TextArea } = Input;
const { Text } = Typography;

const AssetGroups: React.FC = () => {
  const [groups, setGroups] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [modalVisible, setModalVisible] = useState(false);
  const [editingGroup, setEditingGroup] = useState<any>(null);
  const [form] = Form.useForm();
  const [selectedGroup, setSelectedGroup] = useState<any>(null);
  const [assetsModalVisible, setAssetsModalVisible] = useState(false);

  useEffect(() => {
    fetchGroups();
  }, []);

  const fetchGroups = async () => {
    setLoading(true);
    try {
      const response = await assetAPI.getAssetGroups();
      setGroups(response.data);
    } catch (error) {
      message.error('Failed to fetch asset groups');
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async (values: any) => {
    try {
      if (editingGroup) {
        await assetAPI.updateAssetGroup(editingGroup.group_id, values);
        message.success('Group updated successfully');
      } else {
        await assetAPI.createAssetGroup(values);
        message.success('Group created successfully');
      }
      setModalVisible(false);
      form.resetFields();
      fetchGroups();
    } catch (error) {
      message.error('Operation failed');
    }
  };

  const handleDelete = async (groupId: number) => {
    try {
      await assetAPI.deleteAssetGroup(groupId);
      message.success('Group deleted successfully');
      fetchGroups();
    } catch (error) {
      message.error('Failed to delete group');
    }
  };

  const columns = [
    {
      title: 'Group Name',
      dataIndex: 'group_name',
      key: 'group_name',
      render: (name: string) => (
        <Space>
          <TeamOutlined />
          <Text strong>{name}</Text>
        </Space>
      ),
    },
    {
      title: 'Description',
      dataIndex: 'description',
      key: 'description',
      ellipsis: true,
    },
    {
      title: 'Assets',
      dataIndex: 'asset_count',
      key: 'asset_count',
      render: (count: number) => (
        <Tag icon={<DesktopOutlined />}>{count} assets</Tag>
      ),
    },
    {
      title: 'Created By',
      key: 'created_by',
      render: (_: any, record: any) => record.creator?.full_name,
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_: any, record: any) => (
        <Space>
          <Button
            size="small"
            onClick={() => {
              setSelectedGroup(record);
              setAssetsModalVisible(true);
            }}
          >
            Manage Assets
          </Button>
          <Button
            icon={<EditOutlined />}
            size="small"
            onClick={() => {
              setEditingGroup(record);
              form.setFieldsValue(record);
              setModalVisible(true);
            }}
          >
            Edit
          </Button>
          <Popconfirm
            title="Are you sure you want to delete this group?"
            onConfirm={() => handleDelete(record.group_id)}
          >
            <Button
              icon={<DeleteOutlined />}
              size="small"
              danger
            >
              Delete
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <>
      <Card
        title="Asset Groups"
        extra={
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => {
              setEditingGroup(null);
              form.resetFields();
              setModalVisible(true);
            }}
          >
            Create Group
          </Button>
        }
      >
        <Table
          columns={columns}
          dataSource={groups}
          loading={loading}
          rowKey="group_id"
        />
      </Card>

      <Modal
        title={editingGroup ? 'Edit Group' : 'Create Group'}
        visible={modalVisible}
        onCancel={() => setModalVisible(false)}
        onOk={() => form.submit()}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
        >
          <Form.Item
            name="group_name"
            label="Group Name"
            rules={[{ required: true }]}
          >
            <Input placeholder="e.g., Production Servers" />
          </Form.Item>

          <Form.Item
            name="description"
            label="Description"
          >
            <TextArea
              rows={3}
              placeholder="Describe the purpose of this group"
            />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title={`Manage Assets - ${selectedGroup?.group_name}`}
        visible={assetsModalVisible}
        onCancel={() => setAssetsModalVisible(false)}
        width={800}
        footer={null}
      >
        <AssetGroupManager
          group={selectedGroup}
          onClose={() => {
            setAssetsModalVisible(false);
            fetchGroups();
          }}
        />
      </Modal>
    </>
  );
};

const AssetGroupManager: React.FC<{ group: any; onClose: () => void }> = ({ group, onClose }) => {
  const [targetKeys, setTargetKeys] = useState<string[]>([]);
  const [availableAssets, setAvailableAssets] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (group) {
      fetchAssets();
    }
  }, [group]);

  const fetchAssets = async () => {
    setLoading(true);
    try {
      const [allAssetsRes, groupAssetsRes] = await Promise.all([
        assetAPI.getAssets({ limit: 1000 }),
        assetAPI.getAssetGroupMembers(group.group_id)
      ]);
      
      setAvailableAssets(allAssetsRes.data.data);
      setTargetKeys(groupAssetsRes.data.map((a: any) => a.asset_id.toString()));
    } catch (error) {
      message.error('Failed to fetch assets');
    } finally {
      setLoading(false);
    }
  };

  const handleChange = (
    newTargetKeys: string[]
  ) => {
    setTargetKeys(newTargetKeys);
  };

  const handleSave = async () => {
    try {
      await assetAPI.updateAssetGroupMembers(group.group_id, {
        asset_ids: targetKeys.map(k => parseInt(k))
      });
      message.success('Group members updated successfully');
      onClose();
    } catch (error) {
      message.error('Failed to update group members');
    }
  };

  return (
    <Space direction="vertical" style={{ width: '100%' }}>
      {loading ? (
        <div style={{ textAlign: 'center', padding: '50px 0' }}>
          <Spin size="large" tip="Loading assets..." />
        </div>
      ) : (
        <Transfer
          dataSource={availableAssets}
          titles={['Available Assets', 'Group Members']}
          targetKeys={targetKeys}
          onChange={handleChange}
          render={item => `${item.hostname} (${item.ip_address})`}
          rowKey={item => item.asset_id.toString()}
          listStyle={{
            width: 350,
            height: 400,
          }}
          showSearch
          // Remove the loading prop
        />
      )}
      <Space style={{ float: 'right', marginTop: 16 }}>
        <Button onClick={onClose}>Cancel</Button>
        <Button type="primary" onClick={handleSave} loading={loading}>
          Save Changes
        </Button>
      </Space>
    </Space>
  );
};

export default AssetGroups;