Criando uma automação de documentos

[BrunoRV01]

senhores, estou fazendo uma automação pra minha instituição, mas o code não está querendo funcionar de jeito nenhum. Diz que é o react, mas já instalei as coisas, diz que é o JSX, mas instalei tmb, mudei os terminais e mesmo assim continua não funcionando. E ele ta gritando o vermelho nos reacts e não sei mais o que fazer. Alguém me helpa aqui plmds

import React from 'react';

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Save, FileOutput, Printer, Plus, Minus } from 'lucide-react';
import { MILITARY_TEMPLATES, MILITARY_RANKS, MILITARY_FUNCTIONS } from '../types/militaryTemplates';

const documentSchema = z.object({
documentType: z.enum(['PARTE', 'OFICIO', 'MEMORANDO', 'REQUERIMENTO', 'ATESTADO', 'CERTIDAO', 'DESPACHO',
'INFORMACAO', 'ORDEM_SERVICO', 'TERMO_JUNTADA', 'TERMO_DESENTRANHAMENTO', 'TERMO_INCORPORACAO',
'TERMO_DESINCORPORACAO', 'TERMO_APENSAMENTO', 'TERMO_ENCERRAMENTO']),
number: z.string(),
date: z.string().min(1, 'Data é obrigatória'),
classification: z.enum(['OSTENSIVO', 'RESERVADO', 'CONFIDENCIAL', 'SECRETO']),
priority: z.enum(['NORMAL', 'URGENTE', 'URGENTISSIMO']),

sender: z.object({
re: z.string().min(1, 'RE é obrigatório'),
name: z.string().min(1, 'Nome é obrigatório'),
rank: z.string().min(1, 'Posto/Graduação é obrigatório'),
role: z.string().min(1, 'Função é obrigatória'),
unit: z.string().min(1, 'Organização Militar é obrigatória'),
phone: z.string().optional(),
email: z.string().email('Email inválido').optional(),
}),

recipient: z.object({
name: z.string().min(1, 'Nome é obrigatório'),
rank: z.string().min(1, 'Posto/Graduação é obrigatório'),
role: z.string().min(1, 'Função é obrigatória'),
unit: z.string().min(1, 'Organização Militar é obrigatória'),
}),

subject: z.string().min(1, 'Assunto é obrigatório'),
references: z.array(z.object({
type: z.string(),
number: z.string(),
date: z.string(),
origin: z.string(),
})).optional(),
attachments: z.array(z.object({
description: z.string(),
pages: z.number(),
})).optional(),
content: z.string().min(1, 'Conteúdo é obrigatório'),

signers: z.array(z.object({
name: z.string().min(1, 'Nome é obrigatório'),
rank: z.string().min(1, 'Posto/Graduação é obrigatório'),
role: z.string().min(1, 'Função é obrigatória'),
})).min(1, 'Pelo menos um assinante é necessário'),

distribution: z.array(z.string()).optional(),
accessLevel: z.number().min(1).max(5),
version: z.number().default(1),
});

type DocumentFormData = z.infer;

interface DocumentFormProps {
onSubmit: (data: DocumentFormData) => void;
}

export function DocumentForm({ onSubmit }: DocumentFormProps) {
const { register, handleSubmit, formState: { errors }, watch, setValue } = useForm({
resolver: zodResolver(documentSchema),
defaultValues: {
references: [{ type: '', number: '', date: '', origin: '' }],
attachments: [{ description: '', pages: 0 }],
signers: [{ name: '', rank: '', role: '' }],
distribution: [''],
version: 1,
classification: 'OSTENSIVO',
priority: 'NORMAL',
}
});

const documentType = watch('documentType');
const template = MILITARY_TEMPLATES[documentType];

const handleDocumentTypeChange = (e: React.ChangeEvent) => {
const newType = e.target.value;
setValue('documentType', newType as any);
if (MILITARY_TEMPLATES[newType]?.contentTemplate) {
setValue('content', MILITARY_TEMPLATES[newType].contentTemplate || '');
}
};

return (

{/* Cabeçalho do Documento */}

Tipo de Documento
<select
{...register('documentType')}
onChange={handleDocumentTypeChange}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
>
{Object.keys(MILITARY_TEMPLATES).map((type) => (
{type}
))}

{errors.documentType && (

{errors.documentType.message}

)}

    <div>
      <label className="block text-sm font-medium text-gray-700">Número</label>
      <input
        type="text"
        {...register('number')}
        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
      />
    </div>

    <div>
      <label className="block text-sm font-medium text-gray-700">Data</label>
      <input
        type="date"
        {...register('date')}
        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
      />
      {errors.date && (
        <p className="mt-1 text-sm text-red-600">{errors.date.message}</p>
      )}
    </div>

    <div>
      <label className="block text-sm font-medium text-gray-700">Classificação</label>
      <select
        {...register('classification')}
        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
      >
        <option value="OSTENSIVO">Ostensivo</option>
        <option value="RESERVADO">Reservado</option>
        <option value="CONFIDENCIAL">Confidencial</option>
        <option value="SECRETO">Secreto</option>
      </select>
    </div>

    <div>
      <label className="block text-sm font-medium text-gray-700">Prioridade</label>
      <select
        {...register('priority')}
        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
      >
        <option value="NORMAL">Normal</option>
        <option value="URGENTE">Urgente</option>
        <option value="URGENTISSIMO">Urgentíssimo</option>
      </select>
    </div>
  </div>

  {/* Dados do Remetente */}
  <div className="space-y-4 border-b pb-4">
    <h3 className="text-lg font-medium text-gray-900">Dados do Remetente</h3>
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>
        <label className="block text-sm font-medium text-gray-700">RE</label>
        <input
          type="text"
          {...register('sender.re')}
          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        />
        {errors.sender?.re && (
          <p className="mt-1 text-sm text-red-600">{errors.sender.re.message}</p>
        )}
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700">Nome Completo</label>
        <input
          type="text"
          {...register('sender.name')}
          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        />
        {errors.sender?.name && (
          <p className="mt-1 text-sm text-red-600">{errors.sender.name.message}</p>
        )}
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700">Posto/Graduação</label>
        <select
          {...register('sender.rank')}
          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        >
          {MILITARY_RANKS.map(rank => (
            <option key={rank} value={rank}>{rank}</option>
          ))}
        </select>
        {errors.sender?.rank && (
          <p className="mt-1 text-sm text-red-600">{errors.sender.rank.message}</p>
        )}
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700">Função</label>
        <select
          {...register('sender.role')}
          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        >
          {MILITARY_FUNCTIONS.map(role => (
            <option key={role} value={role}>{role}</option>
          ))}
        </select>
        {errors.sender?.role && (
          <p className="mt-1 text-sm text-red-600">{errors.sender.role.message}</p>
        )}
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700">Organização Militar</label>
        <input
          type="text"
          {...register('sender.unit')}
          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        />
        {errors.sender?.unit && (
          <p className="mt-1 text-sm text-red-600">{errors.sender.unit.message}</p>
        )}
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700">Telefone</label>
        <input
          type="tel"
          {...register('sender.phone')}
          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700">Email</label>
        <input
          type="email"
          {...register('sender.email')}
          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        />
        {errors.sender?.email && (
          <p className="mt-1 text-sm text-red-600">{errors.sender.email.message}</p>
        )}
      </div>
    </div>
  </div>

  {/* Dados do Destinatário */}
  <div className="space-y-4 border-b pb-4">
    <h3 className="text-lg font-medium text-gray-900">Dados do Destinatário</h3>
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>
        <label className="block text-sm font-medium text-gray-700">Nome/Cargo</label>
        <input
          type="text"
          {...register('recipient.name')}
          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        />
        {errors.recipient?.name && (
          <p className="mt-1 text-sm text-red-600">{errors.recipient.name.message}</p>
        )}
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700">Posto/Graduação</label>
        <select
          {...register('recipient.rank')}
          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        >
          {MILITARY_RANKS.map(rank => (
            <option key={rank} value={rank}>{rank}</option>
          ))}
        </select>
        {errors.recipient?.rank && (
          <p className="mt-1 text-sm text-red-600">{errors.recipient.rank.message}</p>
        )}
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700">Função</label>
        <select
          {...register('recipient.role')}
          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        >
          {MILITARY_FUNCTIONS.map(role => (
            <option key={role} value={role}>{role}</option>
          ))}
        </select>
        {errors.recipient?.role && (
          <p className="mt-1 text-sm text-red-600">{errors.recipient.role.message}</p>
        )}
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700">Organização Militar</label>
        <input
          type="text"
          {...register('recipient.unit')}
          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        />
        {errors.recipient?.unit && (
          <p className="mt-1 text-sm text-red-600">{errors.recipient.unit.message}</p>
        )}
      </div>
    </div>
  </div>

  {/* Conteúdo do Documento */}
  <div className="space-y-4 border-b pb-4">
    <h3 className="text-lg font-medium text-gray-900">Conteúdo do Documento</h3>
    
    <div>
      <label className="block text-sm font-medium text-gray-700">Assunto</label>
      <input
        type="text"
        {...register('subject')}
        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
      />
      {errors.subject && (
        <p className="mt-1 text-sm text-red-600">{errors.subject.message}</p>
      )}
    </div>

    <div>
      <label className="block text-sm font-medium text-gray-700">Referências</label>
      {watch('references')?.map((_, index) => (
        <div key={index} className="grid grid-cols-4 gap-2 mt-2">
          <input
            {...register(`references.${index}.type`)}
            placeholder="Tipo"
            className="rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
          />
          <input
            {...register(`references.${index}.number`)}
            placeholder="Número"
            className="rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
          />
          <input
            {...register(`references.${index}.date`)}
            type="date"
            className="rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
          />
          <input
            {...register(`references.${index}.origin`)}
            placeholder="Origem"
            className="rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
          />
        </div>
      ))}
    </div>

    <div>
      <label className="block text-sm font-medium text-gray-700">Anexos</label>
      {watch('attachments')?.map((_, index) => (
        <div key={index} className="grid grid-cols-2 gap-2 mt-2">
          <input
            {...register(`attachments.${index}.description`)}
            placeholder="Descrição"
            className="rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
          />
          <input
            type="number"
            {...register(`attachments.${index}.pages`)}
            placeholder="Número de páginas"
            className="rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
          />
        </div>
      ))}
    </div>

    <div>
      <label className="block text-sm font-medium text-gray-700">Conteúdo</label>
      <textarea
        {...register('content')}
        rows={10}
        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
      />
      {errors.content && (
        <p className="mt-1 text-sm text-red-600">{errors.content.message}</p>
      )}
    </div>
  </div>

  {/* Assinaturas */}
  <div className="space-y-4 border-b pb-4">
    <h3 className="text-lg font-medium text-gray-900">Assinaturas</h3>
    {watch('signers')?.map((_, index) => (
      <div key={index} className="grid grid-cols-3 gap-2">
        <input
          {...register(`signers.${index}.name`)}
          placeholder="Nome completo"
          className="rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        />
        <select
          {...register(`signers.${index}.rank`)}
          className="rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        >
          {MILITARY_RANKS.map(rank => (
            <option key={rank} value={rank}>{rank}</option>
          ))}
        </select>
        <select
          {...register(`signers.${index}.role`)}
          className="rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        >
          {MILITARY_FUNCTIONS.map(role => (
            <option key={role} value={role}>{role}</option>
          ))}
        </select>
      </div>
    ))}
  </div>

  {/* Distribuição */}
  <div className="space-y-4">
    <h3 className="text-lg font-medium text-gray-900">Distribuição</h3>
    {watch('distribution')?.map((_, index) => (
      <input
        key={index}
        {...register(`distribution.${index}`)}
        placeholder="Unidade/Setor para distribuição"
        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
      />
    ))}
  </div>

  <div className="flex justify-end space-x-4">
    <button
      type="submit"
      className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
    >
      <Save className="h-4 w-4 mr-2" />
      Salvar
    </button>
    <button
      type="button"
      className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
    >
      <FileOutput className="h-4 w-4 mr-2" />
      Exportar
    </button>
    <button
      type="button"
      className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
    >
      <Printer className="h-4 w-4 mr-2" />
      Imprimir
    </button>
  </div>
</form>

);
}