first commit

src/repositories/DialogParcela.tsx

@@ -0,0 +1,153 @@
+import { Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import { DatePicker } from "@mui/x-date-pickers";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import ptBR from "date-fns/locale/pt-BR";
+
+interface DialogParcelaProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (data: any) => Promise<void>;
+  parcela?: any;
+  tipo: "honorario" | "custa";
+}
+
+export function DialogParcela({
+  isOpen,
+  onClose,
+  onSave,
+  parcela,
+  tipo,
+}: DialogParcelaProps) {
+  const [formData, setFormData] = useState({
+    status: parcela?.status || "PENDENTE",
+    dataPagamento: parcela?.dataPagamento
+      ? new Date(parcela?.dataPagamento)
+      : null,
+    comprovante: parcela?.comprovante || "",
+    observacoes: parcela?.observacoes || "",
+  });
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await onSave(formData);
+    onClose();
+  };
+
+  return (
+    <Transition appear show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-50" onClose={onClose}>
+        <div className="fixed inset-0 bg-black/30 backdrop-blur-sm" />
+
+        <div className="fixed inset-0 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4">
+            <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+              <Dialog.Title
+                as="div"
+                className="flex items-center justify-between mb-4"
+              >
+                <h3 className="text-lg font-medium leading-6 text-gray-900">
+                  Atualizar Parcela {parcela?.numeroParcela}
+                </h3>
+                <button
+                  type="button"
+                  className="text-gray-400 hover:text-gray-500"
+                  onClick={onClose}
+                >
+                  <XMarkIcon className="h-6 w-6" />
+                </button>
+              </Dialog.Title>
+
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">
+                    Status
+                  </label>
+                  <select
+                    value={formData.status}
+                    onChange={(e) =>
+                      setFormData({ ...formData, status: e.target.value })
+                    }
+                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                  >
+                    {Object.values(StatusPagamento).map((status) => (
+                      <option key={status} value={status}>
+                        {status.replace(/_/g, " ")}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                {formData.status === "PAGO" && (
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">
+                      Data do Pagamento
+                    </label>
+                    <LocalizationProvider
+                      dateAdapter={AdapterDateFns}
+                      adapterLocale={ptBR}
+                    >
+                      <DatePicker
+                        value={formData.dataPagamento}
+                        onChange={(date) =>
+                          setFormData({ ...formData, dataPagamento: date })
+                        }
+                        className="mt-1 block w-full"
+                      />
+                    </LocalizationProvider>
+                  </div>
+                )}
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">
+                    Comprovante (URL)
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.comprovante}
+                    onChange={(e) =>
+                      setFormData({ ...formData, comprovante: e.target.value })
+                    }
+                    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">
+                    Observações
+                  </label>
+                  <textarea
+                    value={formData.observacoes}
+                    onChange={(e) =>
+                      setFormData({ ...formData, observacoes: e.target.value })
+                    }
+                    rows={3}
+                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                  />
+                </div>
+
+                <div className="mt-6 flex justify-end space-x-3">
+                  <button
+                    type="button"
+                    onClick={onClose}
+                    className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
+                  >
+                    Cancelar
+                  </button>
+                  <button
+                    type="submit"
+                    className="inline-flex justify-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                  >
+                    Salvar
+                  </button>
+                </div>
+              </form>
+            </Dialog.Panel>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+}