byop-dashboard/src/pages/components/edit.tsx

import React from 'react';
import { Edit, useForm } from "@refinedev/antd";
import { Form, Input, Select, Card, Alert } from 'antd';
import { Component, ComponentFormData } from '../../types/component';

export const ComponentEdit = () => {
  const { formProps, saveButtonProps, queryResult } = useForm<ComponentFormData>();
  const record = queryResult?.data?.data as Component;
  
  const renderValidationStatus = () => {
    if ((record?.status === 'invalid' || record?.status === 'failed') && record?.error_msg) {
      return (
        <Alert
          message={record.status === 'invalid' ? "Component Validation Failed" : "Component Build Failed"}
          description={record.error_msg}
          type="error"
          showIcon
          style={{ marginBottom: 16 }}
        />
      );
    }
    
    if (record?.status === 'validating' || record?.status === 'building') {
      return (
        <Alert
          message={record.status === 'validating' ? "Component Validation in Progress" : "Component Build in Progress"}
          description={
            record.status === 'validating' 
              ? "The system is currently validating your repository. Changes will trigger re-validation."
              : "The component is currently being built. Changes will trigger a new build."
          }
          type="info"
          showIcon
          style={{ marginBottom: 16 }}
        />
      );
    }
    
    return null;
  };
  
  return (
    <Edit saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        {renderValidationStatus()}
        
        <Card title="Component Information">
          <Form.Item
            label="Name"
            name="name"
            rules={[{ required: true, message: 'Please enter a component name' }]}
          >
            <Input placeholder="Enter component name" />
          </Form.Item>
          
          <Form.Item
            label="Description"
            name="description"
          >
            <Input.TextArea 
              placeholder="Enter component description (optional)" 
              rows={3}
            />
          </Form.Item>
          
          <Form.Item
            label="Type"
            name="type"
            rules={[{ required: true, message: 'Please select a component type' }]}
          >
            <Select placeholder="Select component type">
              <Select.Option value="frontend">Frontend</Select.Option>
              <Select.Option value="backend">Backend</Select.Option>
              <Select.Option value="api">API</Select.Option>
              <Select.Option value="database">Database</Select.Option>
              <Select.Option value="microservice">Microservice</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item
            label="Git Repository URL"
            name="repository"
            rules={[
              { required: true, message: 'Please enter the Git repository URL' },
              { type: 'url', message: 'Please enter a valid URL' }
            ]}
          >
            <Input placeholder="https://github.com/username/repo" />
          </Form.Item>

          <Form.Item
            label="Branch"
            name="branch"
          >
            <Input placeholder="Enter branch name (default: main)"/>
          </Form.Item>

          <Form.Item
            label="Configuration"
            name="config"
          >
            <Input.TextArea 
              placeholder="Enter JSON configuration (optional)" 
              rows={4}
            />
          </Form.Item>
        </Card>
      </Form>
    </Edit>
  );
};