chave-mfe-supplier 1.0.0

package/src/components/LinkProductDialog.tsx

@@ -0,0 +1,55 @@
+import { FC, useState } from "react";
+import {
+  Button, Dialog, DialogActions, DialogContent, DialogTitle, Stack, TextField,
+} from "@mui/material";
+import { LinkProductPayload } from "../api/types";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (payload: LinkProductPayload) => void;
+}
+
+const num = (v: string): number | null => (v.trim() === "" ? null : Number(v));
+
+const LinkProductDialog: FC<Props> = ({ open, onClose, onSubmit }) => {
+  const [productId, setProductId] = useState("");
+  const [supplyPrice, setSupplyPrice] = useState("");
+  const [leadTimeDays, setLeadTimeDays] = useState("");
+  const [supplierSku, setSupplierSku] = useState("");
+
+  const handleSubmit = () => {
+    if (!productId.trim()) return;
+    onSubmit({
+      productId: productId.trim(),
+      supplyPrice: num(supplyPrice),
+      leadTimeDays: num(leadTimeDays),
+      supplierSku: supplierSku.trim() || null,
+    });
+    setProductId(""); setSupplyPrice(""); setLeadTimeDays(""); setSupplierSku("");
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} fullWidth maxWidth="sm">
+      <DialogTitle>Vincular produto</DialogTitle>
+      <DialogContent>
+        <Stack spacing={2} sx={{ mt: 1 }}>
+          <TextField label="ID do produto" value={productId} required
+            onChange={(e) => setProductId(e.target.value)} />
+          <TextField label="Preço de fornecimento" type="number" value={supplyPrice}
+            onChange={(e) => setSupplyPrice(e.target.value)} />
+          <TextField label="Lead time (dias)" type="number" value={leadTimeDays}
+            onChange={(e) => setLeadTimeDays(e.target.value)} />
+          <TextField label="SKU do fornecedor" value={supplierSku}
+            onChange={(e) => setSupplierSku(e.target.value)} />
+        </Stack>
+      </DialogContent>
+      <DialogActions>
+        <Button variant="text" onClick={onClose}>Cancelar</Button>
+        <Button onClick={handleSubmit} disabled={!productId.trim()}>Vincular</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default LinkProductDialog;

package/src/components/ReplenishmentDialog.tsx

@@ -0,0 +1,88 @@
+import { FC, useState } from "react";
+import {
+  Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, MenuItem,
+  Stack, TextField, Typography,
+} from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { CreateReplenishmentPayload, ReplenishmentStatus } from "../api/types";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (payload: CreateReplenishmentPayload) => void;
+}
+
+interface ItemRow {
+  productId: string;
+  quantity: string;
+  unitCost: string;
+}
+
+const STATUSES: ReplenishmentStatus[] = ["requested", "sent", "received", "cancelled"];
+const STATUS_LABEL: Record<ReplenishmentStatus, string> = {
+  requested: "Solicitado", sent: "Enviado", received: "Recebido", cancelled: "Cancelado",
+};
+
+const emptyRow: ItemRow = { productId: "", quantity: "1", unitCost: "" };
+
+const ReplenishmentDialog: FC<Props> = ({ open, onClose, onSubmit }) => {
+  const [status, setStatus] = useState<ReplenishmentStatus>("requested");
+  const [items, setItems] = useState<ItemRow[]>([{ ...emptyRow }]);
+
+  const setItem = (idx: number, field: keyof ItemRow, value: string) =>
+    setItems((rows) => rows.map((r, i) => (i === idx ? { ...r, [field]: value } : r)));
+  const addRow = () => setItems((rows) => [...rows, { ...emptyRow }]);
+  const removeRow = (idx: number) => setItems((rows) => rows.filter((_, i) => i !== idx));
+
+  const valid = items.length > 0 && items.every((r) => r.productId.trim() && Number(r.quantity) > 0);
+
+  const handleSubmit = () => {
+    if (!valid) return;
+    onSubmit({
+      status,
+      items: items.map((r) => ({
+        productId: r.productId.trim(),
+        quantity: Number(r.quantity),
+        unitCost: r.unitCost.trim() === "" ? null : Number(r.unitCost),
+      })),
+    });
+    setStatus("requested");
+    setItems([{ ...emptyRow }]);
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} fullWidth maxWidth="md">
+      <DialogTitle>Registrar reposição</DialogTitle>
+      <DialogContent>
+        <Stack spacing={2} sx={{ mt: 1 }}>
+          <TextField select label="Status" value={status} sx={{ maxWidth: 220 }}
+            onChange={(e) => setStatus(e.target.value as ReplenishmentStatus)}>
+            {STATUSES.map((s) => <MenuItem key={s} value={s}>{STATUS_LABEL[s]}</MenuItem>)}
+          </TextField>
+          <Typography variant="subtitle2">Itens</Typography>
+          {items.map((row, idx) => (
+            <Stack key={idx} direction="row" spacing={1} sx={{ alignItems: "center" }}>
+              <TextField label="ID do produto" value={row.productId} sx={{ flex: 1 }}
+                onChange={(e) => setItem(idx, "productId", e.target.value)} />
+              <TextField label="Qtd" type="number" value={row.quantity} sx={{ width: 100 }}
+                onChange={(e) => setItem(idx, "quantity", e.target.value)} />
+              <TextField label="Custo unit." type="number" value={row.unitCost} sx={{ width: 140 }}
+                onChange={(e) => setItem(idx, "unitCost", e.target.value)} />
+              <IconButton aria-label="Remover item" disabled={items.length === 1}
+                onClick={() => removeRow(idx)}><DeleteIcon /></IconButton>
+            </Stack>
+          ))}
+          <Button variant="text" onClick={addRow} sx={{ alignSelf: "flex-start" }}>
+            Adicionar item
+          </Button>
+        </Stack>
+      </DialogContent>
+      <DialogActions>
+        <Button variant="text" onClick={onClose}>Cancelar</Button>
+        <Button onClick={handleSubmit} disabled={!valid}>Registrar</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ReplenishmentDialog;

package/src/main.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import SupplierApp from "./pages/SupplierApp";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <SupplierApp />
+  </React.StrictMode>
+);

package/src/pages/SupplierApp.tsx

@@ -0,0 +1,50 @@
+import { FC, useMemo, useState } from "react";
+import { ThemeProvider, CssBaseline } from "@mui/material";
+import { theme } from "../theme";
+import { createApi } from "../api/createApi";
+import SupplierListPage from "./SupplierListPage";
+import SupplierFormPage from "./SupplierFormPage";
+import SupplierDetailPage from "./SupplierDetailPage";
+
+type View =
+  | { name: "list" }
+  | { name: "create" }
+  | { name: "edit"; id: string }
+  | { name: "detail"; id: string };
+
+const SupplierApp: FC = () => {
+  const api = useMemo(() => createApi(), []);
+  const [view, setView] = useState<View>({ name: "list" });
+
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {view.name === "list" && (
+        <SupplierListPage
+          api={api}
+          onCreate={() => setView({ name: "create" })}
+          onOpen={(id) => setView({ name: "detail", id })}
+          onEdit={(id) => setView({ name: "edit", id })}
+        />
+      )}
+      {(view.name === "create" || view.name === "edit") && (
+        <SupplierFormPage
+          api={api}
+          supplierId={view.name === "edit" ? view.id : undefined}
+          onDone={() => setView({ name: "list" })}
+          onCancel={() => setView({ name: "list" })}
+        />
+      )}
+      {view.name === "detail" && (
+        <SupplierDetailPage
+          api={api}
+          supplierId={view.id}
+          onBack={() => setView({ name: "list" })}
+          onEdit={(id) => setView({ name: "edit", id })}
+        />
+      )}
+    </ThemeProvider>
+  );
+};
+
+export default SupplierApp;

package/src/pages/SupplierDetailPage.tsx

@@ -0,0 +1,210 @@
+import { FC, useCallback, useEffect, useState } from "react";
+import {
+  Alert, Box, Button, Chip, CircularProgress, Divider, Paper, Stack, Tab, Table, TableBody,
+  TableCell, TableHead, TableRow, Tabs, Typography,
+} from "@mui/material";
+import { SupplierApi } from "../api/client";
+import {
+  LinkProductPayload, CreateReplenishmentPayload, ReplenishmentOrder, Supplier, SupplierProduct,
+} from "../api/types";
+import LinkProductDialog from "../components/LinkProductDialog";
+import ReplenishmentDialog from "../components/ReplenishmentDialog";
+
+interface Props {
+  api: SupplierApi;
+  supplierId: string;
+  onBack: () => void;
+  onEdit: (id: string) => void;
+}
+
+const STATUS_LABEL: Record<string, string> = {
+  requested: "Solicitado", sent: "Enviado", received: "Recebido", cancelled: "Cancelado",
+};
+
+const SupplierDetailPage: FC<Props> = ({ api, supplierId, onBack, onEdit }) => {
+  const [supplier, setSupplier] = useState<Supplier | null>(null);
+  const [products, setProducts] = useState<SupplierProduct[]>([]);
+  const [orders, setOrders] = useState<ReplenishmentOrder[]>([]);
+  const [tab, setTab] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [linkOpen, setLinkOpen] = useState(false);
+  const [replOpen, setReplOpen] = useState(false);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [s, p, o] = await Promise.all([
+        api.getSupplier(supplierId),
+        api.listProducts(supplierId),
+        api.listReplenishments(supplierId),
+      ]);
+      setSupplier(s);
+      setProducts(p);
+      setOrders(o);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Erro ao carregar fornecedor");
+    } finally {
+      setLoading(false);
+    }
+  }, [api, supplierId]);
+
+  useEffect(() => { void load(); }, [load]);
+
+  const handleLink = async (payload: LinkProductPayload) => {
+    setLinkOpen(false);
+    try {
+      await api.linkProduct(supplierId, payload);
+      await load();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Erro ao vincular produto");
+    }
+  };
+
+  const handleUnlink = async (productId: string) => {
+    try {
+      await api.unlinkProduct(supplierId, productId);
+      await load();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Erro ao desvincular produto");
+    }
+  };
+
+  const handleReplenishment = async (payload: CreateReplenishmentPayload) => {
+    setReplOpen(false);
+    try {
+      await api.createReplenishment(supplierId, payload);
+      await load();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Erro ao registrar reposição");
+    }
+  };
+
+  if (loading) {
+    return <Box sx={{ p: 4, textAlign: "center" }}><CircularProgress /></Box>;
+  }
+
+  if (!supplier) {
+    return (
+      <Box sx={{ p: 3 }}>
+        {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+        <Button variant="text" onClick={onBack}>Voltar</Button>
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ p: 3, maxWidth: 960, mx: "auto" }}>
+      <Stack direction="row" sx={{ mb: 2, justifyContent: "space-between", alignItems: "center" }}>
+        <Stack direction="row" spacing={2} sx={{ alignItems: "center" }}>
+          <Typography variant="h5">{supplier.legalName}</Typography>
+          <Chip size="small" label={supplier.status === "active" ? "Ativo" : "Inativo"}
+            color={supplier.status === "active" ? "success" : "default"} />
+        </Stack>
+        <Stack direction="row" spacing={1}>
+          <Button variant="text" onClick={onBack}>Voltar</Button>
+          <Button onClick={() => onEdit(supplier.id)}>Editar</Button>
+        </Stack>
+      </Stack>
+
+      {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+
+      <Paper>
+        <Tabs value={tab} onChange={(_e, v) => setTab(v)}>
+          <Tab label="Dados" />
+          <Tab label="Produtos vinculados" />
+          <Tab label="Reposições" />
+        </Tabs>
+        <Divider />
+
+        {tab === 0 && (
+          <Box sx={{ p: 3 }}>
+            <Stack spacing={1}>
+              <Typography><b>Nome fantasia:</b> {supplier.tradeName ?? "—"}</Typography>
+              <Typography><b>Documento:</b> {supplier.document} ({supplier.documentType.toUpperCase()})</Typography>
+              <Typography><b>E-mail:</b> {supplier.email}</Typography>
+              <Typography><b>Telefone:</b> {supplier.phone ?? "—"}</Typography>
+              <Typography><b>Contato:</b> {supplier.contactPerson ?? "—"}</Typography>
+              <Typography><b>Cidade/UF:</b> {supplier.address?.city ?? "—"} / {supplier.address?.state ?? "—"}</Typography>
+            </Stack>
+          </Box>
+        )}
+
+        {tab === 1 && (
+          <Box sx={{ p: 3 }}>
+            <Stack direction="row" sx={{ mb: 2, justifyContent: "flex-end" }}>
+              <Button onClick={() => setLinkOpen(true)}>Vincular produto</Button>
+            </Stack>
+            <Table size="small">
+              <TableHead>
+                <TableRow>
+                  <TableCell>Produto</TableCell>
+                  <TableCell>Preço</TableCell>
+                  <TableCell>Lead time</TableCell>
+                  <TableCell>SKU</TableCell>
+                  <TableCell align="right">Ações</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {products.length === 0 && (
+                  <TableRow><TableCell colSpan={5}>Nenhum produto vinculado.</TableCell></TableRow>
+                )}
+                {products.map((p) => (
+                  <TableRow key={p.id}>
+                    <TableCell>{p.productId}</TableCell>
+                    <TableCell>{p.supplyPrice ?? "—"}</TableCell>
+                    <TableCell>{p.leadTimeDays ?? "—"}</TableCell>
+                    <TableCell>{p.supplierSku ?? "—"}</TableCell>
+                    <TableCell align="right">
+                      <Button size="small" variant="text" color="error"
+                        onClick={() => handleUnlink(p.productId)}>Desvincular</Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </Box>
+        )}
+
+        {tab === 2 && (
+          <Box sx={{ p: 3 }}>
+            <Stack direction="row" sx={{ mb: 2, justifyContent: "flex-end" }}>
+              <Button onClick={() => setReplOpen(true)}>Registrar reposição</Button>
+            </Stack>
+            <Table size="small">
+              <TableHead>
+                <TableRow>
+                  <TableCell>Pedido</TableCell>
+                  <TableCell>Status</TableCell>
+                  <TableCell>Total</TableCell>
+                  <TableCell>Itens</TableCell>
+                  <TableCell>Data</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {orders.length === 0 && (
+                  <TableRow><TableCell colSpan={5}>Nenhuma reposição registrada.</TableCell></TableRow>
+                )}
+                {orders.map((o) => (
+                  <TableRow key={o.id}>
+                    <TableCell>{o.id}</TableCell>
+                    <TableCell>{STATUS_LABEL[o.status] ?? o.status}</TableCell>
+                    <TableCell>{o.totalCost ?? "—"}</TableCell>
+                    <TableCell>{o.items.length}</TableCell>
+                    <TableCell>{o.orderedAt}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </Box>
+        )}
+      </Paper>
+
+      <LinkProductDialog open={linkOpen} onClose={() => setLinkOpen(false)} onSubmit={handleLink} />
+      <ReplenishmentDialog open={replOpen} onClose={() => setReplOpen(false)} onSubmit={handleReplenishment} />
+    </Box>
+  );
+};
+
+export default SupplierDetailPage;

package/src/pages/SupplierFormPage.tsx

@@ -0,0 +1,214 @@
+import { FC, useEffect, useState } from "react";
+import {
+  Alert, Box, Button, CircularProgress, Divider, Grid, Paper, Stack, TextField, Typography,
+} from "@mui/material";
+import { SupplierApi } from "../api/client";
+import { Address, CreateSupplierPayload } from "../api/types";
+
+interface Props {
+  api: SupplierApi;
+  supplierId?: string;
+  onDone: () => void;
+  onCancel: () => void;
+}
+
+interface FormState {
+  legalName: string;
+  tradeName: string;
+  document: string;
+  email: string;
+  phone: string;
+  contactPerson: string;
+  address: Required<{ [K in keyof Address]: string }>;
+}
+
+const emptyAddress = {
+  street: "", number: "", complement: "", district: "",
+  city: "", state: "", zipCode: "", country: "",
+};
+
+const emptyForm: FormState = {
+  legalName: "", tradeName: "", document: "", email: "", phone: "", contactPerson: "",
+  address: { ...emptyAddress },
+};
+
+type Errors = Partial<Record<"legalName" | "document" | "email", string>>;
+
+const isEmail = (v: string): boolean => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
+
+const SupplierFormPage: FC<Props> = ({ api, supplierId, onDone, onCancel }) => {
+  const isEdit = Boolean(supplierId);
+  const [form, setForm] = useState<FormState>(emptyForm);
+  const [errors, setErrors] = useState<Errors>({});
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!supplierId) return;
+    setLoading(true);
+    api.getSupplier(supplierId)
+      .then((s) => setForm({
+        legalName: s.legalName ?? "",
+        tradeName: s.tradeName ?? "",
+        document: s.document ?? "",
+        email: s.email ?? "",
+        phone: s.phone ?? "",
+        contactPerson: s.contactPerson ?? "",
+        address: {
+          street: s.address?.street ?? "", number: s.address?.number ?? "",
+          complement: s.address?.complement ?? "", district: s.address?.district ?? "",
+          city: s.address?.city ?? "", state: s.address?.state ?? "",
+          zipCode: s.address?.zipCode ?? "", country: s.address?.country ?? "",
+        },
+      }))
+      .catch((e) => setError(e instanceof Error ? e.message : "Erro ao carregar fornecedor"))
+      .finally(() => setLoading(false));
+  }, [api, supplierId]);
+
+  const setField = (field: keyof FormState, value: string) =>
+    setForm((f) => ({ ...f, [field]: value }));
+  const setAddr = (field: keyof Address, value: string) =>
+    setForm((f) => ({ ...f, address: { ...f.address, [field]: value } }));
+
+  const validate = (): boolean => {
+    const next: Errors = {};
+    if (!form.legalName.trim()) next.legalName = "Razão Social é obrigatória";
+    if (!form.document.trim()) next.document = "Documento é obrigatório";
+    if (!isEmail(form.email)) next.email = "E-mail inválido";
+    setErrors(next);
+    return Object.keys(next).length === 0;
+  };
+
+  const handleSubmit = async () => {
+    if (!validate()) return;
+    setSaving(true);
+    setError(null);
+    const nz = (v: string): string | null => (v.trim() ? v.trim() : null);
+    const address: Address = {
+      street: nz(form.address.street), number: nz(form.address.number),
+      complement: nz(form.address.complement), district: nz(form.address.district),
+      city: nz(form.address.city), state: nz(form.address.state),
+      zipCode: nz(form.address.zipCode), country: nz(form.address.country),
+    };
+    try {
+      if (isEdit && supplierId) {
+        await api.updateSupplier(supplierId, {
+          legalName: form.legalName, tradeName: nz(form.tradeName), email: form.email,
+          phone: nz(form.phone), contactPerson: nz(form.contactPerson), address,
+        });
+      } else {
+        const payload: CreateSupplierPayload = {
+          legalName: form.legalName, tradeName: nz(form.tradeName), document: form.document,
+          email: form.email, phone: nz(form.phone), contactPerson: nz(form.contactPerson), address,
+        };
+        await api.createSupplier(payload);
+      }
+      onDone();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Erro ao salvar fornecedor");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return <Box sx={{ p: 4, textAlign: "center" }}><CircularProgress /></Box>;
+  }
+
+  return (
+    <Box sx={{ p: 3, maxWidth: 880, mx: "auto" }}>
+      <Typography variant="h5" sx={{ mb: 2 }}>
+        {isEdit ? "Editar fornecedor" : "Novo fornecedor"}
+      </Typography>
+      {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+      <Paper sx={{ p: 3 }}>
+        <Grid container spacing={2}>
+          <Grid size={{ xs: 12, sm: 6 }}>
+            <TextField
+              fullWidth label="Razão Social" value={form.legalName}
+              error={Boolean(errors.legalName)} helperText={errors.legalName}
+              onChange={(e) => setField("legalName", e.target.value)}
+            />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6 }}>
+            <TextField
+              fullWidth label="Nome Fantasia" value={form.tradeName}
+              onChange={(e) => setField("tradeName", e.target.value)}
+            />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6 }}>
+            <TextField
+              fullWidth label="Documento (CNPJ/CPF)" value={form.document}
+              disabled={isEdit}
+              error={Boolean(errors.document)} helperText={errors.document}
+              onChange={(e) => setField("document", e.target.value)}
+            />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6 }}>
+            <TextField
+              fullWidth label="E-mail" value={form.email}
+              error={Boolean(errors.email)} helperText={errors.email}
+              onChange={(e) => setField("email", e.target.value)}
+            />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6 }}>
+            <TextField
+              fullWidth label="Telefone" value={form.phone}
+              onChange={(e) => setField("phone", e.target.value)}
+            />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6 }}>
+            <TextField
+              fullWidth label="Pessoa de contato" value={form.contactPerson}
+              onChange={(e) => setField("contactPerson", e.target.value)}
+            />
+          </Grid>
+
+          <Grid size={12}><Divider>Endereço</Divider></Grid>
+          <Grid size={{ xs: 12, sm: 8 }}>
+            <TextField fullWidth label="Logradouro" value={form.address.street}
+              onChange={(e) => setAddr("street", e.target.value)} />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 4 }}>
+            <TextField fullWidth label="Número" value={form.address.number}
+              onChange={(e) => setAddr("number", e.target.value)} />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6 }}>
+            <TextField fullWidth label="Complemento" value={form.address.complement}
+              onChange={(e) => setAddr("complement", e.target.value)} />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6 }}>
+            <TextField fullWidth label="Bairro" value={form.address.district}
+              onChange={(e) => setAddr("district", e.target.value)} />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 5 }}>
+            <TextField fullWidth label="Cidade" value={form.address.city}
+              onChange={(e) => setAddr("city", e.target.value)} />
+          </Grid>
+          <Grid size={{ xs: 6, sm: 3 }}>
+            <TextField fullWidth label="Estado" value={form.address.state}
+              onChange={(e) => setAddr("state", e.target.value)} />
+          </Grid>
+          <Grid size={{ xs: 6, sm: 4 }}>
+            <TextField fullWidth label="CEP" value={form.address.zipCode}
+              onChange={(e) => setAddr("zipCode", e.target.value)} />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6 }}>
+            <TextField fullWidth label="País" value={form.address.country}
+              onChange={(e) => setAddr("country", e.target.value)} />
+          </Grid>
+        </Grid>
+
+        <Stack direction="row" spacing={2} sx={{ mt: 3, justifyContent: "flex-end" }}>
+          <Button variant="text" onClick={onCancel} disabled={saving}>Cancelar</Button>
+          <Button onClick={handleSubmit} disabled={saving}>
+            {saving ? "Salvando..." : "Salvar"}
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+};
+
+export default SupplierFormPage;