The config-first web stack for
AI and humans

import { useState, useEffect } from 'react'; import { useQuery, useMutation } from '@tanstack/react-query'; import { Table, Card, Button, Modal, Form, Input, Select, message, Popconfirm, Space, Tag } from 'antd'; import { EditOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons'; interface User { id: string; name: string; email: string; role: 'admin' | 'user' | 'editor'; status: 'active' | 'inactive'; createdAt: Date; } const fetchUsers = async (): Promise<User[]> => { const res = await fetch('/api/users'); if (!res.ok) throw new Error('Failed to fetch users'); return res.json(); }; const updateUser = async (user: Partial<User> & { id: string }) => { const res = await fetch(`/api/users/${user.id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(user), }); if (!res.ok) throw new Error('Failed to update user'); return res.json(); }; const deleteUser = async (id: string) => { const res = await fetch(`/api/users/${id}`, { method: 'DELETE' }); if (!res.ok) throw new Error('Failed to delete user'); }; const createUser = async (user: Omit<User, 'id' | 'createdAt'>) => { const res = await fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(user), }); if (!res.ok) throw new Error('Failed to create user'); return res.json(); }; export function UserDashboard() { const [isModalOpen, setIsModalOpen] = useState(false); const [editingUser, setEditingUser] = useState<User | null>(null); const [form] = Form.useForm(); const { data: users, isLoading, error, refetch } = useQuery({ queryKey: ['users'], queryFn: fetchUsers, }); const updateMutation = useMutation({ mutationFn: updateUser, onSuccess: () => { message.success('User updated successfully'); refetch(); handleCloseModal(); }, onError: () => message.error('Failed to update user'), }); const deleteMutation = useMutation({ mutationFn: deleteUser, onSuccess: () => { message.success('User deleted successfully'); refetch(); }, onError: () => message.error('Failed to delete user'), }); const createMutation = useMutation({ mutationFn: createUser, onSuccess: () => { message.success('User created successfully'); refetch(); handleCloseModal(); }, onError: () => message.error('Failed to create user'), }); const handleEdit = (user: User) => { setEditingUser(user); form.setFieldsValue(user); setIsModalOpen(true); }; const handleCloseModal = () => { setIsModalOpen(false); setEditingUser(null); form.resetFields(); }; const handleSubmit = async (values: Partial<User>) => { if (editingUser) { await updateMutation.mutateAsync({ ...values, id: editingUser.id }); } else { await createMutation.mutateAsync(values as Omit<User, 'id' | 'createdAt'>); } }; if (error) return <div>Error loading users</div>; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', sorter: true }, { title: 'Email', dataIndex: 'email', key: 'email' }, { title: 'Role', dataIndex: 'role', key: 'role', render: (role: string) => ( <Tag color={role === 'admin' ? 'red' : role === 'editor' ? 'blue' : 'default'}> {role.toUpperCase()} </Tag> ), }, { title: 'Status', dataIndex: 'status', key: 'status', render: (status: string) => ( <Tag color={status === 'active' ? 'green' : 'default'}>{status}</Tag> ), }, { title: 'Actions', key: 'actions', render: (_: unknown, record: User) => ( <Space> <Button icon={<EditOutlined />} onClick={() => handleEdit(record)} /> <Popconfirm title="Delete user?" onConfirm={() => deleteMutation.mutate(record.id)}> <Button icon={<DeleteOutlined />} danger /> </Popconfirm> </Space> ), }, ]; return ( <Card title="User Management" extra={ <Button type="primary" icon={<PlusOutlined />} onClick={() => setIsModalOpen(true)}> Add User </Button> } > <Table columns={columns} dataSource={users} loading={isLoading} rowKey="id" /> <Modal title={editingUser ? 'Edit User' : 'Create User'} open={isModalOpen} onCancel={handleCloseModal} onOk={() => form.submit()} confirmLoading={updateMutation.isPending || createMutation.isPending} > <Form form={form} layout="vertical" onFinish={handleSubmit}> <Form.Item name="name" label="Name" rules={[{ required: true }]}> <Input /> </Form.Item> <Form.Item name="email" label="Email" rules={[{ required: true, type: 'email' }]}> <Input /> </Form.Item> <Form.Item name="role" label="Role" rules={[{ required: true }]}> <Select options={[ { value: 'admin', label: 'Admin' }, { value: 'editor', label: 'Editor' }, { value: 'user', label: 'User' }, ]} /> </Form.Item> <Form.Item name="status" label="Status" rules={[{ required: true }]}> <Select options={[ { value: 'active', label: 'Active' }, { value: 'inactive', label: 'Inactive' }, ]} /> </Form.Item> </Form> </Modal> </Card> ); }