diff --git a/.claude/settings.local.json b/.claude/settings.local.json
deleted file mode 100644
index c694bac..0000000
--- a/.claude/settings.local.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "mcp__chrome-devtools__navigate_page",
-      "mcp__chrome-devtools__list_pages",
-      "mcp__chrome-devtools__new_page",
-      "mcp__chrome-devtools__take_snapshot",
-      "mcp__chrome-devtools__fill_form",
-      "mcp__chrome-devtools__click",
-      "mcp__chrome-devtools__wait_for",
-      "mcp__chrome-devtools__take_screenshot",
-      "mcp__chrome-devtools__emulate",
-      "mcp__chrome-devtools__fill",
-      "mcp__chrome-devtools__list_console_messages",
-      "mcp__chrome-devtools__get_console_message",
-      "mcp__chrome-devtools__list_network_requests",
-      "mcp__chrome-devtools__get_network_request"
-    ]
-  }
-}
diff --git a/CLAUDE.md b/CLAUDE.md
index 986975d..c8b250e 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -3,11 +3,13 @@
 Next.js 15, TS, Tailwind CSS, shadcn/ui.
 
 ## Architecture (MVVM)
+
 - Structure: Every page needs `.model.ts` (logic), `.view.tsx` (pure JSX), `.types.ts` (interfaces), `.schema.ts` (Zod), and `page.tsx` (ViewModel).
 - Responsibilities: NO JSX in models. NO state/hooks/logic in views.
 - Forms: Validate with Zod schemas and `react-hook-form`.
 
 ## Code Style
+
 - Types: Explicit everywhere. No `any`.
 - Endpoints: Always check `docs/endpoints/` before making API calls.
 - Functions: 4-20 lines. Split if longer.
@@ -26,12 +28,14 @@ Next.js 15, TS, Tailwind CSS, shadcn/ui.
 - Wrap third-party libs behind a thin interface owned by this project.
 
 ## Components & UI
+
 - Base: `/components/ui` using Tailwind + lucide-react (strokeWidth 2 or 2.5).
 - Breadcrumbs: Use `useBreadcrumb` hook ONLY in child routes (e.g., `/products/[id]/edit`).
 - Composites: Use standard wrappers `<PageContainer>`, `<PageHeader>`, `<FixedBottomBar>`.
 - Feedback: Always handle loading (`<LoadingState>`), errors (`<ErrorState>`), and no-data (`<EmptyState>`), and format forms with `<FormSection>`.
 
 ## Responsive & Design System
+
 - Layout: Mobile First -> Tablet (`md:`) -> Desktop (`max-w-7xl`).
 - Sidebar Fix: Any `fixed` full-width element MUST include `md:ml-[240px]` to clear the sidebar.
 - Theme: Dark-only brutalism. Background `#0A0A0A`, surfaces `#171717`, borders `neutral-800`.
@@ -39,10 +43,12 @@ Next.js 15, TS, Tailwind CSS, shadcn/ui.
 - Geometry & Interaction: 4px border radius everywhere. No shadows. No `rounded-full`. No animations (instant hover changes). Bold titles.
 
 ## Data Fetching
+
 - Libraries: `swr` for caching + `ky` for HTTP requests.
 - Encapsulation: All `useSWR` and `ky.get/.post` calls must be inside standard hooks in `.model.ts`.
 
 ## Tests
+
 - Scope: Unit test `.model.ts` files ONLY.
 - Workflow: Always ask to create model tests immediately after finishing a page implementation.
 - Runner: Vitest (`pnpm test`).
@@ -53,5 +59,8 @@ Next.js 15, TS, Tailwind CSS, shadcn/ui.
   self-validating, timely.
 
 ## Workflow & Commands
-- Commands: `pnpm dev` (Dev), `pnpm test` (Test), `pnpm build` (Build).
+
+- `pnpm test` (Test), `pnpm build` (Build).
 - Automation defaults: email `pass@pass.com` / pw `test123`.
+- Só faça a build (`pnpm build`) quando for solicitado. Não quebre essa regra
+- Só rode o `pnpm dev` quando for solicitado. Não quebre essa regra
diff --git a/app/(pages)/batches/[id]/batches-detail.model.test.ts b/app/(pages)/batches/[id]/batches-detail.model.test.ts
index 5b9f292..258d9d1 100644
--- a/app/(pages)/batches/[id]/batches-detail.model.test.ts
+++ b/app/(pages)/batches/[id]/batches-detail.model.test.ts
@@ -193,6 +193,10 @@ describe("formatCentsTotal", () => {
     expect(formatCentsTotal(1000, 5)).toMatch(/R\$\s?50,00/);
   });
 
+  it("does not prefix the formatted total value", () => {
+    expect(formatCentsTotal(2000, 2)).not.toContain("Total:");
+  });
+
   it("returns dash when price is null", () => {
     expect(formatCentsTotal(null, 10)).toBe("-");
   });
diff --git a/app/(pages)/batches/[id]/batches-detail.model.ts b/app/(pages)/batches/[id]/batches-detail.model.ts
index e381825..f27211c 100644
--- a/app/(pages)/batches/[id]/batches-detail.model.ts
+++ b/app/(pages)/batches/[id]/batches-detail.model.ts
@@ -106,7 +106,7 @@ export const formatCentsTotal = (
   quantity: number,
 ): string => {
   if (unitCents === null || unitCents === undefined) return "-";
-  return `Total: ${formatCentsToBRL(unitCents * quantity)}`;
+  return formatCentsToBRL(unitCents * quantity);
 };
 
 export const computeMarginLabel = (
diff --git a/app/(pages)/batches/[id]/edit/batches-edit.model.ts b/app/(pages)/batches/[id]/edit/batches-edit.model.ts
index 5c0ec9c..b27bf41 100644
--- a/app/(pages)/batches/[id]/edit/batches-edit.model.ts
+++ b/app/(pages)/batches/[id]/edit/batches-edit.model.ts
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
@@ -9,6 +9,18 @@ import type { BatchEditResponse } from "./batches-edit.types";
 import type { Batch } from "../../batches.types";
 import { useBreadcrumb } from "@/components/breadcrumb";
 
+const DEFAULT_BATCH_EDIT_FORM_VALUES: BatchEditFormData = {
+  productId: "",
+  warehouseId: "",
+  quantity: 1,
+  batchCode: "",
+  manufacturedDate: "",
+  expirationDate: "",
+  costPrice: undefined,
+  sellingPrice: undefined,
+  notes: "",
+};
+
 export const mapBatchToFormValues = (batch: Batch): BatchEditFormData => ({
   productId: batch.productId,
   warehouseId: batch.warehouseId,
@@ -23,21 +35,6 @@ export const mapBatchToFormValues = (batch: Batch): BatchEditFormData => ({
 
 export const useBatchEditModel = (batchId: string) => {
   const router = useRouter();
-  const form = useForm<BatchEditFormData>({
-    resolver: zodResolver(batchEditSchema),
-    defaultValues: {
-      productId: "",
-      warehouseId: "",
-      quantity: 1,
-      batchCode: "",
-      manufacturedDate: "",
-      expirationDate: "",
-      costPrice: undefined,
-      sellingPrice: undefined,
-      notes: "",
-    },
-  });
-
   const { data, isLoading } = useSWR<BatchEditResponse>(
     batchId ? `batches/${batchId}` : null,
     async (url: string) => {
@@ -47,6 +44,15 @@ export const useBatchEditModel = (batchId: string) => {
   );
 
   const batch = data?.data || null;
+  const formValues = useMemo(
+    () => (batch ? mapBatchToFormValues(batch) : DEFAULT_BATCH_EDIT_FORM_VALUES),
+    [batch],
+  );
+  const form = useForm<BatchEditFormData>({
+    resolver: zodResolver(batchEditSchema),
+    defaultValues: DEFAULT_BATCH_EDIT_FORM_VALUES,
+    values: formValues,
+  });
 
   useBreadcrumb({
     title: batch?.batchNumber || batch?.batchCode || "Carregando...",
@@ -55,12 +61,6 @@ export const useBatchEditModel = (batchId: string) => {
     subsection: "Edição",
   });
 
-  useEffect(() => {
-    if (batch) {
-      form.reset(mapBatchToFormValues(batch));
-    }
-  }, [batch, form]);
-
   const onSubmit = async (values: BatchEditFormData) => {
     try {
       const { api } = await import("@/lib/api");
diff --git a/app/(pages)/batches/[id]/edit/batches-edit.view.tsx b/app/(pages)/batches/[id]/edit/batches-edit.view.tsx
index cdc43b1..334c6d7 100644
--- a/app/(pages)/batches/[id]/edit/batches-edit.view.tsx
+++ b/app/(pages)/batches/[id]/edit/batches-edit.view.tsx
@@ -12,6 +12,7 @@ import {
   Plus,
   Save,
 } from "lucide-react";
+import type { ReactNode } from "react";
 import type { UseFormReturn } from "react-hook-form";
 import type { BatchEditFormData } from "./batches-edit.schema";
 import type { Batch } from "../../batches.types";
@@ -40,12 +41,20 @@ interface BatchEditViewProps {
   batch?: Batch | null;
 }
 
-export const BatchEditView = ({
-  form,
-  onSubmit,
-  isLoading,
-  batch,
-}: BatchEditViewProps) => {
+interface BatchEditViewState extends BatchEditViewProps {
+  batchCode: string | undefined;
+  handleQuantityDecrement: () => void;
+  handleQuantityIncrement: () => void;
+  isProfitable: boolean;
+  isSubmitting: boolean;
+  margin: number;
+  productLabel: string;
+  profit: number;
+  warehouseLabel: string;
+}
+
+export const BatchEditView = (props: BatchEditViewProps) => {
+  const { form, onSubmit, isLoading, batch } = props;
   const { isSubmitting } = form.formState;
 
   const costPrice = form.watch("costPrice") || 0;
@@ -76,6 +85,18 @@ export const BatchEditView = ({
   const handleQuantityDecrement = () => {
     updateQuantity((form.getValues("quantity") || 1) - 1);
   };
+  const viewState: BatchEditViewState = {
+    ...props,
+    batchCode,
+    handleQuantityDecrement,
+    handleQuantityIncrement,
+    isProfitable,
+    isSubmitting,
+    margin,
+    productLabel,
+    profit,
+    warehouseLabel,
+  };
 
   if (isLoading) {
     return (
@@ -92,341 +113,406 @@ export const BatchEditView = ({
           <form onSubmit={form.handleSubmit(onSubmit)}>
             <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
               <div className="space-y-6 lg:col-span-2">
-                <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
-                  <CardHeader className="border-b border-neutral-800 pb-4">
-                    <div className="flex items-center gap-2">
-                      <Box className="size-4 text-blue-500" />
-                      <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
-                        Identificação e Origem
-                      </CardTitle>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="pt-6 space-y-5">
-                    <div className="grid gap-5 md:grid-cols-2">
-                      <FormField
-                        control={form.control}
-                        name="productId"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                              Produto
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                value={productLabel}
-                                disabled
-                                className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-neutral-300 focus:ring-0 disabled:opacity-100"
-                              />
-                            </FormControl>
-                          </FormItem>
-                        )}
-                      />
-
-                      <FormField
-                        control={form.control}
-                        name="warehouseId"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                              Warehouse
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                value={warehouseLabel}
-                                disabled
-                                className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-neutral-300 focus:ring-0 disabled:opacity-100"
-                              />
-                            </FormControl>
-                          </FormItem>
-                        )}
-                      />
-                    </div>
-
-                    {batchCode && (
-                      <div className="rounded-[4px] border border-neutral-800 bg-neutral-900 px-3 py-2">
-                        <div className="text-[10px] font-bold uppercase tracking-wider text-neutral-500">
-                          Código gerado
-                        </div>
-                        <div className="mt-1 font-mono text-sm font-bold text-white">
-                          {batchCode}
-                        </div>
-                      </div>
-                    )}
-                  </CardContent>
-                </Card>
-
-                <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
-                  <CardHeader className="border-b border-neutral-800 pb-4">
-                    <div className="flex items-center gap-2">
-                      <DollarSign className="size-4 text-emerald-500" />
-                      <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
-                        Financeiro e Estoque
-                      </CardTitle>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="pt-6 space-y-6">
-                    <div className="grid gap-5 md:grid-cols-3">
-                      <FormField
-                        control={form.control}
-                        name="quantity"
-                        render={({ field }) => {
-                          const { onChange, value, ...rest } = field;
-                          return (
-                            <FormItem>
-                              <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                                Quantidade
-                              </FormLabel>
-                              <div className="flex">
-                                <Button
-                                  type="button"
-                                  variant="outline"
-                                  onClick={handleQuantityDecrement}
-                                  className="size-10 rounded-r-none rounded-l-[4px] border-neutral-800 bg-neutral-900 p-0 hover:bg-neutral-800 hover:text-white"
-                                  aria-label="Diminuir quantidade"
-                                >
-                                  <Minus className="size-4" />
-                                </Button>
-                                <FormControl>
-                                  <NumberInput
-                                    {...rest}
-                                    value={value}
-                                    onValueChange={onChange}
-                                    mode="integer"
-                                    className="h-10 min-w-0 flex-1 rounded-none border-x-0 border-neutral-800 bg-neutral-900 text-center text-sm focus:border-blue-600 focus:ring-0"
-                                  />
-                                </FormControl>
-                                <Button
-                                  type="button"
-                                  variant="outline"
-                                  onClick={handleQuantityIncrement}
-                                  className="size-10 rounded-l-none rounded-r-[4px] border-neutral-800 bg-neutral-900 p-0 hover:bg-neutral-800 hover:text-white"
-                                  aria-label="Aumentar quantidade"
-                                >
-                                  <Plus className="size-4" />
-                                </Button>
-                              </div>
-                              <FormMessage className="text-xs text-rose-500" />
-                            </FormItem>
-                          );
-                        }}
-                      />
-
-                      <FormField
-                        control={form.control}
-                        name="costPrice"
-                        render={({ field }) => {
-                          const { onChange, value, ...rest } = field;
-                          return (
-                            <FormItem>
-                              <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                                Custo Unitário
-                              </FormLabel>
-                              <FormControl>
-                                <CurrencyInput
-                                  {...rest}
-                                  value={value}
-                                  onValueChange={onChange}
-                                  placeholder="0,00"
-                                  className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
-                                />
-                              </FormControl>
-                              <FormMessage className="text-xs text-rose-500" />
-                            </FormItem>
-                          );
-                        }}
-                      />
-
-                      <FormField
-                        control={form.control}
-                        name="sellingPrice"
-                        render={({ field }) => {
-                          const { onChange, value, ...rest } = field;
-                          return (
-                            <FormItem>
-                              <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                                Preço de Venda
-                              </FormLabel>
-                              <FormControl>
-                                <CurrencyInput
-                                  {...rest}
-                                  value={value}
-                                  onValueChange={onChange}
-                                  placeholder="0,00"
-                                  className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-emerald-600 focus:ring-0 text-emerald-500 font-bold"
-                                />
-                              </FormControl>
-                              <FormMessage className="text-xs text-rose-500" />
-                            </FormItem>
-                          );
-                        }}
-                      />
-                    </div>
-
-                    <div
-                      className={cn(
-                        "mt-4 rounded-[4px] border px-4 py-3 flex items-center justify-between",
-                        isProfitable
-                          ? "border-emerald-900/30 bg-emerald-950/10"
-                          : "border-rose-900/30 bg-rose-950/10",
-                      )}
-                    >
-                      <span className="text-xs font-medium uppercase tracking-wide text-neutral-400">
-                        Lucro Estimado
-                      </span>
-                      <div className="flex items-center gap-2">
-                        <span
-                          className={cn(
-                            "text-sm font-bold font-mono",
-                            isProfitable ? "text-emerald-500" : "text-rose-500",
-                          )}
-                        >
-                          {(profit / 100).toLocaleString("pt-BR", {
-                            style: "currency",
-                            currency: "BRL",
-                          })}
-                        </span>
-                        <div
-                          className={cn(
-                            "text-[10px] font-bold px-1.5 py-0.5 rounded border ml-1",
-                            isProfitable
-                              ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-500"
-                              : "border-rose-500/30 bg-rose-500/10 text-rose-500",
-                          )}
-                        >
-                          {margin.toFixed(1)}%
-                        </div>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
+                <BatchEditIdentityCard viewState={viewState} />
+                <BatchEditFinanceCard viewState={viewState} />
               </div>
 
               <div className="space-y-6">
-                <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
-                  <CardHeader className="border-b border-neutral-800 pb-4">
-                    <div className="flex items-center gap-2">
-                      <Calendar className="size-4 text-amber-500" />
-                      <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
-                        Vigência
-                      </CardTitle>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="pt-6 space-y-5">
-                    <FormField
-                      control={form.control}
-                      name="manufacturedDate"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                            Data de Fabricação
-                          </FormLabel>
-                          <FormControl>
-                            <Input
-                              type="date"
-                              className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
-                              {...field}
-                            />
-                          </FormControl>
-                          <FormMessage className="text-xs text-rose-500" />
-                        </FormItem>
-                      )}
-                    />
-
-                    <FormField
-                      control={form.control}
-                      name="expirationDate"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                            Data de Validade
-                          </FormLabel>
-                          <FormControl>
-                            <Input
-                              type="date"
-                              className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
-                              {...field}
-                            />
-                          </FormControl>
-                          <FormDescription className="text-[10px] text-neutral-500 flex items-center gap-1">
-                            <AlertCircle className="size-3" />
-                            Mantenha vazio quando o produto não tiver validade.
-                          </FormDescription>
-                          <FormMessage className="text-xs text-rose-500" />
-                        </FormItem>
-                      )}
-                    />
-                  </CardContent>
-                </Card>
-
-                <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
-                  <CardHeader className="border-b border-neutral-800 pb-4">
-                    <div className="flex items-center gap-2">
-                      <FileText className="size-4 text-neutral-500" />
-                      <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
-                        Observações
-                      </CardTitle>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="pt-6">
-                    <FormField
-                      control={form.control}
-                      name="notes"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <Textarea
-                              placeholder="Detalhes adicionais sobre o lote…"
-                              className="min-h-[120px] resize-none rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
-                              {...field}
-                            />
-                          </FormControl>
-                          <FormMessage className="text-xs text-rose-500" />
-                        </FormItem>
-                      )}
-                    />
-                  </CardContent>
-                </Card>
+                <BatchEditDateCard form={form} />
+                <BatchEditNotesCard form={form} />
               </div>
             </div>
 
-            <div className="fixed bottom-0 left-0 right-0 z-40 border-t border-neutral-800 bg-[#0A0A0A]/95 backdrop-blur-sm p-4 md:ml-[var(--sidebar-width)]">
-              <div className="mx-auto flex w-full max-w-7xl flex-col md:flex-row items-center md:justify-end gap-3 px-4 md:px-6 lg:px-8">
-                <Button
-                  variant="outline"
-                  type="button"
-                  className="h-10 w-full md:w-auto rounded-[4px] border-neutral-700 bg-transparent text-xs font-bold uppercase tracking-wide text-neutral-300 hover:bg-neutral-800 hover:text-white"
-                  asChild
-                >
-                  <Link href={batch?.id ? `/batches/${batch.id}` : "/batches"}>
-                    Cancelar
-                  </Link>
-                </Button>
-                <PermissionGate permission="batches:update">
-                  <Button
-                    type="submit"
-                    className="h-10 w-full md:w-[180px] rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 shadow-[0_0_20px_-5px_rgba(37,99,235,0.3)]"
-                    disabled={isSubmitting}
-                  >
-                    {isSubmitting ? (
-                      <>
-                        <Loader2 className="mr-2 size-3.5 animate-spin" />
-                        Salvando…
-                      </>
-                    ) : (
-                      <>
-                        <Save className="mr-2 size-3.5" />
-                        Salvar Lote
-                      </>
-                    )}
-                  </Button>
-                </PermissionGate>
-              </div>
-            </div>
+            <BatchEditFooter viewState={viewState} />
           </form>
         </Form>
       </main>
     </div>
   );
 };
+
+function BatchEditIdentityCard({
+  viewState,
+}: {
+  viewState: BatchEditViewState;
+}) {
+  const { batchCode, form, productLabel, warehouseLabel } = viewState;
+
+  return (
+    <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
+      <CardHeader className="border-b border-neutral-800 pb-4">
+        <BatchEditCardTitle icon={<Box className="size-4 text-blue-500" />} title="Identificação e Origem" />
+      </CardHeader>
+      <CardContent className="space-y-5 pt-6">
+        <div className="grid gap-5 md:grid-cols-2">
+          <BatchEditReadonlyField form={form} name="productId" label="Produto" value={productLabel} />
+          <BatchEditReadonlyField form={form} name="warehouseId" label="Warehouse" value={warehouseLabel} />
+        </div>
+        {batchCode ? (
+          <div className="rounded-[4px] border border-neutral-800 bg-neutral-900 px-3 py-2">
+            <div className="text-[10px] font-bold uppercase tracking-wider text-neutral-500">
+              Código gerado
+            </div>
+            <div className="mt-1 font-mono text-sm font-bold text-white">
+              {batchCode}
+            </div>
+          </div>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}
+
+function BatchEditReadonlyField({
+  form,
+  label,
+  name,
+  value,
+}: {
+  form: UseFormReturn<BatchEditFormData>;
+  label: string;
+  name: "productId" | "warehouseId";
+  value: string;
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            {label}
+          </FormLabel>
+          <FormControl>
+            <Input
+              {...field}
+              value={value}
+              disabled
+              className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-neutral-300 focus:ring-0 disabled:opacity-100"
+            />
+          </FormControl>
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function BatchEditFinanceCard({
+  viewState,
+}: {
+  viewState: BatchEditViewState;
+}) {
+  const { form, handleQuantityDecrement, handleQuantityIncrement } = viewState;
+
+  return (
+    <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
+      <CardHeader className="border-b border-neutral-800 pb-4">
+        <BatchEditCardTitle icon={<DollarSign className="size-4 text-emerald-500" />} title="Financeiro e Estoque" />
+      </CardHeader>
+      <CardContent className="space-y-6 pt-6">
+        <div className="grid gap-5 md:grid-cols-3">
+          <BatchEditQuantityField
+            form={form}
+            onDecrement={handleQuantityDecrement}
+            onIncrement={handleQuantityIncrement}
+          />
+          <BatchEditCurrencyField form={form} name="costPrice" label="Custo Unitário" />
+          <BatchEditCurrencyField form={form} name="sellingPrice" label="Preço de Venda" isSellingPrice />
+        </div>
+        <BatchEditProfitSummary viewState={viewState} />
+      </CardContent>
+    </Card>
+  );
+}
+
+function BatchEditQuantityField({
+  form,
+  onDecrement,
+  onIncrement,
+}: {
+  form: UseFormReturn<BatchEditFormData>;
+  onDecrement: () => void;
+  onIncrement: () => void;
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name="quantity"
+      render={({ field }) => {
+        const { onChange, value, ...rest } = field;
+        return (
+          <FormItem>
+            <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+              Quantidade
+            </FormLabel>
+            <div className="flex">
+              <BatchEditQuantityButton label="Diminuir quantidade" onClick={onDecrement} side="left" />
+              <FormControl>
+                <NumberInput
+                  {...rest}
+                  value={value}
+                  onValueChange={onChange}
+                  mode="integer"
+                  className="h-10 min-w-0 flex-1 rounded-none border-x-0 border-neutral-800 bg-neutral-900 text-center text-sm focus:border-blue-600 focus:ring-0"
+                />
+              </FormControl>
+              <BatchEditQuantityButton label="Aumentar quantidade" onClick={onIncrement} side="right" />
+            </div>
+            <FormMessage className="text-xs text-rose-500" />
+          </FormItem>
+        );
+      }}
+    />
+  );
+}
+
+function BatchEditQuantityButton({
+  label,
+  onClick,
+  side,
+}: {
+  label: string;
+  onClick: () => void;
+  side: "left" | "right";
+}) {
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      onClick={onClick}
+      className={cn(
+        "size-10 border-neutral-800 bg-neutral-900 p-0 hover:bg-neutral-800 hover:text-white",
+        side === "left" ? "rounded-l-[4px] rounded-r-none" : "rounded-l-none rounded-r-[4px]",
+      )}
+      aria-label={label}
+    >
+      {side === "left" ? <Minus className="size-4" /> : <Plus className="size-4" />}
+    </Button>
+  );
+}
+
+function BatchEditCurrencyField({
+  form,
+  isSellingPrice = false,
+  label,
+  name,
+}: {
+  form: UseFormReturn<BatchEditFormData>;
+  isSellingPrice?: boolean;
+  label: string;
+  name: "costPrice" | "sellingPrice";
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => {
+        const { onChange, value, ...rest } = field;
+        return (
+          <FormItem>
+            <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+              {label}
+            </FormLabel>
+            <FormControl>
+              <CurrencyInput
+                {...rest}
+                value={value}
+                onValueChange={onChange}
+                placeholder="0,00"
+                className={cn(
+                  "h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:ring-0",
+                  isSellingPrice
+                    ? "font-bold text-emerald-500 focus:border-emerald-600"
+                    : "focus:border-blue-600",
+                )}
+              />
+            </FormControl>
+            <FormMessage className="text-xs text-rose-500" />
+          </FormItem>
+        );
+      }}
+    />
+  );
+}
+
+function BatchEditProfitSummary({
+  viewState,
+}: {
+  viewState: BatchEditViewState;
+}) {
+  const { isProfitable, margin, profit } = viewState;
+
+  return (
+    <div
+      className={cn(
+        "mt-4 flex items-center justify-between rounded-[4px] border px-4 py-3",
+        isProfitable
+          ? "border-emerald-900/30 bg-emerald-950/10"
+          : "border-rose-900/30 bg-rose-950/10",
+      )}
+    >
+      <span className="text-xs font-medium uppercase tracking-wide text-neutral-400">
+        Lucro Estimado
+      </span>
+      <div className="flex items-center gap-2">
+        <span className={cn("font-mono text-sm font-bold", isProfitable ? "text-emerald-500" : "text-rose-500")}>
+          {(profit / 100).toLocaleString("pt-BR", {
+            style: "currency",
+            currency: "BRL",
+          })}
+        </span>
+        <div className={cn("ml-1 rounded border px-1.5 py-0.5 text-[10px] font-bold", isProfitable ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-500" : "border-rose-500/30 bg-rose-500/10 text-rose-500")}>
+          {margin.toFixed(1)}%
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function BatchEditDateCard({ form }: { form: UseFormReturn<BatchEditFormData> }) {
+  return (
+    <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
+      <CardHeader className="border-b border-neutral-800 pb-4">
+        <BatchEditCardTitle icon={<Calendar className="size-4 text-amber-500" />} title="Vigência" />
+      </CardHeader>
+      <CardContent className="space-y-5 pt-6">
+        <BatchEditDateField form={form} name="manufacturedDate" label="Data de Fabricação" />
+        <BatchEditDateField
+          form={form}
+          name="expirationDate"
+          label="Data de Validade"
+          description="Mantenha vazio quando o produto não tiver validade."
+        />
+      </CardContent>
+    </Card>
+  );
+}
+
+function BatchEditDateField({
+  description,
+  form,
+  label,
+  name,
+}: {
+  description?: string;
+  form: UseFormReturn<BatchEditFormData>;
+  label: string;
+  name: "expirationDate" | "manufacturedDate";
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            {label}
+          </FormLabel>
+          <FormControl>
+            <Input
+              type="date"
+              className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+              {...field}
+            />
+          </FormControl>
+          {description ? (
+            <FormDescription className="flex items-center gap-1 text-[10px] text-neutral-500">
+              <AlertCircle className="size-3" />
+              {description}
+            </FormDescription>
+          ) : null}
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function BatchEditNotesCard({ form }: { form: UseFormReturn<BatchEditFormData> }) {
+  return (
+    <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
+      <CardHeader className="border-b border-neutral-800 pb-4">
+        <BatchEditCardTitle icon={<FileText className="size-4 text-neutral-500" />} title="Observações" />
+      </CardHeader>
+      <CardContent className="pt-6">
+        <FormField
+          control={form.control}
+          name="notes"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Textarea
+                  placeholder="Detalhes adicionais sobre o lote…"
+                  className="min-h-[120px] resize-none rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage className="text-xs text-rose-500" />
+            </FormItem>
+          )}
+        />
+      </CardContent>
+    </Card>
+  );
+}
+
+function BatchEditFooter({
+  viewState,
+}: {
+  viewState: BatchEditViewState;
+}) {
+  const { batch, isSubmitting } = viewState;
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-40 border-t border-neutral-800 bg-[#0A0A0A]/95 p-4 backdrop-blur-sm md:ml-[var(--sidebar-width)]">
+      <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-3 px-4 md:flex-row md:justify-end md:px-6 lg:px-8">
+        <Button
+          variant="outline"
+          type="button"
+          className="h-10 w-full rounded-[4px] border-neutral-700 bg-transparent text-xs font-bold uppercase tracking-wide text-neutral-300 hover:bg-neutral-800 hover:text-white md:w-auto"
+          asChild
+        >
+          <Link href={batch?.id ? `/batches/${batch.id}` : "/batches"}>
+            Cancelar
+          </Link>
+        </Button>
+        <PermissionGate permission="batches:update">
+          <Button
+            type="submit"
+            className="h-10 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white shadow-[0_0_20px_-5px_rgba(37,99,235,0.3)] hover:bg-blue-700 md:w-[180px]"
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? (
+              <>
+                <Loader2 className="mr-2 size-3.5 animate-spin" />
+                Salvando…
+              </>
+            ) : (
+              <>
+                <Save className="mr-2 size-3.5" />
+                Salvar Lote
+              </>
+            )}
+          </Button>
+        </PermissionGate>
+      </div>
+    </div>
+  );
+}
+
+function BatchEditCardTitle({
+  icon,
+  title,
+}: {
+  icon: ReactNode;
+  title: string;
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      {icon}
+      <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
+        {title}
+      </CardTitle>
+    </div>
+  );
+}
diff --git a/app/(pages)/batches/batches.model.ts b/app/(pages)/batches/batches.model.ts
index de2eb1a..38b8629 100644
--- a/app/(pages)/batches/batches.model.ts
+++ b/app/(pages)/batches/batches.model.ts
@@ -1,5 +1,5 @@
 import { differenceInCalendarDays, isValid, parseISO } from "date-fns";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import useSWR from "swr";
 import type {
   Batch,
@@ -162,11 +162,10 @@ export const useBatchesModel = () => {
       ),
     );
 
-  useEffect(() => {
-    if (selectedWarehouseId) {
-      setFilters((prev) => ({ ...prev, warehouseId: selectedWarehouseId }));
-    }
-  }, [selectedWarehouseId]);
+  const effectiveFilters = useMemo<BatchFilters>(() => {
+    if (!selectedWarehouseId) return filters;
+    return { ...filters, warehouseId: selectedWarehouseId };
+  }, [filters, selectedWarehouseId]);
 
   const { data, error, isLoading, mutate } = useSWR<BatchesResponse>(
     "batches",
@@ -177,8 +176,8 @@ export const useBatchesModel = () => {
   );
 
   const filtered = useMemo(
-    () => filterBatches(data?.data ?? [], filters),
-    [data, filters],
+    () => filterBatches(data?.data ?? [], effectiveFilters),
+    [data, effectiveFilters],
   );
 
   const sorted = useMemo(
@@ -244,7 +243,7 @@ export const useBatchesModel = () => {
 
   const onOpenMobileFilters = () => {
     setMobileFiltersDraft(
-      buildFilterDraft(filters, sortConfig, isGroupedByProduct),
+      buildFilterDraft(effectiveFilters, sortConfig, isGroupedByProduct),
     );
     setIsMobileFiltersOpen(true);
   };
@@ -285,7 +284,7 @@ export const useBatchesModel = () => {
 
   const onClearMobileFilters = () => {
     const nextFilters = {
-      ...filters,
+      ...effectiveFilters,
       searchQuery: "",
       status: "all" as const,
       lowStockThreshold: DEFAULT_LOW_STOCK_THRESHOLD,
@@ -302,7 +301,7 @@ export const useBatchesModel = () => {
     groupedByProduct,
     isLoading,
     error,
-    filters,
+    filters: effectiveFilters,
     sortConfig,
     isGroupedByProduct,
     isMobileFiltersOpen,
diff --git a/app/(pages)/batches/batches.view.tsx b/app/(pages)/batches/batches.view.tsx
index 172e22a..6a9505b 100644
--- a/app/(pages)/batches/batches.view.tsx
+++ b/app/(pages)/batches/batches.view.tsx
@@ -65,7 +65,6 @@ import type {
   SortConfig,
 } from "./batches.types";
 import { deriveBatchStatus } from "./batches.model";
-
 import { cn } from "@/lib/utils";
 import { PermissionGate } from "@/components/permission-gate";
 
@@ -92,6 +91,91 @@ interface BatchesViewProps {
   onMobileFilterDraftChange: (patch: Partial<BatchFilterDraft>) => void;
 }
 
+const DEFAULT_LOW_STOCK_THRESHOLD = 10;
+
+const STATUS_FILTER_OPTIONS: Array<{
+  value: BatchFilters["status"];
+  label: string;
+  tone: string;
+  icon: ReactNode;
+}> = [
+  {
+    value: "all",
+    label: "Todos",
+    tone: "text-neutral-200",
+    icon: <LayoutList className="size-3.5" strokeWidth={2.5} />,
+  },
+  {
+    value: "expired",
+    label: "Expirado",
+    tone: "text-rose-400",
+    icon: <XCircle className="size-3.5" strokeWidth={2.5} />,
+  },
+  {
+    value: "expiring",
+    label: "Expirando",
+    tone: "text-amber-400",
+    icon: <Clock className="size-3.5" strokeWidth={2.5} />,
+  },
+  {
+    value: "low",
+    label: "Baixo estoque",
+    tone: "text-blue-400",
+    icon: <TrendingDown className="size-3.5" strokeWidth={2.5} />,
+  },
+  {
+    value: "ok",
+    label: "Regular",
+    tone: "text-emerald-400",
+    icon: <CheckCircle2 className="size-3.5" strokeWidth={2.5} />,
+  },
+];
+
+const SORT_FILTER_OPTIONS: Array<{
+  value: `${SortConfig["key"]}:${SortConfig["direction"]}`;
+  label: string;
+}> = [
+  { value: "createdAt:desc", label: "Mais recentes" },
+  { value: "createdAt:asc", label: "Mais antigos" },
+  { value: "expiration:asc", label: "Validade mais próxima" },
+  { value: "expiration:desc", label: "Validade mais distante" },
+  { value: "quantity:asc", label: "Menor quantidade" },
+  { value: "quantity:desc", label: "Maior quantidade" },
+  { value: "product:asc", label: "Produto A-Z" },
+  { value: "product:desc", label: "Produto Z-A" },
+];
+
+const statusToneMap: Record<
+  string,
+  { activeBorder: string; activeBg: string; activeText: string }
+> = {
+  all: {
+    activeBorder: "border-neutral-500/50",
+    activeBg: "bg-neutral-500/10",
+    activeText: "text-neutral-100",
+  },
+  expired: {
+    activeBorder: "border-rose-500/50",
+    activeBg: "bg-rose-500/10",
+    activeText: "text-rose-100",
+  },
+  expiring: {
+    activeBorder: "border-amber-500/50",
+    activeBg: "bg-amber-500/10",
+    activeText: "text-amber-100",
+  },
+  low: {
+    activeBorder: "border-blue-500/50",
+    activeBg: "bg-blue-500/10",
+    activeText: "text-blue-100",
+  },
+  ok: {
+    activeBorder: "border-emerald-500/50",
+    activeBg: "bg-emerald-500/10",
+    activeText: "text-emerald-100",
+  },
+};
+
 const getStatusStyle = (kind: string) => {
   switch (kind) {
     case "expired":
@@ -131,6 +215,7 @@ const getStatusStyle = (kind: string) => {
 
 const formatDate = (value?: string | null) => {
   if (!value) return "-";
+
   try {
     return format(new Date(value), "dd/MM/yyyy", { locale: ptBR });
   } catch {
@@ -138,35 +223,6 @@ const formatDate = (value?: string | null) => {
   }
 };
 
-const DEFAULT_LOW_STOCK_THRESHOLD = 10;
-
-const STATUS_FILTER_OPTIONS: Array<{
-  value: BatchFilters["status"];
-  label: string;
-  tone: string;
-  icon: ReactNode;
-}> = [
-  { value: "all", label: "Todos", tone: "text-neutral-200", icon: <LayoutList className="size-3.5" strokeWidth={2.5} /> },
-  { value: "expired", label: "Expirado", tone: "text-rose-400", icon: <XCircle className="size-3.5" strokeWidth={2.5} /> },
-  { value: "expiring", label: "Expirando", tone: "text-amber-400", icon: <Clock className="size-3.5" strokeWidth={2.5} /> },
-  { value: "low", label: "Baixo estoque", tone: "text-blue-400", icon: <TrendingDown className="size-3.5" strokeWidth={2.5} /> },
-  { value: "ok", label: "Regular", tone: "text-emerald-400", icon: <CheckCircle2 className="size-3.5" strokeWidth={2.5} /> },
-];
-
-const SORT_FILTER_OPTIONS: Array<{
-  value: `${SortConfig["key"]}:${SortConfig["direction"]}`;
-  label: string;
-}> = [
-  { value: "createdAt:desc", label: "Mais recentes" },
-  { value: "createdAt:asc", label: "Mais antigos" },
-  { value: "expiration:asc", label: "Validade mais próxima" },
-  { value: "expiration:desc", label: "Validade mais distante" },
-  { value: "quantity:asc", label: "Menor quantidade" },
-  { value: "quantity:desc", label: "Maior quantidade" },
-  { value: "product:asc", label: "Produto A-Z" },
-  { value: "product:desc", label: "Produto Z-A" },
-];
-
 const getStatusFilterLabel = (status: BatchFilters["status"]) =>
   STATUS_FILTER_OPTIONS.find((option) => option.value === status)?.label ??
   "Todos";
@@ -193,6 +249,14 @@ const getActiveFilterCount = (
   return count;
 };
 
+const hasActiveBatchFilters = (props: BatchesViewProps) =>
+  Boolean(props.filters.searchQuery) ||
+  props.filters.status !== "all" ||
+  props.filters.lowStockThreshold !== DEFAULT_LOW_STOCK_THRESHOLD ||
+  props.isGroupedByProduct ||
+  props.sortConfig.key !== "createdAt" ||
+  props.sortConfig.direction !== "desc";
+
 const preventDrawerDismissFromSelectPortal = (event: Event) => {
   const target = event.target as HTMLElement | null;
 
@@ -204,6 +268,45 @@ const preventDrawerDismissFromSelectPortal = (event: Event) => {
   }
 };
 
+export const BatchesView = (props: BatchesViewProps) => {
+  const activeFilterCount = getActiveFilterCount(
+    props.filters,
+    props.sortConfig,
+    props.isGroupedByProduct,
+  );
+
+  return (
+    <div className="min-h-screen bg-[#0A0A0A] pb-20 font-sans text-neutral-200">
+      <main className="mx-auto w-full max-w-7xl px-4 py-8 md:px-6 lg:px-8">
+        <div className="space-y-6">
+          <BatchesHeaderPanel
+            props={props}
+            activeFilterCount={activeFilterCount}
+          />
+          <BatchesDataDisplay props={props} />
+        </div>
+      </main>
+      <BatchesMobileFiltersDrawer props={props} />
+    </div>
+  );
+};
+
+const SortIcon = ({
+  field,
+  sortConfig,
+}: {
+  field: SortConfig["key"];
+  sortConfig: SortConfig;
+}) => {
+  if (sortConfig.key !== field) return <div className="size-3 opacity-0" />;
+
+  return sortConfig.direction === "asc" ? (
+    <ArrowUp className="ml-1 size-3 text-blue-500" />
+  ) : (
+    <ArrowDown className="ml-1 size-3 text-blue-500" />
+  );
+};
+
 const FilterToken = ({
   active,
   count,
@@ -242,853 +345,922 @@ const FilterToken = ({
   </Button>
 );
 
-const SortIcon = ({
-  field,
-  sortConfig,
+const BatchesHeaderPanel = ({
+  activeFilterCount,
+  props,
 }: {
-  field: SortConfig["key"];
-  sortConfig: SortConfig;
-}) => {
-  if (sortConfig.key !== field) return <div className="size-3 opacity-0" />;
-  return sortConfig.direction === "asc" ? (
-    <ArrowUp className="ml-1 size-3 text-blue-500" />
-  ) : (
-    <ArrowDown className="ml-1 size-3 text-blue-500" />
-  );
-};
+  activeFilterCount: number;
+  props: BatchesViewProps;
+}) => (
+  <div className="flex flex-col gap-5">
+    <BatchesTitle />
+    <BatchesMobileFilterTokens
+      props={props}
+      activeFilterCount={activeFilterCount}
+    />
+    <BatchesInsightCard props={props} />
+    <BatchesToolbar props={props} />
+  </div>
+);
 
-export const BatchesView = ({
-  batches,
-  groupedByProduct,
-  isLoading,
-  error,
-  filters,
-  sortConfig,
-  isGroupedByProduct,
-  isMobileFiltersOpen,
-  mobileFiltersDraft,
-  statusCounts,
-  setSearchQuery,
-  setStatus,
-  onGroupedByProductChange,
-  onSortChange,
-  onMobileFiltersOpenChange,
-  onOpenMobileFilters,
-  onApplyMobileFilters,
-  onClearFilters,
-  onClearMobileFilters,
-  onMobileFilterDraftChange,
-}: BatchesViewProps) => {
-  const activeFilterCount = getActiveFilterCount(
-    filters,
-    sortConfig,
-    isGroupedByProduct,
-  );
+const BatchesTitle = () => (
+  <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+    <div>
+      <h1 className="text-2xl font-semibold tracking-tighter text-white">
+        Lotes
+      </h1>
+      <p className="mt-1 text-sm text-neutral-500">Controle lotes e validades</p>
+    </div>
+    <PermissionGate permission="batches:create">
+      <Link href="/batches/create" className="w-full md:w-auto">
+        <Button className="h-10 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 md:w-auto">
+          <Plus className="mr-2 size-4" />
+          Novo Lote
+        </Button>
+      </Link>
+    </PermissionGate>
+  </div>
+);
+
+const BatchesMobileFilterTokens = ({
+  activeFilterCount,
+  props,
+}: {
+  activeFilterCount: number;
+  props: BatchesViewProps;
+}) => (
+  <div className="relative -mx-4 md:hidden">
+    <div className="overflow-x-auto px-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+      <div className="flex min-w-max gap-2 pb-1 pr-8">
+        <FilterToken
+          active={activeFilterCount > 0}
+          count={activeFilterCount}
+          icon={<SlidersHorizontal className="size-3.5" />}
+          label="Filtros"
+          onClick={props.onOpenMobileFilters}
+        />
+        <FilterToken
+          active={props.filters.status !== "all"}
+          icon={<Filter className="size-3.5" />}
+          label="Status"
+          value={getStatusFilterLabel(props.filters.status)}
+          onClick={props.onOpenMobileFilters}
+        />
+        <FilterToken
+          active={
+            props.sortConfig.key !== "createdAt" ||
+            props.sortConfig.direction !== "desc"
+          }
+          icon={<ArrowDown className="size-3.5" />}
+          label="Ordem"
+          value={getSortLabel(props.sortConfig)}
+          onClick={props.onOpenMobileFilters}
+        />
+        <FilterToken
+          active={props.isGroupedByProduct}
+          icon={<Layers className="size-3.5" />}
+          label="Visão"
+          value={props.isGroupedByProduct ? "Agrupado" : "Lista completa"}
+          onClick={props.onOpenMobileFilters}
+        />
+        <FilterToken
+          active={
+            props.filters.lowStockThreshold !== DEFAULT_LOW_STOCK_THRESHOLD
+          }
+          icon={<Package className="size-3.5" />}
+          label="Baixo"
+          value={`<= ${props.filters.lowStockThreshold} un.`}
+          onClick={props.onOpenMobileFilters}
+        />
+      </div>
+    </div>
+    <div className="pointer-events-none absolute bottom-0 right-0 top-0 w-12 bg-gradient-to-l from-[#0A0A0A] to-transparent" />
+  </div>
+);
+
+const BatchesInsightCard = ({ props }: { props: BatchesViewProps }) => (
+  <div className="flex items-center justify-between gap-6 overflow-x-auto rounded-[4px] border border-neutral-800 bg-[#171717] p-4 [scrollbar-width:none] sm:p-5 [&::-webkit-scrollbar]:hidden">
+    <BatchStatusKpi
+      label="Expirados"
+      value={props.statusCounts.expired}
+      valueLabel="lotes"
+      icon={<XCircle className="size-5 text-rose-500 sm:size-6" strokeWidth={2} />}
+      active={props.filters.status === "expired"}
+      tone="rose"
+      onClick={() =>
+        props.setStatus(props.filters.status === "expired" ? "all" : "expired")
+      }
+    />
+    <div className="h-10 w-px shrink-0 bg-neutral-800" />
+    <BatchStatusKpi
+      label="Expirando (30d)"
+      value={props.statusCounts.expiring}
+      valueLabel="alertas"
+      icon={<Calendar className="size-5 text-amber-500 sm:size-6" strokeWidth={2} />}
+      active={props.filters.status === "expiring"}
+      tone="amber"
+      onClick={() =>
+        props.setStatus(
+          props.filters.status === "expiring" ? "all" : "expiring",
+        )
+      }
+    />
+  </div>
+);
 
+const BatchStatusKpi = ({
+  active,
+  icon,
+  label,
+  onClick,
+  tone,
+  value,
+  valueLabel,
+}: {
+  active: boolean;
+  icon: ReactNode;
+  label: string;
+  onClick: () => void;
+  tone: "amber" | "rose";
+  value: number;
+  valueLabel: string;
+}) => (
+  <button
+    type="button"
+    onClick={onClick}
+    className="flex shrink-0 items-center gap-3 text-left sm:gap-4"
+  >
+    <div
+      className={cn(
+        "flex size-11 shrink-0 items-center justify-center rounded-[4px] border sm:size-12",
+        tone === "rose"
+          ? "border-rose-500/30 bg-rose-500/10"
+          : "border-amber-500/30 bg-amber-500/10",
+      )}
+    >
+      {icon}
+    </div>
+    <div>
+      <div className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+        {label}
+        {active && (
+          <span className="size-1.5 shrink-0 rounded-[1px] bg-blue-500" />
+        )}
+      </div>
+      <div className="mt-0.5 flex items-baseline gap-1.5">
+        <span className="font-mono text-xl font-bold tracking-tight text-white sm:text-2xl">
+          {value}
+        </span>
+        <span className="text-xs font-medium text-neutral-400">
+          {valueLabel}
+        </span>
+      </div>
+    </div>
+  </button>
+);
 
-  const statusToneMap: Record<string, { activeBorder: string; activeBg: string; activeText: string }> = {
-    all: { activeBorder: "border-neutral-500/50", activeBg: "bg-neutral-500/10", activeText: "text-neutral-100" },
-    expired: { activeBorder: "border-rose-500/50", activeBg: "bg-rose-500/10", activeText: "text-rose-100" },
-    expiring: { activeBorder: "border-amber-500/50", activeBg: "bg-amber-500/10", activeText: "text-amber-100" },
-    low: { activeBorder: "border-blue-500/50", activeBg: "bg-blue-500/10", activeText: "text-blue-100" },
-    ok: { activeBorder: "border-emerald-500/50", activeBg: "bg-emerald-500/10", activeText: "text-emerald-100" },
-  };
+const BatchesToolbar = ({ props }: { props: BatchesViewProps }) => (
+  <div className="flex w-full flex-col gap-3 md:h-12 md:flex-row md:items-center">
+    <div className="relative flex h-12 min-w-[200px] flex-1 items-center">
+      <div className="absolute left-3 text-neutral-500">
+        <Search className="size-3.5" />
+      </div>
+      <Input
+        placeholder="Buscar por produto, SKU ou lote…"
+        value={props.filters.searchQuery}
+        onChange={(event) => props.setSearchQuery(event.target.value)}
+        className="w-full rounded-[4px] border-neutral-800 bg-[#171717] pl-10 text-sm text-neutral-200 placeholder:text-neutral-600 transition-all hover:border-neutral-700 focus:border-blue-600 focus:ring-0"
+      />
+    </div>
+    <BatchesDesktopFilters props={props} />
+  </div>
+);
 
-  const draft = mobileFiltersDraft;
-  const mobileFiltersPanel = (
-    <Drawer open={isMobileFiltersOpen} onOpenChange={onMobileFiltersOpenChange}>
-      <DrawerContent
-        className="border-neutral-800 bg-[#171717] text-neutral-100"
-        onInteractOutside={preventDrawerDismissFromSelectPortal}
-        onPointerDownOutside={preventDrawerDismissFromSelectPortal}
+const BatchesDesktopFilters = ({ props }: { props: BatchesViewProps }) => (
+  <div className="hidden h-auto flex-col items-center gap-2 md:flex md:h-12 md:flex-row">
+    <BatchStatusSelect props={props} />
+    <Button
+      type="button"
+      variant="outline"
+      onClick={() => props.onGroupedByProductChange(!props.isGroupedByProduct)}
+      className={cn(
+        "w-full rounded-[4px] border-neutral-800 bg-[#171717] text-[10px] font-bold uppercase tracking-widest md:w-auto",
+        props.isGroupedByProduct
+          ? "border-blue-600 bg-blue-950/20 text-blue-500 hover:bg-blue-950/30"
+          : "text-neutral-400 hover:bg-neutral-800 hover:text-white",
+      )}
+    >
+      <Layers className="size-3.5" />
+      {props.isGroupedByProduct ? "Lista Completa" : "Agrupar por Produto"}
+    </Button>
+    {hasActiveBatchFilters(props) && (
+      <Button
+        variant="outline"
+        onClick={props.onClearFilters}
+        className="w-full rounded-[4px] border-neutral-800 bg-[#171717] text-[10px] font-bold uppercase tracking-widest text-neutral-400 hover:bg-neutral-800 hover:text-white md:w-auto"
       >
-        <DrawerHeader className="px-5 pb-2 text-left">
-          <DrawerTitle className="text-lg font-black tracking-tight text-white">
-            Filtros
-          </DrawerTitle>
-          <DrawerDescription className="text-xs text-neutral-500">
-            Refine os lotes por status, agrupamento e regra de estoque.
-          </DrawerDescription>
-        </DrawerHeader>
+        Limpar
+      </Button>
+    )}
+  </div>
+);
 
-        <div className="max-h-[68vh] overflow-y-auto px-5 py-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-          <div className="space-y-6">
-            <section className="space-y-3">
-              <h3 className="text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
-                Status do lote
-              </h3>
-              <div className="grid grid-cols-3 gap-2">
-                {STATUS_FILTER_OPTIONS.map((option) => {
-                  const tones = statusToneMap[option.value];
-                  const isActive = draft.status === option.value;
-                  return (
-                    <Button
-                      key={option.value}
-                      type="button"
-                      variant="outline"
-                      onClick={() =>
-                        onMobileFilterDraftChange({ status: option.value })
-                      }
-                      className={cn(
-                        "h-10 w-full rounded-[4px] border text-xs font-bold transition-colors",
-                        isActive
-                          ? cn(tones.activeBorder, tones.activeBg, tones.activeText)
-                          : "border-neutral-800 bg-neutral-950/50 text-neutral-500 hover:border-neutral-700 hover:bg-neutral-900 hover:text-white",
-                      )}
-                    >
-                      {option.icon}
-                      {option.label}
-                    </Button>
-                  );
-                })}
-              </div>
-            </section>
+const BatchStatusSelect = ({ props }: { props: BatchesViewProps }) => (
+  <Select
+    value={props.filters.status}
+    onValueChange={(value) => props.setStatus(value as BatchFilters["status"])}
+  >
+    <SelectTrigger className="h-12 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-[10px] font-bold uppercase tracking-widest text-neutral-400 transition-colors hover:border-neutral-700 focus:border-blue-600 focus:ring-0 md:w-[150px]">
+      <div className="flex items-center gap-2">
+        <Filter className="size-3.5 text-neutral-500" />
+        <SelectValue placeholder="Status" />
+      </div>
+    </SelectTrigger>
+    <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+      {STATUS_FILTER_OPTIONS.map((option) => (
+        <SelectItem
+          key={option.value}
+          value={option.value}
+          className={cn(
+            "text-[9px] font-bold uppercase focus:bg-neutral-800",
+            option.tone,
+          )}
+        >
+          {option.label}
+        </SelectItem>
+      ))}
+    </SelectContent>
+  </Select>
+);
 
-            <div className="h-px bg-neutral-800/60" />
+const BatchesDataDisplay = ({ props }: { props: BatchesViewProps }) => {
+  if (props.isLoading) return <BatchesLoadingState />;
+  if (props.error) return <BatchesErrorState />;
+  if (props.batches.length === 0) return <BatchesEmptyState props={props} />;
 
-            <section className="space-y-3">
-              <div className="flex items-center justify-between">
-                <h3 className="text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
-                  Baixo estoque
-                </h3>
-                <span className="rounded-[4px] border border-blue-500/30 bg-blue-500/10 px-2 py-0.5 font-mono text-xs font-black text-blue-300">
-                  {draft.lowStockThreshold} un.
-                </span>
-              </div>
-              <p className="text-[11px] leading-relaxed text-neutral-500">
-                Lotes com quantidade ≤ limite entram no status de baixo estoque.
-              </p>
-              <input
-                type="range"
-                min={1}
-                max={100}
-                step={1}
-                value={draft.lowStockThreshold}
-                onChange={(event) =>
-                  onMobileFilterDraftChange({
-                    lowStockThreshold: Number(event.target.value),
-                  })
-                }
-                className="h-1.5 w-full cursor-pointer rounded-[4px] bg-neutral-800 accent-blue-500"
-              />
-              <div className="flex justify-between text-[10px] font-bold uppercase tracking-widest text-neutral-600">
-                <span>1 un.</span>
-                <span>100 un.</span>
-              </div>
-            </section>
+  return (
+    <div className="min-h-[400px]">
+      {props.isGroupedByProduct ? (
+        <BatchesGroupedAccordion props={props} />
+      ) : (
+        <>
+          <BatchesTable props={props} />
+          <BatchesMobileCards props={props} />
+        </>
+      )}
+    </div>
+  );
+};
 
-            <div className="h-px bg-neutral-800/60" />
+const BatchesLoadingState = () => (
+  <div className="min-h-[400px]">
+    <div className="flex h-64 w-full flex-col items-center justify-center gap-4 rounded-[4px] border border-neutral-800 bg-[#171717]/50">
+      <Loader2 className="size-8 animate-spin text-blue-600" />
+      <span className="text-xs uppercase tracking-wide text-neutral-500">
+        Carregando lotes…
+      </span>
+    </div>
+  </div>
+);
 
-            <section className="space-y-3">
-              <h3 className="text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
-                Visualização
-              </h3>
-              <div className="grid grid-cols-2 gap-2">
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() =>
-                    onMobileFilterDraftChange({ isGroupedByProduct: false })
-                  }
-                  className={cn(
-                    "h-10 w-full rounded-[4px] border text-xs font-bold transition-colors",
-                    !draft.isGroupedByProduct
-                      ? "border-blue-500/50 bg-blue-500/10 text-blue-100"
-                      : "border-neutral-800 bg-neutral-950/50 text-neutral-500 hover:border-neutral-700 hover:bg-neutral-900 hover:text-white",
-                  )}
-                >
-                  <Layers className="mr-2 size-3.5" />
-                  Lista
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() =>
-                    onMobileFilterDraftChange({ isGroupedByProduct: true })
-                  }
-                  className={cn(
-                    "h-10 w-full rounded-[4px] border text-xs font-bold transition-colors",
-                    draft.isGroupedByProduct
-                      ? "border-blue-500/50 bg-blue-500/10 text-blue-100"
-                      : "border-neutral-800 bg-neutral-950/50 text-neutral-500 hover:border-neutral-700 hover:bg-neutral-900 hover:text-white",
-                  )}
-                >
-                  <Package className="mr-2 size-3.5" />
-                  Agrupar
-                </Button>
-              </div>
-            </section>
+const BatchesErrorState = () => (
+  <div className="min-h-[400px]">
+    <div className="flex h-64 w-full flex-col items-center justify-center gap-4 rounded-[4px] border border-rose-900/30 bg-rose-950/10">
+      <AlertTriangle className="size-8 text-rose-500" />
+      <div className="text-center">
+        <h3 className="text-sm font-semibold uppercase text-rose-500">
+          Falha na conexão
+        </h3>
+        <p className="text-xs text-rose-500/70">
+          Não foi possível carregar a lista de lotes
+        </p>
+      </div>
+    </div>
+  </div>
+);
 
-            <div className="h-px bg-neutral-800/60" />
+const BatchesEmptyState = ({ props }: { props: BatchesViewProps }) => {
+  const hasFilters = Boolean(props.filters.searchQuery) || props.filters.status !== "all";
 
-            <section className="space-y-3">
-              <h3 className="text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
-                Ordenar por
-              </h3>
-              <Select
-                value={`${draft.sortKey}:${draft.sortDirection}`}
-                onValueChange={(value) => {
-                  const [sortKey, sortDirection] = value.split(":") as [
-                    SortConfig["key"],
-                    SortConfig["direction"],
-                  ];
-                  onMobileFilterDraftChange({ sortKey, sortDirection });
-                }}
-              >
-                <SelectTrigger className="h-10 w-full rounded-[4px] border-neutral-800 bg-neutral-950/50 text-xs text-neutral-300 focus:border-blue-600 focus:ring-0">
-                  <SelectValue placeholder="Ordenar por" />
-                </SelectTrigger>
-                <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
-                  {SORT_FILTER_OPTIONS.map((option) => (
-                    <SelectItem
-                      key={option.value}
-                      value={option.value}
-                      className="text-xs focus:bg-neutral-800"
-                    >
-                      {option.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </section>
-          </div>
+  return (
+    <div className="min-h-[400px]">
+      <div className="flex h-96 w-full flex-col items-center justify-center gap-6 rounded-[4px] border border-dashed border-neutral-800 bg-[#171717]/30">
+        <div className="flex size-20 items-center justify-center rounded-[4px] bg-neutral-900 ring-1 ring-neutral-800">
+          <Layers className="size-8 text-neutral-600" />
         </div>
-
-        <DrawerFooter className="flex-row gap-3 border-t border-neutral-800 px-5 pt-4">
+        <div className="text-center">
+          <h3 className="text-sm font-semibold uppercase tracking-wide text-neutral-300">
+            {hasFilters ? "Nenhum resultado encontrado" : "Nenhum lote cadastrado"}
+          </h3>
+          <p className="mt-1 max-w-xs text-xs text-neutral-500">
+            {hasFilters
+              ? "Tente ajustar seus termos de busca ou filtros."
+              : "O inventário de lotes está vazio. Comece adicionando um novo lote."}
+          </p>
+        </div>
+        {hasFilters ? (
           <Button
-            type="button"
             variant="outline"
-            onClick={onClearMobileFilters}
-            className="h-11 flex-1 rounded-[4px] border-neutral-700 bg-transparent text-[10px] font-bold uppercase tracking-widest text-neutral-400 hover:bg-neutral-800 hover:text-white"
-          >
-            <Trash2 className="mr-2 size-3.5" />
-            Limpar
-          </Button>
-          <Button
-            type="button"
-            onClick={onApplyMobileFilters}
-            className="h-11 flex-[2] rounded-[4px] bg-blue-600 text-[10px] font-black uppercase tracking-widest text-white hover:bg-blue-500"
+            onClick={props.onClearFilters}
+            className="rounded-[4px] border-neutral-700 text-xs uppercase text-neutral-300 hover:bg-neutral-800"
           >
-            Aplicar filtros
+            Limpar Filtros
           </Button>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
+        ) : (
+          <PermissionGate permission="batches:create">
+            <Link href="/batches/create">
+              <Button className="rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700">
+                <Plus className="mr-2 size-3.5" />
+                Primeiro Lote
+              </Button>
+            </Link>
+          </PermissionGate>
+        )}
+      </div>
+    </div>
   );
+};
 
-  return (
-    <div className="min-h-screen bg-[#0A0A0A] pb-20 font-sans text-neutral-200">
-      <main className="mx-auto w-full max-w-7xl px-4 py-8 md:px-6 lg:px-8">
-        <div className="space-y-6">
-          <div className="flex flex-col gap-5">
-            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-              <div>
-                <h1 className="text-2xl font-semibold tracking-tighter text-white">
-                  Lotes
-                </h1>
-                <p className="text-sm text-neutral-500 mt-1">
-                  Controle lotes e validades
-                </p>
-              </div>
-              <PermissionGate permission="batches:create">
-                <Link href="/batches/create" className="w-full md:w-auto">
-                  <Button className="h-10 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 shadow-[0_0_20px_-5px_rgba(37,99,235,0.3)] md:w-auto">
-                    <Plus className="mr-2 size-4" />
-                    Novo Lote
-                  </Button>
-                </Link>
-              </PermissionGate>
-            </div>
-
-            <div className="relative -mx-4 md:hidden">
-              <div className="overflow-x-auto px-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-                <div className="flex min-w-max gap-2 pb-1 pr-8">
-                  <FilterToken
-                    active={activeFilterCount > 0}
-                    count={activeFilterCount}
-                    icon={<SlidersHorizontal className="size-3.5" />}
-                    label="Filtros"
-                    onClick={onOpenMobileFilters}
-                  />
-                  <FilterToken
-                    active={filters.status !== "all"}
-                    icon={<Filter className="size-3.5" />}
-                    label="Status"
-                    value={getStatusFilterLabel(filters.status)}
-                    onClick={onOpenMobileFilters}
-                  />
-                  <FilterToken
-                    active={
-                      sortConfig.key !== "createdAt" ||
-                      sortConfig.direction !== "desc"
-                    }
-                    icon={<ArrowDown className="size-3.5" />}
-                    label="Ordem"
-                    value={getSortLabel(sortConfig)}
-                    onClick={onOpenMobileFilters}
-                  />
-                  <FilterToken
-                    active={isGroupedByProduct}
-                    icon={<Layers className="size-3.5" />}
-                    label="Visão"
-                    value={
-                      isGroupedByProduct ? "Agrupado" : "Lista completa"
-                    }
-                    onClick={onOpenMobileFilters}
-                  />
-                  <FilterToken
-                    active={
-                      filters.lowStockThreshold !==
-                      DEFAULT_LOW_STOCK_THRESHOLD
-                    }
-                    icon={<Package className="size-3.5" />}
-                    label="Baixo"
-                    value={`<= ${filters.lowStockThreshold} un.`}
-                    onClick={onOpenMobileFilters}
-                  />
-                </div>
-              </div>
-              <div className="pointer-events-none absolute bottom-0 right-0 top-0 w-12 bg-gradient-to-l from-[#0A0A0A] to-transparent" />
-            </div>
-
-            {/* Insight Card */}
-            <div className="flex items-center justify-between gap-6 rounded-[4px] border border-neutral-800 bg-[#171717] p-4 sm:p-5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-              {/* Expired */}
-              <button
-                type="button"
-                onClick={() => setStatus(filters.status === "expired" ? "all" : "expired")}
-                className="flex items-center gap-3 sm:gap-4 shrink-0 text-left"
-              >
-                <div className="flex size-11 sm:size-12 shrink-0 items-center justify-center rounded-[4px] border border-rose-500/30 bg-rose-500/10">
-                  <XCircle className="size-5 sm:size-6 text-rose-500" strokeWidth={2} />
-                </div>
-                <div>
-                  <div className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                    Expirados
-                    {filters.status === "expired" && (
-                      <span className="size-1.5 rounded-[1px] bg-blue-500 shrink-0" />
-                    )}
-                  </div>
-                  <div className="mt-0.5 flex items-baseline gap-1.5">
-                    <span className="font-mono text-xl sm:text-2xl font-bold tracking-tight text-white">
-                      {statusCounts.expired}
-                    </span>
-                    <span className="text-xs font-medium text-neutral-400">
-                      lotes
-                    </span>
-                  </div>
-                </div>
-              </button>
+const BatchesGroupedAccordion = ({ props }: { props: BatchesViewProps }) => (
+  <Accordion type="multiple" className="space-y-3">
+    {props.groupedByProduct.map((group) => (
+      <BatchProductGroup
+        key={group.key}
+        group={group}
+        lowStockThreshold={props.filters.lowStockThreshold}
+      />
+    ))}
+  </Accordion>
+);
 
-              {/* Divider */}
-              <div className="h-10 w-[1px] shrink-0 bg-neutral-800" />
+const BatchProductGroup = ({
+  group,
+  lowStockThreshold,
+}: {
+  group: ProductBatchesGroup;
+  lowStockThreshold: number;
+}) => (
+  <AccordionItem
+    value={group.key}
+    className="rounded-[4px] border border-neutral-800 bg-[#171717] px-4"
+  >
+    <AccordionTrigger className="py-3 text-left hover:no-underline">
+      <BatchProductGroupHeader group={group} />
+    </AccordionTrigger>
+    <AccordionContent className="pb-0">
+      <div className="divide-y divide-neutral-800/60 border-t border-neutral-800">
+        {group.batches.map((batch) => (
+          <BatchGroupedRow
+            key={batch.id}
+            batch={batch}
+            lowStockThreshold={lowStockThreshold}
+          />
+        ))}
+      </div>
+    </AccordionContent>
+  </AccordionItem>
+);
 
-              {/* Expiring */}
-              <button
-                type="button"
-                onClick={() => setStatus(filters.status === "expiring" ? "all" : "expiring")}
-                className="flex items-center gap-3 sm:gap-4 shrink-0 text-left"
-              >
-                <div className="flex size-11 sm:size-12 shrink-0 items-center justify-center rounded-[4px] border border-amber-500/30 bg-amber-500/10">
-                  <Calendar className="size-5 sm:size-6 text-amber-500" strokeWidth={2} />
-                </div>
-                <div>
-                  <div className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                    Expirando (30d)
-                    {filters.status === "expiring" && (
-                      <span className="size-1.5 rounded-[1px] bg-blue-500 shrink-0" />
-                    )}
-                  </div>
-                  <div className="mt-0.5 flex items-baseline gap-1.5">
-                    <span className="font-mono text-xl sm:text-2xl font-bold tracking-tight text-white">
-                      {statusCounts.expiring}
-                    </span>
-                    <span className="text-xs font-medium text-neutral-400">
-                      alertas
-                    </span>
-                  </div>
-                </div>
-              </button>
-            </div>
+const BatchProductGroupHeader = ({
+  group,
+}: {
+  group: ProductBatchesGroup;
+}) => (
+  <div className="flex w-full items-center justify-between gap-3 pr-2">
+    <div className="space-y-0.5">
+      <h3 className="text-sm font-semibold text-white">{group.productName}</h3>
+      <p className="font-mono text-[10px] uppercase tracking-wider text-neutral-500">
+        {group.productSku || "SEM SKU"}
+      </p>
+    </div>
+    <div className="text-right">
+      <p className="text-[10px] font-bold uppercase tracking-wider text-neutral-500">
+        {group.batches.length} {group.batches.length === 1 ? "lote" : "lotes"}
+      </p>
+      <p className="text-sm font-bold tracking-tighter text-white">
+        {group.totalQuantity} un
+      </p>
+    </div>
+  </div>
+);
 
-            {/* Row 2: Search & Filters */}
-            <div className="flex flex-col gap-3 md:flex-row md:items-center md:h-12 w-full">
-              <div className="relative h-12 flex-1 min-w-[200px] flex items-center">
-                <div className="text-neutral-500 absolute left-3">
-                  <Search className="size-3.5" />
-                </div>
-                <Input
-                  placeholder="Buscar por produto, SKU ou lote…"
-                  value={filters.searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full rounded-[4px] border-neutral-800 bg-[#171717] pl-10 text-sm text-neutral-200 placeholder:text-neutral-600 focus:border-blue-600 focus:ring-0 transition-all hover:border-neutral-700"
-                />
-              </div>
+const BatchGroupedRow = ({
+  batch,
+  lowStockThreshold,
+}: {
+  batch: Batch;
+  lowStockThreshold: number;
+}) => {
+  const status = deriveBatchStatus(batch, { lowStockThreshold });
+  const style = getStatusStyle(status.kind);
 
-              <div className="hidden flex-col items-center gap-2 h-auto md:flex md:h-12 md:flex-row">
-                <Select
-                  value={filters.status}
-                  onValueChange={(value) =>
-                    setStatus(value as BatchFilters["status"])
-                  }
-                >
-                  <SelectTrigger className="h-12 w-full md:w-[150px] rounded-[4px] border-neutral-800 bg-[#171717] text-[10px] font-bold uppercase tracking-widest text-neutral-400 focus:border-blue-600 focus:ring-0 hover:border-neutral-700 transition-colors">
-                    <div className="flex items-center gap-2">
-                      <Filter className="size-3.5 text-neutral-500" />
-                      <SelectValue placeholder="Status" />
-                    </div>
-                  </SelectTrigger>
-                  <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
-                    <SelectItem
-                      value="all"
-                      className="text-[9px] font-bold uppercase focus:bg-neutral-800"
-                    >
-                      Todos
-                    </SelectItem>
-                    <SelectItem
-                      value="expired"
-                      className="text-[9px] font-bold uppercase focus:bg-neutral-800 text-rose-500"
-                    >
-                      Expirado
-                    </SelectItem>
-                    <SelectItem
-                      value="expiring"
-                      className="text-[9px] font-bold uppercase focus:bg-neutral-800 text-amber-500"
-                    >
-                      Expirando
-                    </SelectItem>
-                    <SelectItem
-                      value="low"
-                      className="text-[9px] font-bold uppercase focus:bg-neutral-800 text-blue-500"
-                    >
-                      Baixo Estoque
-                    </SelectItem>
-                    <SelectItem
-                      value="ok"
-                      className="text-[9px] font-bold uppercase focus:bg-neutral-800 text-emerald-500"
-                    >
-                      Regular
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
+  return (
+    <div className="flex flex-col gap-3 py-3 md:flex-row md:items-center md:justify-between">
+      <div className="grid gap-1 text-xs">
+        <div className="flex items-center gap-2 text-neutral-300">
+          <span className="font-mono text-[11px]">
+            {batch.batchNumber || "SEM LOTE"}
+          </span>
+          {batch.batchCode && (
+            <>
+              <span className="text-neutral-700">•</span>
+              <span className="font-mono text-[10px] text-neutral-500">
+                {batch.batchCode}
+              </span>
+            </>
+          )}
+        </div>
+        <div className="flex flex-wrap items-center gap-2 text-[10px] uppercase tracking-wider text-neutral-500">
+          <span>{batch.warehouseName}</span>
+          <span className="text-neutral-700">•</span>
+          <span>Qtd: {batch.quantity}</span>
+          <span className="text-neutral-700">•</span>
+          <span>Val: {formatDate(batch.expirationDate)}</span>
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <BatchStatusBadge statusLabel={status.label} style={style} />
+        <Link href={`/batches/${batch.id}`}>
+          <Button
+            variant="outline"
+            className="h-8 rounded-[4px] border-neutral-800 bg-neutral-900 px-3 text-[10px] font-bold uppercase tracking-wide text-neutral-300 hover:bg-neutral-800 hover:text-white"
+          >
+            Detalhes
+          </Button>
+        </Link>
+      </div>
+    </div>
+  );
+};
 
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() =>
-                    onGroupedByProductChange(!isGroupedByProduct)
-                  }
-                  className={cn(
-                    "w-full md:w-auto rounded-[4px] border-neutral-800 bg-[#171717] text-[10px] font-bold uppercase tracking-widest",
-                    isGroupedByProduct
-                      ? "border-blue-600 bg-blue-950/20 text-blue-500 hover:bg-blue-950/30"
-                      : "text-neutral-400 hover:bg-neutral-800 hover:text-white",
-                  )}
-                >
-                  <Layers className="size-3.5" />
-                  {isGroupedByProduct
-                    ? "Lista Completa"
-                    : "Agrupar por Produto"}
-                </Button>
+const BatchesTable = ({ props }: { props: BatchesViewProps }) => (
+  <div className="hidden overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717] md:block">
+    <Table>
+      <TableHeader className="bg-neutral-900">
+        <TableRow className="border-b border-neutral-800 hover:bg-neutral-900">
+          <BatchSortableHead
+            align="left"
+            field="product"
+            label="Produto"
+            props={props}
+          />
+          <TableHead className="h-10 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+            Código / Lote
+          </TableHead>
+          <TableHead className="h-10 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+            Armazém
+          </TableHead>
+          <BatchSortableHead
+            align="right"
+            field="quantity"
+            label="Qtd."
+            props={props}
+          />
+          <BatchSortableHead
+            align="center"
+            field="expiration"
+            label="Validade"
+            props={props}
+          />
+          <TableHead className="h-10 text-center text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+            Status
+          </TableHead>
+          <TableHead className="h-10 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+            Ações
+          </TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {props.batches.map((batch) => (
+          <BatchTableRow
+            key={batch.id}
+            batch={batch}
+            lowStockThreshold={props.filters.lowStockThreshold}
+          />
+        ))}
+      </TableBody>
+    </Table>
+  </div>
+);
 
-                {(filters.searchQuery ||
-                  filters.status !== "all" ||
-                  filters.lowStockThreshold !==
-                    DEFAULT_LOW_STOCK_THRESHOLD ||
-                  isGroupedByProduct ||
-                  sortConfig.key !== "createdAt" ||
-                  sortConfig.direction !== "desc") && (
-                  <Button
-                    variant="outline"
-                    onClick={onClearFilters}
-                    className="w-full md:w-auto rounded-[4px] border-neutral-800 bg-[#171717] text-[10px] font-bold uppercase tracking-widest text-neutral-400 hover:bg-neutral-800 hover:text-white"
-                  >
-                    Limpar
-                  </Button>
-                )}
-              </div>
-            </div>
-          </div>
+const BatchSortableHead = ({
+  align,
+  field,
+  label,
+  props,
+}: {
+  align: "center" | "left" | "right";
+  field: SortConfig["key"];
+  label: string;
+  props: BatchesViewProps;
+}) => (
+  <TableHead
+    className={cn(
+      "h-10 cursor-pointer text-[10px] font-bold uppercase tracking-widest text-neutral-500 hover:text-white",
+      align === "right" && "text-right",
+      align === "center" && "text-center",
+    )}
+    onClick={() => props.onSortChange(field)}
+  >
+    <div
+      className={cn(
+        "flex items-center gap-1",
+        align === "right" && "justify-end",
+        align === "center" && "justify-center",
+      )}
+    >
+      {label}
+      <SortIcon field={field} sortConfig={props.sortConfig} />
+    </div>
+  </TableHead>
+);
 
-          {/* Data Display */}
-          <div className="min-h-[400px]">
-            {/* Loading */}
-            {isLoading && (
-              <div className="flex h-64 w-full flex-col items-center justify-center gap-4 rounded-[4px] border border-neutral-800 bg-[#171717]/50">
-                <Loader2 className="size-8 animate-spin text-blue-600" />
-                <span className="text-xs uppercase tracking-wide text-neutral-500">
-                  Carregando lotes…
-                </span>
-              </div>
-            )}
+const BatchTableRow = ({
+  batch,
+  lowStockThreshold,
+}: {
+  batch: Batch;
+  lowStockThreshold: number;
+}) => {
+  const status = deriveBatchStatus(batch, { lowStockThreshold });
+  const style = getStatusStyle(status.kind);
 
-            {/* Error */}
-            {error && (
-              <div className="flex h-64 w-full flex-col items-center justify-center gap-4 rounded-[4px] border border-rose-900/30 bg-rose-950/10">
-                <AlertTriangle className="size-8 text-rose-500" />
-                <div className="text-center">
-                  <h3 className="text-sm font-semibold uppercase text-rose-500">
-                    Falha na conexão
-                  </h3>
-                  <p className="text-xs text-rose-500/70">
-                    Não foi possível carregar a lista de lotes
-                  </p>
-                </div>
-              </div>
-            )}
+  return (
+    <TableRow className="group border-b border-neutral-800/50 transition-colors hover:bg-neutral-800/50">
+      <TableCell className="py-3">
+        <div className="flex flex-col gap-0.5">
+          <span className="font-medium text-white">{batch.productName}</span>
+          <span className="font-mono text-[10px] text-neutral-500">
+            {batch.productSku || "SEM SKU"}
+          </span>
+        </div>
+      </TableCell>
+      <TableCell className="py-3">
+        <div className="flex flex-col gap-0.5">
+          <span className="font-mono text-xs text-neutral-300">
+            {batch.batchNumber || "—"}
+          </span>
+          {batch.batchCode && (
+            <span className="font-mono text-[10px] text-neutral-600">
+              {batch.batchCode}
+            </span>
+          )}
+        </div>
+      </TableCell>
+      <TableCell className="py-3 text-xs text-neutral-300">
+        {batch.warehouseName}
+      </TableCell>
+      <TableCell className="py-3 text-right">
+        <span className="font-mono text-sm font-bold tracking-tighter text-white">
+          {batch.quantity}
+        </span>
+      </TableCell>
+      <TableCell className="py-3 text-center">
+        <span className="font-mono text-xs text-neutral-400">
+          {formatDate(batch.expirationDate)}
+        </span>
+      </TableCell>
+      <TableCell className="py-3 text-center">
+        <BatchStatusBadge statusLabel={status.label} style={style} />
+      </TableCell>
+      <TableCell className="py-3">
+        <div className="flex justify-end gap-1 opacity-60 transition-opacity group-hover:opacity-100">
+          <Link href={`/batches/${batch.id}`}>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-8 rounded-[4px] text-neutral-400 hover:bg-neutral-800 hover:text-white"
+              aria-label="Ver detalhes"
+            >
+              <Eye className="size-4" />
+            </Button>
+          </Link>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+};
 
-            {/* Empty State */}
-            {!isLoading && !error && batches.length === 0 && (
-              <div className="flex h-96 w-full flex-col items-center justify-center gap-6 rounded-[4px] border border-dashed border-neutral-800 bg-[#171717]/30">
-                <div className="flex size-20 items-center justify-center rounded-full bg-neutral-900 ring-1 ring-neutral-800">
-                  <Layers className="size-8 text-neutral-600" />
-                </div>
-                <div className="text-center">
-                  <h3 className="text-sm font-semibold uppercase tracking-wide text-neutral-300">
-                    {filters.searchQuery || filters.status !== "all"
-                      ? "Nenhum resultado encontrado"
-                      : "Nenhum lote cadastrado"}
-                  </h3>
-                  <p className="mt-1 max-w-xs text-xs text-neutral-500">
-                    {filters.searchQuery || filters.status !== "all"
-                      ? "Tente ajustar seus termos de busca ou filtros."
-                      : "O inventário de lotes está vazio. Comece adicionando um novo lote."}
-                  </p>
-                </div>
-                {filters.searchQuery || filters.status !== "all" ? (
-                  <Button
-                    variant="outline"
-                    onClick={onClearFilters}
-                    className="rounded-[4px] border-neutral-700 text-xs uppercase text-neutral-300 hover:bg-neutral-800"
-                  >
-                    Limpar Filtros
-                  </Button>
-                ) : (
-                  <PermissionGate permission="batches:create">
-                    <Link href="/batches/create">
-                      <Button className="rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700">
-                        <Plus className="mr-2 size-3.5" />
-                        Primeiro Lote
-                      </Button>
-                    </Link>
-                  </PermissionGate>
-                )}
-              </div>
-            )}
+const BatchStatusBadge = ({
+  statusLabel,
+  style,
+}: {
+  statusLabel: string;
+  style: ReturnType<typeof getStatusStyle>;
+}) => (
+  <Badge
+    variant="outline"
+    className={cn(
+      "rounded-[2px] border px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider",
+      style.bg,
+      style.color,
+      style.border,
+    )}
+  >
+    {statusLabel}
+  </Badge>
+);
 
-            {/* Table View (Desktop) */}
-            {!isLoading && !error && batches.length > 0 && (
-              <>
-                {isGroupedByProduct && (
-                  <Accordion type="multiple" className="space-y-3">
-                    {groupedByProduct.map((group) => (
-                      <AccordionItem
-                        key={group.key}
-                        value={group.key}
-                        className="rounded-[4px] border border-neutral-800 bg-[#171717] px-4"
-                      >
-                        <AccordionTrigger className="py-3 text-left hover:no-underline">
-                          <div className="flex w-full items-center justify-between gap-3 pr-2">
-                            <div className="space-y-0.5">
-                              <h3 className="text-sm font-semibold text-white">
-                                {group.productName}
-                              </h3>
-                              <p className="text-[10px] font-mono uppercase tracking-wider text-neutral-500">
-                                {group.productSku || "SEM SKU"}
-                              </p>
-                            </div>
-                            <div className="text-right">
-                              <p className="text-[10px] font-bold uppercase tracking-wider text-neutral-500">
-                                {group.batches.length}{" "}
-                                {group.batches.length === 1 ? "lote" : "lotes"}
-                              </p>
-                              <p className="text-sm font-bold tracking-tighter text-white">
-                                {group.totalQuantity} un
-                              </p>
-                            </div>
-                          </div>
-                        </AccordionTrigger>
+const BatchesMobileCards = ({ props }: { props: BatchesViewProps }) => (
+  <div className="grid gap-3 md:hidden">
+    {props.batches.map((batch) => (
+      <BatchMobileCard
+        key={batch.id}
+        batch={batch}
+        lowStockThreshold={props.filters.lowStockThreshold}
+      />
+    ))}
+  </div>
+);
 
-                        <AccordionContent className="pb-0">
-                          <div className="divide-y divide-neutral-800/60 border-t border-neutral-800">
-                            {group.batches.map((batch) => {
-                              const status = deriveBatchStatus(batch, {
-                                lowStockThreshold: filters.lowStockThreshold,
-                              });
-                              const style = getStatusStyle(status.kind);
+const BatchMobileCard = ({
+  batch,
+  lowStockThreshold,
+}: {
+  batch: Batch;
+  lowStockThreshold: number;
+}) => {
+  const status = deriveBatchStatus(batch, { lowStockThreshold });
+  const style = getStatusStyle(status.kind);
 
-                              return (
-                                <div
-                                  key={batch.id}
-                                  className="flex flex-col gap-3 py-3 md:flex-row md:items-center md:justify-between"
-                                >
-                                  <div className="grid gap-1 text-xs">
-                                    <div className="flex items-center gap-2 text-neutral-300">
-                                      <span className="font-mono text-[11px]">
-                                        {batch.batchNumber || "SEM LOTE"}
-                                      </span>
-                                      {batch.batchCode && (
-                                        <>
-                                          <span className="text-neutral-700">
-                                            •
-                                          </span>
-                                          <span className="font-mono text-[10px] text-neutral-500">
-                                            {batch.batchCode}
-                                          </span>
-                                        </>
-                                      )}
-                                    </div>
-                                    <div className="flex flex-wrap items-center gap-2 text-[10px] uppercase tracking-wider text-neutral-500">
-                                      <span>{batch.warehouseName}</span>
-                                      <span className="text-neutral-700">
-                                        •
-                                      </span>
-                                      <span>Qtd: {batch.quantity}</span>
-                                      <span className="text-neutral-700">
-                                        •
-                                      </span>
-                                      <span>
-                                        Val: {formatDate(batch.expirationDate)}
-                                      </span>
-                                    </div>
-                                  </div>
+  return (
+    <Link
+      href={`/batches/${batch.id}`}
+      className="flex flex-col gap-3 rounded-[4px] border border-neutral-800 bg-[#171717] p-4 transition-colors hover:bg-neutral-800/50"
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex flex-col gap-1.5">
+          <h3 className="text-base font-semibold leading-tight text-white">
+            {batch.productName}
+          </h3>
+          <div className="flex items-center gap-1.5 text-xs text-neutral-500">
+            <span className="uppercase">{batch.batchNumber || "SEM LOTE"}</span>
+            <span className="text-neutral-600">&bull;</span>
+            <span className="truncate">{batch.warehouseName}</span>
+          </div>
+        </div>
+        <Badge
+          variant="outline"
+          className={cn(
+            "shrink-0 rounded-[2px] border px-2 py-1 text-[10px] font-bold uppercase",
+            style.bg,
+            style.color,
+            style.border,
+          )}
+        >
+          {batch.quantity} un
+        </Badge>
+      </div>
+      <div className="mt-1 flex items-center justify-between border-t border-neutral-800 pt-3">
+        <div className="flex items-center gap-3">
+          <span className="text-xs text-neutral-500">Validade</span>
+          <span className="text-sm text-neutral-400">
+            {formatDate(batch.expirationDate)}
+          </span>
+        </div>
+        <div className="flex items-center gap-3">
+          <div className="flex flex-col items-end text-right">
+            <span className="mb-0.5 text-[10px] font-medium leading-none text-neutral-500">
+              Status
+            </span>
+            <span
+              className={cn(
+                "text-xs font-bold uppercase leading-none",
+                style.color,
+              )}
+            >
+              {status.label}
+            </span>
+          </div>
+          <ChevronRight className="size-4 text-neutral-500" />
+        </div>
+      </div>
+    </Link>
+  );
+};
 
-                                  <div className="flex items-center gap-2">
-                                    <Badge
-                                      variant="outline"
-                                      className={cn(
-                                        "rounded-[2px] border px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider",
-                                        style.bg,
-                                        style.color,
-                                        style.border,
-                                      )}
-                                    >
-                                      {status.label}
-                                    </Badge>
-                                    <Link href={`/batches/${batch.id}`}>
-                                      <Button
-                                        variant="outline"
-                                        className="h-8 rounded-[4px] border-neutral-800 bg-neutral-900 px-3 text-[10px] font-bold uppercase tracking-wide text-neutral-300 hover:bg-neutral-800 hover:text-white"
-                                      >
-                                        Detalhes
-                                      </Button>
-                                    </Link>
-                                  </div>
-                                </div>
-                              );
-                            })}
-                          </div>
-                        </AccordionContent>
-                      </AccordionItem>
-                    ))}
-                  </Accordion>
-                )}
+const BatchesMobileFiltersDrawer = ({ props }: { props: BatchesViewProps }) => (
+  <Drawer
+    open={props.isMobileFiltersOpen}
+    onOpenChange={props.onMobileFiltersOpenChange}
+  >
+    <DrawerContent
+      className="border-neutral-800 bg-[#171717] text-neutral-100"
+      onInteractOutside={preventDrawerDismissFromSelectPortal}
+      onPointerDownOutside={preventDrawerDismissFromSelectPortal}
+    >
+      <DrawerHeader className="px-5 pb-2 text-left">
+        <DrawerTitle className="text-lg font-black tracking-tight text-white">
+          Filtros
+        </DrawerTitle>
+        <DrawerDescription className="text-xs text-neutral-500">
+          Refine os lotes por status, agrupamento e regra de estoque.
+        </DrawerDescription>
+      </DrawerHeader>
+      <BatchesMobileFilterBody props={props} />
+      <DrawerFooter className="flex-row gap-3 border-t border-neutral-800 px-5 pt-4">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={props.onClearMobileFilters}
+          className="h-11 flex-1 rounded-[4px] border-neutral-700 bg-transparent text-[10px] font-bold uppercase tracking-widest text-neutral-400 hover:bg-neutral-800 hover:text-white"
+        >
+          <Trash2 className="mr-2 size-3.5" />
+          Limpar
+        </Button>
+        <Button
+          type="button"
+          onClick={props.onApplyMobileFilters}
+          className="h-11 flex-[2] rounded-[4px] bg-blue-600 text-[10px] font-black uppercase tracking-widest text-white hover:bg-blue-500"
+        >
+          Aplicar filtros
+        </Button>
+      </DrawerFooter>
+    </DrawerContent>
+  </Drawer>
+);
 
-                {!isGroupedByProduct && (
-                  <div className="hidden overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717] md:block">
-                    <Table>
-                      <TableHeader className="bg-neutral-900">
-                        <TableRow className="border-b border-neutral-800 hover:bg-neutral-900">
-                          <TableHead
-                            className="h-10 cursor-pointer text-[10px] font-bold uppercase tracking-widest text-neutral-500 hover:text-white"
-                            onClick={() => onSortChange("product")}
-                          >
-                            <div className="flex items-center gap-1">
-                              Produto <SortIcon field="product" sortConfig={sortConfig} />
-                            </div>
-                          </TableHead>
-                          <TableHead className="h-10 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Código / Lote
-                          </TableHead>
-                          <TableHead className="h-10 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Armazém
-                          </TableHead>
-                          <TableHead
-                            className="h-10 text-right cursor-pointer text-[10px] font-bold uppercase tracking-widest text-neutral-500 hover:text-white"
-                            onClick={() => onSortChange("quantity")}
-                          >
-                            <div className="flex items-center justify-end gap-1">
-                              Qtd. <SortIcon field="quantity" sortConfig={sortConfig} />
-                            </div>
-                          </TableHead>
-                          <TableHead
-                            className="h-10 text-center cursor-pointer text-[10px] font-bold uppercase tracking-widest text-neutral-500 hover:text-white"
-                            onClick={() => onSortChange("expiration")}
-                          >
-                            <div className="flex items-center justify-center gap-1">
-                              Validade <SortIcon field="expiration" sortConfig={sortConfig} />
-                            </div>
-                          </TableHead>
-                          <TableHead className="h-10 text-center text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Status
-                          </TableHead>
-                          <TableHead className="h-10 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Ações
-                          </TableHead>
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody>
-                        {batches.map((batch) => {
-                          const status = deriveBatchStatus(batch, {
-                            lowStockThreshold: filters.lowStockThreshold,
-                          });
-                          const style = getStatusStyle(status.kind);
-                          return (
-                            <TableRow
-                              key={batch.id}
-                              className="group border-b border-neutral-800/50 hover:bg-neutral-800/50 transition-colors"
-                            >
-                              <TableCell className="py-3">
-                                <div className="flex flex-col gap-0.5">
-                                  <span className="font-medium text-white">
-                                    {batch.productName}
-                                  </span>
-                                  <span className="font-mono text-[10px] text-neutral-500">
-                                    {batch.productSku || "SEM SKU"}
-                                  </span>
-                                </div>
-                              </TableCell>
-                              <TableCell className="py-3">
-                                <div className="flex flex-col gap-0.5">
-                                  <span className="font-mono text-xs text-neutral-300">
-                                    {batch.batchNumber || "—"}
-                                  </span>
-                                  {batch.batchCode && (
-                                    <span className="font-mono text-[10px] text-neutral-600">
-                                      {batch.batchCode}
-                                    </span>
-                                  )}
-                                </div>
-                              </TableCell>
-                              <TableCell className="py-3">
-                                <div className="flex flex-col text-xs">
-                                  <span className="text-neutral-300">
-                                    {batch.warehouseName}
-                                  </span>
-                                </div>
-                              </TableCell>
-                              <TableCell className="py-3 text-right">
-                                <span className="font-mono text-sm font-bold tracking-tighter text-white">
-                                  {batch.quantity}
-                                </span>
-                              </TableCell>
-                              <TableCell className="py-3 text-center">
-                                <span className="font-mono text-xs text-neutral-400">
-                                  {formatDate(batch.expirationDate)}
-                                </span>
-                              </TableCell>
-                              <TableCell className="py-3 text-center">
-                                <Badge
-                                  variant="outline"
-                                  className={cn(
-                                    "rounded-[2px] border px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider",
-                                    style.bg,
-                                    style.color,
-                                    style.border,
-                                  )}
-                                >
-                                  {status.label}
-                                </Badge>
-                              </TableCell>
-                              <TableCell className="py-3">
-                                <div className="flex justify-end gap-1 opacity-60 group-hover:opacity-100 transition-opacity">
-                                  <Link href={`/batches/${batch.id}`}>
-                                    <Button
-                                      variant="ghost"
-                                      size="icon"
-                                      className="size-8 rounded-[4px] hover:bg-neutral-800 text-neutral-400 hover:text-white"
-                                      aria-label="Ver detalhes"
-                                    >
-                                      <Eye className="size-4" />
-                                    </Button>
-                                  </Link>
-                                </div>
-                              </TableCell>
-                            </TableRow>
-                          );
-                        })}
-                      </TableBody>
-                    </Table>
-                  </div>
-                )}
+const BatchesMobileFilterBody = ({ props }: { props: BatchesViewProps }) => (
+  <div className="max-h-[68vh] overflow-y-auto px-5 py-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+    <div className="space-y-6">
+      <BatchesStatusMobileFilter props={props} />
+      <div className="h-px bg-neutral-800/60" />
+      <BatchesLowStockMobileFilter props={props} />
+      <div className="h-px bg-neutral-800/60" />
+      <BatchesViewModeMobileFilter props={props} />
+      <div className="h-px bg-neutral-800/60" />
+      <BatchesSortMobileFilter props={props} />
+    </div>
+  </div>
+);
 
-                {/* Mobile Grid */}
-                {!isGroupedByProduct && (
-                  <div className="grid gap-3 md:hidden">
-                    {batches.map((batch) => {
-                      const status = deriveBatchStatus(batch, {
-                        lowStockThreshold: filters.lowStockThreshold,
-                      });
-                      const style = getStatusStyle(status.kind);
+const BatchesStatusMobileFilter = ({ props }: { props: BatchesViewProps }) => (
+  <section className="space-y-3">
+    <h3 className="text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
+      Status do lote
+    </h3>
+    <div className="grid grid-cols-3 gap-2">
+      {STATUS_FILTER_OPTIONS.map((option) => {
+        const tones = statusToneMap[option.value];
+        const selected = props.mobileFiltersDraft.status === option.value;
+        return (
+          <BatchMobileFilterButton
+            key={option.value}
+            selected={selected}
+            tones={tones}
+            icon={option.icon}
+            label={option.label}
+            onClick={() =>
+              props.onMobileFilterDraftChange({ status: option.value })
+            }
+          />
+        );
+      })}
+    </div>
+  </section>
+);
 
-                      return (
-                        <Link
-                          href={`/batches/${batch.id}`}
-                          key={batch.id}
-                          className="flex flex-col gap-3 rounded-[4px] border border-neutral-800 bg-[#171717] p-4 transition-colors hover:bg-neutral-800/50"
-                        >
-                          <div className="flex items-start justify-between gap-3">
-                            <div className="flex flex-col gap-1.5">
-                              <h3 className="font-bold text-base text-white leading-tight">
-                                {batch.productName}
-                              </h3>
-                              <div className="flex items-center gap-1.5 text-xs text-neutral-500">
-                                <span className="uppercase">
-                                  {batch.batchNumber || "SEM LOTE"}
-                                </span>
-                                <span className="text-neutral-600">&bull;</span>
-                                <span className="truncate">{batch.warehouseName}</span>
-                              </div>
-                            </div>
-                            <Badge
-                              variant="outline"
-                              className={cn(
-                                "shrink-0 rounded-[2px] border px-2 py-1 text-[10px] font-bold uppercase",
-                                style.bg,
-                                style.color,
-                                style.border,
-                              )}
-                            >
-                              {batch.quantity} un
-                            </Badge>
-                          </div>
+const BatchMobileFilterButton = ({
+  icon,
+  label,
+  onClick,
+  selected,
+  tones,
+}: {
+  icon: ReactNode;
+  label: string;
+  onClick: () => void;
+  selected: boolean;
+  tones: { activeBorder: string; activeBg: string; activeText: string };
+}) => (
+  <Button
+    type="button"
+    variant="outline"
+    onClick={onClick}
+    className={cn(
+      "h-10 w-full rounded-[4px] border text-xs font-bold transition-colors",
+      selected
+        ? cn(tones.activeBorder, tones.activeBg, tones.activeText)
+        : "border-neutral-800 bg-neutral-950/50 text-neutral-500 hover:border-neutral-700 hover:bg-neutral-900 hover:text-white",
+    )}
+  >
+    {icon}
+    {label}
+  </Button>
+);
 
-                          <div className="mt-1 flex items-center justify-between border-t border-neutral-800 pt-3">
-                            <div className="flex items-center gap-3">
-                              <span className="text-xs text-neutral-500">Validade</span>
-                              <span className="text-sm text-neutral-400">
-                                {formatDate(batch.expirationDate)}
-                              </span>
-                            </div>
-                            <div className="flex items-center gap-3">
-                              <div className="flex flex-col items-end text-right">
-                                <span className="mb-0.5 text-[10px] font-medium leading-none text-neutral-500">
-                                  Status
-                                </span>
-                                <span
-                                  className={cn(
-                                    "text-xs font-bold uppercase leading-none",
-                                    style.color,
-                                  )}
-                                >
-                                  {status.label}
-                                </span>
-                              </div>
-                              <ChevronRight className="size-4 text-neutral-500" />
-                            </div>
-                          </div>
-                        </Link>
-                      );
-                    })}
-                  </div>
-                )}
-              </>
-            )}
-          </div>
-        </div>
-      </main>
+const BatchesLowStockMobileFilter = ({
+  props,
+}: {
+  props: BatchesViewProps;
+}) => (
+  <section className="space-y-3">
+    <div className="flex items-center justify-between">
+      <h3 className="text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
+        Baixo estoque
+      </h3>
+      <span className="rounded-[4px] border border-blue-500/30 bg-blue-500/10 px-2 py-0.5 font-mono text-xs font-black text-blue-300">
+        {props.mobileFiltersDraft.lowStockThreshold} un.
+      </span>
+    </div>
+    <p className="text-[11px] leading-relaxed text-neutral-500">
+      Lotes com quantidade ≤ limite entram no status de baixo estoque.
+    </p>
+    <input
+      type="range"
+      min={1}
+      max={100}
+      step={1}
+      value={props.mobileFiltersDraft.lowStockThreshold}
+      onChange={(event) =>
+        props.onMobileFilterDraftChange({
+          lowStockThreshold: Number(event.target.value),
+        })
+      }
+      className="h-1.5 w-full cursor-pointer rounded-[4px] bg-neutral-800 accent-blue-500"
+    />
+    <div className="flex justify-between text-[10px] font-bold uppercase tracking-widest text-neutral-600">
+      <span>1 un.</span>
+      <span>100 un.</span>
+    </div>
+  </section>
+);
 
-      {mobileFiltersPanel}
+const BatchesViewModeMobileFilter = ({
+  props,
+}: {
+  props: BatchesViewProps;
+}) => (
+  <section className="space-y-3">
+    <h3 className="text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
+      Visualização
+    </h3>
+    <div className="grid grid-cols-2 gap-2">
+      <Button
+        type="button"
+        variant="outline"
+        onClick={() =>
+          props.onMobileFilterDraftChange({ isGroupedByProduct: false })
+        }
+        className={cn(
+          "h-10 w-full rounded-[4px] border text-xs font-bold transition-colors",
+          !props.mobileFiltersDraft.isGroupedByProduct
+            ? "border-blue-500/50 bg-blue-500/10 text-blue-100"
+            : "border-neutral-800 bg-neutral-950/50 text-neutral-500 hover:border-neutral-700 hover:bg-neutral-900 hover:text-white",
+        )}
+      >
+        <Layers className="mr-2 size-3.5" />
+        Lista
+      </Button>
+      <Button
+        type="button"
+        variant="outline"
+        onClick={() =>
+          props.onMobileFilterDraftChange({ isGroupedByProduct: true })
+        }
+        className={cn(
+          "h-10 w-full rounded-[4px] border text-xs font-bold transition-colors",
+          props.mobileFiltersDraft.isGroupedByProduct
+            ? "border-blue-500/50 bg-blue-500/10 text-blue-100"
+            : "border-neutral-800 bg-neutral-950/50 text-neutral-500 hover:border-neutral-700 hover:bg-neutral-900 hover:text-white",
+        )}
+      >
+        <Package className="mr-2 size-3.5" />
+        Agrupar
+      </Button>
     </div>
-  );
-};
+  </section>
+);
+
+const BatchesSortMobileFilter = ({ props }: { props: BatchesViewProps }) => (
+  <section className="space-y-3">
+    <h3 className="text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
+      Ordenar por
+    </h3>
+    <Select
+      value={`${props.mobileFiltersDraft.sortKey}:${props.mobileFiltersDraft.sortDirection}`}
+      onValueChange={(value) => {
+        const [sortKey, sortDirection] = value.split(":") as [
+          SortConfig["key"],
+          SortConfig["direction"],
+        ];
+        props.onMobileFilterDraftChange({ sortKey, sortDirection });
+      }}
+    >
+      <SelectTrigger className="h-10 w-full rounded-[4px] border-neutral-800 bg-neutral-950/50 text-xs text-neutral-300 focus:border-blue-600 focus:ring-0">
+        <SelectValue placeholder="Ordenar por" />
+      </SelectTrigger>
+      <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+        {SORT_FILTER_OPTIONS.map((option) => (
+          <SelectItem
+            key={option.value}
+            value={option.value}
+            className="text-xs focus:bg-neutral-800"
+          >
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  </section>
+);
diff --git a/app/(pages)/batches/create/batches-create.model.ts b/app/(pages)/batches/create/batches-create.model.ts
index cbb2a6d..34a8e36 100644
--- a/app/(pages)/batches/create/batches-create.model.ts
+++ b/app/(pages)/batches/create/batches-create.model.ts
@@ -22,6 +22,11 @@ import { useBreadcrumb } from "@/components/breadcrumb";
 import { useSelectedWarehouse } from "@/hooks/use-selected-warehouse";
 
 const PRODUCT_SEARCH_LIMIT = 5;
+const priceFormatter = new Intl.NumberFormat("pt-BR", {
+  style: "currency",
+  currency: "BRL",
+});
+const batchCreatedAtFormatter = new Intl.DateTimeFormat("pt-BR");
 
 export const buildProductSearchUrl = (query: string): string | null => {
   const trimmedQuery = query.trim();
@@ -57,20 +62,18 @@ export const formatProductOptionLabel = (
 
 export const formatPriceFromCents = (cents: number | null): string => {
   if (cents === null) return "Sem preço";
-  return new Intl.NumberFormat("pt-BR", {
-    style: "currency",
-    currency: "BRL",
-  }).format(cents / 100);
+  return priceFormatter.format(cents / 100);
 };
 
 export const findMostRecentProductBatch = (
   batches: ProductBatchPriceSource[],
 ): ProductBatchPriceSource | null => {
-  if (batches.length === 0) return null;
-
-  return [...batches].sort((firstBatch, secondBatch) => {
-    return getBatchCreatedTime(secondBatch) - getBatchCreatedTime(firstBatch);
-  })[0];
+  return batches.reduce<ProductBatchPriceSource | null>((latestBatch, batch) => {
+    if (!latestBatch) return batch;
+    return getBatchCreatedTime(batch) > getBatchCreatedTime(latestBatch)
+      ? batch
+      : latestBatch;
+  }, null);
 };
 
 export const buildLatestBatchPriceSuggestion = (
@@ -97,7 +100,7 @@ const getBatchCreatedTime = (batch: ProductBatchPriceSource): number => {
 const formatBatchCreatedAt = (createdAt: string): string => {
   const timestamp = new Date(createdAt).getTime();
   if (!Number.isFinite(timestamp)) return createdAt;
-  return new Intl.DateTimeFormat("pt-BR").format(new Date(timestamp));
+  return batchCreatedAtFormatter.format(new Date(timestamp));
 };
 
 export const buildBatchPayload = (
diff --git a/app/(pages)/batches/create/batches-create.view.tsx b/app/(pages)/batches/create/batches-create.view.tsx
index ca882fd..16e3198 100644
--- a/app/(pages)/batches/create/batches-create.view.tsx
+++ b/app/(pages)/batches/create/batches-create.view.tsx
@@ -2,26 +2,26 @@
 
 import Link from "next/link";
 import {
-  PackagePlus,
   Box,
   Calendar,
-  FileText,
   DollarSign,
+  FileText,
+  History,
   Loader2,
+  Minus,
+  PackagePlus,
+  Plus,
   Scan,
   Search,
   X,
-  Minus,
-  Plus,
-  History,
 } from "lucide-react";
+import type { ReactNode } from "react";
 import type { UseFormReturn } from "react-hook-form";
-import type { BatchCreateFormData } from "./batches-create.schema";
-import type {
-  LatestBatchPriceSuggestion,
-  ProductSearchOption,
-} from "./batches-create.types";
-import { cn } from "@/lib/utils";
+import { PermissionGate } from "@/components/permission-gate";
+import { BarcodeScannerModal } from "@/components/product/barcode-scanner-modal";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { CurrencyInput } from "@/components/ui/currency-input";
 import {
   Form,
   FormControl,
@@ -30,14 +30,15 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { CurrencyInput } from "@/components/ui/currency-input";
-import { NumberInput } from "@/components/ui/number-input";
 import { Input } from "@/components/ui/input";
+import { NumberInput } from "@/components/ui/number-input";
 import { Textarea } from "@/components/ui/textarea";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { PermissionGate } from "@/components/permission-gate";
-import { BarcodeScannerModal } from "@/components/product/barcode-scanner-modal";
+import { cn } from "@/lib/utils";
+import type { BatchCreateFormData } from "./batches-create.schema";
+import type {
+  LatestBatchPriceSuggestion,
+  ProductSearchOption,
+} from "./batches-create.types";
 
 interface BatchCreateViewProps {
   form: UseFormReturn<BatchCreateFormData>;
@@ -65,478 +66,41 @@ interface BatchCreateViewProps {
   onApplyLatestSellingPrice: () => void;
 }
 
-export const BatchCreateView = ({
-  form,
-  onSubmit,
-  productSearchQuery,
-  productOptions,
-  isProductSearchLoading,
-  isProductOptionsOpen,
-  onProductSearchChange,
-  onProductSearchFocus,
-  onProductSearchBlur,
-  onProductSelect,
-  onProductClear,
-  openScanner,
-  closeScanner,
-  isScannerOpen,
-  handleBarcodeScan,
-  selectedWarehouseId,
-  onQuantityIncrement,
-  onQuantityDecrement,
-  selectedProduct,
-  latestBatchPriceSuggestion,
-  isLatestBatchPriceLoading,
-  onApplyLatestCostPrice,
-  onApplyLatestSellingPrice,
-}: BatchCreateViewProps) => {
-  const { isSubmitting } = form.formState;
-
-  // Watch for profit calculations
-  const costPrice = form.watch("costPrice") || 0;
-  const sellingPrice = form.watch("sellingPrice") || 0;
+interface BatchCreateViewState extends BatchCreateViewProps {
+  isProfitable: boolean;
+  isSubmitting: boolean;
+  margin: number;
+  profit: number;
+}
+
+export const BatchCreateView = (props: BatchCreateViewProps) => {
+  const costPrice = props.form.watch("costPrice") || 0;
+  const sellingPrice = props.form.watch("sellingPrice") || 0;
   const profit = sellingPrice - costPrice;
   const margin = costPrice > 0 ? (profit / costPrice) * 100 : 0;
-  const isProfitable = profit > 0;
+  const viewState: BatchCreateViewState = {
+    ...props,
+    isSubmitting: props.form.formState.isSubmitting,
+    isProfitable: profit > 0,
+    margin,
+    profit,
+  };
 
   return (
-    <div className="min-h-screen bg-[#0A0A0A] pb-24 md:pb-20 font-sans text-neutral-200">
+    <div className="min-h-screen bg-[#0A0A0A] pb-24 font-sans text-neutral-200 md:pb-20">
       <BarcodeScannerModal
-        open={isScannerOpen}
-        onClose={closeScanner}
-        onScan={handleBarcodeScan}
+        open={props.isScannerOpen}
+        onClose={props.closeScanner}
+        onScan={props.handleBarcodeScan}
       />
-
       <main className="mx-auto w-full max-w-7xl px-4 py-8 md:px-6 lg:px-8">
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
+        <Form {...props.form}>
+          <form onSubmit={props.form.handleSubmit(props.onSubmit)}>
             <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
-              {/* Left Column - Main Info */}
-              <div className="space-y-6 lg:col-span-2">
-                {/* Identification Card */}
-                <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
-                  <CardHeader className="border-b border-neutral-800 pb-4">
-                    <div className="flex items-center gap-2">
-                      <Box className="size-4 text-blue-500" />
-                      <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
-                        Identificação e Origem
-                      </CardTitle>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="pt-6 space-y-5">
-                    <FormField
-                      control={form.control}
-                      name="productId"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                            Produto <span className="text-rose-500">*</span>
-                          </FormLabel>
-                          <input type="hidden" {...field} />
-                          <div className="relative">
-                            <div className="flex gap-2">
-                              <div className="relative flex-1">
-                                <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-neutral-500" />
-                                <FormControl>
-                                  <Input
-                                    value={productSearchQuery}
-                                    onChange={(event) =>
-                                      onProductSearchChange(event.target.value)
-                                    }
-                                    onFocus={onProductSearchFocus}
-                                    onBlur={() => {
-                                      field.onBlur();
-                                      onProductSearchBlur();
-                                    }}
-                                    placeholder="Pesquisar por nome, SKU ou código de barras"
-                                    className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 pl-9 pr-9 text-sm focus:border-blue-600 focus:ring-0"
-                                  />
-                                </FormControl>
-                                {productSearchQuery && (
-                                  <Button
-                                    type="button"
-                                    variant="ghost"
-                                    onClick={onProductClear}
-                                    className="absolute right-1 top-1 size-8 rounded-[4px] p-0 text-neutral-500 hover:bg-neutral-800 hover:text-white"
-                                    aria-label="Limpar produto"
-                                  >
-                                    <X className="size-4" />
-                                  </Button>
-                                )}
-                              </div>
-                              <Button
-                                type="button"
-                                variant="outline"
-                                onClick={openScanner}
-                                className="size-10 shrink-0 rounded-[4px] border-neutral-800 bg-neutral-900 p-0 hover:bg-neutral-800 hover:text-white"
-                                aria-label="Ler código de barras"
-                              >
-                                <Scan className="size-4" />
-                              </Button>
-                            </div>
-
-                            {isProductOptionsOpen &&
-                              (isProductSearchLoading ||
-                                productOptions.length > 0) && (
-                                <div className="absolute left-0 right-12 top-12 z-30 overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717]">
-                                  {isProductSearchLoading && (
-                                    <div className="flex h-10 items-center gap-2 px-3 text-xs text-neutral-500">
-                                      <Loader2 className="size-3.5 animate-spin" />
-                                      Buscando produtos…
-                                    </div>
-                                  )}
-                                  {!isProductSearchLoading &&
-                                    productOptions.map((product) => (
-                                      <Button
-                                        key={product.id}
-                                        type="button"
-                                        variant="ghost"
-                                        onMouseDown={(event) =>
-                                          event.preventDefault()
-                                        }
-                                        onClick={() => onProductSelect(product)}
-                                        className="flex h-auto w-full items-center justify-start gap-3 rounded-none border-b border-neutral-800 px-3 py-2 text-left hover:bg-neutral-800 hover:text-white last:border-b-0"
-                                      >
-                                        {product.imageUrl ? (
-                                          <span
-                                            role="img"
-                                            aria-label={`Foto de ${product.name}`}
-                                            className="size-10 shrink-0 rounded-[4px] border border-neutral-800 bg-neutral-900 bg-cover bg-center"
-                                            style={{
-                                              backgroundImage: `url("${product.imageUrl}")`,
-                                            }}
-                                          />
-                                        ) : (
-                                          <span
-                                            role="img"
-                                            aria-label="Produto sem foto"
-                                            className="flex size-10 shrink-0 items-center justify-center rounded-[4px] border border-neutral-800 bg-neutral-900 text-neutral-500"
-                                          >
-                                            <Box className="size-4" />
-                                          </span>
-                                        )}
-                                        <span className="min-w-0">
-                                          <span className="block truncate text-sm font-semibold text-white">
-                                            {product.name}
-                                          </span>
-                                          <span className="mt-0.5 block truncate text-[10px] font-mono uppercase tracking-wide text-neutral-500">
-                                            {product.sku || "SEM SKU"}
-                                            {product.barcode
-                                              ? ` - ${product.barcode}`
-                                              : ""}
-                                          </span>
-                                        </span>
-                                      </Button>
-                                    ))}
-                                </div>
-                              )}
-                          </div>
-                          <FormMessage className="text-xs text-rose-500" />
-                        </FormItem>
-                      )}
-                    />
-                  </CardContent>
-                </Card>
-
-                {/* Financials Card */}
-                <Card className="overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717]">
-                  <CardHeader className="border-b border-neutral-800 pb-4">
-                    <div className="flex items-center gap-2">
-                      <DollarSign className="size-4 text-emerald-500" />
-                      <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
-                        Financeiro e Estoque
-                      </CardTitle>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="pt-6 space-y-6">
-                    <div className="grid items-start gap-5 md:grid-cols-3">
-                      <FormField
-                        control={form.control}
-                        name="quantity"
-                        render={({ field }) => {
-                          const { onChange, value, ...rest } = field;
-                          return (
-                            <FormItem className="self-start">
-                              <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                                Quantidade{" "}
-                                <span className="text-rose-500">*</span>
-                              </FormLabel>
-                              <div className="flex">
-                                <Button
-                                  type="button"
-                                  variant="outline"
-                                  onClick={onQuantityDecrement}
-                                  className="size-10 rounded-r-none rounded-l-[4px] border-neutral-800 bg-neutral-900 p-0 hover:bg-neutral-800 hover:text-white"
-                                  aria-label="Diminuir quantidade"
-                                >
-                                  <Minus className="size-4" />
-                                </Button>
-                                <FormControl>
-                                  <NumberInput
-                                    {...rest}
-                                    value={value}
-                                    onValueChange={onChange}
-                                    mode="integer"
-                                    className="h-10 min-w-0 flex-1 rounded-none border-x-0 border-neutral-800 bg-neutral-900 text-center text-sm focus:border-blue-600 focus:ring-0"
-                                  />
-                                </FormControl>
-                                <Button
-                                  type="button"
-                                  variant="outline"
-                                  onClick={onQuantityIncrement}
-                                  className="size-10 rounded-l-none rounded-r-[4px] border-neutral-800 bg-neutral-900 p-0 hover:bg-neutral-800 hover:text-white"
-                                  aria-label="Aumentar quantidade"
-                                >
-                                  <Plus className="size-4" />
-                                </Button>
-                              </div>
-                              <FormMessage className="text-xs text-rose-500" />
-                            </FormItem>
-                          );
-                        }}
-                      />
-                      <FormField
-                        control={form.control}
-                        name="costPrice"
-                        render={({ field }) => {
-                          const { onChange, value, ...rest } = field;
-                          return (
-                            <FormItem className="self-start">
-                              <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                                Custo Unitário
-                              </FormLabel>
-                              <FormControl>
-                                <CurrencyInput
-                                  {...rest}
-                                  value={value}
-                                  onValueChange={onChange}
-                                  placeholder="0,00"
-                                  className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
-                                />
-                              </FormControl>
-                              <LatestBatchPriceButton
-                                fieldLabel="Último custo"
-                                selectedProduct={selectedProduct}
-                                suggestion={latestBatchPriceSuggestion}
-                                priceLabel={
-                                  latestBatchPriceSuggestion?.costPriceLabel ??
-                                  null
-                                }
-                                isPriceAvailable={
-                                  latestBatchPriceSuggestion?.costPriceCents !==
-                                    null &&
-                                  latestBatchPriceSuggestion?.costPriceCents !==
-                                    undefined
-                                }
-                                isLoading={isLatestBatchPriceLoading}
-                                onApply={onApplyLatestCostPrice}
-                              />
-                              <FormMessage className="text-xs text-rose-500" />
-                            </FormItem>
-                          );
-                        }}
-                      />
-                      <FormField
-                        control={form.control}
-                        name="sellingPrice"
-                        render={({ field }) => {
-                          const { onChange, value, ...rest } = field;
-                          return (
-                            <FormItem className="self-start">
-                              <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                                Preço de Venda
-                              </FormLabel>
-                              <FormControl>
-                                <CurrencyInput
-                                  {...rest}
-                                  value={value}
-                                  onValueChange={onChange}
-                                  placeholder="0,00"
-                                  className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-emerald-600 focus:ring-0 text-emerald-500 font-bold"
-                                />
-                              </FormControl>
-                              <LatestBatchPriceButton
-                                fieldLabel="Última venda"
-                                selectedProduct={selectedProduct}
-                                suggestion={latestBatchPriceSuggestion}
-                                priceLabel={
-                                  latestBatchPriceSuggestion?.sellingPriceLabel ??
-                                  null
-                                }
-                                isPriceAvailable={
-                                  latestBatchPriceSuggestion?.sellingPriceCents !==
-                                    null &&
-                                  latestBatchPriceSuggestion?.sellingPriceCents !==
-                                    undefined
-                                }
-                                isLoading={isLatestBatchPriceLoading}
-                                onApply={onApplyLatestSellingPrice}
-                              />
-                              <FormMessage className="text-xs text-rose-500" />
-                            </FormItem>
-                          );
-                        }}
-                      />
-                    </div>
-
-                    {/* Profitability Indicator */}
-                    <div
-                      className={cn(
-                        "mt-4 rounded-[4px] border px-4 py-3 flex items-center justify-between",
-                        isProfitable
-                          ? "border-emerald-900/30 bg-emerald-950/10"
-                          : "border-rose-900/30 bg-rose-950/10",
-                      )}
-                    >
-                      <span className="text-xs font-medium uppercase tracking-wide text-neutral-400">
-                        Lucro Estimado
-                      </span>
-                      <div className="flex items-center gap-2">
-                        <span
-                          className={cn(
-                            "text-sm font-bold font-mono",
-                            isProfitable ? "text-emerald-500" : "text-rose-500",
-                          )}
-                        >
-                          {(profit / 100).toLocaleString("pt-BR", {
-                            style: "currency",
-                            currency: "BRL",
-                          })}
-                        </span>
-                        <div
-                          className={cn(
-                            "text-[10px] font-bold px-1.5 py-0.5 rounded border ml-1",
-                            isProfitable
-                              ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-500"
-                              : "border-rose-500/30 bg-rose-500/10 text-rose-500",
-                          )}
-                        >
-                          {margin.toFixed(1)}%
-                        </div>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </div>
-
-              {/* Right Column - Secondary Info */}
-              <div className="min-w-0 space-y-6">
-                {/* Dates Card */}
-                <Card className="w-full min-w-0 overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717]">
-                  <CardHeader className="border-b border-neutral-800 pb-4">
-                    <div className="flex items-center gap-2">
-                      <Calendar className="size-4 text-amber-500" />
-                      <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
-                        Vigência
-                      </CardTitle>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="min-w-0 overflow-hidden pt-6 space-y-5">
-                    <FormField
-                      control={form.control}
-                      name="manufacturedDate"
-                      render={({ field }) => (
-                        <FormItem className="min-w-0">
-                          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                            Data de Fabricação
-                          </FormLabel>
-                          <FormControl>
-                            <Input
-                              type="date"
-                              className="block h-10 w-full min-w-0 max-w-full appearance-none rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
-                              {...field}
-                            />
-                          </FormControl>
-                          <FormMessage className="text-xs text-rose-500" />
-                        </FormItem>
-                      )}
-                    />
-                    <FormField
-                      control={form.control}
-                      name="expirationDate"
-                      render={({ field }) => (
-                        <FormItem className="min-w-0">
-                          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                            Data de Validade
-                          </FormLabel>
-                          <FormControl>
-                            <Input
-                              type="date"
-                              className="block h-10 w-full min-w-0 max-w-full appearance-none rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
-                              {...field}
-                            />
-                          </FormControl>
-                          <FormMessage className="text-xs text-rose-500" />
-                        </FormItem>
-                      )}
-                    />
-                  </CardContent>
-                </Card>
-
-                {/* Notes Card */}
-                <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
-                  <CardHeader className="border-b border-neutral-800 pb-4">
-                    <div className="flex items-center gap-2">
-                      <FileText className="size-4 text-neutral-500" />
-                      <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
-                        Observações
-                      </CardTitle>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="pt-6">
-                    <FormField
-                      control={form.control}
-                      name="notes"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <Textarea
-                              placeholder="Detalhes adicionais sobre o lote…"
-                              className="min-h-[120px] resize-none rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
-                              {...field}
-                            />
-                          </FormControl>
-                          <FormMessage className="text-xs text-rose-500" />
-                        </FormItem>
-                      )}
-                    />
-                  </CardContent>
-                </Card>
-              </div>
-            </div>
-
-            {/* Sticky Footer */}
-            <div className="fixed bottom-0 left-0 right-0 z-40 border-t border-neutral-800 bg-[#0A0A0A]/95 backdrop-blur-sm p-4 md:ml-[var(--sidebar-width)]">
-              <div className="mx-auto flex w-full max-w-7xl flex-col md:flex-row items-center md:justify-end gap-3 px-4 md:px-6 lg:px-8">
-                <Button
-                  variant="outline"
-                  type="button"
-                  className="h-10 w-full md:w-auto rounded-[4px] border-neutral-700 bg-transparent text-xs font-bold uppercase tracking-wide text-neutral-300 hover:bg-neutral-800 hover:text-white"
-                  asChild
-                >
-                  <Link href="/batches">Cancelar</Link>
-                </Button>
-                <PermissionGate permission="batches:create">
-                  <Button
-                    type="submit"
-                    className="h-10 w-full md:w-[160px] rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 shadow-[0_0_20px_-5px_rgba(37,99,235,0.3)]"
-                    disabled={isSubmitting || !selectedWarehouseId}
-                  >
-                    {isSubmitting ? (
-                      <>
-                        <Loader2 className="mr-2 size-3.5 animate-spin" />
-                        Salvando…
-                      </>
-                    ) : (
-                      <>
-                        <PackagePlus className="mr-2 size-3.5" />
-                        Criar Lote
-                      </>
-                    )}
-                  </Button>
-                </PermissionGate>
-              </div>
+              <BatchCreateMainColumn viewState={viewState} />
+              <BatchCreateSidebar viewState={viewState} />
             </div>
+            <BatchCreateFooter viewState={viewState} />
           </form>
         </Form>
       </main>
@@ -544,6 +108,590 @@ export const BatchCreateView = ({
   );
 };
 
+function BatchCreateMainColumn({
+  viewState,
+}: {
+  viewState: BatchCreateViewState;
+}) {
+  return (
+    <div className="space-y-6 lg:col-span-2">
+      <BatchProductCard viewState={viewState} />
+      <BatchFinancialCard viewState={viewState} />
+    </div>
+  );
+}
+
+function BatchProductCard({
+  viewState,
+}: {
+  viewState: BatchCreateViewState;
+}) {
+  return (
+    <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
+      <CardHeader className="border-b border-neutral-800 pb-4">
+        <div className="flex items-center gap-2">
+          <Box className="size-4 text-blue-500" />
+          <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
+            Identificação e Origem
+          </CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-5 pt-6">
+        <BatchProductField viewState={viewState} />
+      </CardContent>
+    </Card>
+  );
+}
+
+function BatchProductField({
+  viewState,
+}: {
+  viewState: BatchCreateViewState;
+}) {
+  const { form } = viewState;
+
+  return (
+    <FormField
+      control={form.control}
+      name="productId"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            Produto <span className="text-rose-500">*</span>
+          </FormLabel>
+          <input type="hidden" {...field} />
+          <BatchProductSearchControl fieldOnBlur={field.onBlur} viewState={viewState} />
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function BatchProductSearchControl({
+  fieldOnBlur,
+  viewState,
+}: {
+  fieldOnBlur: () => void;
+  viewState: BatchCreateViewState;
+}) {
+  return (
+    <div className="relative">
+      <div className="flex gap-2">
+        <BatchProductSearchInput
+          fieldOnBlur={fieldOnBlur}
+          viewState={viewState}
+        />
+        <Button
+          type="button"
+          variant="outline"
+          onClick={viewState.openScanner}
+          className="size-10 shrink-0 rounded-[4px] border-neutral-800 bg-neutral-900 p-0 hover:bg-neutral-800 hover:text-white"
+          aria-label="Ler código de barras"
+        >
+          <Scan className="size-4" />
+        </Button>
+      </div>
+      <BatchProductOptions viewState={viewState} />
+    </div>
+  );
+}
+
+function BatchProductSearchInput({
+  fieldOnBlur,
+  viewState,
+}: {
+  fieldOnBlur: () => void;
+  viewState: BatchCreateViewState;
+}) {
+  return (
+    <div className="relative flex-1">
+      <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-neutral-500" />
+      <FormControl>
+        <Input
+          value={viewState.productSearchQuery}
+          onChange={(event) => viewState.onProductSearchChange(event.target.value)}
+          onFocus={viewState.onProductSearchFocus}
+          onBlur={() => {
+            fieldOnBlur();
+            viewState.onProductSearchBlur();
+          }}
+          placeholder="Pesquisar por nome, SKU ou código de barras"
+          className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 pr-9 pl-9 text-sm focus:border-blue-600 focus:ring-0"
+        />
+      </FormControl>
+      {viewState.productSearchQuery && (
+        <Button
+          type="button"
+          variant="ghost"
+          onClick={viewState.onProductClear}
+          className="absolute top-1 right-1 size-8 rounded-[4px] p-0 text-neutral-500 hover:bg-neutral-800 hover:text-white"
+          aria-label="Limpar produto"
+        >
+          <X className="size-4" />
+        </Button>
+      )}
+    </div>
+  );
+}
+
+function BatchProductOptions({
+  viewState,
+}: {
+  viewState: BatchCreateViewState;
+}) {
+  const {
+    isProductOptionsOpen,
+    isProductSearchLoading,
+    productOptions,
+  } = viewState;
+
+  if (!isProductOptionsOpen) return null;
+  if (!isProductSearchLoading && productOptions.length === 0) return null;
+
+  return (
+    <div className="absolute top-12 right-12 left-0 z-30 overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717]">
+      {isProductSearchLoading && (
+        <div className="flex h-10 items-center gap-2 px-3 text-xs text-neutral-500">
+          <Loader2 className="size-3.5 animate-spin" />
+          Buscando produtos…
+        </div>
+      )}
+      {!isProductSearchLoading &&
+        productOptions.map((product) => (
+          <BatchProductOption
+            key={product.id}
+            product={product}
+            onProductSelect={viewState.onProductSelect}
+          />
+        ))}
+    </div>
+  );
+}
+
+function BatchProductOption({
+  onProductSelect,
+  product,
+}: {
+  onProductSelect: (product: ProductSearchOption) => void;
+  product: ProductSearchOption;
+}) {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      onMouseDown={(event) => event.preventDefault()}
+      onClick={() => onProductSelect(product)}
+      className="flex h-auto w-full items-center justify-start gap-3 rounded-none border-b border-neutral-800 px-3 py-2 text-left hover:bg-neutral-800 hover:text-white last:border-b-0"
+    >
+      <BatchProductOptionImage product={product} />
+      <span className="min-w-0">
+        <span className="block truncate text-sm font-semibold text-white">
+          {product.name}
+        </span>
+        <span className="mt-0.5 block truncate font-mono text-[10px] uppercase tracking-wide text-neutral-500">
+          {product.sku || "SEM SKU"}
+          {product.barcode ? ` - ${product.barcode}` : ""}
+        </span>
+      </span>
+    </Button>
+  );
+}
+
+function BatchProductOptionImage({
+  product,
+}: {
+  product: ProductSearchOption;
+}) {
+  if (product.imageUrl) {
+    return (
+      <span
+        role="img"
+        aria-label={`Foto de ${product.name}`}
+        className="size-10 shrink-0 rounded-[4px] border border-neutral-800 bg-neutral-900 bg-cover bg-center"
+        style={{ backgroundImage: `url("${product.imageUrl}")` }}
+      />
+    );
+  }
+
+  return (
+    <span
+      role="img"
+      aria-label="Produto sem foto"
+      className="flex size-10 shrink-0 items-center justify-center rounded-[4px] border border-neutral-800 bg-neutral-900 text-neutral-500"
+    >
+      <Box className="size-4" />
+    </span>
+  );
+}
+
+function BatchFinancialCard({
+  viewState,
+}: {
+  viewState: BatchCreateViewState;
+}) {
+  return (
+    <Card className="overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717]">
+      <CardHeader className="border-b border-neutral-800 pb-4">
+        <div className="flex items-center gap-2">
+          <DollarSign className="size-4 text-emerald-500" />
+          <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
+            Financeiro e Estoque
+          </CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-6 pt-6">
+        <div className="grid items-start gap-5 md:grid-cols-3">
+          <BatchQuantityField viewState={viewState} />
+          <BatchCostPriceField viewState={viewState} />
+          <BatchSellingPriceField viewState={viewState} />
+        </div>
+        <BatchProfitIndicator viewState={viewState} />
+      </CardContent>
+    </Card>
+  );
+}
+
+function BatchQuantityField({
+  viewState,
+}: {
+  viewState: BatchCreateViewState;
+}) {
+  const { form, onQuantityDecrement, onQuantityIncrement } = viewState;
+
+  return (
+    <FormField
+      control={form.control}
+      name="quantity"
+      render={({ field }) => {
+        const { onChange, value, ...rest } = field;
+
+        return (
+          <FormItem className="self-start">
+            <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+              Quantidade <span className="text-rose-500">*</span>
+            </FormLabel>
+            <div className="flex">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={onQuantityDecrement}
+                className="size-10 rounded-l-[4px] rounded-r-none border-neutral-800 bg-neutral-900 p-0 hover:bg-neutral-800 hover:text-white"
+                aria-label="Diminuir quantidade"
+              >
+                <Minus className="size-4" />
+              </Button>
+              <FormControl>
+                <NumberInput
+                  {...rest}
+                  value={value}
+                  onValueChange={onChange}
+                  mode="integer"
+                  className="h-10 min-w-0 flex-1 rounded-none border-x-0 border-neutral-800 bg-neutral-900 text-center text-sm focus:border-blue-600 focus:ring-0"
+                />
+              </FormControl>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={onQuantityIncrement}
+                className="size-10 rounded-l-none rounded-r-[4px] border-neutral-800 bg-neutral-900 p-0 hover:bg-neutral-800 hover:text-white"
+                aria-label="Aumentar quantidade"
+              >
+                <Plus className="size-4" />
+              </Button>
+            </div>
+            <FormMessage className="text-xs text-rose-500" />
+          </FormItem>
+        );
+      }}
+    />
+  );
+}
+
+function BatchCostPriceField({
+  viewState,
+}: {
+  viewState: BatchCreateViewState;
+}) {
+  return (
+    <BatchCurrencyField
+      form={viewState.form}
+      name="costPrice"
+      label="Custo Unitário"
+      inputClassName="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+      priceButton={
+        <LatestBatchPriceButton
+          fieldLabel="Último custo"
+          selectedProduct={viewState.selectedProduct}
+          suggestion={viewState.latestBatchPriceSuggestion}
+          priceLabel={viewState.latestBatchPriceSuggestion?.costPriceLabel ?? null}
+          isPriceAvailable={
+            viewState.latestBatchPriceSuggestion?.costPriceCents !== null &&
+            viewState.latestBatchPriceSuggestion?.costPriceCents !== undefined
+          }
+          isLoading={viewState.isLatestBatchPriceLoading}
+          onApply={viewState.onApplyLatestCostPrice}
+        />
+      }
+    />
+  );
+}
+
+function BatchSellingPriceField({
+  viewState,
+}: {
+  viewState: BatchCreateViewState;
+}) {
+  return (
+    <BatchCurrencyField
+      form={viewState.form}
+      name="sellingPrice"
+      label="Preço de Venda"
+      inputClassName="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm font-bold text-emerald-500 focus:border-emerald-600 focus:ring-0"
+      priceButton={
+        <LatestBatchPriceButton
+          fieldLabel="Última venda"
+          selectedProduct={viewState.selectedProduct}
+          suggestion={viewState.latestBatchPriceSuggestion}
+          priceLabel={
+            viewState.latestBatchPriceSuggestion?.sellingPriceLabel ?? null
+          }
+          isPriceAvailable={
+            viewState.latestBatchPriceSuggestion?.sellingPriceCents !== null &&
+            viewState.latestBatchPriceSuggestion?.sellingPriceCents !== undefined
+          }
+          isLoading={viewState.isLatestBatchPriceLoading}
+          onApply={viewState.onApplyLatestSellingPrice}
+        />
+      }
+    />
+  );
+}
+
+function BatchCurrencyField({
+  form,
+  inputClassName,
+  label,
+  name,
+  priceButton,
+}: {
+  form: UseFormReturn<BatchCreateFormData>;
+  inputClassName: string;
+  label: string;
+  name: "costPrice" | "sellingPrice";
+  priceButton: ReactNode;
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => {
+        const { onChange, value, ...rest } = field;
+
+        return (
+          <FormItem className="self-start">
+            <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+              {label}
+            </FormLabel>
+            <FormControl>
+              <CurrencyInput
+                {...rest}
+                value={value}
+                onValueChange={onChange}
+                placeholder="0,00"
+                className={inputClassName}
+              />
+            </FormControl>
+            {priceButton}
+            <FormMessage className="text-xs text-rose-500" />
+          </FormItem>
+        );
+      }}
+    />
+  );
+}
+
+function BatchProfitIndicator({
+  viewState,
+}: {
+  viewState: BatchCreateViewState;
+}) {
+  return (
+    <div
+      className={cn(
+        "mt-4 flex items-center justify-between rounded-[4px] border px-4 py-3",
+        viewState.isProfitable
+          ? "border-emerald-900/30 bg-emerald-950/10"
+          : "border-rose-900/30 bg-rose-950/10",
+      )}
+    >
+      <span className="text-xs font-medium uppercase tracking-wide text-neutral-400">
+        Lucro Estimado
+      </span>
+      <div className="flex items-center gap-2">
+        <span
+          className={cn(
+            "font-mono text-sm font-bold",
+            viewState.isProfitable ? "text-emerald-500" : "text-rose-500",
+          )}
+        >
+          {(viewState.profit / 100).toLocaleString("pt-BR", {
+            style: "currency",
+            currency: "BRL",
+          })}
+        </span>
+        <div
+          className={cn(
+            "ml-1 rounded-[4px] border px-1.5 py-0.5 text-[10px] font-bold",
+            viewState.isProfitable
+              ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-500"
+              : "border-rose-500/30 bg-rose-500/10 text-rose-500",
+          )}
+        >
+          {viewState.margin.toFixed(1)}%
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function BatchCreateSidebar({
+  viewState,
+}: {
+  viewState: BatchCreateViewState;
+}) {
+  return (
+    <div className="min-w-0 space-y-6">
+      <BatchDatesCard form={viewState.form} />
+      <BatchNotesCard form={viewState.form} />
+    </div>
+  );
+}
+
+function BatchDatesCard({ form }: { form: UseFormReturn<BatchCreateFormData> }) {
+  return (
+    <Card className="w-full min-w-0 overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717]">
+      <CardHeader className="border-b border-neutral-800 pb-4">
+        <div className="flex items-center gap-2">
+          <Calendar className="size-4 text-amber-500" />
+          <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
+            Vigência
+          </CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent className="min-w-0 space-y-5 overflow-hidden pt-6">
+        <BatchDateField form={form} name="manufacturedDate" label="Data de Fabricação" />
+        <BatchDateField form={form} name="expirationDate" label="Data de Validade" />
+      </CardContent>
+    </Card>
+  );
+}
+
+function BatchDateField({
+  form,
+  label,
+  name,
+}: {
+  form: UseFormReturn<BatchCreateFormData>;
+  label: string;
+  name: "manufacturedDate" | "expirationDate";
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem className="min-w-0">
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            {label}
+          </FormLabel>
+          <FormControl>
+            <Input
+              type="date"
+              className="block h-10 w-full min-w-0 max-w-full appearance-none rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+              {...field}
+            />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function BatchNotesCard({ form }: { form: UseFormReturn<BatchCreateFormData> }) {
+  return (
+    <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
+      <CardHeader className="border-b border-neutral-800 pb-4">
+        <div className="flex items-center gap-2">
+          <FileText className="size-4 text-neutral-500" />
+          <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
+            Observações
+          </CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent className="pt-6">
+        <FormField
+          control={form.control}
+          name="notes"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Textarea
+                  placeholder="Detalhes adicionais sobre o lote…"
+                  className="min-h-[120px] resize-none rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage className="text-xs text-rose-500" />
+            </FormItem>
+          )}
+        />
+      </CardContent>
+    </Card>
+  );
+}
+
+function BatchCreateFooter({
+  viewState,
+}: {
+  viewState: BatchCreateViewState;
+}) {
+  return (
+    <div className="fixed right-0 bottom-0 left-0 z-40 border-t border-neutral-800 bg-[#0A0A0A]/95 p-4 backdrop-blur-sm md:ml-[var(--sidebar-width)]">
+      <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-3 px-4 md:flex-row md:justify-end md:px-6 lg:px-8">
+        <Button
+          variant="outline"
+          type="button"
+          className="h-10 w-full rounded-[4px] border-neutral-700 bg-transparent text-xs font-bold uppercase tracking-wide text-neutral-300 hover:bg-neutral-800 hover:text-white md:w-auto"
+          asChild
+        >
+          <Link href="/batches">Cancelar</Link>
+        </Button>
+        <PermissionGate permission="batches:create">
+          <Button
+            type="submit"
+            className="h-10 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white shadow-[0_0_20px_-5px_rgba(37,99,235,0.3)] hover:bg-blue-700 md:w-[160px]"
+            disabled={viewState.isSubmitting || !viewState.selectedWarehouseId}
+          >
+            {viewState.isSubmitting ? (
+              <>
+                <Loader2 className="mr-2 size-3.5 animate-spin" />
+                Salvando…
+              </>
+            ) : (
+              <>
+                <PackagePlus className="mr-2 size-3.5" />
+                Criar Lote
+              </>
+            )}
+          </Button>
+        </PermissionGate>
+      </div>
+    </div>
+  );
+}
+
 function LatestBatchPriceButton({
   fieldLabel,
   selectedProduct,
@@ -566,7 +714,7 @@ function LatestBatchPriceButton({
   if (isLoading) {
     return (
       <div className="mt-2 flex h-8 items-center gap-2 rounded-[4px] border border-neutral-800 bg-neutral-950 px-2 text-[10px] font-bold uppercase tracking-wide text-neutral-500">
-        <Loader2 className="h-3 w-3 animate-spin" />
+        <Loader2 className="size-3 animate-spin" />
         Buscando último lote
       </div>
     );
@@ -574,7 +722,7 @@ function LatestBatchPriceButton({
 
   if (!suggestion) {
     return (
-      <div className="mt-2 rounded-[4px] border border-neutral-800 bg-neutral-950 px-2 py-2 text-[10px] font-bold uppercase tracking-wide text-neutral-600">
+      <div className="mt-2 rounded-[4px] border border-neutral-800 bg-neutral-950 p-2 text-[10px] font-bold uppercase tracking-wide text-neutral-600">
         Sem lote anterior
       </div>
     );
@@ -589,12 +737,12 @@ function LatestBatchPriceButton({
     >
       <span className="flex min-w-0 items-center justify-between gap-2">
         <span className="flex min-w-0 items-center gap-1.5">
-          <History className="h-3.5 w-3.5 shrink-0 text-blue-500" />
+          <History className="size-3.5 shrink-0 text-blue-500" />
           <span className="truncate text-[10px] font-bold uppercase tracking-wide text-neutral-500">
             {fieldLabel}
           </span>
         </span>
-        <span className="shrink-0 rounded-[4px] border border-neutral-800 bg-neutral-900 px-2 py-1 font-mono text-xs font-black leading-none text-white">
+        <span className="shrink-0 rounded-[4px] border border-neutral-800 bg-neutral-900 px-2 py-1 font-mono text-xs leading-none font-black text-white">
           {priceLabel}
         </span>
       </span>
diff --git a/app/(pages)/brands/brands.view.tsx b/app/(pages)/brands/brands.view.tsx
index b93bff4..b79e4e9 100644
--- a/app/(pages)/brands/brands.view.tsx
+++ b/app/(pages)/brands/brands.view.tsx
@@ -1,8 +1,33 @@
 "use client";
 
 import Image from "next/image";
+import { useState, type Dispatch, type SetStateAction } from "react";
+import { format, parseISO } from "date-fns";
+import { ptBR } from "date-fns/locale";
+import {
+  AlertTriangle,
+  ArrowDown,
+  ArrowUp,
+  Calendar,
+  Image as ImageIcon,
+  Loader2,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Search,
+  Tag,
+  Trash2,
+  XCircle,
+} from "lucide-react";
+import type { UseFormReturn } from "react-hook-form";
+import { PermissionGate } from "@/components/permission-gate";
 import { Button } from "@/components/ui/button";
-import { ResponsiveModal } from "@/components/ui/responsive-modal";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
   Form,
   FormControl,
@@ -12,6 +37,14 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { ResponsiveModal } from "@/components/ui/responsive-modal";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import {
   Table,
   TableBody,
@@ -20,41 +53,8 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Plus,
-  Search,
-  Pencil,
-  Trash2,
-  Loader2,
-  Image as ImageIcon,
-  ArrowUp,
-  ArrowDown,
-  Tag,
-  AlertTriangle,
-  XCircle,
-  MoreHorizontal,
-  Calendar,
-} from "lucide-react";
-import { UseFormReturn } from "react-hook-form";
-import { BrandFormData } from "./brands.schema";
-import { Brand, SortConfig } from "./brands.types";
-import { format, parseISO } from "date-fns";
-import { ptBR } from "date-fns/locale";
-import { useState } from "react";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { PermissionGate } from "@/components/permission-gate";
+import type { BrandFormData } from "./brands.schema";
+import type { Brand, SortConfig } from "./brands.types";
 
 interface BrandsViewProps {
   brands: Brand[];
@@ -78,6 +78,12 @@ interface BrandsViewProps {
   isDeleting: boolean;
 }
 
+interface BrandsViewState extends BrandsViewProps {
+  logoPreview: string;
+  logoError: boolean;
+  setFailedLogoPreview: Dispatch<SetStateAction<string | null>>;
+}
+
 const SortIcon = ({
   field,
   sortConfig,
@@ -86,6 +92,7 @@ const SortIcon = ({
   sortConfig: SortConfig;
 }) => {
   if (sortConfig.key !== field) return <div className="size-3 opacity-0" />;
+
   return sortConfig.direction === "asc" ? (
     <ArrowUp className="ml-1 size-3 text-blue-500" />
   ) : (
@@ -93,512 +100,640 @@ const SortIcon = ({
   );
 };
 
-export const BrandsView = ({
-  brands,
-  isLoading,
-  error,
-  searchQuery,
-  setSearchQuery,
-  sortConfig,
-  handleSort,
-  isModalOpen,
-  selectedBrand,
-  openCreateModal,
-  openEditModal,
-  closeModal,
-  form,
-  onSubmit,
-  brandToDelete,
-  openDeleteDialog,
-  closeDeleteDialog,
-  confirmDelete,
-  isDeleting,
-}: BrandsViewProps) => {
+export const BrandsView = (props: BrandsViewProps) => {
   const [failedLogoPreview, setFailedLogoPreview] = useState<string | null>(
     null,
   );
-
-  const logoUrl = form.watch("logoUrl");
+  const logoUrl = props.form.watch("logoUrl");
   const logoPreview = logoUrl?.trim() ?? "";
   const logoError = failedLogoPreview === logoPreview;
-
+  const viewState: BrandsViewState = {
+    ...props,
+    logoPreview,
+    logoError,
+    setFailedLogoPreview,
+  };
 
   return (
     <div className="min-h-screen bg-[#0A0A0A] pb-20 font-sans text-neutral-200">
-      {/* Sticky Header with Controls */}
-      <header className="relative z-30 border-b border-neutral-800 bg-[#0A0A0A]/95 backdrop-blur supports-[backdrop-filter]:bg-[#0A0A0A]/60">
-        <div className="mx-auto w-full max-w-7xl px-4 py-4 md:px-6 lg:px-8">
-          <div className="flex flex-col gap-4">
-            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-              <div>
-                <h1 className="text-2xl font-semibold tracking-tighter text-white">
-                  Marcas
-                </h1>
-                <p className="text-sm text-neutral-500 mt-1">
-                  Gerencie as marcas dos produtos
-                </p>
-              </div>
-              <PermissionGate permission="brands:create">
-                <Button
-                  onClick={openCreateModal}
-                  className="h-10 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 shadow-[0_0_15px_-3px_rgba(37,99,235,0.4)] md:w-auto"
-                >
-                  <Plus className="mr-2 size-4" />
-                  Nova Marca
-                </Button>
-              </PermissionGate>
-            </div>
+      <BrandsHeader viewState={viewState} />
+      <BrandsContent viewState={viewState} />
+      <BrandFormModal viewState={viewState} />
+      <BrandDeleteDialog viewState={viewState} />
+    </div>
+  );
+};
 
-            {/* Bottom Row: Search & Filters */}
-            <div className="flex gap-2">
-              <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-3.5 text-neutral-500" />
-                <Input
-                  placeholder="Pesquisar marcas…"
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pl-9 md:h-9 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-sm text-neutral-200 placeholder:text-neutral-600 focus:border-blue-600 focus:ring-0 transition-all hover:border-neutral-700"
-                />
-              </div>
-
-              <Select
-                value={`${sortConfig.key}-${sortConfig.direction}`}
-                onValueChange={(value) => {
-                  const [key, direction] = value.split("-") as [
-                    SortConfig["key"],
-                    SortConfig["direction"],
-                  ];
-                  if (
-                    sortConfig.key !== key ||
-                    sortConfig.direction !== direction
-                  ) {
-                    handleSort(key);
-                  }
-                }}
-              >
-                <SelectTrigger className="w-[120px] sm:w-[160px] rounded-[4px] border-neutral-800 bg-[#171717] text-[10px] font-bold uppercase tracking-widest text-neutral-400 focus:ring-0">
-                  <SelectValue placeholder="ORDENAR" />
-                </SelectTrigger>
-                <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
-                  <SelectItem
-                    value="name-asc"
-                    className="text-[10px] font-bold uppercase"
-                  >
-                    Nome (A-Z)
-                  </SelectItem>
-                  <SelectItem
-                    value="name-desc"
-                    className="text-[10px] font-bold uppercase"
-                  >
-                    Nome (Z-A)
-                  </SelectItem>
-                  <SelectItem
-                    value="createdAt-desc"
-                    className="text-[10px] font-bold uppercase"
-                  >
-                    Recentes
-                  </SelectItem>
-                  <SelectItem
-                    value="createdAt-asc"
-                    className="text-[10px] font-bold uppercase"
-                  >
-                    Antigos
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-        </div>
-      </header>
-
-      <main className="mx-auto w-full max-w-7xl p-4 md:px-6 lg:px-8 mt-4">
-        {/* State Layers */}
-        {isLoading && (
-          <div className="flex h-64 w-full flex-col items-center justify-center gap-4 rounded-[4px] border border-neutral-800 bg-[#171717]/30 animate-pulse">
-            <Loader2 className="size-8 animate-spin text-blue-600" />
-            <span className="text-xs uppercase tracking-wide text-neutral-500">
-              Acessando Diretório…
-            </span>
-          </div>
-        )}
+function BrandsHeader({ viewState }: { viewState: BrandsViewState }) {
+  const {
+    handleSort,
+    openCreateModal,
+    searchQuery,
+    setSearchQuery,
+    sortConfig,
+  } = viewState;
 
-        {error && (
-          <div className="flex h-64 w-full flex-col items-center justify-center gap-4 rounded-[4px] border border-rose-900/30 bg-rose-950/10 p-6 text-center">
-            <AlertTriangle className="size-8 text-rose-500" />
+  return (
+    <header className="relative z-30 border-b border-neutral-800 bg-[#0A0A0A]/95 backdrop-blur supports-[backdrop-filter]:bg-[#0A0A0A]/60">
+      <div className="mx-auto w-full max-w-7xl px-4 py-4 md:px-6 lg:px-8">
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
             <div>
-              <h3 className="text-sm font-semibold uppercase text-rose-500">
-                Erro de Sincronização
-              </h3>
-              <p className="text-xs text-rose-500/70 mt-1">
-                Falha ao carregar as marcas registradas.
+              <h1 className="text-2xl font-semibold tracking-tighter text-white">
+                Marcas
+              </h1>
+              <p className="mt-1 text-sm text-neutral-500">
+                Gerencie as marcas dos produtos
               </p>
             </div>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => window.location.reload()}
-              className="mt-2 border-rose-900/30 text-rose-500"
-            >
-              Recarregar Dados
-            </Button>
-          </div>
-        )}
-
-        {!isLoading && !error && brands.length === 0 && (
-          <div className="flex h-96 w-full flex-col items-center justify-center gap-6 rounded-[4px] border border-dashed border-neutral-800 bg-[#171717]/20">
-            <div className="flex size-20 items-center justify-center rounded-full bg-neutral-900 ring-1 ring-neutral-800 shadow-inner">
-              <Tag className="size-8 text-neutral-600" />
-            </div>
-            <div className="text-center">
-              <h3 className="text-sm font-semibold uppercase tracking-wide text-neutral-300">
-                {searchQuery
-                  ? "Nenhum Registro Encontrado"
-                  : "Nenhuma Marca Registrada"}
-              </h3>
-              <p className="mt-1 max-w-xs text-xs text-neutral-500">
-                {searchQuery
-                  ? "Tente utilizar outros termos para localizar a marca corporativa."
-                  : "Seu portfólio de marcas está vazio. Inicie o registro da primeira marca."}
-              </p>
-            </div>
-            {searchQuery ? (
+            <PermissionGate permission="brands:create">
               <Button
-                variant="link"
-                onClick={() => setSearchQuery("")}
-                className="text-blue-500 text-xs font-bold uppercase tracking-widest"
+                onClick={openCreateModal}
+                className="h-10 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white shadow-[0_0_15px_-3px_rgba(37,99,235,0.4)] hover:bg-blue-700 md:w-auto"
               >
-                Limpar Busca
+                <Plus className="mr-2 size-4" />
+                Nova Marca
               </Button>
-            ) : (
-              <PermissionGate permission="brands:create">
-                <Button
-                  onClick={openCreateModal}
-                  className="rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white"
-                >
-                  <Plus className="mr-2 size-3.5" /> Registrar Marca
-                </Button>
-              </PermissionGate>
-            )}
+            </PermissionGate>
           </div>
-        )}
-
-        {/* Data Content */}
-        {!isLoading && !error && brands.length > 0 && (
-          <div className="animate-in fade-in duration-500 slide-in-from-bottom-2">
-            {/* Desktop View - Table */}
-            <div className="hidden md:block overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717]">
-              <Table>
-                <TableHeader className="bg-neutral-900/50">
-                  <TableRow className="border-b border-neutral-800 hover:bg-transparent">
-                    <TableHead className="w-20 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Identidade
-                    </TableHead>
-                    <TableHead
-                      className="cursor-pointer text-[10px] font-bold uppercase tracking-widest text-neutral-500 hover:text-white transition-colors"
-                      onClick={() => handleSort("name")}
-                    >
-                      <div className="flex items-center gap-1">
-                        Nome <SortIcon field="name" sortConfig={sortConfig} />
-                      </div>
-                    </TableHead>
-                    <TableHead
-                      className="cursor-pointer text-[10px] font-bold uppercase tracking-widest text-neutral-500 hover:text-white transition-colors"
-                      onClick={() => handleSort("createdAt")}
-                    >
-                      <div className="flex items-center gap-1">
-                        Data de Registro <SortIcon field="createdAt" sortConfig={sortConfig} />
-                      </div>
-                    </TableHead>
-                    <TableHead className="text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Operações
-                    </TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {brands.map((brand) => (
-                    <TableRow
-                      key={brand.id}
-                      className="group border-b border-neutral-800/50 hover:bg-neutral-800/30 transition-all"
-                    >
-                      <TableCell>
-                        <div className="relative flex size-12 items-center justify-center overflow-hidden rounded-[4px] border border-neutral-800 bg-neutral-900 shadow-inner transition-colors group-hover:border-neutral-700">
-                          {brand.logoUrl ? (
-                            <Image
-                              src={brand.logoUrl}
-                              alt={brand.name}
-                              fill
-                              sizes="48px"
-                              unoptimized
-                              className="object-cover"
-                            />
-                          ) : (
-                            <ImageIcon className="size-5 text-neutral-700" />
-                          )}
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        <span className="font-bold text-white tracking-tight">
-                          {brand.name}
-                        </span>
-                      </TableCell>
-                      <TableCell>
-                        <span className="font-mono text-xs text-neutral-500 uppercase">
-                          {format(parseISO(brand.createdAt), "dd MMM, yyyy", {
-                            locale: ptBR,
-                          })}
-                        </span>
-                      </TableCell>
-                      <TableCell className="text-right">
-                        <div className="flex justify-end gap-1 transition-opacity">
-                          <PermissionGate permission="brands:update">
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              onClick={() => openEditModal(brand)}
-                              className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-white"
-                            >
-                              <Pencil className="size-4" />
-                            </Button>
-                          </PermissionGate>
-                          <PermissionGate permission="brands:delete">
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              onClick={() => openDeleteDialog(brand)}
-                              className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-rose-500"
-                            >
-                              <Trash2 className="size-4" />
-                            </Button>
-                          </PermissionGate>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-
-            {/* Mobile View - Cards */}
-            <div className="grid grid-cols-1 gap-3 md:hidden">
-              {brands.map((brand) => (
-                <div
-                  key={brand.id}
-                  className="relative flex items-center gap-4 rounded-[4px] border border-neutral-800 bg-[#171717] p-4 hover:border-neutral-700 transition-all active:bg-[#1f1f1f]"
-                >
-                  <div className="absolute left-0 top-0 bottom-0 w-1 bg-neutral-800 rounded-l-[4px]" />
-
-                  <div className="relative flex size-16 shrink-0 items-center justify-center overflow-hidden rounded-[4px] border border-neutral-800 bg-neutral-900 shadow-inner">
-                    {brand.logoUrl ? (
-                      <Image
-                        src={brand.logoUrl}
-                        alt={brand.name}
-                        fill
-                        sizes="64px"
-                        unoptimized
-                        className="object-cover"
-                      />
-                    ) : (
-                      <ImageIcon className="size-7 text-neutral-700" />
-                    )}
-                  </div>
-
-                  <div className="flex flex-1 flex-col min-w-0">
-                    <h3 className="font-semibold text-white tracking-tight truncate">
-                      {brand.name}
-                    </h3>
-                    <div className="flex items-center gap-2 mt-1.5">
-                      <Calendar className="size-3 text-neutral-500" />
-                      <span className="font-mono text-[9px] text-neutral-500 uppercase">
-                        {format(parseISO(brand.createdAt), "dd/MM/yyyy", {
-                          locale: ptBR,
-                        })}
-                      </span>
-                    </div>
-                  </div>
-
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="size-9 shrink-0 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-white"
-                      >
-                        <MoreHorizontal className="size-5" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent
-                      align="end"
-                      className="w-48 rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-200"
-                    >
-                      <PermissionGate permission="brands:update">
-                        <DropdownMenuItem
-                          onClick={() => openEditModal(brand)}
-                          className="focus:bg-neutral-800"
-                        >
-                          <Pencil className="mr-2 size-4" /> Editar
-                        </DropdownMenuItem>
-                      </PermissionGate>
-                      <PermissionGate permission="brands:delete">
-                        <DropdownMenuItem
-                          onClick={() => openDeleteDialog(brand)}
-                          className="text-rose-500 focus:bg-rose-950/20"
-                        >
-                          <Trash2 className="mr-2 size-4" /> Excluir
-                        </DropdownMenuItem>
-                      </PermissionGate>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </div>
-              ))}
+          <div className="flex gap-2">
+            <div className="relative flex-1">
+              <Search className="absolute top-1/2 left-3 size-3.5 -translate-y-1/2 text-neutral-500" />
+              <Input
+                placeholder="Pesquisar marcas…"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full rounded-[4px] border-neutral-800 bg-[#171717] pl-9 text-sm text-neutral-200 transition-all placeholder:text-neutral-600 hover:border-neutral-700 focus:border-blue-600 focus:ring-0 md:h-9"
+              />
             </div>
+            <BrandSortSelect
+              sortConfig={sortConfig}
+              handleSort={handleSort}
+            />
           </div>
-        )}
-      </main>
-
-      {/* Modals */}
-      <ResponsiveModal
-        open={isModalOpen}
-        onOpenChange={closeModal}
-        title={selectedBrand ? "Editar Marca" : "Nova Marca Corporativa"}
-        description="Registro e manutenção de identidade de marca."
-        maxWidth="sm:max-w-[450px]"
-        footer={
-          <>
-            <Button
-              type="button"
-              variant="ghost"
-              onClick={closeModal}
-              className="rounded-[4px] text-[10px] font-bold uppercase tracking-widest text-neutral-500 hover:text-white"
-            >
-              Cancelar
-            </Button>
-            <Button
-              type="submit"
-              form="brand-form"
-              disabled={form.formState.isSubmitting}
-              className="rounded-[4px] bg-blue-600 px-8 text-[10px] font-bold uppercase tracking-widest text-white hover:bg-blue-700 shadow-lg"
-            >
-              {form.formState.isSubmitting ? (
-                <Loader2 className="size-3 animate-spin mr-2" />
-              ) : (
-                <Plus className="size-3 mr-2" />
-              )}
-              {selectedBrand ? "Salvar Alterações" : "Confirmar Registro"}
-            </Button>
-          </>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+function BrandSortSelect({
+  handleSort,
+  sortConfig,
+}: {
+  handleSort: (key: SortConfig["key"]) => void;
+  sortConfig: SortConfig;
+}) {
+  return (
+    <Select
+      value={`${sortConfig.key}-${sortConfig.direction}`}
+      onValueChange={(value) => {
+        const [key, direction] = value.split("-") as [
+          SortConfig["key"],
+          SortConfig["direction"],
+        ];
+        if (sortConfig.key !== key || sortConfig.direction !== direction) {
+          handleSort(key);
         }
+      }}
+    >
+      <SelectTrigger className="w-[120px] rounded-[4px] border-neutral-800 bg-[#171717] text-[10px] font-bold uppercase tracking-widest text-neutral-400 focus:ring-0 sm:w-[160px]">
+        <SelectValue placeholder="ORDENAR" />
+      </SelectTrigger>
+      <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+        <SelectItem value="name-asc" className="text-[10px] font-bold uppercase">
+          Nome (A-Z)
+        </SelectItem>
+        <SelectItem
+          value="name-desc"
+          className="text-[10px] font-bold uppercase"
+        >
+          Nome (Z-A)
+        </SelectItem>
+        <SelectItem
+          value="createdAt-desc"
+          className="text-[10px] font-bold uppercase"
+        >
+          Recentes
+        </SelectItem>
+        <SelectItem
+          value="createdAt-asc"
+          className="text-[10px] font-bold uppercase"
+        >
+          Antigos
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  );
+}
+
+function BrandsContent({ viewState }: { viewState: BrandsViewState }) {
+  const { brands, error, isLoading } = viewState;
+
+  return (
+    <main className="mx-auto mt-4 w-full max-w-7xl p-4 md:px-6 lg:px-8">
+      {isLoading && <BrandsLoadingState />}
+      {error && <BrandsErrorState />}
+      {!isLoading && !error && brands.length === 0 && (
+        <BrandsEmptyState viewState={viewState} />
+      )}
+      {!isLoading && !error && brands.length > 0 && (
+        <div className="animate-in fade-in slide-in-from-bottom-2 duration-500">
+          <BrandsTable viewState={viewState} />
+          <BrandMobileCards viewState={viewState} />
+        </div>
+      )}
+    </main>
+  );
+}
+
+function BrandsLoadingState() {
+  return (
+    <div className="flex h-64 w-full animate-pulse flex-col items-center justify-center gap-4 rounded-[4px] border border-neutral-800 bg-[#171717]/30">
+      <Loader2 className="size-8 animate-spin text-blue-600" />
+      <span className="text-xs uppercase tracking-wide text-neutral-500">
+        Acessando Diretório…
+      </span>
+    </div>
+  );
+}
+
+function BrandsErrorState() {
+  return (
+    <div className="flex h-64 w-full flex-col items-center justify-center gap-4 rounded-[4px] border border-rose-900/30 bg-rose-950/10 p-6 text-center">
+      <AlertTriangle className="size-8 text-rose-500" />
+      <div>
+        <h3 className="text-sm font-semibold uppercase text-rose-500">
+          Erro de Sincronização
+        </h3>
+        <p className="mt-1 text-xs text-rose-500/70">
+          Falha ao carregar as marcas registradas.
+        </p>
+      </div>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => window.location.reload()}
+        className="mt-2 border-rose-900/30 text-rose-500"
       >
-        <Form {...form}>
-          <form
-            id="brand-form"
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-6"
+        Recarregar Dados
+      </Button>
+    </div>
+  );
+}
+
+function BrandsEmptyState({ viewState }: { viewState: BrandsViewState }) {
+  const { openCreateModal, searchQuery, setSearchQuery } = viewState;
+
+  return (
+    <div className="flex h-96 w-full flex-col items-center justify-center gap-6 rounded-[4px] border border-dashed border-neutral-800 bg-[#171717]/20">
+      <div className="flex size-20 items-center justify-center rounded-[4px] bg-neutral-900 ring-1 ring-neutral-800 shadow-inner">
+        <Tag className="size-8 text-neutral-600" />
+      </div>
+      <div className="text-center">
+        <h3 className="text-sm font-semibold uppercase tracking-wide text-neutral-300">
+          {searchQuery ? "Nenhum Registro Encontrado" : "Nenhuma Marca Registrada"}
+        </h3>
+        <p className="mt-1 max-w-xs text-xs text-neutral-500">
+          {searchQuery
+            ? "Tente utilizar outros termos para localizar a marca corporativa."
+            : "Seu portfólio de marcas está vazio. Inicie o registro da primeira marca."}
+        </p>
+      </div>
+      {searchQuery ? (
+        <Button
+          variant="link"
+          onClick={() => setSearchQuery("")}
+          className="text-xs font-bold uppercase tracking-widest text-blue-500"
+        >
+          Limpar Busca
+        </Button>
+      ) : (
+        <PermissionGate permission="brands:create">
+          <Button
+            onClick={openCreateModal}
+            className="rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white"
           >
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400 flex items-center gap-1.5">
-                    Nome Oficial <span className="text-rose-500">*</span>
-                  </FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="EX: TECHNO SOLUTIONS"
-                      {...field}
-                      className="h-11 md:h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0 transition-all placeholder:text-neutral-800"
-                    />
-                  </FormControl>
-                  <FormMessage className="text-[10px] font-bold text-rose-500 uppercase" />
-                </FormItem>
-              )}
-            />
+            <Plus className="mr-2 size-3.5" /> Registrar Marca
+          </Button>
+        </PermissionGate>
+      )}
+    </div>
+  );
+}
 
-            <FormField
-              control={form.control}
-              name="logoUrl"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                    Logotipo (URL)
-                  </FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="https://assets.cdn.com/logo.png"
-                      {...field}
-                      className="h-11 md:h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0 transition-all placeholder:text-neutral-800"
-                    />
-                  </FormControl>
-                  <FormMessage className="text-[10px] font-bold text-rose-500 uppercase" />
-                </FormItem>
-              )}
+function BrandsTable({ viewState }: { viewState: BrandsViewState }) {
+  const { brands, handleSort, sortConfig } = viewState;
+
+  return (
+    <div className="hidden overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717] md:block">
+      <Table>
+        <TableHeader className="bg-neutral-900/50">
+          <TableRow className="border-b border-neutral-800 hover:bg-transparent">
+            <TableHead className="w-20 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Identidade
+            </TableHead>
+            <SortableBrandHead
+              label="Nome"
+              field="name"
+              sortConfig={sortConfig}
+              handleSort={handleSort}
+            />
+            <SortableBrandHead
+              label="Data de Registro"
+              field="createdAt"
+              sortConfig={sortConfig}
+              handleSort={handleSort}
             />
+            <TableHead className="text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Operações
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {brands.map((brand) => (
+            <BrandTableRow key={brand.id} brand={brand} viewState={viewState} />
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
 
-            {/* Identity Preview */}
-            {logoPreview && (
-              <div className="rounded-[4px] border border-neutral-800 bg-neutral-900/50 p-4 flex flex-col items-center justify-center min-h-[120px]">
-                <span className="text-[8px] font-bold uppercase text-neutral-600 mb-3 tracking-widest">
-                  Preview de Identidade
-                </span>
-                {!logoError ? (
-                  <div className="relative h-20 w-full">
-                    <Image
-                      src={logoPreview}
-                      alt="Brand Identity"
-                      fill
-                      sizes="240px"
-                      unoptimized
-                      className="rounded-[2px] object-contain shadow-sm"
-                      onError={() => setFailedLogoPreview(logoPreview)}
-                    />
-                  </div>
-                ) : (
-                  <div className="flex flex-col items-center gap-2 opacity-30 text-neutral-500">
-                    <XCircle className="size-8" />
-                    <span className="text-[9px] uppercase font-bold">
-                      Imagem Inválida
-                    </span>
-                  </div>
-                )}
-              </div>
-            )}
-          </form>
-        </Form>
-      </ResponsiveModal>
-
-      {/* Alert Dialogs */}
-      <ResponsiveModal
-        open={!!brandToDelete}
-        onOpenChange={closeDeleteDialog}
-        title="Excluir Marca"
-        description={`Tem certeza que deseja remover o registro de ${brandToDelete?.name}?`}
-        maxWidth="sm:max-w-[400px]"
-        footer={
-          <>
-            <Button
-              variant="ghost"
-              onClick={closeDeleteDialog}
-              className="rounded-[4px] border-neutral-800 bg-transparent text-[10px] font-bold uppercase text-neutral-500 hover:text-white hover:bg-neutral-800"
-            >
-              Cancelar
-            </Button>
-            <Button
-              onClick={confirmDelete}
-              disabled={isDeleting}
-              className="rounded-[4px] bg-rose-600 text-[10px] font-bold uppercase text-white hover:bg-rose-700 border-none"
-            >
-              {isDeleting ? "Processando…" : "Confirmar Exclusão"}
-            </Button>
-          </>
-        }
+function SortableBrandHead({
+  field,
+  handleSort,
+  label,
+  sortConfig,
+}: {
+  field: SortConfig["key"];
+  handleSort: (key: SortConfig["key"]) => void;
+  label: string;
+  sortConfig: SortConfig;
+}) {
+  return (
+    <TableHead
+      className="cursor-pointer text-[10px] font-bold uppercase tracking-widest text-neutral-500 transition-colors hover:text-white"
+      onClick={() => handleSort(field)}
+    >
+      <div className="flex items-center gap-1">
+        {label}
+        <SortIcon field={field} sortConfig={sortConfig} />
+      </div>
+    </TableHead>
+  );
+}
+
+function BrandTableRow({
+  brand,
+  viewState,
+}: {
+  brand: Brand;
+  viewState: BrandsViewState;
+}) {
+  return (
+    <TableRow className="group border-b border-neutral-800/50 transition-all hover:bg-neutral-800/30">
+      <TableCell>
+        <BrandLogo brand={brand} containerClassName="size-12" sizes="48px" />
+      </TableCell>
+      <TableCell>
+        <span className="font-bold tracking-tight text-white">{brand.name}</span>
+      </TableCell>
+      <TableCell>
+        <span className="font-mono text-xs uppercase text-neutral-500">
+          {format(parseISO(brand.createdAt), "dd MMM, yyyy", { locale: ptBR })}
+        </span>
+      </TableCell>
+      <TableCell className="text-right">
+        <BrandDesktopActions brand={brand} viewState={viewState} />
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function BrandLogo({
+  brand,
+  containerClassName,
+  sizes,
+}: {
+  brand: Brand;
+  containerClassName: string;
+  sizes: string;
+}) {
+  return (
+    <div
+      className={`relative flex ${containerClassName} items-center justify-center overflow-hidden rounded-[4px] border border-neutral-800 bg-neutral-900 shadow-inner transition-colors group-hover:border-neutral-700`}
+    >
+      {brand.logoUrl ? (
+        <Image
+          src={brand.logoUrl}
+          alt={brand.name}
+          fill
+          sizes={sizes}
+          unoptimized
+          className="object-cover"
+        />
+      ) : (
+        <ImageIcon className="size-5 text-neutral-700" />
+      )}
+    </div>
+  );
+}
+
+function BrandDesktopActions({
+  brand,
+  viewState,
+}: {
+  brand: Brand;
+  viewState: BrandsViewState;
+}) {
+  const { openDeleteDialog, openEditModal } = viewState;
+
+  return (
+    <div className="flex justify-end gap-1 transition-opacity">
+      <PermissionGate permission="brands:update">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => openEditModal(brand)}
+          className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-white"
+        >
+          <Pencil className="size-4" />
+        </Button>
+      </PermissionGate>
+      <PermissionGate permission="brands:delete">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => openDeleteDialog(brand)}
+          className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-rose-500"
+        >
+          <Trash2 className="size-4" />
+        </Button>
+      </PermissionGate>
+    </div>
+  );
+}
+
+function BrandMobileCards({ viewState }: { viewState: BrandsViewState }) {
+  return (
+    <div className="grid grid-cols-1 gap-3 md:hidden">
+      {viewState.brands.map((brand) => (
+        <BrandMobileCard key={brand.id} brand={brand} viewState={viewState} />
+      ))}
+    </div>
+  );
+}
+
+function BrandMobileCard({
+  brand,
+  viewState,
+}: {
+  brand: Brand;
+  viewState: BrandsViewState;
+}) {
+  return (
+    <div className="group relative flex items-center gap-4 rounded-[4px] border border-neutral-800 bg-[#171717] p-4 transition-all hover:border-neutral-700 active:bg-[#1f1f1f]">
+      <div className="absolute top-0 bottom-0 left-0 w-1 rounded-l-[4px] bg-neutral-800" />
+      <BrandLogo brand={brand} containerClassName="size-16 shrink-0" sizes="64px" />
+      <div className="flex min-w-0 flex-1 flex-col">
+        <h3 className="truncate font-semibold tracking-tight text-white">
+          {brand.name}
+        </h3>
+        <div className="mt-1.5 flex items-center gap-2">
+          <Calendar className="size-3 text-neutral-500" />
+          <span className="font-mono text-[9px] uppercase text-neutral-500">
+            {format(parseISO(brand.createdAt), "dd/MM/yyyy", { locale: ptBR })}
+          </span>
+        </div>
+      </div>
+      <BrandActionsMenu brand={brand} viewState={viewState} />
+    </div>
+  );
+}
+
+function BrandActionsMenu({
+  brand,
+  viewState,
+}: {
+  brand: Brand;
+  viewState: BrandsViewState;
+}) {
+  const { openDeleteDialog, openEditModal } = viewState;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-9 shrink-0 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-white"
+        >
+          <MoreHorizontal className="size-5" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        className="w-48 rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-200"
+      >
+        <PermissionGate permission="brands:update">
+          <DropdownMenuItem
+            onClick={() => openEditModal(brand)}
+            className="focus:bg-neutral-800"
+          >
+            <Pencil className="mr-2 size-4" /> Editar
+          </DropdownMenuItem>
+        </PermissionGate>
+        <PermissionGate permission="brands:delete">
+          <DropdownMenuItem
+            onClick={() => openDeleteDialog(brand)}
+            className="text-rose-500 focus:bg-rose-950/20"
+          >
+            <Trash2 className="mr-2 size-4" /> Excluir
+          </DropdownMenuItem>
+        </PermissionGate>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function BrandFormModal({ viewState }: { viewState: BrandsViewState }) {
+  const { closeModal, form, isModalOpen, onSubmit, selectedBrand } = viewState;
+
+  return (
+    <ResponsiveModal
+      open={isModalOpen}
+      onOpenChange={closeModal}
+      title={selectedBrand ? "Editar Marca" : "Nova Marca Corporativa"}
+      description="Registro e manutenção de identidade de marca."
+      maxWidth="sm:max-w-[450px]"
+      footer={<BrandFormFooter viewState={viewState} />}
+    >
+      <Form {...form}>
+        <form
+          id="brand-form"
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-6"
+        >
+          <BrandNameField form={form} />
+          <BrandLogoUrlField form={form} />
+          <BrandLogoPreview viewState={viewState} />
+        </form>
+      </Form>
+    </ResponsiveModal>
+  );
+}
+
+function BrandFormFooter({ viewState }: { viewState: BrandsViewState }) {
+  const { closeModal, form, selectedBrand } = viewState;
+
+  return (
+    <>
+      <Button
+        type="button"
+        variant="ghost"
+        onClick={closeModal}
+        className="rounded-[4px] text-[10px] font-bold uppercase tracking-widest text-neutral-500 hover:text-white"
+      >
+        Cancelar
+      </Button>
+      <Button
+        type="submit"
+        form="brand-form"
+        disabled={form.formState.isSubmitting}
+        className="rounded-[4px] bg-blue-600 px-8 text-[10px] font-bold uppercase tracking-widest text-white shadow-lg hover:bg-blue-700"
       >
-        <div className="py-2">
-          <p className="text-xs text-neutral-500">
-            Esta ação removerá permanentemente a marca do sistema e de todos os
-            produtos associados.
-          </p>
+        {form.formState.isSubmitting ? (
+          <Loader2 className="mr-2 size-3 animate-spin" />
+        ) : (
+          <Plus className="mr-2 size-3" />
+        )}
+        {selectedBrand ? "Salvar Alterações" : "Confirmar Registro"}
+      </Button>
+    </>
+  );
+}
+
+function BrandNameField({ form }: { form: UseFormReturn<BrandFormData> }) {
+  return (
+    <FormField
+      control={form.control}
+      name="name"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            Nome Oficial <span className="text-rose-500">*</span>
+          </FormLabel>
+          <FormControl>
+            <Input
+              placeholder="EX: TECHNO SOLUTIONS"
+              {...field}
+              className="h-11 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm transition-all placeholder:text-neutral-800 focus:border-blue-600 focus:ring-0 md:h-10"
+            />
+          </FormControl>
+          <FormMessage className="text-[10px] font-bold uppercase text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function BrandLogoUrlField({ form }: { form: UseFormReturn<BrandFormData> }) {
+  return (
+    <FormField
+      control={form.control}
+      name="logoUrl"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            Logotipo (URL)
+          </FormLabel>
+          <FormControl>
+            <Input
+              placeholder="https://assets.cdn.com/logo.png"
+              {...field}
+              className="h-11 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm transition-all placeholder:text-neutral-800 focus:border-blue-600 focus:ring-0 md:h-10"
+            />
+          </FormControl>
+          <FormMessage className="text-[10px] font-bold uppercase text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function BrandLogoPreview({ viewState }: { viewState: BrandsViewState }) {
+  const { logoError, logoPreview, setFailedLogoPreview } = viewState;
+
+  if (!logoPreview) return null;
+
+  return (
+    <div className="flex min-h-[120px] flex-col items-center justify-center rounded-[4px] border border-neutral-800 bg-neutral-900/50 p-4">
+      <span className="mb-3 text-[8px] font-bold uppercase tracking-widest text-neutral-600">
+        Preview de Identidade
+      </span>
+      {!logoError ? (
+        <div className="relative h-20 w-full">
+          <Image
+            src={logoPreview}
+            alt="Brand Identity"
+            fill
+            sizes="240px"
+            unoptimized
+            className="rounded-[2px] object-contain shadow-sm"
+            onError={() => setFailedLogoPreview(logoPreview)}
+          />
+        </div>
+      ) : (
+        <div className="flex flex-col items-center gap-2 text-neutral-500 opacity-30">
+          <XCircle className="size-8" />
+          <span className="text-[9px] font-bold uppercase">Imagem Inválida</span>
         </div>
-      </ResponsiveModal>
+      )}
     </div>
   );
-};
+}
+
+function BrandDeleteDialog({ viewState }: { viewState: BrandsViewState }) {
+  const {
+    brandToDelete,
+    closeDeleteDialog,
+    confirmDelete,
+    isDeleting,
+  } = viewState;
+
+  return (
+    <ResponsiveModal
+      open={!!brandToDelete}
+      onOpenChange={closeDeleteDialog}
+      title="Excluir Marca"
+      description={`Tem certeza que deseja remover o registro de ${brandToDelete?.name}?`}
+      maxWidth="sm:max-w-[400px]"
+      footer={
+        <>
+          <Button
+            variant="ghost"
+            onClick={closeDeleteDialog}
+            className="rounded-[4px] border-neutral-800 bg-transparent text-[10px] font-bold uppercase text-neutral-500 hover:bg-neutral-800 hover:text-white"
+          >
+            Cancelar
+          </Button>
+          <Button
+            onClick={confirmDelete}
+            disabled={isDeleting}
+            className="rounded-[4px] border-none bg-rose-600 text-[10px] font-bold uppercase text-white hover:bg-rose-700"
+          >
+            {isDeleting ? "Processando…" : "Confirmar Exclusão"}
+          </Button>
+        </>
+      }
+    >
+      <div className="py-2">
+        <p className="text-xs text-neutral-500">
+          Esta ação removerá permanentemente a marca do sistema e de todos os
+          produtos associados.
+        </p>
+      </div>
+    </ResponsiveModal>
+  );
+}
diff --git a/app/(pages)/categories/categories.view.tsx b/app/(pages)/categories/categories.view.tsx
index 4c9c88d..dc48989 100644
--- a/app/(pages)/categories/categories.view.tsx
+++ b/app/(pages)/categories/categories.view.tsx
@@ -1,7 +1,37 @@
 "use client";
 
+import {
+  AlertTriangle,
+  Box,
+  ChevronDown,
+  ChevronRight,
+  Edit,
+  Folder,
+  FolderOpen,
+  FolderTree,
+  List,
+  Loader2,
+  Maximize2,
+  Minimize2,
+  MoreHorizontal,
+  Plus,
+  Search,
+  Tag,
+  Trash2,
+} from "lucide-react";
+import type { ReactNode } from "react";
+import type { UseFormReturn } from "react-hook-form";
+import { PermissionGate } from "@/components/permission-gate";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { ResponsiveModal } from "@/components/ui/responsive-modal";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
   Form,
   FormControl,
@@ -11,7 +41,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
+import { ResponsiveModal } from "@/components/ui/responsive-modal";
 import {
   Select,
   SelectContent,
@@ -19,44 +49,15 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Badge } from "@/components/ui/badge";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Plus,
-  Search,
-  Edit,
-  Trash2,
-  Loader2,
-  FolderTree,
-  ChevronRight,
-  ChevronDown,
-  Folder,
-  FolderOpen,
-  List,
-  Maximize2,
-  Minimize2,
-  AlertTriangle,
-  Tag,
-  MoreHorizontal,
-  Box,
-} from "lucide-react";
-import { UseFormReturn } from "react-hook-form";
-import { CategoryFormData } from "./categories.schema";
-import {
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+import type { CategoryFormData } from "./categories.schema";
+import type {
   Category,
   CategoryTree,
   SortConfig,
   ViewMode,
 } from "./categories.types";
-import { cn } from "@/lib/utils";
-import { PermissionGate } from "@/components/permission-gate";
 
 interface CategoriesViewProps {
   categories: CategoryTree[] | CategoryTree[];
@@ -89,712 +90,868 @@ interface CategoriesViewProps {
   allCategories: Category[];
 }
 
-export const CategoriesView = ({
-  categoryTree,
-  flatCategories,
-  isLoading,
-  error,
-  searchQuery,
-  setSearchQuery,
-  viewMode,
-  setViewMode,
-  isModalOpen,
-  selectedCategory,
-  openCreateModal,
-  openEditModal,
-  closeModal,
-  form,
-  onSubmit,
-  categoryToDelete,
-  openDeleteDialog,
-  closeDeleteDialog,
-  confirmDelete,
-  isDeleting,
-  expandedNodes,
-  toggleNode,
-  expandAll,
-  collapseAll,
-  allCategories,
-}: CategoriesViewProps) => {
-  // Recursively render tree nodes
-  const renderTreeNode = (node: CategoryTree) => {
-    const hasChildren = node.children.length > 0;
-    const isExpanded = expandedNodes.has(node.id);
-    const Icon = isExpanded ? FolderOpen : Folder;
-
-    // Depth-based border colors for visual hierarchy
-    const depthColors = [
-      "border-blue-500",
-      "border-emerald-500",
-      "border-amber-500",
-      "border-purple-500",
-    ];
-    const activeBorder = depthColors[node.depth % depthColors.length];
-
-    return (
-      <div key={node.id} className="select-none">
-        {/* Node Row */}
-        <div
-          className={cn(
-            "group relative flex items-center gap-3 py-3 px-3 md:px-4 bg-[#171717] mb-[1px] transition-all",
-            "border-l-[4px] border-neutral-800 hover:bg-[#1f1f1f]",
-            isExpanded ? activeBorder : "hover:border-neutral-600",
-          )}
-          style={{ paddingLeft: `${node.depth * 16 + 12}px` }}
-        >
-          {/* Visual Thread Line for nested items */}
-          {node.depth > 0 && (
-            <div
-              className="absolute left-0 top-0 bottom-0 w-[1px] bg-neutral-800"
-              style={{ left: `${node.depth * 16}px` }}
-            />
-          )}
+type CategoriesViewState = CategoriesViewProps;
 
-          {/* Expand/Collapse Trigger */}
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              if (hasChildren) toggleNode(node.id);
-            }}
-            className={cn(
-              "flex size-9 md:size-8 shrink-0 items-center justify-center rounded-[4px] border border-transparent transition-all",
-              hasChildren
-                ? "cursor-pointer bg-neutral-900 border-neutral-800 text-neutral-400 hover:border-neutral-600 hover:text-white"
-                : "invisible",
-            )}
-            disabled={!hasChildren}
-            aria-label={isExpanded ? "Recolher" : "Expandir"}
-          >
-            {hasChildren &&
-              (isExpanded ? (
-                <ChevronDown className="size-4" />
-              ) : (
-                <ChevronRight className="size-4" />
-              ))}
-          </button>
-
-          {/* Icon */}
-          <Icon
-            className={cn(
-              "size-5 shrink-0 transition-colors",
-              isExpanded
-                ? "text-blue-500"
-                : "text-neutral-500 group-hover:text-neutral-300",
-            )}
-          />
+const CATEGORY_DEPTH_BORDERS = [
+  "border-blue-500",
+  "border-emerald-500",
+  "border-amber-500",
+  "border-purple-500",
+];
 
-          {/* Content Info */}
-          <button
-            type="button"
-            disabled={!hasChildren}
-            className={cn(
-              "flex-1 min-w-0 flex flex-col justify-center text-left",
-              hasChildren ? "cursor-pointer" : "cursor-default",
-            )}
-            onClick={() => toggleNode(node.id)}
-          >
-            <div className="flex items-center gap-2">
-              <span
-                className={cn(
-                  "text-sm font-medium transition-colors truncate",
-                  isExpanded
-                    ? "text-white"
-                    : "text-neutral-300 group-hover:text-white",
-                )}
-              >
-                {node.name}
-              </span>
-
-              {hasChildren && (
-                <Badge
-                  variant="outline"
-                  className="hidden sm:flex h-5 rounded-[2px] border-neutral-700 bg-neutral-800 px-1.5 text-[9px] font-bold text-neutral-400"
-                >
-                  {node.children.length}
-                </Badge>
-              )}
-            </div>
-          </button>
-
-          {/* Actions */}
-          <div className="flex items-center gap-1">
-            {/* Desktop Actions */}
-            <div className="hidden md:flex items-center gap-1 transition-opacity">
-              <PermissionGate permission="categories:update">
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    openEditModal(node);
-                  }}
-                  className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-white"
-                >
-                  <Edit className="size-4" />
-                </Button>
-              </PermissionGate>
-              <PermissionGate permission="categories:delete">
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    openDeleteDialog(node);
-                  }}
-                  className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-rose-500"
-                >
-                  <Trash2 className="size-4" />
-                </Button>
-              </PermissionGate>
-            </div>
+export const CategoriesView = (props: CategoriesViewProps) => {
+  const viewState: CategoriesViewState = props;
+
+  return (
+    <div className="min-h-screen bg-[#0A0A0A] pb-20 font-sans text-neutral-200">
+      <CategoriesHeader viewState={viewState} />
+      <CategoriesMain viewState={viewState} />
+      <CategoryFormModal viewState={viewState} />
+      <CategoryDeleteDialog viewState={viewState} />
+    </div>
+  );
+};
 
-            {/* Mobile Actions Menu */}
-            <div className="md:hidden">
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-white focus:opacity-100"
-                  >
-                    <MoreHorizontal className="size-4" />
-                    <span className="sr-only">Ações</span>
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent
-                  align="end"
-                  className="w-48 rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-200"
-                >
-                  <DropdownMenuLabel className="text-xs font-bold uppercase tracking-wider text-neutral-500">
-                    Opções
-                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator className="bg-neutral-800" />
-                  <PermissionGate permission="categories:update">
-                    <DropdownMenuItem
-                      onClick={() => openEditModal(node)}
-                      className="cursor-pointer focus:bg-neutral-800 focus:text-white"
-                    >
-                      <Edit className="mr-2 size-3.5" />
-                      Editar
-                    </DropdownMenuItem>
-                  </PermissionGate>
-                  <PermissionGate permission="categories:delete">
-                    <DropdownMenuItem
-                      onClick={() => openDeleteDialog(node)}
-                      className="cursor-pointer text-rose-500 focus:bg-rose-950/20 focus:text-rose-400"
-                    >
-                      <Trash2 className="mr-2 size-3.5" />
-                      Excluir
-                    </DropdownMenuItem>
-                  </PermissionGate>
-                </DropdownMenuContent>
-              </DropdownMenu>
+function CategoriesHeader({ viewState }: { viewState: CategoriesViewState }) {
+  const {
+    flatCategories,
+    openCreateModal,
+    searchQuery,
+    setSearchQuery,
+    setViewMode,
+    viewMode,
+  } = viewState;
+
+  return (
+    <div className="relative z-30 border-b border-neutral-800 bg-[#0A0A0A]/95 backdrop-blur supports-[backdrop-filter]:bg-[#0A0A0A]/60">
+      <div className="mx-auto w-full max-w-7xl px-4 py-4 md:px-6 lg:px-8">
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+            <div>
+              <h1 className="text-2xl font-semibold tracking-tighter text-white">
+                Categorias
+              </h1>
+              <p className="mt-1 text-sm text-neutral-500">
+                Organize os produtos por categoria
+              </p>
             </div>
+            <PermissionGate permission="categories:create">
+              <Button
+                onClick={openCreateModal}
+                className="h-10 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white shadow-[0_0_20px_-5px_rgba(37,99,235,0.3)] hover:bg-blue-700 md:w-auto"
+              >
+                <Plus className="mr-2 size-4" />
+                Nova Categoria
+              </Button>
+            </PermissionGate>
           </div>
-        </div>
-
-        {/* Children Render */}
-        {hasChildren && isExpanded && (
-          <div className="relative">
-            {/* Vertical Guide Line */}
-            <div
-              className="absolute top-0 bottom-0 w-px bg-neutral-800/50"
-              style={{ left: `${node.depth * 16 + 15}px` }}
+          <div className="flex items-center gap-2">
+            <div className="relative flex-1">
+              <Search className="absolute top-1/2 left-3 size-3.5 -translate-y-1/2 text-neutral-500" />
+              <Input
+                placeholder="Buscar…"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="h-10 w-full rounded-[4px] border-neutral-800 bg-[#171717] pl-9 text-sm text-neutral-200 transition-all placeholder:text-neutral-600 hover:border-neutral-700 focus:border-blue-600 focus:ring-0"
+              />
+            </div>
+            <CategoryViewToggle
+              setViewMode={setViewMode}
+              viewMode={viewMode}
             />
-            {node.children.map((child) => renderTreeNode(child))}
           </div>
+        </div>
+        {viewMode === "tree" && flatCategories.length > 0 && (
+          <CategoryTreeControls viewState={viewState} />
         )}
       </div>
-    );
-  };
+    </div>
+  );
+}
 
-  // Render Flat List Item
-  const renderFlatItem = (node: CategoryTree) => {
-    return (
-      <div
-        key={node.id}
-        className="group relative flex items-center gap-4 border border-neutral-800 bg-[#171717] p-4 rounded-[4px] mb-2 hover:border-neutral-700 transition-all"
+function CategoryViewToggle({
+  setViewMode,
+  viewMode,
+}: {
+  setViewMode: (mode: ViewMode) => void;
+  viewMode: ViewMode;
+}) {
+  return (
+    <div className="flex h-10 shrink-0 rounded-[4px] border border-neutral-800 bg-[#171717] p-0.5">
+      <CategoryViewToggleButton
+        icon={<FolderTree className="size-4" />}
+        label="Visualização em Árvore"
+        isActive={viewMode === "tree"}
+        onClick={() => setViewMode("tree")}
+      />
+      <CategoryViewToggleButton
+        icon={<List className="size-4" />}
+        label="Visualização em Lista"
+        isActive={viewMode === "flat"}
+        onClick={() => setViewMode("flat")}
+      />
+    </div>
+  );
+}
+
+function CategoryViewToggleButton({
+  icon,
+  isActive,
+  label,
+  onClick,
+}: {
+  icon: ReactNode;
+  isActive: boolean;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={onClick}
+      title={label}
+      className={cn(
+        "size-9 rounded-[2px]",
+        isActive
+          ? "bg-neutral-800 text-white shadow-sm"
+          : "text-neutral-500 hover:text-neutral-300",
+      )}
+    >
+      {icon}
+    </Button>
+  );
+}
+
+function CategoryTreeControls({
+  viewState,
+}: {
+  viewState: CategoriesViewState;
+}) {
+  const { collapseAll, expandAll } = viewState;
+
+  return (
+    <div className="mt-2 flex items-center gap-2 border-t border-neutral-800/50 pt-2">
+      <button
+        onClick={expandAll}
+        className="flex items-center gap-1 text-[10px] font-bold uppercase text-neutral-500 transition-colors hover:text-blue-500"
       >
-        {/* Left Color Accent */}
-        <div className="absolute left-0 top-0 bottom-0 w-1 bg-neutral-800 group-hover:bg-blue-600 transition-colors rounded-l-[4px]" />
+        <Maximize2 className="size-3" /> Expandir Tudo
+      </button>
+      <span className="text-neutral-800">|</span>
+      <button
+        onClick={collapseAll}
+        className="flex items-center gap-1 text-[10px] font-bold uppercase text-neutral-500 transition-colors hover:text-neutral-300"
+      >
+        <Minimize2 className="size-3" /> Recolher Tudo
+      </button>
+    </div>
+  );
+}
 
-        {/* Icon Box */}
-        <div className="flex size-10 shrink-0 items-center justify-center rounded-[4px] bg-neutral-900 border border-neutral-800 group-hover:border-neutral-700 transition-colors">
-          <Tag className="size-4 text-neutral-500 group-hover:text-blue-500" />
-        </div>
+function CategoriesMain({ viewState }: { viewState: CategoriesViewState }) {
+  const { error, flatCategories, isLoading, searchQuery, viewMode } = viewState;
 
-        {/* Content */}
-        <div className="flex-1 min-w-0">
-          <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
-            <span className="text-sm font-bold text-neutral-200 group-hover:text-white">
-              {node.name}
-            </span>
-            {node.parentCategoryName && (
-              <Badge
-                variant="outline"
-                className="rounded-[2px] border-neutral-800 bg-neutral-900/50 text-[9px] font-mono text-neutral-500"
-              >
-                <span className="text-neutral-600 mr-1">↳</span>{" "}
-                {node.parentCategoryName}
-              </Badge>
-            )}
-          </div>
-          {node.description && (
-            <p className="text-xs text-neutral-500 truncate mt-1">
-              {node.description}
-            </p>
+  return (
+    <main className="mx-auto mt-2 w-full max-w-7xl p-4 md:px-6 lg:px-8">
+      {isLoading && <CategoriesLoadingState />}
+      {error && <CategoriesErrorState />}
+      {!isLoading && !error && flatCategories.length === 0 && !searchQuery && (
+        <CategoriesEmptyState viewState={viewState} />
+      )}
+      {!isLoading && !error && flatCategories.length === 0 && searchQuery && (
+        <CategoriesNoResults viewState={viewState} />
+      )}
+      {!isLoading && !error && flatCategories.length > 0 && (
+        <div className="animate-in fade-in slide-in-from-bottom-2 duration-500">
+          {viewMode === "tree" ? (
+            <CategoryTreeView viewState={viewState} />
+          ) : (
+            <CategoryFlatView viewState={viewState} />
           )}
         </div>
+      )}
+    </main>
+  );
+}
 
-        {/* Stats (Hidden on small mobile) */}
-        {node.children.length > 0 && (
-          <div className="hidden sm:flex flex-col items-end gap-1">
-            <span className="text-[10px] uppercase font-bold text-neutral-500 tracking-wider">
-              Subcategorias
-            </span>
-            <Badge className="bg-neutral-800 text-neutral-300 hover:bg-neutral-700 border-neutral-700 rounded-[2px] px-2">
-              {node.children.length}
-            </Badge>
-          </div>
-        )}
+function CategoriesLoadingState() {
+  return (
+    <div className="flex h-64 w-full animate-pulse flex-col items-center justify-center gap-4 rounded-[4px] border border-neutral-800 bg-[#171717]/30">
+      <Loader2 className="size-8 animate-spin text-blue-600" />
+      <span className="text-xs uppercase tracking-wide text-neutral-500">
+        Sincronizando…
+      </span>
+    </div>
+  );
+}
 
-        {/* Actions Menu */}
-        <div className="flex items-center gap-1">
-          {/* Desktop Actions */}
-          <div className="hidden md:flex items-center gap-1 transition-opacity">
-            <PermissionGate permission="categories:update">
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => openEditModal(node)}
-                className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-white"
-              >
-                <Edit className="size-4" />
-              </Button>
-            </PermissionGate>
-            <PermissionGate permission="categories:delete">
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => openDeleteDialog(node)}
-                className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-rose-500"
-              >
-                <Trash2 className="size-4" />
-              </Button>
-            </PermissionGate>
-          </div>
+function CategoriesErrorState() {
+  return (
+    <div className="flex h-64 w-full flex-col items-center justify-center gap-4 rounded-[4px] border border-rose-900/30 bg-rose-950/10">
+      <AlertTriangle className="size-8 text-rose-500" />
+      <div className="text-center">
+        <h3 className="text-sm font-semibold uppercase text-rose-500">
+          Falha na conexão
+        </h3>
+        <p className="text-xs text-rose-500/70">
+          Não foi possível carregar os dados.
+        </p>
+      </div>
+      <Button
+        variant="outline"
+        onClick={() => window.location.reload()}
+        className="border-rose-900/30 text-rose-500 hover:bg-neutral-800"
+      >
+        Tentar Novamente
+      </Button>
+    </div>
+  );
+}
 
-          {/* Mobile Actions Menu */}
-          <div className="md:hidden">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-white"
-                >
-                  <MoreHorizontal className="size-4" />
-                  <span className="sr-only">Ações</span>
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align="end"
-                className="w-48 rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-200"
-              >
-                <DropdownMenuLabel className="text-xs font-bold uppercase tracking-wider text-neutral-500">
-                  Opções
-                </DropdownMenuLabel>
-                <DropdownMenuSeparator className="bg-neutral-800" />
-                <PermissionGate permission="categories:update">
-                  <DropdownMenuItem
-                    onClick={() => openEditModal(node)}
-                    className="cursor-pointer focus:bg-neutral-800 focus:text-white"
-                  >
-                    <Edit className="mr-2 size-3.5" />
-                    Editar
-                  </DropdownMenuItem>
-                </PermissionGate>
-                <PermissionGate permission="categories:delete">
-                  <DropdownMenuItem
-                    onClick={() => openDeleteDialog(node)}
-                    className="cursor-pointer text-rose-500 focus:bg-rose-950/20 focus:text-rose-400"
-                  >
-                    <Trash2 className="mr-2 size-3.5" />
-                    Excluir
-                  </DropdownMenuItem>
-                </PermissionGate>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        </div>
+function CategoriesEmptyState({
+  viewState,
+}: {
+  viewState: CategoriesViewState;
+}) {
+  return (
+    <div className="flex h-96 w-full flex-col items-center justify-center gap-6 rounded-[4px] border border-dashed border-neutral-800 bg-[#171717]/20">
+      <div className="flex size-20 items-center justify-center rounded-[4px] bg-neutral-900 ring-1 ring-neutral-800">
+        <Box className="size-8 text-neutral-600" />
+      </div>
+      <div className="text-center">
+        <h3 className="text-sm font-semibold uppercase tracking-wide text-neutral-300">
+          Catálogo Vazio
+        </h3>
+        <p className="mt-1 max-w-xs text-xs text-neutral-500">
+          Organize seu estoque criando estruturas de categorias.
+        </p>
       </div>
-    );
-  };
+      <PermissionGate permission="categories:create">
+        <Button
+          onClick={viewState.openCreateModal}
+          className="rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
+        >
+          <Plus className="mr-2 size-3.5" />
+          Criar Primeira Categoria
+        </Button>
+      </PermissionGate>
+    </div>
+  );
+}
+
+function CategoriesNoResults({
+  viewState,
+}: {
+  viewState: CategoriesViewState;
+}) {
+  const { searchQuery, setSearchQuery } = viewState;
 
   return (
-    <div className="min-h-screen bg-[#0A0A0A] pb-20 font-sans text-neutral-200">
-      {/* Header & Controls */}
-      <div className="relative z-30 border-b border-neutral-800 bg-[#0A0A0A]/95 backdrop-blur supports-[backdrop-filter]:bg-[#0A0A0A]/60">
-        <div className="mx-auto w-full max-w-7xl px-4 py-4 md:px-6 lg:px-8">
-          <div className="flex flex-col gap-4">
-            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-              <div>
-                <h1 className="text-2xl font-semibold tracking-tighter text-white">
-                  Categorias
-                </h1>
-                <p className="text-sm text-neutral-500 mt-1">
-                  Organize os produtos por categoria
-                </p>
-              </div>
-              <PermissionGate permission="categories:create">
-                <Button
-                  onClick={openCreateModal}
-                  className="h-10 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 shadow-[0_0_20px_-5px_rgba(37,99,235,0.3)] md:w-auto"
-                >
-                  <Plus className="mr-2 size-4" />
-                  Nova Categoria
-                </Button>
-              </PermissionGate>
-            </div>
+    <div className="flex flex-col items-center justify-center py-12 text-neutral-500">
+      <Search className="mb-4 size-12 opacity-20" />
+      <p className="text-sm">Nenhum resultado para &quot;{searchQuery}&quot;</p>
+      <Button
+        variant="link"
+        onClick={() => setSearchQuery("")}
+        className="mt-2 text-xs text-blue-500"
+      >
+        Limpar filtros
+      </Button>
+    </div>
+  );
+}
 
-            {/* Filters Toolbar */}
-            <div className="flex items-center gap-2">
-              <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-3.5 text-neutral-500" />
-                <Input
-                  placeholder="Buscar…"
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="h-10 w-full rounded-[4px] border-neutral-800 bg-[#171717] pl-9 text-sm text-neutral-200 placeholder:text-neutral-600 focus:border-blue-600 focus:ring-0 transition-all hover:border-neutral-700"
-                />
-              </div>
-
-              {/* View Toggle Group */}
-              <div className="flex h-10 shrink-0 rounded-[4px] border border-neutral-800 bg-[#171717] p-0.5">
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => setViewMode("tree")}
-                  title="Visualização em Árvore"
-                  className={cn(
-                    "size-9 rounded-[2px]",
-                    viewMode === "tree"
-                      ? "bg-neutral-800 text-white shadow-sm"
-                      : "text-neutral-500 hover:text-neutral-300",
-                  )}
-                >
-                  <FolderTree className="size-4" />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => setViewMode("flat")}
-                  title="Visualização em Lista"
-                  className={cn(
-                    "size-9 rounded-[2px]",
-                    viewMode === "flat"
-                      ? "bg-neutral-800 text-white shadow-sm"
-                      : "text-neutral-500 hover:text-neutral-300",
-                  )}
-                >
-                  <List className="size-4" />
-                </Button>
-              </div>
-            </div>
-          </div>
+function CategoryTreeView({ viewState }: { viewState: CategoriesViewState }) {
+  return (
+    <div className="overflow-hidden rounded-[4px] border border-neutral-800 bg-[#0A0A0A] shadow-sm">
+      {viewState.categoryTree.map((node) => (
+        <CategoryTreeNode key={node.id} node={node} viewState={viewState} />
+      ))}
+    </div>
+  );
+}
 
-          {/* Tree specific controls (Expand/Collapse) */}
-          {viewMode === "tree" && flatCategories.length > 0 && (
-            <div className="flex items-center gap-2 mt-2 pt-2 border-t border-neutral-800/50">
-              <button
-                onClick={expandAll}
-                className="text-[10px] uppercase font-bold text-neutral-500 hover:text-blue-500 transition-colors flex items-center gap-1"
-              >
-                <Maximize2 className="size-3" /> Expandir Tudo
-              </button>
-              <span className="text-neutral-800">|</span>
-              <button
-                onClick={collapseAll}
-                className="text-[10px] uppercase font-bold text-neutral-500 hover:text-neutral-300 transition-colors flex items-center gap-1"
-              >
-                <Minimize2 className="size-3" /> Recolher Tudo
-              </button>
-            </div>
+function CategoryTreeNode({
+  node,
+  viewState,
+}: {
+  node: CategoryTree;
+  viewState: CategoriesViewState;
+}) {
+  const hasChildren = node.children.length > 0;
+  const isExpanded = viewState.expandedNodes.has(node.id);
+  const Icon = isExpanded ? FolderOpen : Folder;
+  const activeBorder = CATEGORY_DEPTH_BORDERS[
+    node.depth % CATEGORY_DEPTH_BORDERS.length
+  ];
+
+  return (
+    <div className="select-none">
+      <div
+        className={cn(
+          "group relative mb-[1px] flex items-center gap-3 bg-[#171717] px-3 py-3 transition-all md:px-4",
+          "border-l-[4px] border-neutral-800 hover:bg-[#1f1f1f]",
+          isExpanded ? activeBorder : "hover:border-neutral-600",
+        )}
+        style={{ paddingLeft: `${node.depth * 16 + 12}px` }}
+      >
+        <CategoryNodeGuide node={node} />
+        <CategoryExpandButton
+          hasChildren={hasChildren}
+          isExpanded={isExpanded}
+          nodeId={node.id}
+          toggleNode={viewState.toggleNode}
+        />
+        <Icon
+          className={cn(
+            "size-5 shrink-0 transition-colors",
+            isExpanded
+              ? "text-blue-500"
+              : "text-neutral-500 group-hover:text-neutral-300",
           )}
-        </div>
+        />
+        <CategoryNodeTitle
+          hasChildren={hasChildren}
+          isExpanded={isExpanded}
+          node={node}
+          toggleNode={viewState.toggleNode}
+        />
+        <CategoryNodeActions node={node} viewState={viewState} />
       </div>
+      {hasChildren && isExpanded && (
+        <div className="relative">
+          <div
+            className="absolute top-0 bottom-0 w-px bg-neutral-800/50"
+            style={{ left: `${node.depth * 16 + 15}px` }}
+          />
+          {node.children.map((child) => (
+            <CategoryTreeNode
+              key={child.id}
+              node={child}
+              viewState={viewState}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
 
-      <main className="mx-auto w-full max-w-7xl p-4 md:px-6 lg:px-8 mt-2">
-        {/* Loading State */}
-        {isLoading && (
-          <div className="flex h-64 w-full flex-col items-center justify-center gap-4 rounded-[4px] border border-neutral-800 bg-[#171717]/30 animate-pulse">
-            <Loader2 className="size-8 animate-spin text-blue-600" />
-            <span className="text-xs uppercase tracking-wide text-neutral-500">
-              Sincronizando…
-            </span>
-          </div>
-        )}
+function CategoryNodeGuide({ node }: { node: CategoryTree }) {
+  if (node.depth === 0) return null;
 
-        {/* Error State */}
-        {error && (
-          <div className="flex h-64 w-full flex-col items-center justify-center gap-4 rounded-[4px] border border-rose-900/30 bg-rose-950/10">
-            <AlertTriangle className="size-8 text-rose-500" />
-            <div className="text-center">
-              <h3 className="text-sm font-semibold uppercase text-rose-500">
-                Falha na conexão
-              </h3>
-              <p className="text-xs text-rose-500/70">
-                Não foi possível carregar os dados.
-              </p>
-            </div>
-            <Button
-              variant="outline"
-              onClick={() => window.location.reload()}
-              className="border-rose-900/30 text-rose-500 hover:bg-neutral-800"
-            >
-              Tentar Novamente
-            </Button>
-          </div>
-        )}
+  return (
+    <div
+      className="absolute top-0 bottom-0 left-0 w-px bg-neutral-800"
+      style={{ left: `${node.depth * 16}px` }}
+    />
+  );
+}
 
-        {/* Empty State */}
-        {!isLoading &&
-          !error &&
-          flatCategories.length === 0 &&
-          !searchQuery && (
-            <div className="flex h-96 w-full flex-col items-center justify-center gap-6 rounded-[4px] border border-dashed border-neutral-800 bg-[#171717]/20">
-              <div className="flex size-20 items-center justify-center rounded-full bg-neutral-900 ring-1 ring-neutral-800">
-                <Box className="size-8 text-neutral-600" />
-              </div>
-              <div className="text-center">
-                <h3 className="text-sm font-semibold uppercase tracking-wide text-neutral-300">
-                  Catálogo Vazio
-                </h3>
-                <p className="mt-1 max-w-xs text-xs text-neutral-500">
-                  Organize seu estoque criando estruturas de categorias.
-                </p>
-              </div>
-              <PermissionGate permission="categories:create">
-                <Button
-                  onClick={openCreateModal}
-                  className="rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
-                >
-                  <Plus className="mr-2 size-3.5" />
-                  Criar Primeira Categoria
-                </Button>
-              </PermissionGate>
-            </div>
-          )}
+function CategoryExpandButton({
+  hasChildren,
+  isExpanded,
+  nodeId,
+  toggleNode,
+}: {
+  hasChildren: boolean;
+  isExpanded: boolean;
+  nodeId: string;
+  toggleNode: (nodeId: string) => void;
+}) {
+  return (
+    <button
+      onClick={(event) => {
+        event.stopPropagation();
+        if (hasChildren) toggleNode(nodeId);
+      }}
+      className={cn(
+        "flex size-9 shrink-0 items-center justify-center rounded-[4px] border border-transparent transition-all md:size-8",
+        hasChildren
+          ? "cursor-pointer border-neutral-800 bg-neutral-900 text-neutral-400 hover:border-neutral-600 hover:text-white"
+          : "invisible",
+      )}
+      disabled={!hasChildren}
+      aria-label={isExpanded ? "Recolher" : "Expandir"}
+    >
+      {hasChildren &&
+        (isExpanded ? (
+          <ChevronDown className="size-4" />
+        ) : (
+          <ChevronRight className="size-4" />
+        ))}
+    </button>
+  );
+}
 
-        {/* No Results */}
-        {!isLoading && !error && flatCategories.length === 0 && searchQuery && (
-          <div className="flex flex-col items-center justify-center py-12 text-neutral-500">
-            <Search className="size-12 mb-4 opacity-20" />
-            <p className="text-sm">
-              Nenhum resultado para &quot;{searchQuery}&quot;
-            </p>
-            <Button
-              variant="link"
-              onClick={() => setSearchQuery("")}
-              className="text-blue-500 text-xs mt-2"
-            >
-              Limpar filtros
-            </Button>
-          </div>
+function CategoryNodeTitle({
+  hasChildren,
+  isExpanded,
+  node,
+  toggleNode,
+}: {
+  hasChildren: boolean;
+  isExpanded: boolean;
+  node: CategoryTree;
+  toggleNode: (nodeId: string) => void;
+}) {
+  return (
+    <button
+      type="button"
+      disabled={!hasChildren}
+      className={cn(
+        "flex min-w-0 flex-1 flex-col justify-center text-left",
+        hasChildren ? "cursor-pointer" : "cursor-default",
+      )}
+      onClick={() => toggleNode(node.id)}
+    >
+      <div className="flex items-center gap-2">
+        <span
+          className={cn(
+            "truncate text-sm font-medium transition-colors",
+            isExpanded ? "text-white" : "text-neutral-300 group-hover:text-white",
+          )}
+        >
+          {node.name}
+        </span>
+        {hasChildren && (
+          <Badge
+            variant="outline"
+            className="hidden h-5 rounded-[2px] border-neutral-700 bg-neutral-800 px-1.5 text-[9px] font-bold text-neutral-400 sm:flex"
+          >
+            {node.children.length}
+          </Badge>
         )}
+      </div>
+    </button>
+  );
+}
 
-        {/* Views */}
-        {!isLoading && !error && flatCategories.length > 0 && (
-          <div className="animate-in fade-in duration-500 slide-in-from-bottom-2">
-            {viewMode === "tree" && (
-              <div className="rounded-[4px] border border-neutral-800 bg-[#0A0A0A] overflow-hidden shadow-sm">
-                {(categoryTree as CategoryTree[]).map((node) =>
-                  renderTreeNode(node),
-                )}
-              </div>
-            )}
-
-            {viewMode === "flat" && (
-              <div className="space-y-1">
-                {flatCategories.map((node) => renderFlatItem(node))}
-              </div>
-            )}
-          </div>
+function CategoryNodeActions({
+  node,
+  viewState,
+}: {
+  node: CategoryTree;
+  viewState: CategoriesViewState;
+}) {
+  return (
+    <div className="flex items-center gap-1">
+      <CategoryDesktopActions node={node} viewState={viewState} />
+      <CategoryMobileActions node={node} viewState={viewState} />
+    </div>
+  );
+}
+
+function CategoryDesktopActions({
+  node,
+  viewState,
+}: {
+  node: CategoryTree;
+  viewState: CategoriesViewState;
+}) {
+  return (
+    <div className="hidden items-center gap-1 transition-opacity md:flex">
+      <PermissionGate permission="categories:update">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={(event) => {
+            event.stopPropagation();
+            viewState.openEditModal(node);
+          }}
+          className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-white"
+        >
+          <Edit className="size-4" />
+        </Button>
+      </PermissionGate>
+      <PermissionGate permission="categories:delete">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={(event) => {
+            event.stopPropagation();
+            viewState.openDeleteDialog(node);
+          }}
+          className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-rose-500"
+        >
+          <Trash2 className="size-4" />
+        </Button>
+      </PermissionGate>
+    </div>
+  );
+}
+
+function CategoryMobileActions({
+  node,
+  viewState,
+}: {
+  node: CategoryTree;
+  viewState: CategoriesViewState;
+}) {
+  return (
+    <div className="md:hidden">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-white focus:opacity-100"
+          >
+            <MoreHorizontal className="size-4" />
+            <span className="sr-only">Ações</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="end"
+          className="w-48 rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-200"
+        >
+          <DropdownMenuLabel className="text-xs font-bold uppercase tracking-wider text-neutral-500">
+            Opções
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator className="bg-neutral-800" />
+          <CategoryMenuItems node={node} viewState={viewState} />
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+function CategoryMenuItems({
+  node,
+  viewState,
+}: {
+  node: CategoryTree;
+  viewState: CategoriesViewState;
+}) {
+  return (
+    <>
+      <PermissionGate permission="categories:update">
+        <DropdownMenuItem
+          onClick={() => viewState.openEditModal(node)}
+          className="cursor-pointer focus:bg-neutral-800 focus:text-white"
+        >
+          <Edit className="mr-2 size-3.5" />
+          Editar
+        </DropdownMenuItem>
+      </PermissionGate>
+      <PermissionGate permission="categories:delete">
+        <DropdownMenuItem
+          onClick={() => viewState.openDeleteDialog(node)}
+          className="cursor-pointer text-rose-500 focus:bg-rose-950/20 focus:text-rose-400"
+        >
+          <Trash2 className="mr-2 size-3.5" />
+          Excluir
+        </DropdownMenuItem>
+      </PermissionGate>
+    </>
+  );
+}
+
+function CategoryFlatView({ viewState }: { viewState: CategoriesViewState }) {
+  return (
+    <div className="space-y-1">
+      {viewState.flatCategories.map((node) => (
+        <CategoryFlatItem key={node.id} node={node} viewState={viewState} />
+      ))}
+    </div>
+  );
+}
+
+function CategoryFlatItem({
+  node,
+  viewState,
+}: {
+  node: CategoryTree;
+  viewState: CategoriesViewState;
+}) {
+  return (
+    <div className="group relative mb-2 flex items-center gap-4 rounded-[4px] border border-neutral-800 bg-[#171717] p-4 transition-all hover:border-neutral-700">
+      <div className="absolute top-0 bottom-0 left-0 w-1 rounded-l-[4px] bg-neutral-800 transition-colors group-hover:bg-blue-600" />
+      <div className="flex size-10 shrink-0 items-center justify-center rounded-[4px] border border-neutral-800 bg-neutral-900 transition-colors group-hover:border-neutral-700">
+        <Tag className="size-4 text-neutral-500 group-hover:text-blue-500" />
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+          <span className="text-sm font-bold text-neutral-200 group-hover:text-white">
+            {node.name}
+          </span>
+          <CategoryParentBadge node={node} />
+        </div>
+        {node.description && (
+          <p className="mt-1 truncate text-xs text-neutral-500">
+            {node.description}
+          </p>
         )}
-      </main>
-
-      {/* Modal - Create/Edit */}
-      <ResponsiveModal
-        open={isModalOpen}
-        onOpenChange={closeModal}
-        title={selectedCategory ? "Editar Categoria" : "Nova Categoria"}
-        description={
-          selectedCategory ? `ID: ${selectedCategory.id}` : "Defina a estrutura"
-        }
-        maxWidth="sm:max-w-[500px]"
-        footer={
-          <>
-            <Button
-              type="button"
-              variant="ghost"
-              onClick={closeModal}
-              className="rounded-[4px] hover:bg-neutral-800 text-neutral-400"
-            >
-              Cancelar
-            </Button>
-            <Button
-              type="submit"
-              form="category-form"
-              disabled={form.formState.isSubmitting}
-              className="rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
-            >
-              {form.formState.isSubmitting ? (
-                <Loader2 className="mr-2 size-3.5 animate-spin" />
-              ) : (
-                <Plus className="mr-2 size-3.5" />
-              )}
-              {selectedCategory ? "Salvar" : "Criar"}
-            </Button>
-          </>
-        }
+      </div>
+      <CategoryChildrenStats node={node} />
+      <CategoryNodeActions node={node} viewState={viewState} />
+    </div>
+  );
+}
+
+function CategoryParentBadge({ node }: { node: CategoryTree }) {
+  if (!node.parentCategoryName) return null;
+
+  return (
+    <Badge
+      variant="outline"
+      className="rounded-[2px] border-neutral-800 bg-neutral-900/50 font-mono text-[9px] text-neutral-500"
+    >
+      <span className="mr-1 text-neutral-600">↳</span> {node.parentCategoryName}
+    </Badge>
+  );
+}
+
+function CategoryChildrenStats({ node }: { node: CategoryTree }) {
+  if (node.children.length === 0) return null;
+
+  return (
+    <div className="hidden flex-col items-end gap-1 sm:flex">
+      <span className="text-[10px] font-bold uppercase tracking-wider text-neutral-500">
+        Subcategorias
+      </span>
+      <Badge className="rounded-[2px] border-neutral-700 bg-neutral-800 px-2 text-neutral-300 hover:bg-neutral-700">
+        {node.children.length}
+      </Badge>
+    </div>
+  );
+}
+
+function CategoryFormModal({
+  viewState,
+}: {
+  viewState: CategoriesViewState;
+}) {
+  const { closeModal, form, isModalOpen, onSubmit, selectedCategory } = viewState;
+
+  return (
+    <ResponsiveModal
+      open={isModalOpen}
+      onOpenChange={closeModal}
+      title={selectedCategory ? "Editar Categoria" : "Nova Categoria"}
+      description={
+        selectedCategory ? `ID: ${selectedCategory.id}` : "Defina a estrutura"
+      }
+      maxWidth="sm:max-w-[500px]"
+      footer={<CategoryFormFooter viewState={viewState} />}
+    >
+      <Form {...form}>
+        <form
+          id="category-form"
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-4 py-2"
+        >
+          <CategoryNameField form={form} />
+          <CategoryParentField viewState={viewState} />
+          <CategoryDescriptionField form={form} />
+        </form>
+      </Form>
+    </ResponsiveModal>
+  );
+}
+
+function CategoryFormFooter({
+  viewState,
+}: {
+  viewState: CategoriesViewState;
+}) {
+  const { closeModal, form, selectedCategory } = viewState;
+
+  return (
+    <>
+      <Button
+        type="button"
+        variant="ghost"
+        onClick={closeModal}
+        className="rounded-[4px] text-neutral-400 hover:bg-neutral-800"
       >
-        <Form {...form}>
-          <form
-            id="category-form"
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-4 py-2"
-          >
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                    Nome <span className="text-rose-500">*</span>
-                  </FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="Ex: Eletrônicos"
-                      className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage className="text-xs text-rose-500" />
-                </FormItem>
-              )}
+        Cancelar
+      </Button>
+      <Button
+        type="submit"
+        form="category-form"
+        disabled={form.formState.isSubmitting}
+        className="rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
+      >
+        {form.formState.isSubmitting ? (
+          <Loader2 className="mr-2 size-3.5 animate-spin" />
+        ) : (
+          <Plus className="mr-2 size-3.5" />
+        )}
+        {selectedCategory ? "Salvar" : "Criar"}
+      </Button>
+    </>
+  );
+}
+
+function CategoryNameField({
+  form,
+}: {
+  form: UseFormReturn<CategoryFormData>;
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name="name"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            Nome <span className="text-rose-500">*</span>
+          </FormLabel>
+          <FormControl>
+            <Input
+              placeholder="Ex: Eletrônicos"
+              className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+              {...field}
             />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function CategoryParentField({
+  viewState,
+}: {
+  viewState: CategoriesViewState;
+}) {
+  const { allCategories, form, selectedCategory } = viewState;
 
-            <FormField
-              control={form.control}
-              name="parentCategoryId"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                    Categoria Pai
-                  </FormLabel>
-                  <Select
-                    onValueChange={(value) =>
-                      field.onChange(value === "root" ? null : value)
-                    }
-                    value={field.value || "root"}
-                  >
-                    <FormControl>
-                      <SelectTrigger className="w-full md:w-auto rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:ring-0">
-                        <SelectValue placeholder="Selecione…" />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+  return (
+    <FormField
+      control={form.control}
+      name="parentCategoryId"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            Categoria Pai
+          </FormLabel>
+          <Select
+            onValueChange={(value) =>
+              field.onChange(value === "root" ? null : value)
+            }
+            value={field.value || "root"}
+          >
+            <FormControl>
+              <SelectTrigger className="w-full rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:ring-0 md:w-auto">
+                <SelectValue placeholder="Selecione…" />
+              </SelectTrigger>
+            </FormControl>
+            <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+              <SelectItem
+                value="root"
+                className="mb-1 border-b border-neutral-800 pb-1 text-sm font-medium"
+              >
+                <span className="mr-2 font-bold text-blue-500">●</span> RAIZ
+                (Sem Pai)
+              </SelectItem>
+              {allCategories.flatMap((category) =>
+                category.id === selectedCategory?.id
+                  ? []
+                  : [
                       <SelectItem
-                        value="root"
-                        className="text-sm font-medium border-b border-neutral-800 mb-1 pb-1"
+                        key={category.id}
+                        value={category.id}
+                        className="text-sm"
                       >
-                        <span className="text-blue-500 font-bold mr-2">●</span>{" "}
-                        RAIZ (Sem Pai)
-                      </SelectItem>
-                      {allCategories.flatMap((cat) =>
-                        cat.id === selectedCategory?.id
-                          ? []
-                          : [
-                              <SelectItem
-                                key={cat.id}
-                                value={cat.id}
-                                className="text-sm"
-                              >
-                                {cat.name}
-                              </SelectItem>,
-                            ],
-                      )}
-                    </SelectContent>
-                  </Select>
-                  <FormMessage className="text-xs text-rose-500" />
-                </FormItem>
+                        {category.name}
+                      </SelectItem>,
+                    ],
               )}
-            />
+            </SelectContent>
+          </Select>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
 
-            <FormField
-              control={form.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                    Descrição
-                  </FormLabel>
-                  <FormControl>
-                    <Textarea
-                      placeholder="Opcional"
-                      className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm resize-none focus:border-blue-600 focus:ring-0 min-h-[80px]"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage className="text-xs text-rose-500" />
-                </FormItem>
-              )}
+function CategoryDescriptionField({
+  form,
+}: {
+  form: UseFormReturn<CategoryFormData>;
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name="description"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            Descrição
+          </FormLabel>
+          <FormControl>
+            <Textarea
+              placeholder="Opcional"
+              className="min-h-[80px] resize-none rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+              {...field}
             />
-          </form>
-        </Form>
-      </ResponsiveModal>
-
-      {/* Delete Dialog */}
-      <ResponsiveModal
-        open={!!categoryToDelete}
-        onOpenChange={closeDeleteDialog}
-        title="Excluir Categoria?"
-        description={`Você está prestes a remover ${categoryToDelete?.name}.`}
-        maxWidth="sm:max-w-[400px]"
-        footer={
-          <>
-            <Button
-              variant="ghost"
-              onClick={closeDeleteDialog}
-              className="rounded-[4px] border-neutral-800 bg-transparent text-neutral-400 hover:bg-neutral-800 hover:text-white"
-            >
-              Voltar
-            </Button>
-            <Button
-              onClick={confirmDelete}
-              disabled={isDeleting}
-              className="rounded-[4px] bg-rose-600 text-white hover:bg-rose-700 border-none"
-            >
-              {isDeleting ? "Excluindo…" : "Sim, excluir"}
-            </Button>
-          </>
-        }
-      >
-        <div className="py-2 text-neutral-500 text-sm">
-          {categoryToDelete &&
-          flatCategories.find((c) => c.id === categoryToDelete.id)?.children
-            ?.length &&
-          flatCategories.find((c) => c.id === categoryToDelete.id)!.children
-            .length > 0 ? (
-            <div className="flex items-center p-3 bg-rose-950/20 border border-rose-900/30 rounded-[2px] text-rose-400 text-xs font-bold">
-              <AlertTriangle className="size-4 mr-2 shrink-0" />
-              Esta categoria contém subcategorias que também serão afetadas.
-            </div>
-          ) : (
-            "Esta ação não pode ser desfeita."
-          )}
-        </div>
-      </ResponsiveModal>
-    </div>
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
   );
-};
+}
+
+function CategoryDeleteDialog({
+  viewState,
+}: {
+  viewState: CategoriesViewState;
+}) {
+  const {
+    categoryToDelete,
+    closeDeleteDialog,
+    confirmDelete,
+    flatCategories,
+    isDeleting,
+  } = viewState;
+  const categoryTreeMatch = flatCategories.find(
+    (category) => category.id === categoryToDelete?.id,
+  );
+  const categoryToDeleteHasChildren =
+    (categoryTreeMatch?.children.length ?? 0) > 0;
+
+  return (
+    <ResponsiveModal
+      open={!!categoryToDelete}
+      onOpenChange={closeDeleteDialog}
+      title="Excluir Categoria?"
+      description={`Você está prestes a remover ${categoryToDelete?.name}.`}
+      maxWidth="sm:max-w-[400px]"
+      footer={
+        <>
+          <Button
+            variant="ghost"
+            onClick={closeDeleteDialog}
+            className="rounded-[4px] border-neutral-800 bg-transparent text-neutral-400 hover:bg-neutral-800 hover:text-white"
+          >
+            Voltar
+          </Button>
+          <Button
+            onClick={confirmDelete}
+            disabled={isDeleting}
+            className="rounded-[4px] border-none bg-rose-600 text-white hover:bg-rose-700"
+          >
+            {isDeleting ? "Excluindo…" : "Sim, excluir"}
+          </Button>
+        </>
+      }
+    >
+      <div className="py-2 text-sm text-neutral-500">
+        {categoryToDeleteHasChildren ? (
+          <div className="flex items-center rounded-[2px] border border-rose-900/30 bg-rose-950/20 p-3 text-xs font-bold text-rose-400">
+            <AlertTriangle className="mr-2 size-4 shrink-0" />
+            Esta categoria contém subcategorias que também serão afetadas.
+          </div>
+        ) : (
+          "Esta ação não pode ser desfeita."
+        )}
+      </div>
+    </ResponsiveModal>
+  );
+}
diff --git a/app/(pages)/layout.test.tsx b/app/(pages)/layout.test.tsx
index e8ad6dc..daddf5e 100644
--- a/app/(pages)/layout.test.tsx
+++ b/app/(pages)/layout.test.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
-import { render, screen, cleanup } from "@testing-library/react";
+import { act, render, screen, cleanup } from "@testing-library/react";
 import PagesLayout from "./layout";
 
 const mobileMenuMock = vi.hoisted(() => ({
@@ -46,7 +46,13 @@ vi.mock(
   { virtual: true }
 );
 
-afterEach(() => cleanup());
+const getClassTokens = (element: Element | null): string[] =>
+  element?.getAttribute("class")?.split(/\s+/) ?? [];
+
+afterEach(() => {
+  vi.useRealTimers();
+  cleanup();
+});
 
 beforeEach(() => {
   mobileMenuMock.isOpen = true;
@@ -77,9 +83,42 @@ describe("PagesLayout", () => {
     const mobileMenu = container.querySelector('[data-slot="mobile-menu"]');
 
     expect(mobileMenu).toBeTruthy();
-    expect(mobileMenu?.className).toContain("hidden");
+    expect(getClassTokens(mobileMenu)).toContain("hidden");
     expect(mobileMenu?.getAttribute("aria-hidden")).toBe("true");
     expect(mobileMenu?.hasAttribute("inert")).toBe(true);
     expect(mobileMenu?.querySelector('img[alt="StockShift"]')).toBeTruthy();
   });
+
+  it("keeps the drawer visible while the close animation runs", () => {
+    vi.useFakeTimers();
+
+    const { container, rerender } = render(
+      <PagesLayout>
+        <div>Child</div>
+      </PagesLayout>
+    );
+
+    mobileMenuMock.isOpen = false;
+    rerender(
+      <PagesLayout>
+        <div>Child</div>
+      </PagesLayout>
+    );
+
+    const mobileMenu = container.querySelector('[data-slot="mobile-menu"]');
+    const panel = container.querySelector('[data-slot="mobile-menu-panel"]');
+
+    expect(mobileMenu?.className).toContain("animate-out");
+    expect(mobileMenu?.className).not.toContain("animate-in");
+    expect(mobileMenu?.className).toContain("fill-mode-forwards");
+    expect(getClassTokens(mobileMenu)).not.toContain("hidden");
+    expect(panel?.className).toContain("slide-out-to-left-8");
+    expect(panel?.className).toContain("fill-mode-forwards");
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(getClassTokens(mobileMenu)).toContain("hidden");
+  });
 });
diff --git a/app/(pages)/layout.tsx b/app/(pages)/layout.tsx
index 3ec1bfc..614b938 100644
--- a/app/(pages)/layout.tsx
+++ b/app/(pages)/layout.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
 import Link from "next/link";
@@ -45,12 +45,15 @@ const warehouseFetcher = async () => {
   return response.data;
 };
 
+const MOBILE_MENU_ANIMATION_MS = 200;
+
 export default function PagesLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   const { isOpen, closeMenu } = useMobileMenu();
+  const [isMobileMenuVisible, setMobileMenuVisible] = useState(isOpen);
   const { warehouseId } = useSelectedWarehouse();
   const { user, logout } = useAuth();
   const { selectedWarehouseId, setSelectedWarehouseId } = useWarehouse();
@@ -64,6 +67,23 @@ export default function PagesLayout({
 
   const activeWarehouses = warehouses.filter((w) => w.isActive);
 
+  useEffect(() => {
+    if (isOpen) {
+      setMobileMenuVisible(true);
+      return undefined;
+    }
+
+    if (!isMobileMenuVisible) {
+      return undefined;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      setMobileMenuVisible(false);
+    }, MOBILE_MENU_ANIMATION_MS);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [isMobileMenuVisible, isOpen]);
+
   useEffect(() => {
     if (user?.mustChangePassword) {
       replace("/change-password");
@@ -91,6 +111,16 @@ export default function PagesLayout({
     await logout();
   };
 
+  const isMobileMenuClosing = isMobileMenuVisible && !isOpen;
+
+  const mobileMenuOverlayAnimation = isMobileMenuClosing
+    ? "animate-out fade-out-0 fill-mode-forwards duration-200 ease-in motion-reduce:animate-none"
+    : "animate-in fade-in-0 duration-200 ease-out motion-reduce:animate-none";
+
+  const mobileMenuPanelAnimation = isMobileMenuClosing
+    ? "animate-out slide-out-to-left-8 fill-mode-forwards duration-200 ease-in motion-reduce:animate-none"
+    : "animate-in slide-in-from-left-8 duration-200 ease-out motion-reduce:animate-none";
+
   // Show loading while checking warehouse
   if (warehouseId === null) {
     return (
@@ -131,7 +161,10 @@ export default function PagesLayout({
         data-slot="mobile-menu"
         aria-hidden={!isOpen}
         inert={!isOpen}
-        className={cn("fixed inset-0 z-50 md:hidden", !isOpen && "hidden")}
+        className={cn(
+          "fixed inset-0 z-50 md:hidden",
+          isMobileMenuVisible ? mobileMenuOverlayAnimation : "hidden",
+        )}
       >
         <button
           type="button"
@@ -139,7 +172,13 @@ export default function PagesLayout({
           className="absolute inset-0 bg-black/60"
           onClick={closeMenu}
         />
-        <div className="absolute inset-y-0 left-0 w-72 border-r border-border/40 bg-card p-4 flex flex-col">
+        <div
+          data-slot="mobile-menu-panel"
+          className={cn(
+            "absolute inset-y-0 left-0 flex w-72 flex-col border-r border-border/40 bg-card p-4 will-change-transform",
+            isMobileMenuVisible && mobileMenuPanelAnimation,
+          )}
+        >
           {/* Logo + close button */}
           <div className="mb-4 flex items-center justify-between">
             <Image
diff --git a/app/(pages)/products/[id]/edit/products-edit.model.test.ts b/app/(pages)/products/[id]/edit/products-edit.model.test.ts
index d3f3a23..b73a5a2 100644
--- a/app/(pages)/products/[id]/edit/products-edit.model.test.ts
+++ b/app/(pages)/products/[id]/edit/products-edit.model.test.ts
@@ -332,6 +332,40 @@ describe("useProductEditModel batches drawer", () => {
     expect(api.put).not.toHaveBeenCalledWith("products/prod-1", expect.anything());
   });
 
+  it("blocks submit while image is still processing", async () => {
+    mockMatchMedia(false);
+    const { result } = renderHook(() => useProductEditModel("prod-1"));
+
+    act(() => {
+      result.current.handleImageProcessingChange(true);
+    });
+
+    await act(async () => {
+      await result.current.onSubmit({
+        name: "Produto A",
+        description: "",
+        barcode: "",
+        isKit: false,
+        hasExpiration: false,
+        active: true,
+        continuousMode: false,
+        categoryId: "",
+        brandId: "",
+        attributes: { weight: "", dimensions: "" },
+        quantity: 0,
+        manufacturedDate: "",
+        expirationDate: "",
+        costPrice: undefined,
+        sellingPrice: undefined,
+      });
+    });
+
+    expect(api.put).not.toHaveBeenCalledWith("products/prod-1", expect.anything());
+    expect(toast.error).toHaveBeenCalledWith(
+      "Aguarde a imagem terminar de processar antes de salvar.",
+    );
+  });
+
   it("submits product update with image and merged attributes", async () => {
     mockMatchMedia(false);
     const { result } = renderHook(() => useProductEditModel("prod-1"));
diff --git a/app/(pages)/products/[id]/edit/products-edit.model.ts b/app/(pages)/products/[id]/edit/products-edit.model.ts
index 852d8e6..4030bb5 100644
--- a/app/(pages)/products/[id]/edit/products-edit.model.ts
+++ b/app/(pages)/products/[id]/edit/products-edit.model.ts
@@ -71,6 +71,7 @@ export const useProductEditModel = (productId: string) => {
     []
   );
   const [productImage, setProductImage] = useState<File | null>(null);
+  const [isImageProcessing, setIsImageProcessing] = useState(false);
   const [removeCurrentImage, setRemoveCurrentImage] = useState(false);
   const [isBatchesDrawerOpen, setBatchesDrawerOpen] = useState(false);
   const [batchesDrawerDirection, setBatchesDrawerDirection] = useState<
@@ -340,6 +341,10 @@ export const useProductEditModel = (productId: string) => {
     }
   };
 
+  const handleImageProcessingChange = (isProcessing: boolean) => {
+    setIsImageProcessing(isProcessing);
+  };
+
   const handleImageRemove = () => {
     setProductImage(null);
     setRemoveCurrentImage(true);
@@ -388,6 +393,11 @@ export const useProductEditModel = (productId: string) => {
       return;
     }
 
+    if (isImageProcessing) {
+      toast.error("Aguarde a imagem terminar de processar antes de salvar.");
+      return;
+    }
+
     setIsSubmitting(true);
     try {
       const productPayload = {
@@ -417,7 +427,9 @@ export const useProductEditModel = (productId: string) => {
       await api.put(`products/${productId}`, { body: formData });
 
       // Invalidate caches
-      mutate("products");
+      mutate((key) =>
+        typeof key === "string" && key.includes("products"),
+      );
       mutate(`products/${productId}`);
 
       toast.success("Produto atualizado com sucesso!");
@@ -498,8 +510,10 @@ export const useProductEditModel = (productId: string) => {
     handleBarcodeScan,
     warehouseId,
     productImage,
+    isImageProcessing,
     currentImageUrl: productData?.data?.imageUrl || undefined,
     handleImageSelect,
+    handleImageProcessingChange,
     handleImageRemove,
     product,
     isLoadingProduct,
diff --git a/app/(pages)/products/[id]/products-detail.model.ts b/app/(pages)/products/[id]/products-detail.model.ts
index b53ef94..67f588a 100644
--- a/app/(pages)/products/[id]/products-detail.model.ts
+++ b/app/(pages)/products/[id]/products-detail.model.ts
@@ -34,7 +34,7 @@ export const useProductDetailModel = (productId: string) => {
   const batches = batchesData?.data || [];
 
   useBreadcrumb({
-    title: product?.name || "Carregando...",
+    title: "Visualização de produto",
     backUrl: "/products",
   });
 
diff --git a/app/(pages)/products/[id]/products-detail.view.test.tsx b/app/(pages)/products/[id]/products-detail.view.test.tsx
index eb896be..68b8d17 100644
--- a/app/(pages)/products/[id]/products-detail.view.test.tsx
+++ b/app/(pages)/products/[id]/products-detail.view.test.tsx
@@ -85,4 +85,20 @@ describe("ProductDetailView", () => {
     expect(screen.getByText(/batch-001/i)).toBeTruthy();
     expect(screen.getByText(/central/i)).toBeTruthy();
   });
+
+  it("formats batch selling price from cents", () => {
+    render(
+      <ProductDetailView
+        product={baseProduct}
+        isLoading={false}
+        error={null}
+        batches={[{ ...baseBatch, sellingPrice: 4500 }]}
+        isLoadingBatches={false}
+        batchesError={null}
+      />
+    );
+
+    expect(screen.getByText(/45,00/)).toBeTruthy();
+    expect(screen.queryByText(/4\.500,00/)).toBeNull();
+  });
 });
diff --git a/app/(pages)/products/[id]/products-detail.view.tsx b/app/(pages)/products/[id]/products-detail.view.tsx
index 0b2d529..03330d2 100644
--- a/app/(pages)/products/[id]/products-detail.view.tsx
+++ b/app/(pages)/products/[id]/products-detail.view.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import type { ReactNode } from "react";
 import Image from "next/image";
 import { Product, ProductBatch } from "./products-detail.types";
 import {
@@ -11,14 +12,12 @@ import {
   Building2,
   Hash,
   Pencil,
-  Clock,
   QrCode,
   Box,
   Copy,
   Warehouse,
   ChevronRight,
-  ShieldCheck,
-  ShieldOff,
+  Sparkles,
 } from "lucide-react";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
@@ -30,6 +29,7 @@ import { toast } from "sonner";
 import { PermissionGate } from "@/components/permission-gate";
 import { PageContainer } from "@/components/ui/page-container";
 import { PageHeader } from "@/components/ui/page-header";
+import { FixedBottomBar } from "@/components/ui/fixed-bottom-bar";
 import { LoadingState } from "@/components/ui/loading-state";
 import { ErrorState } from "@/components/ui/error-state";
 
@@ -42,437 +42,631 @@ interface ProductDetailViewProps {
   batchesError: Error | null;
 }
 
+interface ProductDetailViewState extends ProductDetailViewProps {
+  product: Product;
+  totalStock: number;
+  copyToClipboard: (text: string, label: string) => void;
+  formatDate: (dateString?: string | null) => string;
+  formatDateTime: (dateString: string) => string;
+  formatCurrency: (value?: number | null) => string;
+}
+
 const PRODUCT_DETAIL_CURRENCY_FORMATTER = new Intl.NumberFormat("pt-BR", {
   style: "currency",
   currency: "BRL",
 });
 
-export const ProductDetailView = ({
-  product,
-  batches,
-  isLoading,
-  isLoadingBatches,
-  error,
-  batchesError,
-}: ProductDetailViewProps) => {
-  const formatDateTime = (dateString: string) => {
-    try {
-      return format(new Date(dateString), "dd MMM yyyy • HH:mm", {
-        locale: ptBR,
-      }).toUpperCase();
-    } catch {
-      return dateString;
-    }
-  };
-
-  const copyToClipboard = (text: string, label: string) => {
-    navigator.clipboard.writeText(text);
-    toast.success(`${label} copiado`, {
-      className: "bg-[#171717] border-neutral-800 text-white rounded-[4px]",
-      descriptionClassName: "text-neutral-400",
-    });
-  };
+function formatProductDateTime(dateString: string): string {
+  try {
+    return format(new Date(dateString), "dd MMM yyyy • HH:mm", {
+      locale: ptBR,
+    }).toUpperCase();
+  } catch {
+    return dateString;
+  }
+}
 
-  const formatDate = (dateString?: string | null) => {
-    if (!dateString) return "—";
+function copyProductText(text: string, label: string): void {
+  navigator.clipboard.writeText(text);
+  toast.success(`${label} copiado`, {
+    className: "bg-[#171717] border-neutral-800 text-white rounded-[4px]",
+    descriptionClassName: "text-neutral-400",
+  });
+}
 
-    try {
-      return format(new Date(dateString), "dd/MM/yyyy", { locale: ptBR });
-    } catch {
-      return dateString;
-    }
-  };
+function formatProductDate(dateString?: string | null): string {
+  if (!dateString) return "—";
+  try {
+    return format(new Date(dateString), "dd/MM/yyyy", { locale: ptBR });
+  } catch {
+    return dateString;
+  }
+}
 
-  const formatCurrency = (value?: number | null) => {
-    if (value === null || value === undefined) return "—";
-    return PRODUCT_DETAIL_CURRENCY_FORMATTER.format(value);
-  };
+function formatProductCurrency(value?: number | null): string {
+  if (value === null || value === undefined) return "—";
+  return PRODUCT_DETAIL_CURRENCY_FORMATTER.format(value / 100);
+}
 
-  if (isLoading) {
-    return (
-      <PageContainer>
-        <LoadingState message="Carregando produto..." />
-      </PageContainer>
-    );
+export const ProductDetailView = (props: ProductDetailViewProps) => {
+  if (props.isLoading) {
+    return <PageContainer><LoadingState message="Carregando produto..." /></PageContainer>;
   }
 
-  if (error || !product) {
-    return (
-      <PageContainer>
-        <ErrorState
-          title="Produto não encontrado"
-          description="O produto que você está procurando não existe ou foi removido do sistema."
-        />
-      </PageContainer>
-    );
+  if (props.error || !props.product) {
+    return <ProductDetailErrorState />;
   }
 
-  const totalStock = batches.reduce((sum, batch) => sum + batch.quantity, 0);
+  const totalStock = props.batches.reduce((s, b) => s + b.quantity, 0);
+  const viewState: ProductDetailViewState = {
+    ...props,
+    product: props.product,
+    totalStock,
+    copyToClipboard: copyProductText,
+    formatDate: formatProductDate,
+    formatDateTime: formatProductDateTime,
+    formatCurrency: formatProductCurrency,
+  };
+
+  return <ProductDetailContent viewState={viewState} />;
+};
 
+function ProductDetailErrorState() {
   return (
     <PageContainer>
-      {/* Page Header */}
+      <ErrorState
+        title="Produto não encontrado"
+        description="O produto procurado não existe ou foi removido."
+      />
+    </PageContainer>
+  );
+}
+
+function ProductDetailContent({ viewState }: { viewState: ProductDetailViewState }) {
+  const { product } = viewState;
+  return (
+    <PageContainer bottomPadding="fixed-bar">
       <PageHeader
         title={product.name}
         subtitle="Detalhe do produto"
-        actions={
-          <PermissionGate permission="products:update">
-            <Link href={`/products/${product.id}/edit`}>
-              <Button className="h-9 rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700">
-                <Pencil className="mr-2 size-3.5" />
-                Editar
-              </Button>
-            </Link>
-          </PermissionGate>
-        }
+        actions={<ProductHeaderActions product={product} />}
       />
+      <div className="flex flex-col gap-4 md:gap-6 mb-6">
+        <ProductHeroSection viewState={viewState} />
+        <ProductPanelsSection viewState={viewState} />
+      </div>
+      <ProductBatchesPanel viewState={viewState} />
+      <ProductMobileBottomBar product={product} />
+    </PageContainer>
+  );
+}
 
-      {/* Hero: Image + Identity */}
-      <div className="mb-8 grid grid-cols-1 gap-6 lg:grid-cols-12">
-        {/* Product Image */}
-        <div className="lg:col-span-4">
-          <div className="relative overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717]">
-            <div className="absolute top-3 right-3 z-10">
-              <Badge
-                className={cn(
-                  "rounded-[4px] border px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider",
-                  product.active
-                    ? "bg-emerald-500/10 text-emerald-400 border-emerald-500/30"
-                    : "bg-rose-500/10 text-rose-400 border-rose-500/30"
-                )}
-              >
-                {product.active ? (
-                  <ShieldCheck className="mr-1 size-3" />
-                ) : (
-                  <ShieldOff className="mr-1 size-3" />
-                )}
-                {product.active ? "Ativo" : "Inativo"}
-              </Badge>
-            </div>
-
-            <div className="aspect-square w-full flex items-center justify-center bg-neutral-950/50 p-10">
-              {product.imageUrl ? (
-                <div className="relative h-full w-full">
-                  <Image
-                    src={product.imageUrl}
-                    alt={product.name}
-                    fill
-                    sizes="(min-width: 1024px) 33vw, 100vw"
-                    unoptimized
-                    className="object-contain"
-                  />
-                </div>
-              ) : (
-                <div className="flex flex-col items-center justify-center text-neutral-700">
-                  <Package className="size-20 stroke-1 mb-3" />
-                  <span className="text-[10px] uppercase tracking-widest font-bold text-neutral-600">
-                    Sem Imagem
-                  </span>
-                </div>
-              )}
-            </div>
-
-            {/* Quick Stats Footer */}
-            <div className="grid grid-cols-3 border-t border-neutral-800">
-              <div className="flex flex-col items-center justify-center border-r border-neutral-800 px-2 py-3">
-                <span className="text-[9px] font-bold uppercase tracking-widest text-neutral-600 mb-0.5">
-                  Tipo
-                </span>
-                <div className="flex items-center gap-1 text-[11px] font-bold text-neutral-300">
-                  {product.isKit ? (
-                    <Layers className="size-3 text-purple-500" />
-                  ) : (
-                    <Box className="size-3 text-blue-500" />
-                  )}
-                  {product.isKit ? "Kit" : "Un."}
-                </div>
-              </div>
-              <div className="flex flex-col items-center justify-center border-r border-neutral-800 px-2 py-3">
-                <span className="text-[9px] font-bold uppercase tracking-widest text-neutral-600 mb-0.5">
-                  Validade
-                </span>
-                <div className="flex items-center gap-1 text-[11px] font-bold text-neutral-300">
-                  <Clock
-                    className={cn(
-                      "size-3",
-                      product.hasExpiration
-                        ? "text-amber-500"
-                        : "text-neutral-600"
-                    )}
-                  />
-                  {product.hasExpiration ? "Ctrl." : "Livre"}
-                </div>
-              </div>
-              <div className="flex flex-col items-center justify-center px-2 py-3">
-                <span className="text-[9px] font-bold uppercase tracking-widest text-neutral-600 mb-0.5">
-                  Estoque
-                </span>
-                <span className="text-[11px] font-bold text-white tabular-nums">
-                  {totalStock}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
+function ProductHeaderActions({ product }: { product: Product }) {
+  return (
+    <div className="hidden items-center gap-2 md:flex">
+      <Link href={`/products/${product.id}/prompts`}>
+        <Button
+          variant="outline"
+          className="h-9 rounded-[4px] border-neutral-800 bg-transparent text-xs font-bold uppercase tracking-wide text-neutral-300 hover:bg-neutral-900 hover:text-white"
+        >
+          <Sparkles className="mr-2 size-3.5" />
+          Artes IA
+        </Button>
+      </Link>
+      <PermissionGate permission="products:update">
+        <Link href={`/products/${product.id}/edit`}>
+          <Button className="h-9 rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700">
+            <Pencil className="mr-2 size-3.5" />
+            Editar
+          </Button>
+        </Link>
+      </PermissionGate>
+    </div>
+  );
+}
 
-        {/* Identity + Codes */}
-        <div className="space-y-6 lg:col-span-8">
-          {/* Description Card */}
-          <div className="rounded-[4px] border border-neutral-800 bg-[#171717] p-6">
-            <h2 className="text-[10px] font-semibold uppercase tracking-widest text-neutral-500 mb-3">
-              Descrição
-            </h2>
-            <p className="text-sm leading-relaxed text-neutral-400">
-              {product.description ||
-                "Nenhuma descrição fornecida para este produto."}
-            </p>
-          </div>
-
-          {/* Codes Grid */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            {/* SKU */}
-            <DataField
-              icon={<Hash className="size-4" />}
-              label="SKU"
-              value={product.sku || "NÃO DEFINIDO"}
-              mono
-              onCopy={
-                product.sku
-                  ? () => copyToClipboard(product.sku!, "SKU")
-                  : undefined
-              }
-            />
-
-            {/* Barcode */}
-            <DataField
-              icon={<Barcode className="size-4" />}
-              label="Código de Barras"
-              badge={product.barcodeType || undefined}
-              value={product.barcode || "NÃO CADASTRADO"}
-              mono
-              onCopy={
-                product.barcode
-                  ? () => copyToClipboard(product.barcode!, "Código de Barras")
-                  : undefined
-              }
-            />
-
-            {/* Category */}
-            <DataField
-              icon={<Tag className="size-4 text-emerald-500" />}
-              label="Categoria"
-              value={product.categoryName || "Sem Categoria"}
-            />
-
-            {/* Brand */}
-            <DataField
-              icon={<Building2 className="size-4 text-amber-500" />}
-              label="Marca / Fabricante"
-              value={product.brand?.name || "Genérico"}
-            />
-          </div>
-
-          {/* System Metadata */}
-          <div className="rounded-[4px] border border-neutral-800 bg-[#171717] p-5">
-            <h3 className="mb-4 text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
-              Metadados
-            </h3>
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              <div>
-                <span className="text-[10px] font-bold uppercase tracking-wider text-neutral-600 block mb-1">
-                  Criado em
-                </span>
-                <span className="text-xs font-mono text-neutral-300">
-                  {formatDateTime(product.createdAt)}
-                </span>
-              </div>
-              <div>
-                <span className="text-[10px] font-bold uppercase tracking-wider text-neutral-600 block mb-1">
-                  Atualizado em
-                </span>
-                <span className="text-xs font-mono text-neutral-300">
-                  {formatDateTime(product.updatedAt)}
-                </span>
-              </div>
-              <div>
-                <span className="text-[10px] font-bold uppercase tracking-wider text-neutral-600 block mb-1">
-                  UUID
-                </span>
-                <button
-                  onClick={() => copyToClipboard(product.id, "ID do Produto")}
-                  className="flex items-center gap-2 rounded-[4px] bg-neutral-900 border border-neutral-800 px-3 py-1.5 text-[11px] font-mono text-neutral-500 hover:text-neutral-300 hover:border-neutral-700 w-full max-w-full group"
-                >
-                  <span className="truncate">{product.id}</span>
-                  <Copy className="size-3 shrink-0 opacity-0 group-hover:opacity-100" />
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
+function ProductMobileBottomBar({ product }: { product: Product }) {
+  return (
+    <FixedBottomBar className="flex gap-2 md:hidden">
+      <Link href={`/products/${product.id}/prompts`} className="block flex-1">
+        <Button
+          variant="outline"
+          className="h-11 w-full rounded-[4px] border-neutral-800 bg-neutral-950 text-xs font-bold uppercase tracking-wide text-neutral-300 hover:bg-neutral-900 hover:text-white"
+        >
+          <Sparkles className="mr-2 size-4" />
+          Artes IA
+        </Button>
+      </Link>
+      <PermissionGate permission="products:update">
+        <Link href={`/products/${product.id}/edit`} className="block flex-1">
+          <Button className="w-full h-11 rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700">
+            <Pencil className="mr-2 size-4" />
+            Editar Produto
+          </Button>
+        </Link>
+      </PermissionGate>
+    </FixedBottomBar>
+  );
+}
+
+function ProductHeroSection({ viewState }: { viewState: ProductDetailViewState }) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-6">
+      <ProductImagePanel viewState={viewState} />
+      <ProductOverviewPanel viewState={viewState} />
+    </div>
+  );
+}
+
+function ProductImagePanel({ viewState }: { viewState: ProductDetailViewState }) {
+  const { product, totalStock } = viewState;
+  return (
+    <div className="md:col-span-5 lg:col-span-4">
+      <div className="relative overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717]">
+        <ProductImageContent product={product} />
+        <ProductQuickStats product={product} totalStock={totalStock} />
       </div>
+    </div>
+  );
+}
 
-      {/* Technical Specs */}
-      {product.attributes && Object.keys(product.attributes).length > 0 && (
-        <div className="mb-8 rounded-[4px] border border-neutral-800 bg-[#171717]">
-          <div className="border-b border-neutral-800 px-5 py-4 flex items-center gap-2">
-            <QrCode className="size-4 text-blue-500" />
-            <h3 className="text-xs font-semibold uppercase tracking-widest text-white">
-              Especificações Técnicas
-            </h3>
-            <Badge className="ml-auto rounded-[4px] border border-neutral-700 bg-neutral-900 px-2 py-0.5 text-[10px] font-bold text-neutral-400">
-              {Object.keys(product.attributes).length}
-            </Badge>
-          </div>
-          <div className="p-5">
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
-              {Object.entries(product.attributes).map(([key, value]) => (
-                <div
-                  key={key}
-                  className="flex items-center justify-between rounded-[4px] border border-neutral-800 bg-neutral-900/30 px-4 py-3 hover:border-neutral-700"
-                >
-                  <span className="text-[10px] font-bold uppercase tracking-wider text-neutral-500">
-                    {key}
-                  </span>
-                  <span className="text-sm font-mono font-medium text-white ml-4 truncate text-right">
-                    {value}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
+function ProductImageContent({ product }: { product: Product }) {
+  return (
+    <div className="flex aspect-[3/4] w-full items-center justify-center bg-neutral-950/50 p-4 md:p-5">
+      {product.imageUrl ? (
+        <div className="relative h-full w-full rounded-[10px] overflow-hidden border border-neutral-800/60">
+          <Image
+            src={product.imageUrl}
+            alt={product.name}
+            fill
+            sizes="(min-width: 768px) 33vw, 100vw"
+            unoptimized
+            className="object-cover rounded-[10px]"
+          />
         </div>
+      ) : (
+        <ProductNoImagePlaceholder />
       )}
+    </div>
+  );
+}
+
+function ProductNoImagePlaceholder() {
+  return (
+    <div className="flex flex-col items-center justify-center text-neutral-700">
+      <Package className="mb-3 size-16 stroke-1" />
+      <span className="text-[10px] font-bold uppercase tracking-widest text-neutral-600">
+        Sem Imagem
+      </span>
+    </div>
+  );
+}
+
+function ProductQuickStats({
+  product,
+  totalStock,
+}: {
+  product: Product;
+  totalStock: number;
+}) {
+  return (
+    <div className="grid grid-cols-2 border-t border-neutral-800">
+      <ProductTypeStat product={product} />
+      <ProductStockStat totalStock={totalStock} />
+    </div>
+  );
+}
 
-      {/* Batches Section */}
-      <div className="rounded-[4px] border border-neutral-800 bg-[#171717]">
-        <div className="flex items-center justify-between border-b border-neutral-800 px-5 py-4">
-          <div className="flex items-center gap-2">
-            <Layers className="size-4 text-amber-500" />
-            <h3 className="text-xs font-semibold uppercase tracking-widest text-white">
-              Lotes do Produto
-            </h3>
-          </div>
-          <Badge className="rounded-[4px] border border-neutral-700 bg-neutral-900 px-2 py-0.5 text-[10px] font-bold text-neutral-400">
-            {batches.length}
-          </Badge>
+function ProductTypeStat({ product }: { product: Product }) {
+  return (
+    <div className="flex flex-col items-center justify-center border-r border-neutral-800 px-2 py-3">
+      <span className="mb-0.5 text-[9px] font-bold uppercase tracking-widest text-neutral-600">
+        Tipo
+      </span>
+      <div className="flex items-center gap-1 text-[11px] font-bold text-neutral-300">
+        {product.isKit ? <Layers className="size-3 text-purple-500" /> : <Box className="size-3 text-blue-500" />}
+        {product.isKit ? "Kit" : "Un."}
+      </div>
+    </div>
+  );
+}
+
+function ProductStockStat({ totalStock }: { totalStock: number }) {
+  return (
+    <div className="flex flex-col items-center justify-center px-2 py-3">
+      <span className="mb-0.5 text-[9px] font-bold uppercase tracking-widest text-neutral-600">
+        Estoque
+      </span>
+      <span className="text-[11px] font-bold tabular-nums text-white">
+        {totalStock}
+      </span>
+    </div>
+  );
+}
+
+function ProductOverviewPanel({ viewState }: { viewState: ProductDetailViewState }) {
+  return (
+    <div className="md:col-span-7 lg:col-span-8 flex flex-col gap-3 min-w-0">
+      <ProductDescriptionCard product={viewState.product} />
+      <ProductCodeFields viewState={viewState} />
+    </div>
+  );
+}
+
+function ProductDescriptionCard({ product }: { product: Product }) {
+  return (
+    <div className="rounded-[4px] border border-neutral-800 bg-[#171717] p-4 md:p-5 flex-1">
+      <h2 className="mb-2 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+        Descrição
+      </h2>
+      <p className="text-xs md:text-sm leading-relaxed text-neutral-400">
+        {product.description || "Nenhuma descrição fornecida para este produto."}
+      </p>
+    </div>
+  );
+}
+
+function ProductCodeFields({ viewState }: { viewState: ProductDetailViewState }) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <ProductSkuField viewState={viewState} />
+      <ProductBarcodeField viewState={viewState} />
+      <ProductCategoryBrandFields product={viewState.product} />
+    </div>
+  );
+}
+
+function ProductSkuField({ viewState }: { viewState: ProductDetailViewState }) {
+  const { product, copyToClipboard } = viewState;
+  const sku = product.sku;
+  return (
+    <DataField
+      icon={<Hash className="size-4" />}
+      label="SKU"
+      value={sku || "NÃO DEFINIDO"}
+      mono
+      onCopy={sku ? () => copyToClipboard(sku, "SKU") : undefined}
+    />
+  );
+}
+
+function ProductBarcodeField({ viewState }: { viewState: ProductDetailViewState }) {
+  const { product, copyToClipboard } = viewState;
+  const barcode = product.barcode;
+  return (
+    <DataField
+      icon={<Barcode className="size-4" />}
+      label="Código de Barras"
+      badge={product.barcodeType || undefined}
+      value={barcode || "NÃO CADASTRADO"}
+      mono
+      onCopy={barcode ? () => copyToClipboard(barcode, "Código") : undefined}
+    />
+  );
+}
+
+function ProductCategoryBrandFields({ product }: { product: Product }) {
+  return (
+    <>
+      <DataField
+        icon={<Tag className="size-4 text-emerald-500" />}
+        label="Categoria"
+        value={product.categoryName || "Sem Categoria"}
+      />
+      <DataField
+        icon={<Building2 className="size-4 text-amber-500" />}
+        label="Marca / Fabricante"
+        value={product.brand?.name || "Genérico"}
+      />
+    </>
+  );
+}
+
+function ProductPanelsSection({ viewState }: { viewState: ProductDetailViewState }) {
+  const hasAttributes = Object.keys(viewState.product.attributes ?? {}).length > 0;
+  return (
+    <div className={cn("grid grid-cols-1 gap-4", hasAttributes ? "lg:grid-cols-2" : "")}>
+      <ProductMetadataPanel viewState={viewState} />
+      <ProductAttributesPanel product={viewState.product} />
+    </div>
+  );
+}
+
+function ProductMetadataPanel({ viewState }: { viewState: ProductDetailViewState }) {
+  const { product, copyToClipboard, formatDateTime } = viewState;
+  return (
+    <div className="rounded-[4px] border border-neutral-800 bg-[#171717] p-4 md:p-5 self-start w-full">
+      <h3 className="mb-3 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+        Metadados
+      </h3>
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+        <ProductMetadataField label="Criado em" value={formatDateTime(product.createdAt)} />
+        <ProductMetadataField label="Atualizado em" value={formatDateTime(product.updatedAt)} />
+        <ProductIdField product={product} copyToClipboard={copyToClipboard} />
+      </div>
+    </div>
+  );
+}
+
+function ProductMetadataField({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <span className="mb-0.5 block text-[10px] font-bold uppercase tracking-wider text-neutral-600">
+        {label}
+      </span>
+      <span className="font-mono text-[11px] text-neutral-300 block truncate">{value}</span>
+    </div>
+  );
+}
+
+function ProductIdField(props: {
+  product: Product;
+  copyToClipboard: (text: string, label: string) => void;
+}) {
+  return (
+    <div>
+      <span className="mb-0.5 block text-[10px] font-bold uppercase tracking-wider text-neutral-600">
+        UUID
+      </span>
+      <button
+        onClick={() => props.copyToClipboard(props.product.id, "ID do Produto")}
+        className="group flex w-full items-center gap-1.5 rounded-[4px] border border-neutral-800 bg-neutral-900 px-2 py-1 font-mono text-[10px] text-neutral-500 hover:border-neutral-700 hover:text-neutral-300"
+      >
+        <span className="truncate">{props.product.id}</span>
+        <Copy className="size-2.5 shrink-0 opacity-0 group-hover:opacity-100" />
+      </button>
+    </div>
+  );
+}
+
+function ProductAttributesPanel({ product }: { product: Product }) {
+  const entries = Object.entries(product.attributes ?? {});
+  if (entries.length === 0) return null;
+
+  return (
+    <div className="rounded-[4px] border border-neutral-800 bg-[#171717] self-start w-full">
+      <ProductAttributesHeader count={entries.length} />
+      <div className="p-4 md:p-5">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
+          {entries.map(([key, value]) => (
+            <ProductAttributeItem key={key} label={key} value={value} />
+          ))}
         </div>
+      </div>
+    </div>
+  );
+}
 
-        {isLoadingBatches && (
-          <div className="p-5">
-            <LoadingState message="Carregando lotes..." />
-          </div>
-        )}
-
-        {!isLoadingBatches && batchesError && (
-          <div className="p-5">
-            <ErrorState
-              title="Erro ao carregar lotes"
-              description="Não foi possível carregar os lotes deste produto."
-            />
-          </div>
-        )}
-
-        {!isLoadingBatches && !batchesError && batches.length === 0 && (
-          <div className="px-5 py-10 text-center">
-            <Package className="mx-auto mb-3 size-10 text-neutral-800" strokeWidth={1.5} />
-            <p className="text-xs font-bold uppercase tracking-wide text-neutral-500">
-              Nenhum lote cadastrado
-            </p>
-          </div>
-        )}
-
-        {!isLoadingBatches && !batchesError && batches.length > 0 && (
-          <>
-            {/* Table Header — Desktop */}
-            <div className="hidden md:grid md:grid-cols-12 gap-4 border-b border-neutral-800 bg-neutral-900/30 px-5 py-2.5 text-[10px] font-bold uppercase tracking-widest text-neutral-600">
-              <div className="col-span-3">Lote</div>
-              <div className="col-span-3">Armazém</div>
-              <div className="col-span-2 text-right">Quantidade</div>
-              <div className="col-span-2 text-right">Validade</div>
-              <div className="col-span-2 text-right">Preço Venda</div>
-            </div>
-
-            {/* Batch Rows */}
-            <div className="divide-y divide-neutral-800/50">
-              {batches.map((batch) => (
-                <Link
-                  key={batch.id}
-                  href={`/batches/${batch.id}`}
-                  className="group flex flex-col gap-2 px-5 py-3.5 hover:bg-neutral-900/40 md:grid md:grid-cols-12 md:items-center md:gap-4"
-                >
-                  {/* Batch Code */}
-                  <div className="col-span-3 min-w-0">
-                    <span className="font-mono text-xs font-bold text-white">
-                      {batch.batchNumber || batch.batchCode || "SEM LOTE"}
-                    </span>
-                  </div>
-
-                  {/* Warehouse */}
-                  <div className="col-span-3 flex items-center gap-1.5 min-w-0">
-                    <Warehouse className="size-3 shrink-0 text-neutral-600" />
-                    <span className="text-xs text-neutral-400 truncate">
-                      {batch.warehouseName}
-                    </span>
-                  </div>
-
-                  {/* Quantity */}
-                  <div className="col-span-2 text-right">
-                    <span className="text-sm font-bold tabular-nums text-white">
-                      {batch.quantity}
-                    </span>
-                    <span className="ml-0.5 text-[10px] text-neutral-600">
-                      un
-                    </span>
-                  </div>
-
-                  {/* Expiration Date */}
-                  <div className="col-span-2 flex items-center justify-end gap-1.5">
-                    <Calendar className="size-3 text-neutral-600" />
-                    <span className="text-xs font-mono text-neutral-400 tabular-nums">
-                      {formatDate(batch.expirationDate)}
-                    </span>
-                  </div>
-
-                  {/* Selling Price */}
-                  <div className="col-span-2 flex items-center justify-end gap-1">
-                    <span className="text-xs font-mono text-neutral-400 tabular-nums">
-                      {formatCurrency(batch.sellingPrice)}
-                    </span>
-                    <ChevronRight className="size-3.5 text-neutral-700 group-hover:text-neutral-400" />
-                  </div>
-                </Link>
-              ))}
-            </div>
-
-            {/* Table Footer */}
-            <div className="flex items-center justify-between border-t border-neutral-800 bg-neutral-900/30 px-5 py-3">
-              <span className="text-[10px] font-bold uppercase tracking-widest text-neutral-600">
-                Total em Estoque
-              </span>
-              <span className="text-sm font-bold tabular-nums text-white">
-                {totalStock}
-                <span className="ml-0.5 text-[10px] font-normal text-neutral-600">
-                  un
-                </span>
-              </span>
-            </div>
-          </>
-        )}
+function ProductAttributesHeader({ count }: { count: number }) {
+  return (
+    <div className="flex items-center gap-2 border-b border-neutral-800 px-4 py-3">
+      <QrCode className="size-3.5 text-blue-500" />
+      <h3 className="text-[11px] font-bold uppercase tracking-widest text-white truncate">
+        Especificações Técnicas
+      </h3>
+      <Badge className="ml-auto rounded-[4px] border border-neutral-800 bg-neutral-950 px-2 py-0.5 text-[10px] font-bold text-neutral-400">
+        {count}
+      </Badge>
+    </div>
+  );
+}
+
+function ProductAttributeItem({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-center justify-between rounded-[4px] border border-neutral-800 bg-neutral-900/30 px-3 py-2 hover:border-neutral-700 gap-2">
+      <span className="text-[9px] font-bold uppercase tracking-wider text-neutral-500 truncate">
+        {label}
+      </span>
+      <span className="truncate text-right font-mono text-xs font-medium text-white">
+        {value}
+      </span>
+    </div>
+  );
+}
+
+/* ─── Unchanged Component: ProductBatchesPanel ─── */
+function ProductBatchesPanel({
+  viewState,
+}: {
+  viewState: ProductDetailViewState;
+}) {
+  return (
+    <div className="rounded-[4px] border border-neutral-800 bg-[#171717]">
+      <ProductBatchesHeader count={viewState.batches.length} />
+      <ProductBatchesContent viewState={viewState} />
+    </div>
+  );
+}
+
+function ProductBatchesHeader({ count }: { count: number }) {
+  return (
+    <div className="flex items-center justify-between border-b border-neutral-800 px-5 py-4">
+      <div className="flex items-center gap-2.5">
+        <Layers className="size-4 text-amber-500" strokeWidth={2.5} />
+        <h3 className="text-xs font-bold uppercase tracking-widest text-white">
+          Lotes do Produto
+        </h3>
       </div>
-    </PageContainer>
+      <Badge className="rounded-[4px] border border-neutral-800 bg-neutral-950 px-2.5 py-1 text-xs font-bold text-amber-500">
+        {count} {count === 1 ? "Lote" : "Lotes"}
+      </Badge>
+    </div>
   );
-};
+}
 
-/* ─── Helper Component: DataField ─── */
-function DataField({
-  icon,
-  label,
-  badge,
-  value,
-  mono,
-  onCopy,
+function ProductBatchesContent({
+  viewState,
 }: {
-  icon: React.ReactNode;
+  viewState: ProductDetailViewState;
+}) {
+  if (viewState.isLoadingBatches) {
+    return <ProductBatchesLoadingState />;
+  }
+
+  if (viewState.batchesError) {
+    return <ProductBatchesErrorState />;
+  }
+
+  if (viewState.batches.length === 0) {
+    return <ProductBatchesEmptyState />;
+  }
+
+  return <ProductBatchesList viewState={viewState} />;
+}
+
+function ProductBatchesLoadingState() {
+  return (
+    <div className="p-5">
+      <LoadingState message="Carregando lotes..." />
+    </div>
+  );
+}
+
+function ProductBatchesErrorState() {
+  return (
+    <div className="p-5">
+      <ErrorState
+        title="Erro ao carregar lotes"
+        description="Não foi possível carregar os lotes."
+      />
+    </div>
+  );
+}
+
+function ProductBatchesEmptyState() {
+  return (
+    <div className="px-5 py-10 text-center">
+      <Package className="mx-auto mb-3 size-10 text-neutral-800" strokeWidth={1.5} />
+      <p className="text-xs font-bold uppercase tracking-wide text-neutral-500">
+        Nenhum lote cadastrado
+      </p>
+    </div>
+  );
+}
+
+function ProductBatchesList({
+  viewState,
+}: {
+  viewState: ProductDetailViewState;
+}) {
+  const { batches, totalStock } = viewState;
+
+  return (
+    <>
+      <div className="divide-y divide-neutral-800">
+        {batches.map((batch) => (
+          <ProductBatchRow key={batch.id} batch={batch} viewState={viewState} />
+        ))}
+      </div>
+      <ProductBatchesFooter totalStock={totalStock} />
+    </>
+  );
+}
+
+function ProductBatchRow({
+  batch,
+  viewState,
+}: {
+  batch: ProductBatch;
+  viewState: ProductDetailViewState;
+}) {
+  return (
+    <Link
+      href={`/batches/${batch.id}`}
+      className="group flex items-center justify-between px-5 py-4 hover:bg-neutral-900/40 transition-none gap-4"
+    >
+      <ProductBatchLeft batch={batch} />
+      <ProductBatchMiddle batch={batch} viewState={viewState} />
+      <ProductBatchRight batch={batch} />
+    </Link>
+  );
+}
+
+function ProductBatchLeft({ batch }: { batch: ProductBatch }) {
+  return (
+    <div className="flex flex-col items-center justify-center w-14 shrink-0">
+      <div className="flex size-10 items-center justify-center rounded-[4px] border border-neutral-800 bg-neutral-900/20 text-neutral-500 group-hover:border-neutral-700 group-hover:text-neutral-300">
+        <Warehouse className="size-4" strokeWidth={1.5} />
+      </div>
+      <span className="mt-1.5 truncate max-w-full text-[11px] font-medium text-neutral-400">
+        {batch.warehouseName}
+      </span>
+    </div>
+  );
+}
+
+function ProductBatchMiddle({
+  batch,
+  viewState,
+}: {
+  batch: ProductBatch;
+  viewState: ProductDetailViewState;
+}) {
+  const code = batch.batchNumber || batch.batchCode || "SEM LOTE";
+  const dateStr = viewState.formatDate(batch.expirationDate);
+  const priceStr = viewState.formatCurrency(batch.sellingPrice);
+
+  return (
+    <div className="flex-1 min-w-0 flex flex-col justify-center">
+      <span className="text-xs font-bold text-white truncate block">
+        {code}
+      </span>
+      <ProductBatchDetails date={dateStr} price={priceStr} />
+    </div>
+  );
+}
+
+function ProductBatchDetails({
+  date,
+  price,
+}: {
+  date: string;
+  price: string;
+}) {
+  return (
+    <div className="mt-1.5 flex items-center gap-2 text-xs text-neutral-400">
+      <div className="flex items-center gap-1.5 shrink-0">
+        <Calendar className="size-3.5 text-neutral-500" />
+        <span>{date}</span>
+      </div>
+      <span className="text-amber-500 font-bold shrink-0">•</span>
+      <span className="truncate">{price}</span>
+    </div>
+  );
+}
+
+function ProductBatchRight({ batch }: { batch: ProductBatch }) {
+  return (
+    <div className="flex items-center gap-2.5 shrink-0">
+      <div className="text-right">
+        <span className="text-sm font-bold text-white">{batch.quantity}</span>
+        <span className="ml-1 text-xs text-neutral-500">un</span>
+      </div>
+      <ChevronRight className="size-4 text-neutral-600 group-hover:text-neutral-400" />
+    </div>
+  );
+}
+
+function ProductBatchesFooter({ totalStock }: { totalStock: number }) {
+  return (
+    <div className="flex items-center justify-between border-t border-neutral-800 px-5 py-4">
+      <div className="flex items-center gap-2.5">
+        <Box className="size-4 text-amber-500" strokeWidth={2.5} />
+        <span className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+          Total em Estoque
+        </span>
+      </div>
+      <div>
+        <span className="text-base font-bold text-white">{totalStock}</span>
+        <span className="ml-1 text-xs text-neutral-500">un</span>
+      </div>
+    </div>
+  );
+}
+
+/* ─── Helper Component: DataField ─── */
+function DataField(props: {
+  icon: ReactNode;
   label: string;
   badge?: string;
   value: string;
@@ -480,45 +674,70 @@ function DataField({
   onCopy?: () => void;
 }) {
   return (
-    <div className="group flex items-center gap-4 rounded-[4px] border border-neutral-800 bg-[#171717] p-4 hover:border-neutral-700">
-      <div className="flex size-9 shrink-0 items-center justify-center rounded-[4px] bg-neutral-800 text-neutral-400 group-hover:text-white">
-        {icon}
-      </div>
-      <div className="min-w-0 flex-1">
-        <div className="flex items-center gap-2 mb-0.5">
-          <span className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-            {label}
-          </span>
-          {badge && (
-            <span className="rounded-[4px] bg-neutral-800 px-1.5 py-px text-[9px] font-bold uppercase text-neutral-500">
-              {badge}
-            </span>
-          )}
-        </div>
-        <div className="flex items-center gap-2">
-          <span
-            className={cn(
-              "text-sm font-bold text-white truncate",
-              mono && "font-mono"
-            )}
-            title={value}
-          >
-            {value}
-          </span>
-          {onCopy && (
-            <button
-              onClick={(e) => {
-                e.preventDefault();
-                onCopy();
-              }}
-              className="shrink-0 text-neutral-700 hover:text-neutral-300"
-              aria-label={`Copiar ${label}`}
-            >
-              <Copy className="size-3" />
-            </button>
-          )}
-        </div>
+    <div className="group flex items-center gap-3 rounded-[4px] border border-neutral-800 bg-[#171717] p-3.5 hover:border-neutral-700">
+      <div className="flex size-8 shrink-0 items-center justify-center rounded-[4px] bg-neutral-800 text-neutral-400 group-hover:text-white">
+        {props.icon}
       </div>
+      <DataFieldContent {...props} />
+    </div>
+  );
+}
+
+function DataFieldContent(props: {
+  label: string;
+  badge?: string;
+  value: string;
+  mono?: boolean;
+  onCopy?: () => void;
+}) {
+  return (
+    <div className="min-w-0 flex-1">
+      <DataFieldHeader label={props.label} badge={props.badge} />
+      <DataFieldValue {...props} />
+    </div>
+  );
+}
+
+function DataFieldHeader({ label, badge }: { label: string; badge?: string }) {
+  return (
+    <div className="flex items-center gap-2 mb-0.5">
+      <span className="text-[10px] font-bold uppercase tracking-widest text-neutral-500 truncate">
+        {label}
+      </span>
+      {badge && (
+        <span className="rounded-[4px] bg-neutral-800 px-1.5 py-px text-[9px] font-bold uppercase text-neutral-500 shrink-0">
+          {badge}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function DataFieldValue(props: { value: string; mono?: boolean; onCopy?: () => void }) {
+  return (
+    <div className="flex items-center gap-2">
+      <span
+        className={cn("text-xs font-bold text-white truncate", props.mono && "font-mono")}
+        title={props.value}
+      >
+        {props.value}
+      </span>
+      {props.onCopy && <DataFieldCopyBtn onCopy={props.onCopy} label={props.value} />}
     </div>
   );
 }
+
+function DataFieldCopyBtn({ onCopy, label }: { onCopy: () => void; label: string }) {
+  return (
+    <button
+      onClick={(e) => {
+        e.preventDefault();
+        onCopy();
+      }}
+      className="shrink-0 text-neutral-700 hover:text-neutral-300"
+      aria-label={`Copiar ${label}`}
+    >
+      <Copy className="size-3" />
+    </button>
+  );
+}
diff --git a/app/(pages)/products/[id]/prompts/[promptId]/page.client.tsx b/app/(pages)/products/[id]/prompts/[promptId]/page.client.tsx
new file mode 100644
index 0000000..6d49dcf
--- /dev/null
+++ b/app/(pages)/products/[id]/prompts/[promptId]/page.client.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { useProductPromptGeneratePageModel } from "./product-prompt-generate.model";
+import { ProductPromptGenerateView } from "./product-prompt-generate.view";
+
+export function PageClient() {
+  const params = useParams();
+  const productId = params.id as string;
+  const promptId = params.promptId as string;
+  const model = useProductPromptGeneratePageModel(productId, promptId);
+
+  return <ProductPromptGenerateView {...model} />;
+}
diff --git a/app/(pages)/products/[id]/prompts/[promptId]/page.tsx b/app/(pages)/products/[id]/prompts/[promptId]/page.tsx
new file mode 100644
index 0000000..3888819
--- /dev/null
+++ b/app/(pages)/products/[id]/prompts/[promptId]/page.tsx
@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+import { PageClient } from "./page.client";
+
+export const metadata: Metadata = {
+  title: "Gerar imagem | StockShift",
+  description: "Configure preço, oferta, parcelamento e posição da arte.",
+};
+
+export default function Page() {
+  return <PageClient />;
+}
diff --git a/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate-field-title.view.tsx b/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate-field-title.view.tsx
new file mode 100644
index 0000000..8d4877f
--- /dev/null
+++ b/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate-field-title.view.tsx
@@ -0,0 +1,7 @@
+export function GeneratePromptBlockTitle({ title }: { title: string }) {
+  return (
+    <p className="text-[10px] font-bold uppercase tracking-wider text-neutral-500">
+      {title}
+    </p>
+  );
+}
diff --git a/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate-position-fields.view.tsx b/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate-position-fields.view.tsx
new file mode 100644
index 0000000..9a5eaf1
--- /dev/null
+++ b/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate-position-fields.view.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import type { ControllerRenderProps } from "react-hook-form";
+import {
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { cn } from "@/lib/utils";
+import { buildProductPromptPricePreview } from "../product-prompts.pricing";
+import type { ProductPromptGenerateFormData } from "./product-prompt-generate.schema";
+import type { ProductPromptGenerateViewProps } from "./product-prompt-generate.types";
+import type { ProductPromptPositionOption } from "../product-prompts.types";
+import { GeneratePromptBlockTitle } from "./product-prompt-generate-field-title.view";
+
+export function GeneratePromptPositionField({
+  props,
+}: {
+  props: ProductPromptGenerateViewProps;
+}) {
+  return (
+    <div className="space-y-3 border-b border-neutral-800 pb-5">
+      <GeneratePromptBlockTitle title="Posição do bloco de preço" />
+      <FormField
+        control={props.generatePromptForm.control}
+        name="pricePosition"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+              Local onde deve aparecer o preço
+            </FormLabel>
+            <ProductPromptPositionGrid
+              field={field}
+              options={props.pricePositionOptions}
+            />
+            <FormMessage className="text-xs text-rose-500" />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+}
+
+function ProductPromptPositionGrid({
+  field,
+  options,
+}: {
+  field: ControllerRenderProps<ProductPromptGenerateFormData, "pricePosition">;
+  options: ProductPromptPositionOption[];
+}) {
+  return (
+    <div className="grid grid-cols-3 gap-3">
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          onClick={() => field.onChange(option.value)}
+          className={cn(
+            "h-14 rounded-[4px] border bg-neutral-900 px-2 text-xs font-bold text-neutral-300 hover:border-blue-600",
+            field.value === option.value
+              ? "border-blue-600 bg-blue-950/40 text-white"
+              : "border-neutral-800"
+          )}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function GeneratePromptTextPreview({
+  props,
+}: {
+  props: ProductPromptGenerateViewProps;
+}) {
+  const previewText = buildProductPromptPricePreview(
+    props.generatePromptForm.watch()
+  );
+
+  return (
+    <div className="space-y-3">
+      <GeneratePromptBlockTitle title="Prévia do texto" />
+      <pre className="min-h-24 whitespace-pre-wrap rounded-[4px] border border-neutral-800 bg-neutral-950 p-3 font-sans text-sm leading-relaxed text-white">
+        {previewText || "Preencha o preço normal para visualizar."}
+      </pre>
+    </div>
+  );
+}
diff --git a/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate-price-fields.view.tsx b/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate-price-fields.view.tsx
new file mode 100644
index 0000000..5feb469
--- /dev/null
+++ b/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate-price-fields.view.tsx
@@ -0,0 +1,440 @@
+"use client";
+
+import { CurrencyInput } from "@/components/ui/currency-input";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { NumberInput } from "@/components/ui/number-input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import {
+  calculateProductPromptCashPriceCents,
+  calculateProductPromptInstallmentCents,
+  formatProductPromptBrl,
+} from "../product-prompts.pricing";
+import type { ProductPromptGenerateViewProps } from "./product-prompt-generate.types";
+import type {
+  ProductPromptCashOfferMode,
+  ProductPromptInstallmentBase,
+} from "../product-prompts.types";
+import { GeneratePromptBlockTitle } from "./product-prompt-generate-field-title.view";
+import {
+  GeneratePromptPositionField,
+  GeneratePromptTextPreview,
+} from "./product-prompt-generate-position-fields.view";
+
+export function GeneratePromptPriceFields({
+  props,
+}: {
+  props: ProductPromptGenerateViewProps;
+}) {
+  return (
+    <div className="space-y-6">
+      <GeneratePromptBasePriceBlock props={props} />
+      <GeneratePromptCashOfferBlock props={props} />
+      <GeneratePromptInstallmentBlock props={props} />
+      <GeneratePromptPositionField props={props} />
+      <GeneratePromptTextPreview props={props} />
+    </div>
+  );
+}
+
+function GeneratePromptBasePriceBlock({
+  props,
+}: {
+  props: ProductPromptGenerateViewProps;
+}) {
+  return (
+    <div className="space-y-3 border-b border-neutral-800 pb-5">
+      <GeneratePromptBlockTitle title="Preço base" />
+      <NormalPriceField props={props} />
+    </div>
+  );
+}
+
+function NormalPriceField({ props }: { props: ProductPromptGenerateViewProps }) {
+  return (
+    <FormField
+      control={props.generatePromptForm.control}
+      name="normalPriceCents"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            Preço normal
+          </FormLabel>
+          <FormControl>
+            <CurrencyInput
+              value={field.value}
+              onValueChange={field.onChange}
+              className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+            />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function GeneratePromptCashOfferBlock({
+  props,
+}: {
+  props: ProductPromptGenerateViewProps;
+}) {
+  const formValues = props.generatePromptForm.watch();
+  const showCashOffer = formValues.showCashOffer;
+  const cashOfferMode = formValues.cashOfferMode;
+  const cashPriceCents = calculateProductPromptCashPriceCents(formValues);
+
+  return (
+    <div className="space-y-4 border-b border-neutral-800 pb-5">
+      <GeneratePromptSwitchField
+        props={props}
+        name="showCashOffer"
+        label="Mostrar preço à vista com desconto"
+        onCheckedChange={(checked) => {
+          const isCashBase =
+            props.generatePromptForm.getValues("installmentBase") === "cash-price";
+          if (!checked && isCashBase) {
+            props.generatePromptForm.setValue("installmentBase", "normal-price", {
+              shouldDirty: true,
+              shouldValidate: true,
+            });
+          }
+        }}
+      />
+      {showCashOffer && (
+        <div className="space-y-4">
+          <CashOfferModeField props={props} />
+          {cashOfferMode === "final-price" ? (
+            <CashPriceField props={props} />
+          ) : (
+            <CashDiscountField props={props} />
+          )}
+          <CalculatedPricePreview
+            label="Preço à vista"
+            valueCents={cashPriceCents}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function CashOfferModeField({
+  props,
+}: {
+  props: ProductPromptGenerateViewProps;
+}) {
+  return (
+    <FormField
+      control={props.generatePromptForm.control}
+      name="cashOfferMode"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            Calcular oferta à vista por
+          </FormLabel>
+          <FormControl>
+            <CashOfferModeControl value={field.value} onChange={field.onChange} />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function CashOfferModeControl({
+  onChange,
+  value,
+}: {
+  onChange: (value: ProductPromptCashOfferMode) => void;
+  value: ProductPromptCashOfferMode;
+}) {
+  const options: Array<{ value: ProductPromptCashOfferMode; label: string }> = [
+    { value: "final-price", label: "Preço final" },
+    { value: "discount-percent", label: "Desconto %" },
+  ];
+
+  return (
+    <div className="grid grid-cols-2 gap-2 rounded-[4px] border border-neutral-800 bg-neutral-950 p-1">
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          onClick={() => onChange(option.value)}
+          className={cn(
+            "h-10 rounded-[4px] px-3 text-xs font-bold text-neutral-400 hover:text-white",
+            value === option.value ? "bg-blue-600 text-white" : "bg-transparent"
+          )}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function CashPriceField({ props }: { props: ProductPromptGenerateViewProps }) {
+  return (
+    <FormField
+      control={props.generatePromptForm.control}
+      name="cashPriceCents"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            Preço à vista
+          </FormLabel>
+          <FormControl>
+            <CurrencyInput
+              value={field.value}
+              onValueChange={field.onChange}
+              className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+            />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function CashDiscountField({
+  props,
+}: {
+  props: ProductPromptGenerateViewProps;
+}) {
+  return (
+    <FormField
+      control={props.generatePromptForm.control}
+      name="cashDiscountPercent"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            Desconto (%)
+          </FormLabel>
+          <FormControl>
+            <NumberInput
+              value={field.value}
+              onValueChange={field.onChange}
+              mode="float"
+              placeholder="0"
+              className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+            />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function GeneratePromptInstallmentBlock({
+  props,
+}: {
+  props: ProductPromptGenerateViewProps;
+}) {
+  const formValues = props.generatePromptForm.watch();
+  const installmentCents = calculateProductPromptInstallmentCents(formValues);
+  const hasCashOffer = calculateProductPromptCashPriceCents(formValues) !== null;
+
+  return (
+    <div className="space-y-4 border-b border-neutral-800 pb-5">
+      <GeneratePromptSwitchField
+        props={props}
+        name="showInstallments"
+        label="Mostrar parcelamento"
+      />
+      {formValues.showInstallments && (
+        <div className="space-y-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <InstallmentsField props={props} />
+            <InstallmentBaseField props={props} hasCashOffer={hasCashOffer} />
+          </div>
+          {formValues.installmentBase === "custom-price" && (
+            <InstallmentPriceField props={props} />
+          )}
+          <CalculatedPricePreview
+            label="Valor da parcela"
+            valueCents={installmentCents}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InstallmentsField({
+  props,
+}: {
+  props: ProductPromptGenerateViewProps;
+}) {
+  return (
+    <FormField
+      control={props.generatePromptForm.control}
+      name="installments"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            Quantidade de parcelas
+          </FormLabel>
+          <FormControl>
+            <NumberInput
+              value={field.value}
+              onValueChange={field.onChange}
+              placeholder="Opcional"
+              className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+            />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function InstallmentBaseField({
+  hasCashOffer,
+  props,
+}: {
+  hasCashOffer: boolean;
+  props: ProductPromptGenerateViewProps;
+}) {
+  return (
+    <FormField
+      control={props.generatePromptForm.control}
+      name="installmentBase"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            Base do parcelamento
+          </FormLabel>
+          <Select
+            value={field.value}
+            onValueChange={(value: ProductPromptInstallmentBase) =>
+              field.onChange(value)
+            }
+          >
+            <FormControl>
+              <SelectTrigger className="h-10 w-full rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0">
+                <SelectValue />
+              </SelectTrigger>
+            </FormControl>
+            <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+              <SelectItem value="normal-price" className="text-xs">
+                Preço normal
+              </SelectItem>
+              <SelectItem
+                value="cash-price"
+                disabled={!hasCashOffer}
+                className="text-xs"
+              >
+                Preço à vista com desconto
+              </SelectItem>
+              <SelectItem value="custom-price" className="text-xs">
+                Preço próprio para parcelamento
+              </SelectItem>
+            </SelectContent>
+          </Select>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function InstallmentPriceField({
+  props,
+}: {
+  props: ProductPromptGenerateViewProps;
+}) {
+  return (
+    <FormField
+      control={props.generatePromptForm.control}
+      name="installmentPriceCents"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            Preço parcelado
+          </FormLabel>
+          <FormControl>
+            <CurrencyInput
+              value={field.value}
+              onValueChange={field.onChange}
+              className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+            />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function GeneratePromptSwitchField({
+  label,
+  name,
+  onCheckedChange,
+  props,
+}: {
+  label: string;
+  name: "showCashOffer" | "showInstallments";
+  onCheckedChange?: (checked: boolean) => void;
+  props: ProductPromptGenerateViewProps;
+}) {
+  return (
+    <FormField
+      control={props.generatePromptForm.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <div className="flex items-center justify-between gap-4">
+            <FormLabel className="text-xs font-bold text-white">{label}</FormLabel>
+            <FormControl>
+              <Switch
+                checked={field.value}
+                onCheckedChange={(checked) => {
+                  field.onChange(checked);
+                  onCheckedChange?.(checked);
+                }}
+                className="data-[state=checked]:bg-blue-600"
+              />
+            </FormControl>
+          </div>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function CalculatedPricePreview({
+  label,
+  valueCents,
+}: {
+  label: string;
+  valueCents: number | null;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3 rounded-[4px] border border-neutral-800 bg-neutral-950 px-3 py-2">
+      <span className="text-[10px] font-bold uppercase tracking-wider text-neutral-500">
+        {label}
+      </span>
+      <span className="text-sm font-bold text-white">
+        {valueCents === null ? "-" : formatProductPromptBrl(valueCents)}
+      </span>
+    </div>
+  );
+}
diff --git a/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate.model.ts b/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate.model.ts
new file mode 100644
index 0000000..5f55ef1
--- /dev/null
+++ b/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate.model.ts
@@ -0,0 +1,122 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useBreadcrumb } from "@/components/breadcrumb";
+import { useSelectedWarehouse } from "@/hooks/use-selected-warehouse";
+import {
+  browserProductPromptActions,
+  createGeneratePromptHandler,
+  findLatestProductPromptBatch,
+  findSavedProductPromptById,
+  installProductPromptShareReturnRecovery,
+  PRODUCT_PROMPT_POSITION_OPTIONS,
+  useProductPromptBatchesRequest,
+  useProductPromptCompanyRequest,
+  useProductPromptGenerateForm,
+  useProductPromptListRequest,
+  useProductPromptProductRequest,
+} from "../product-prompts.model";
+import type { ProductBatch } from "../../products-detail.types";
+import type {
+  ProductPromptGenerateViewProps,
+  SavedProductImagePrompt,
+  UseProductPromptsModelDependencies,
+} from "../product-prompts.types";
+
+interface ProductPromptGenerateRequests {
+  batches: ProductBatch[];
+  companyLogoUrl: string | null;
+  error: Error | null;
+  isLoading: boolean;
+  product: ProductPromptGenerateViewProps["product"];
+  productImageUrl: string | null;
+  prompts: SavedProductImagePrompt[];
+}
+
+export function useProductPromptGeneratePageModel(
+  productId: string,
+  promptId: string,
+  dependencies: UseProductPromptsModelDependencies = {}
+): ProductPromptGenerateViewProps {
+  const browserActions = dependencies.browserActions ?? browserProductPromptActions;
+  const [isPreparingShareImage, setIsPreparingShareImage] = useState(false);
+  const requests = useProductPromptGenerateRequests(productId);
+  const latestBatch = useLatestProductPromptBatch(requests.batches);
+  const selectedPrompt = useSelectedProductPrompt(promptId, requests.prompts);
+  const generatePromptForm = useProductPromptGenerateForm(latestBatch);
+  const closeGeneratePromptPage = useCloseProductPromptGeneratePage(productId);
+
+  useProductPromptGenerateBreadcrumb(productId);
+  useProductPromptShareReturnRecovery();
+
+  return {
+    product: requests.product,
+    selectedPrompt,
+    isLoading: requests.isLoading,
+    error: requests.error,
+    isPreparingShareImage,
+    pricePositionOptions: PRODUCT_PROMPT_POSITION_OPTIONS,
+    generatePromptForm,
+    closeGeneratePromptPage,
+    submitGeneratePrompt: createGeneratePromptHandler({
+      browserActions,
+      companyLogoUrl: requests.companyLogoUrl,
+      productImageUrl: requests.productImageUrl,
+      selectedPrompt,
+      setIsPreparingShareImage,
+      shareReturnUrl: `/products/${productId}/prompts`,
+    }),
+  };
+}
+
+function useProductPromptGenerateRequests(
+  productId: string
+): ProductPromptGenerateRequests {
+  const { warehouseId } = useSelectedWarehouse();
+  const productRequest = useProductPromptProductRequest(productId);
+  const companyRequest = useProductPromptCompanyRequest();
+  const promptsRequest = useProductPromptListRequest();
+  const batchesRequest = useProductPromptBatchesRequest(productId, warehouseId);
+
+  return {
+    product: productRequest.product,
+    prompts: promptsRequest.prompts,
+    batches: batchesRequest.batches,
+    isLoading: productRequest.isLoading || promptsRequest.isLoading,
+    error: productRequest.error ?? promptsRequest.error,
+    companyLogoUrl: companyRequest.logoUrl,
+    productImageUrl: productRequest.product?.imageUrl ?? null,
+  };
+}
+
+function useLatestProductPromptBatch(batches: ProductBatch[]): ProductBatch | null {
+  return useMemo(() => findLatestProductPromptBatch(batches), [batches]);
+}
+
+function useSelectedProductPrompt(
+  promptId: string,
+  prompts: SavedProductImagePrompt[]
+): SavedProductImagePrompt | null {
+  return useMemo(() => {
+    return findSavedProductPromptById(prompts, promptId);
+  }, [promptId, prompts]);
+}
+
+function useCloseProductPromptGeneratePage(productId: string): () => void {
+  const router = useRouter();
+  return useCallback((): void => {
+    router.push(`/products/${productId}/prompts`);
+  }, [productId, router]);
+}
+
+function useProductPromptGenerateBreadcrumb(productId: string): void {
+  useBreadcrumb({
+    title: "Gerar imagem",
+    backUrl: `/products/${productId}/prompts`,
+  });
+}
+
+function useProductPromptShareReturnRecovery(): void {
+  useEffect(() => installProductPromptShareReturnRecovery(), []);
+}
diff --git a/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate.schema.ts b/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate.schema.ts
new file mode 100644
index 0000000..ab64540
--- /dev/null
+++ b/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate.schema.ts
@@ -0,0 +1,4 @@
+export {
+  productPromptGenerateSchema,
+  type ProductPromptGenerateFormData,
+} from "../product-prompts.schema";
diff --git a/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate.types.ts b/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate.types.ts
new file mode 100644
index 0000000..7f9b3cb
--- /dev/null
+++ b/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate.types.ts
@@ -0,0 +1 @@
+export type { ProductPromptGenerateViewProps } from "../product-prompts.types";
diff --git a/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate.view.tsx b/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate.view.tsx
new file mode 100644
index 0000000..fa49e3d
--- /dev/null
+++ b/app/(pages)/products/[id]/prompts/[promptId]/product-prompt-generate.view.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import Image from "next/image";
+import { ArrowLeft, BadgePercent } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ErrorState } from "@/components/ui/error-state";
+import { FormSection } from "@/components/ui/form-section";
+import { Form } from "@/components/ui/form";
+import { LoadingState } from "@/components/ui/loading-state";
+import { PageContainer } from "@/components/ui/page-container";
+import { PageHeader } from "@/components/ui/page-header";
+import { ProductPromptFormFooter } from "../product-prompts.form-footer";
+import type { ProductPromptGenerateViewProps } from "./product-prompt-generate.types";
+import type { SavedProductImagePrompt } from "../product-prompts.types";
+import { GeneratePromptPriceFields } from "./product-prompt-generate-price-fields.view";
+
+export function ProductPromptGenerateView(
+  props: ProductPromptGenerateViewProps
+) {
+  if (props.isLoading) {
+    return (
+      <PageContainer>
+        <LoadingState message="Carregando prompt..." />
+      </PageContainer>
+    );
+  }
+
+  if (props.error || !props.product || !props.selectedPrompt) {
+    return (
+      <PageContainer>
+        <ErrorState
+          title="Prompt não encontrado"
+          description="Não foi possível carregar os dados para gerar esta arte."
+        />
+      </PageContainer>
+    );
+  }
+
+  return <ProductPromptGenerateContent props={props} />;
+}
+
+function ProductPromptGenerateContent({
+  props,
+}: {
+  props: ProductPromptGenerateViewProps;
+}) {
+  return (
+    <PageContainer>
+      <PageHeader
+        title="Gerar imagem"
+        subtitle={props.product?.name}
+        actions={<ProductPromptGenerateBackButton props={props} />}
+      />
+      <div className="mx-auto max-w-3xl">
+        <ProductPromptGenerateForm props={props} />
+      </div>
+    </PageContainer>
+  );
+}
+
+function ProductPromptGenerateBackButton({
+  props,
+}: {
+  props: ProductPromptGenerateViewProps;
+}) {
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      onClick={props.closeGeneratePromptPage}
+      className="h-10 w-full rounded-[4px] border-neutral-800 bg-transparent text-xs font-bold uppercase tracking-wide text-neutral-300 hover:bg-neutral-900 md:w-auto"
+    >
+      <ArrowLeft className="mr-2 size-4" />
+      Voltar
+    </Button>
+  );
+}
+
+function ProductPromptGenerateForm({
+  props,
+}: {
+  props: ProductPromptGenerateViewProps;
+}) {
+  return (
+    <Form {...props.generatePromptForm}>
+      <form
+        onSubmit={props.generatePromptForm.handleSubmit(props.submitGeneratePrompt)}
+        className="space-y-5"
+      >
+        <SelectedPromptSummary prompt={props.selectedPrompt} />
+        <FormSection icon={BadgePercent} title="Preço da arte">
+          <GeneratePromptPriceFields props={props} />
+        </FormSection>
+        <ProductPromptGenerateFooter props={props} />
+      </form>
+    </Form>
+  );
+}
+
+function ProductPromptGenerateFooter({
+  props,
+}: {
+  props: ProductPromptGenerateViewProps;
+}) {
+  const isSubmitting =
+    props.generatePromptForm.formState.isSubmitting || props.isPreparingShareImage;
+  const loadingLabel = props.isPreparingShareImage
+    ? "Preparando imagem"
+    : "Gerando imagem";
+
+  return (
+    <ProductPromptFormFooter
+      cancelLabel="Cancelar"
+      submitLabel="Gerar imagem"
+      isSubmitting={isSubmitting}
+      loadingLabel={loadingLabel}
+      onCancel={props.closeGeneratePromptPage}
+    />
+  );
+}
+
+function SelectedPromptSummary({
+  prompt,
+}: {
+  prompt: SavedProductImagePrompt | null;
+}) {
+  if (!prompt) return null;
+
+  return (
+    <div className="flex gap-3 rounded-[4px] border border-neutral-800 bg-neutral-950/40 p-3">
+      <div className="relative size-20 shrink-0 overflow-hidden rounded-[4px] bg-neutral-900">
+        <Image
+          src={prompt.imageUrl}
+          alt={prompt.name}
+          fill
+          unoptimized
+          className="object-cover"
+        />
+      </div>
+      <div className="min-w-0">
+        <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+          Prompt selecionado
+        </p>
+        <p className="mt-1 truncate text-sm font-bold text-white">{prompt.name}</p>
+        <p className="mt-1 line-clamp-3 text-xs text-neutral-500">
+          {prompt.prompt}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/app/(pages)/products/[id]/prompts/page.client.tsx b/app/(pages)/products/[id]/prompts/page.client.tsx
new file mode 100644
index 0000000..3c9f69b
--- /dev/null
+++ b/app/(pages)/products/[id]/prompts/page.client.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { useProductPromptsModel } from "./product-prompts.model";
+import { ProductPromptsView } from "./product-prompts.view";
+
+export function PageClient() {
+  const params = useParams();
+  const productId = params.id as string;
+  const model = useProductPromptsModel(productId);
+
+  return <ProductPromptsView {...model} />;
+}
diff --git a/app/(pages)/products/[id]/prompts/page.tsx b/app/(pages)/products/[id]/prompts/page.tsx
new file mode 100644
index 0000000..b71c60c
--- /dev/null
+++ b/app/(pages)/products/[id]/prompts/page.tsx
@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+import { PageClient } from "./page.client";
+
+export const metadata: Metadata = {
+  title: "Artes com IA | StockShift",
+  description: "Crie prompts e gere imagens de produto com preço.",
+};
+
+export default function Page() {
+  return <PageClient />;
+}
diff --git a/app/(pages)/products/[id]/prompts/product-prompts-browser.model.test.ts b/app/(pages)/products/[id]/prompts/product-prompts-browser.model.test.ts
new file mode 100644
index 0000000..ba8d036
--- /dev/null
+++ b/app/(pages)/products/[id]/prompts/product-prompts-browser.model.test.ts
@@ -0,0 +1,456 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  copyProductPromptText,
+  installProductPromptShareReturnRecovery,
+  shareProductPromptAssets,
+} from "./product-prompts.model";
+
+const originalProductPromptCreateObjectUrl = URL.createObjectURL;
+const originalProductPromptRevokeObjectUrl = URL.revokeObjectURL;
+
+interface ProductPromptImageFetchOptions {
+  logoStatus?: number;
+  logoType?: string;
+  productType?: string;
+  productStatus?: number;
+}
+
+function createProductPromptImageFetch(
+  options: ProductPromptImageFetchOptions = {}
+) {
+  return vi.fn(async (input: RequestInfo | URL): Promise<Response> => {
+    const requestUrl = String(input);
+    const isLogoRequest = requestUrl.includes("logo");
+    const status = isLogoRequest
+      ? options.logoStatus ?? 200
+      : options.productStatus ?? 200;
+    if (status !== 200) return new Response(null, { status });
+    const imageType = isLogoRequest
+      ? options.logoType ?? "image/png"
+      : options.productType ?? "image/png";
+    return createProductPromptImageResponse(imageType);
+  });
+}
+
+function createProductPromptImageResponse(imageType: string): Response {
+  return new Response(new Blob(["img"], { type: imageType }), {
+    headers: { "Content-Type": imageType },
+    status: 200,
+  });
+}
+
+function getFirstProductPromptShareData(calls: unknown[][]): ShareData {
+  const firstCall = calls[0];
+  if (!firstCall) {
+    throw new Error(`Invalid share call count "${calls.length}". Expected one call.`);
+  }
+  const shareData = firstCall[0];
+  if (!shareData || typeof shareData !== "object") {
+    throw new Error(`Invalid share payload "${String(shareData)}". Expected object.`);
+  }
+  return shareData as ShareData;
+}
+
+async function waitForProductPromptShareCall(
+  shareMock: ReturnType<typeof vi.fn>
+): Promise<void> {
+  for (let attempt = 0; attempt < 20; attempt += 1) {
+    if (shareMock.mock.calls.length > 0) return;
+    await Promise.resolve();
+  }
+  throw new Error("Expected Share Sheet to be called.");
+}
+
+type ProductPromptCanvasMock = ReturnType<typeof vi.fn>;
+
+interface ProductPromptFakeCanvasContext {
+  beginPath: ProductPromptCanvasMock;
+  closePath: ProductPromptCanvasMock;
+  drawImage: ProductPromptCanvasMock;
+  fill: ProductPromptCanvasMock;
+  fillRect: ProductPromptCanvasMock;
+  fillStyle: string | CanvasGradient | CanvasPattern;
+  lineTo: ProductPromptCanvasMock;
+  moveTo: ProductPromptCanvasMock;
+  quadraticCurveTo: ProductPromptCanvasMock;
+  restore: ProductPromptCanvasMock;
+  save: ProductPromptCanvasMock;
+}
+
+function stubProductPromptCanvasPngExport(): ProductPromptFakeCanvasContext {
+  const originalCreateElement = document.createElement.bind(document);
+  const fakeContext = createFakeProductPromptCanvasContext();
+  const fakeCanvas = createFakeProductPromptCanvas(fakeContext);
+  vi.spyOn(document, "createElement").mockImplementation((tagName: string) => {
+    if (tagName === "canvas") return fakeCanvas as unknown as HTMLCanvasElement;
+    return originalCreateElement(tagName);
+  });
+  vi.stubGlobal("Image", FakeProductPromptImage);
+  stubProductPromptObjectUrl();
+  return fakeContext;
+}
+
+function createFakeProductPromptCanvasContext(): ProductPromptFakeCanvasContext {
+  return {
+    beginPath: vi.fn(),
+    closePath: vi.fn(),
+    drawImage: vi.fn(),
+    fill: vi.fn(),
+    fillRect: vi.fn(),
+    fillStyle: "",
+    lineTo: vi.fn(),
+    moveTo: vi.fn(),
+    quadraticCurveTo: vi.fn(),
+    restore: vi.fn(),
+    save: vi.fn(),
+  };
+}
+
+function createFakeProductPromptCanvas(fakeContext: ProductPromptFakeCanvasContext) {
+  return {
+    width: 0,
+    height: 0,
+    getContext: vi.fn(() => fakeContext),
+    toBlob: vi.fn((callback: BlobCallback, type?: string) => {
+      callback(new Blob(["png"], { type: type ?? "image/png" }));
+    }),
+  };
+}
+
+class FakeProductPromptImage {
+  onload: (() => void) | null = null;
+  onerror: (() => void) | null = null;
+  width = 12;
+  height = 8;
+  naturalWidth = 12;
+  naturalHeight = 8;
+
+  set src(_value: string) {
+    this.onload?.();
+  }
+}
+
+function stubProductPromptObjectUrl(): void {
+  Object.defineProperty(URL, "createObjectURL", {
+    configurable: true,
+    value: vi.fn(() => "blob:product-prompt-image"),
+  });
+  Object.defineProperty(URL, "revokeObjectURL", {
+    configurable: true,
+    value: vi.fn(),
+  });
+}
+
+function stubProductPromptIosStandaloneMode(): () => void {
+  const restorers = [
+    defineProductPromptNavigatorValue("userAgent", "Mozilla/5.0 (iPhone)"),
+    defineProductPromptNavigatorValue("platform", "iPhone"),
+    defineProductPromptNavigatorValue("maxTouchPoints", 5),
+    defineProductPromptNavigatorValue("standalone", true),
+  ];
+  return () => restorers.forEach((restore) => restore());
+}
+
+function defineProductPromptNavigatorValue(
+  key: string,
+  value: unknown
+): () => void {
+  const descriptor = Object.getOwnPropertyDescriptor(navigator, key);
+  Object.defineProperty(navigator, key, { configurable: true, value });
+  return () => {
+    if (descriptor) {
+      Object.defineProperty(navigator, key, descriptor);
+      return;
+    }
+    Reflect.deleteProperty(navigator, key);
+  };
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+  sessionStorage.clear();
+  restoreProductPromptObjectUrl("createObjectURL", originalProductPromptCreateObjectUrl);
+  restoreProductPromptObjectUrl("revokeObjectURL", originalProductPromptRevokeObjectUrl);
+});
+
+type ProductPromptObjectUrlFunction =
+  | typeof URL.createObjectURL
+  | typeof URL.revokeObjectURL;
+
+function restoreProductPromptObjectUrl(
+  key: "createObjectURL" | "revokeObjectURL",
+  value: ProductPromptObjectUrlFunction
+): void {
+  if (typeof value === "function") {
+    Object.defineProperty(URL, key, { configurable: true, value });
+    return;
+  }
+  Reflect.deleteProperty(URL, key);
+}
+
+describe("product prompt browser helpers", () => {
+  it("copia o prompt em texto para a área de transferência", async () => {
+    const clipboardWriteText = vi.fn(async () => undefined);
+    Object.defineProperty(navigator, "clipboard", {
+      configurable: true,
+      value: { writeText: clipboardWriteText },
+    });
+
+    const result = await copyProductPromptText({ promptText: "Prompt final" });
+
+    expect(result).toBe("text");
+    expect(clipboardWriteText).toHaveBeenCalledWith("Prompt final");
+  });
+
+  it("retorna unsupported quando o navegador não copia texto", async () => {
+    Object.defineProperty(navigator, "clipboard", {
+      configurable: true,
+      value: undefined,
+    });
+
+    const result = await copyProductPromptText({ promptText: "Prompt final" });
+
+    expect(result).toBe("unsupported");
+  });
+
+  it("retorna unsupported quando o Share Sheet não está disponível", async () => {
+    Object.defineProperty(navigator, "share", {
+      configurable: true,
+      value: undefined,
+    });
+
+    const result = await shareProductPromptAssets({
+      productImageUrl: "https://example.com/product.png",
+    });
+
+    expect(result).toBe("unsupported");
+  });
+
+  it("bloqueia compartilhamento de arquivo no iOS PWA para evitar travamento", async () => {
+    const restoreStandaloneMode = stubProductPromptIosStandaloneMode();
+    const fetchMock = createProductPromptImageFetch();
+    const shareMock = vi.fn(async () => undefined);
+    vi.stubGlobal("fetch", fetchMock);
+    Object.defineProperty(navigator, "share", {
+      configurable: true,
+      value: shareMock,
+    });
+
+    try {
+      const result = await shareProductPromptAssets({
+        productImageUrl: "https://example.com/product.png",
+      });
+
+      expect(result).toBe("ios-pwa-file-share-blocked");
+      expect(fetchMock).not.toHaveBeenCalled();
+      expect(shareMock).not.toHaveBeenCalled();
+    } finally {
+      restoreStandaloneMode();
+    }
+  });
+
+  it("compartilha somente a imagem do produto pelo Share Sheet", async () => {
+    const shareMock = vi.fn(async () => undefined);
+    vi.stubGlobal("fetch", createProductPromptImageFetch());
+    Object.defineProperty(navigator, "share", {
+      configurable: true,
+      value: shareMock,
+    });
+
+    const result = await shareProductPromptAssets({
+      productImageUrl: "https://example.com/product.png",
+    });
+
+    expect(result).toBe("shared");
+    const shareData = getFirstProductPromptShareData(shareMock.mock.calls);
+    expect(shareData.text).toBeUndefined();
+    expect(shareData.files).toHaveLength(1);
+    expect(shareData.files?.[0]?.name).toBe("produto.png");
+  });
+
+  it("monta PNG combinado localmente antes de compartilhar", async () => {
+    const shareMock = vi.fn(async () => undefined);
+    const fetchMock = createProductPromptImageFetch();
+    const fakeContext = stubProductPromptCanvasPngExport();
+    vi.stubGlobal("fetch", fetchMock);
+    Object.defineProperty(navigator, "share", {
+      configurable: true,
+      value: shareMock,
+    });
+
+    const result = await shareProductPromptAssets({
+      companyLogoUrl: "https://example.com/logo.png",
+      productImageUrl: "https://example.com/product.png",
+    });
+
+    expect(result).toBe("shared");
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+    expect(String(fetchMock.mock.calls[0]?.[0])).toBe(
+      "https://example.com/product.png"
+    );
+    expect(String(fetchMock.mock.calls[1]?.[0])).toBe("https://example.com/logo.png");
+    expect(fakeContext.fillStyle).toBe("#000000");
+    expect(fakeContext.fillRect).toHaveBeenCalledWith(0, 0, 12, 96);
+    expect(fakeContext.drawImage).toHaveBeenCalledTimes(2);
+    expect(fakeContext.drawImage).toHaveBeenNthCalledWith(
+      2,
+      expect.anything(),
+      0,
+      96,
+      12,
+      8
+    );
+    const shareData = getFirstProductPromptShareData(shareMock.mock.calls);
+    expect(shareData.files?.[0]?.name).toBe("produto-com-logo.jpg");
+    expect(shareData.files?.[0]?.type).toBe("image/jpeg");
+  });
+
+  it("falha sem compartilhar produto puro quando a logo não pode ser preparada", async () => {
+    const shareMock = vi.fn(async () => undefined);
+    const fetchMock = createProductPromptImageFetch({
+      logoStatus: 404,
+    });
+    vi.stubGlobal("fetch", fetchMock);
+    Object.defineProperty(navigator, "share", {
+      configurable: true,
+      value: shareMock,
+    });
+
+    const result = await shareProductPromptAssets({
+      companyLogoUrl: "https://example.com/logo.png",
+      productImageUrl: "https://example.com/product.png",
+    });
+
+    expect(result).toBe("brand-image-failed");
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+    expect(shareMock).not.toHaveBeenCalled();
+  });
+
+  it("ignora canShare falso e tenta abrir o Share Sheet com uma imagem", async () => {
+    const shareMock = vi.fn(async () => undefined);
+    vi.stubGlobal("fetch", createProductPromptImageFetch());
+    Object.defineProperty(navigator, "share", {
+      configurable: true,
+      value: shareMock,
+    });
+    Object.defineProperty(navigator, "canShare", {
+      configurable: true,
+      value: vi.fn(() => false),
+    });
+
+    const result = await shareProductPromptAssets({
+      productImageUrl: "https://example.com/product.png",
+    });
+
+    expect(result).toBe("shared");
+    expect(shareMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("destrava quando o Share Sheet do iOS fica pendente ao sair do PWA", async () => {
+    const shareMock = vi.fn(() => new Promise<void>(() => undefined));
+    vi.stubGlobal("fetch", createProductPromptImageFetch());
+    Object.defineProperty(navigator, "share", {
+      configurable: true,
+      value: shareMock,
+    });
+
+    const resultPromise = shareProductPromptAssets({
+      productImageUrl: "https://example.com/product.png",
+    });
+    await waitForProductPromptShareCall(shareMock);
+
+    window.dispatchEvent(new Event("pagehide"));
+
+    await expect(resultPromise).resolves.toBe("shared");
+    expect(shareMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("limpa travas de toque de uma recuperação legada ao voltar para a página", () => {
+    sessionStorage.setItem(
+      "stockshift:product-prompt-share-return",
+      JSON.stringify({ reloadAttempted: true, startedAt: Date.now() })
+    );
+    document.body.style.pointerEvents = "none";
+    document.body.style.overflow = "hidden";
+    document.documentElement.style.touchAction = "none";
+
+    const cleanupRecovery = installProductPromptShareReturnRecovery();
+    window.dispatchEvent(new Event("pageshow"));
+
+    expect(document.body.style.pointerEvents).toBe("");
+    expect(document.body.style.overflow).toBe("");
+    expect(document.documentElement.style.touchAction).toBe("");
+    expect(sessionStorage.getItem("stockshift:product-prompt-share-return")).toBeNull();
+    cleanupRecovery();
+  });
+
+  it("compõe localmente com imagens R2 buscadas pelo proxy de CORS", async () => {
+    const shareMock = vi.fn(async () => undefined);
+    const fetchMock = createProductPromptImageFetch();
+    stubProductPromptCanvasPngExport();
+    vi.stubGlobal("fetch", fetchMock);
+    Object.defineProperty(navigator, "share", {
+      configurable: true,
+      value: shareMock,
+    });
+
+    const result = await shareProductPromptAssets({
+      companyLogoUrl: "https://pub-test.r2.dev/company-logos/logo.png",
+      productImageUrl: "https://pub-test.r2.dev/products/product.png",
+    });
+
+    expect(result).toBe("shared");
+    expect(String(fetchMock.mock.calls[0]?.[0])).toContain(
+      "/api/product-prompt-assets/image?"
+    );
+    expect(String(fetchMock.mock.calls[0]?.[0])).toContain(
+      "url=https%3A%2F%2Fpub-test.r2.dev%2Fproducts%2Fproduct.png"
+    );
+    expect(String(fetchMock.mock.calls[1]?.[0])).toContain(
+      "/api/product-prompt-assets/image?"
+    );
+    expect(String(fetchMock.mock.calls[1]?.[0])).toContain(
+      "url=https%3A%2F%2Fpub-test.r2.dev%2Fcompany-logos%2Flogo.png"
+    );
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+    const shareData = getFirstProductPromptShareData(shareMock.mock.calls);
+    expect(shareData.files?.[0]?.name).toBe("produto-com-logo.jpg");
+    expect(shareData.files?.[0]?.type).toBe("image/jpeg");
+  });
+
+  it("converte imagem webp para jpeg comprimido antes de abrir o Share Sheet", async () => {
+    const shareMock = vi.fn(async () => undefined);
+    vi.stubGlobal("fetch", createProductPromptImageFetch({ productType: "image/webp" }));
+    stubProductPromptCanvasPngExport();
+    Object.defineProperty(navigator, "share", {
+      configurable: true,
+      value: shareMock,
+    });
+
+    const result = await shareProductPromptAssets({
+      productImageUrl: "https://example.com/product.webp",
+    });
+
+    expect(result).toBe("shared");
+    const shareData = getFirstProductPromptShareData(shareMock.mock.calls);
+    expect(shareData.files?.[0]?.name).toBe("produto.jpg");
+    expect(shareData.files?.[0]?.type).toBe("image/jpeg");
+  });
+
+  it("falha quando a imagem do produto não pode ser preparada", async () => {
+    const shareMock = vi.fn(async () => undefined);
+    vi.stubGlobal("fetch", createProductPromptImageFetch({ productStatus: 404 }));
+    Object.defineProperty(navigator, "share", {
+      configurable: true,
+      value: shareMock,
+    });
+
+    const result = await shareProductPromptAssets({
+      productImageUrl: "https://example.com/product.png",
+    });
+
+    expect(result).toBe("product-image-failed");
+    expect(shareMock).not.toHaveBeenCalled();
+  });
+});
diff --git a/app/(pages)/products/[id]/prompts/product-prompts.clipboard.ts b/app/(pages)/products/[id]/prompts/product-prompts.clipboard.ts
new file mode 100644
index 0000000..20d582b
--- /dev/null
+++ b/app/(pages)/products/[id]/prompts/product-prompts.clipboard.ts
@@ -0,0 +1,948 @@
+import type {
+  ProductPromptAssetShareInput,
+  ProductPromptAssetShareResult,
+  ProductPromptTextCopyInput,
+  ProductPromptTextCopyResult,
+} from "./product-prompts.types";
+
+type ProductPromptDrawableImage = HTMLImageElement | ImageBitmap;
+
+const PRODUCT_PROMPT_CANVAS_JPEG_QUALITY = 0.82;
+const PRODUCT_PROMPT_CANVAS_MAX_LONG_EDGE = 1600;
+const PRODUCT_PROMPT_SHARE_RECOVERY_TIMEOUT_MS = 15000;
+const PRODUCT_PROMPT_SHARE_RETURN_FALLBACK_MS = 2500;
+const PRODUCT_PROMPT_SHARE_RETURN_MAX_AGE_MS = 10 * 60 * 1000;
+const PRODUCT_PROMPT_SHARE_RETURN_RELOAD_TIMEOUT_MS = 120000;
+const PRODUCT_PROMPT_SHARE_RETURN_STORAGE_KEY =
+  "stockshift:product-prompt-share-return";
+const PRODUCT_PROMPT_SHARE_RETURN_URL_PARAM = "ss_share_return";
+let productPromptShareReturnReloadCleanup: (() => void) | null = null;
+
+interface ProductPromptShareReturnGuard {
+  cleanup: () => void;
+  markExternalAppOpened: () => void;
+  reloadAfterReturn: () => void;
+}
+
+interface ProductPromptShareReturnListenerInput {
+  markExternalAppOpened: () => void;
+  reloadOnce: () => void;
+}
+
+interface ProductPromptShareReturnDomListeners {
+  handleBlur: () => void;
+  handlePageHide: () => void;
+  handleVisibilityChange: () => void;
+  reloadOnce: () => void;
+}
+
+interface ProductPromptShareReturnState {
+  fallbackTimeoutId?: ReturnType<typeof globalThis.setTimeout>;
+  hasExternalAppSignal: boolean;
+  hasReloaded: boolean;
+}
+
+interface ProductPromptShareReturnSession {
+  reloadAttempted: boolean;
+  returnUrl?: string;
+  startedAt: number;
+}
+
+interface ProductPromptShareRecoveryWindow extends Window {
+  __stockShiftProductPromptHardReload?: (reloadUrl: string) => void;
+}
+
+export async function copyProductPromptText(
+  input: ProductPromptTextCopyInput
+): Promise<ProductPromptTextCopyResult> {
+  if (!canWriteProductPromptClipboardText()) return "unsupported";
+  try {
+    await globalThis.navigator.clipboard.writeText(input.promptText);
+    return "text";
+  } catch {
+    return "copy-failed";
+  }
+}
+
+export async function shareProductPromptAssets(
+  input: ProductPromptAssetShareInput
+): Promise<ProductPromptAssetShareResult> {
+  if (shouldUseProductPromptIosPwaShareFallback()) {
+    return "ios-pwa-file-share-blocked";
+  }
+  if (!canShareProductPromptAssets()) return "unsupported";
+  const shareFileResult = await buildProductPromptShareFile(input);
+  if (shareFileResult.result !== "ready") return shareFileResult.result;
+  return callProductPromptShare([shareFileResult.file], input.returnUrl);
+}
+
+export function installProductPromptShareReturnRecovery(): () => void {
+  if (typeof globalThis.window === "undefined") return () => undefined;
+  const recoverVisiblePage = () => {
+    if (globalThis.document?.visibilityState === "hidden") return;
+    recoverProductPromptShareReturnState();
+  };
+
+  const mountRecoveryTimeoutId = globalThis.setTimeout(
+    recoverProductPromptShareReturnState,
+    0
+  );
+  globalThis.window.addEventListener("pageshow", recoverVisiblePage);
+  globalThis.window.addEventListener("focus", recoverVisiblePage);
+  globalThis.document?.addEventListener("visibilitychange", recoverVisiblePage);
+
+  return () => {
+    globalThis.clearTimeout(mountRecoveryTimeoutId);
+    globalThis.window.removeEventListener("pageshow", recoverVisiblePage);
+    globalThis.window.removeEventListener("focus", recoverVisiblePage);
+    globalThis.document?.removeEventListener(
+      "visibilitychange",
+      recoverVisiblePage
+    );
+  };
+}
+
+async function buildProductPromptShareFile(
+  input: ProductPromptAssetShareInput
+): Promise<ProductPromptShareFileBuildResult> {
+  const productImageBlob = await fetchProductPromptImageBlob(input.productImageUrl);
+  if (!productImageBlob) return { result: "product-image-failed" };
+  if (!input.companyLogoUrl) {
+    const file = await normalizeProductPromptShareFile(productImageBlob, "produto");
+    return { file, result: "ready" };
+  }
+  const companyLogoBlob = await fetchProductPromptImageBlob(input.companyLogoUrl);
+  if (!companyLogoBlob) return { result: "brand-image-failed" };
+  const combinedImageBlob = await composeProductPromptImageWithLogo(
+    productImageBlob,
+    companyLogoBlob
+  );
+  if (!combinedImageBlob) return { result: "brand-image-failed" };
+  return {
+    file: buildProductPromptImageFile(
+      combinedImageBlob,
+      "produto-com-logo",
+      "image/jpeg"
+    ),
+    result: "ready",
+  };
+}
+
+async function normalizeProductPromptShareFile(
+  imageBlob: Blob,
+  filePrefix: string
+): Promise<File> {
+  const imageType = imageBlob.type || "image/png";
+  if (isProductPromptShareSafeImageType(imageType)) {
+    return buildProductPromptImageFile(imageBlob, filePrefix, imageType);
+  }
+  return convertProductPromptImageBlobToJpeg(imageBlob, filePrefix);
+}
+
+function buildProductPromptImageFile(
+  imageBlob: Blob,
+  filePrefix: string,
+  imageType: string
+): File {
+  return new File([imageBlob], buildProductPromptImageFileName(filePrefix, imageType), {
+    type: imageType,
+  });
+}
+
+function isProductPromptShareSafeImageType(imageType: string): boolean {
+  return imageType === "image/png" || imageType === "image/jpeg";
+}
+
+async function fetchProductPromptImageBlob(imageUrl: string): Promise<Blob | null> {
+  try {
+    const response = await fetch(resolveProductPromptImageFetchUrl(imageUrl), {
+      cache: "no-store",
+    });
+    if (!response.ok) return null;
+    const imageBlob = await response.blob();
+    return imageBlob.type.startsWith("image/") ? imageBlob : null;
+  } catch {
+    return null;
+  }
+}
+
+type ProductPromptShareFileBuildResult =
+  | { file: File; result: "ready" }
+  | { result: "brand-image-failed" | "product-image-failed" };
+
+function resolveProductPromptImageFetchUrl(imageUrl: string): string {
+  if (!shouldProxyProductPromptImageUrl(imageUrl)) return imageUrl;
+  const searchParams = new URLSearchParams({ url: imageUrl });
+  return `/api/product-prompt-assets/image?${searchParams.toString()}`;
+}
+
+function shouldProxyProductPromptImageUrl(imageUrl: string): boolean {
+  if (typeof globalThis.location === "undefined") return false;
+  const parsedUrl = parseProductPromptImageUrl(imageUrl);
+  if (!parsedUrl) return false;
+  return parsedUrl.origin !== globalThis.location.origin && isProductPromptR2Url(parsedUrl);
+}
+
+function parseProductPromptImageUrl(imageUrl: string): URL | null {
+  try {
+    return new URL(imageUrl, globalThis.location.href);
+  } catch {
+    return null;
+  }
+}
+
+function isProductPromptR2Url(imageUrl: URL): boolean {
+  return imageUrl.protocol === "https:" && imageUrl.hostname.endsWith(".r2.dev");
+}
+
+async function callProductPromptShare(
+  files: File[],
+  returnUrl?: string
+): Promise<ProductPromptAssetShareResult> {
+  const shareReturnGuard = createProductPromptShareReturnGuard(returnUrl);
+  const shareRecovery = createProductPromptShareRecovery(
+    shareReturnGuard.markExternalAppOpened
+  );
+  try {
+    return await Promise.race([
+      runProductPromptNativeShare(files, shareReturnGuard),
+      shareRecovery.promise,
+    ]);
+  } catch (error) {
+    shareReturnGuard.cleanup();
+    clearProductPromptShareReturnSession();
+    return getProductPromptShareFailure(error);
+  } finally {
+    shareRecovery.cleanup();
+  }
+}
+
+async function runProductPromptNativeShare(
+  files: File[],
+  shareReturnGuard: ProductPromptShareReturnGuard
+): Promise<ProductPromptAssetShareResult> {
+  await globalThis.navigator.share({ files });
+  shareReturnGuard.reloadAfterReturn();
+  return "shared";
+}
+
+function canWriteProductPromptClipboardText(): boolean {
+  return (
+    typeof globalThis.navigator !== "undefined" &&
+    typeof globalThis.navigator.clipboard?.writeText === "function"
+  );
+}
+
+function canShareProductPromptAssets(): boolean {
+  return (
+    typeof globalThis.navigator !== "undefined" &&
+    typeof globalThis.navigator.share === "function" &&
+    typeof File !== "undefined"
+  );
+}
+
+function createProductPromptShareRecovery(onExternalAppOpened: () => void): {
+  cleanup: () => void;
+  promise: Promise<ProductPromptAssetShareResult>;
+} {
+  if (typeof globalThis.window === "undefined") {
+    return {
+      cleanup: () => undefined,
+      promise: new Promise(() => undefined),
+    };
+  }
+
+  let timeoutId: ReturnType<typeof globalThis.setTimeout> | undefined;
+  let cleanup: () => void = () => undefined;
+  let hasFinished = false;
+  const promise = new Promise<ProductPromptAssetShareResult>((resolve) => {
+    const finish = (shouldReloadOnReturn: boolean) => {
+      if (hasFinished) return;
+      hasFinished = true;
+      cleanup();
+      if (shouldReloadOnReturn) onExternalAppOpened();
+      resolve("shared");
+    };
+    const handleVisibilityChange = () => {
+      if (globalThis.document?.visibilityState === "hidden") finish(true);
+    };
+    const handlePageHide = () => finish(true);
+
+    cleanup = () => {
+      globalThis.document?.removeEventListener(
+        "visibilitychange",
+        handleVisibilityChange
+      );
+      globalThis.window.removeEventListener("pagehide", handlePageHide);
+      if (timeoutId) globalThis.clearTimeout(timeoutId);
+      timeoutId = undefined;
+    };
+
+    globalThis.document?.addEventListener(
+      "visibilitychange",
+      handleVisibilityChange
+    );
+    globalThis.window.addEventListener("pagehide", handlePageHide, {
+      once: true,
+    });
+    timeoutId = globalThis.setTimeout(
+      () => finish(false),
+      PRODUCT_PROMPT_SHARE_RECOVERY_TIMEOUT_MS
+    );
+  });
+
+  return { cleanup, promise };
+}
+
+function createProductPromptShareReturnGuard(
+  returnUrl?: string
+): ProductPromptShareReturnGuard {
+  if (!shouldReloadProductPromptAfterShareReturn()) {
+    return createInactiveProductPromptShareReturnGuard();
+  }
+  productPromptShareReturnReloadCleanup?.();
+  const state = createProductPromptShareReturnState();
+  let listenerCleanup: () => void = () => undefined;
+  const reloadOnce = () => reloadProductPromptShareReturnOnce(state, cleanupGuard);
+  const markExternalAppOpened = () =>
+    markProductPromptExternalAppOpened(state, reloadOnce, returnUrl);
+
+  function cleanupGuard(): void {
+    cleanupProductPromptShareReturnGuard(state, listenerCleanup, cleanupGuard);
+  }
+
+  listenerCleanup = listenForProductPromptShareReturn({
+    markExternalAppOpened,
+    reloadOnce,
+  });
+  productPromptShareReturnReloadCleanup = cleanupGuard;
+  return buildProductPromptShareReturnGuard(
+    cleanupGuard,
+    markExternalAppOpened,
+    reloadOnce
+  );
+}
+
+function createProductPromptShareReturnState(): ProductPromptShareReturnState {
+  return {
+    hasExternalAppSignal: false,
+    hasReloaded: false,
+  };
+}
+
+function markProductPromptExternalAppOpened(
+  state: ProductPromptShareReturnState,
+  reloadOnce: () => void,
+  returnUrl?: string
+): void {
+  state.hasExternalAppSignal = true;
+  ensureProductPromptShareReturnSession(returnUrl);
+  ensureProductPromptShareReturnFallback(state, reloadOnce);
+}
+
+function cleanupProductPromptShareReturnGuard(
+  state: ProductPromptShareReturnState,
+  listenerCleanup: () => void,
+  cleanupGuard: () => void
+): void {
+  listenerCleanup();
+  clearProductPromptShareReturnFallback(state);
+  if (productPromptShareReturnReloadCleanup !== cleanupGuard) return;
+  productPromptShareReturnReloadCleanup = null;
+}
+
+function buildProductPromptShareReturnGuard(
+  cleanup: () => void,
+  markExternalAppOpened: () => void,
+  reloadOnce: () => void
+): ProductPromptShareReturnGuard {
+  return {
+    cleanup,
+    markExternalAppOpened,
+    reloadAfterReturn: () =>
+      reloadProductPromptAfterNativeShareReturn(markExternalAppOpened, reloadOnce),
+  };
+}
+
+function reloadProductPromptAfterNativeShareReturn(
+  markExternalAppOpened: () => void,
+  reloadOnce: () => void
+): void {
+  markExternalAppOpened();
+  reloadOnce();
+}
+
+function createInactiveProductPromptShareReturnGuard(): ProductPromptShareReturnGuard {
+  return {
+    cleanup: () => undefined,
+    markExternalAppOpened: () => undefined,
+    reloadAfterReturn: () => undefined,
+  };
+}
+
+function reloadProductPromptShareReturnOnce(
+  state: ProductPromptShareReturnState,
+  cleanup: () => void
+): void {
+  if (!canReloadProductPromptShareReturn(state)) return;
+  state.hasReloaded = true;
+  cleanup();
+  recoverProductPromptShareReturnState();
+}
+
+function canReloadProductPromptShareReturn(
+  state: ProductPromptShareReturnState
+): boolean {
+  if (state.hasReloaded) return false;
+  if (globalThis.document?.visibilityState === "hidden") return false;
+  if (state.hasExternalAppSignal) return true;
+  return globalThis.document?.hasFocus?.() !== false;
+}
+
+function ensureProductPromptShareReturnFallback(
+  state: ProductPromptShareReturnState,
+  reloadOnce: () => void
+): void {
+  if (state.fallbackTimeoutId) return;
+  state.fallbackTimeoutId = globalThis.setTimeout(
+    reloadOnce,
+    PRODUCT_PROMPT_SHARE_RETURN_FALLBACK_MS
+  );
+}
+
+function clearProductPromptShareReturnFallback(
+  state: ProductPromptShareReturnState
+): void {
+  if (!state.fallbackTimeoutId) return;
+  globalThis.clearTimeout(state.fallbackTimeoutId);
+  state.fallbackTimeoutId = undefined;
+}
+
+function listenForProductPromptShareReturn(
+  input: ProductPromptShareReturnListenerInput
+): () => void {
+  const listeners = createProductPromptShareReturnDomListeners(input);
+  const timeoutId = globalThis.setTimeout(
+    cleanup,
+    PRODUCT_PROMPT_SHARE_RETURN_RELOAD_TIMEOUT_MS
+  );
+
+  function cleanup(): void {
+    removeProductPromptShareReturnListeners(listeners);
+    globalThis.clearTimeout(timeoutId);
+  }
+
+  addProductPromptShareReturnListeners(listeners);
+  return cleanup;
+}
+
+function createProductPromptShareReturnDomListeners(
+  input: ProductPromptShareReturnListenerInput
+): ProductPromptShareReturnDomListeners {
+  return {
+    handleBlur: input.markExternalAppOpened,
+    handlePageHide: input.markExternalAppOpened,
+    handleVisibilityChange: () => handleProductPromptShareVisibilityChange(input),
+    reloadOnce: input.reloadOnce,
+  };
+}
+
+function handleProductPromptShareVisibilityChange(
+  input: ProductPromptShareReturnListenerInput
+): void {
+  if (globalThis.document?.visibilityState === "hidden") {
+    input.markExternalAppOpened();
+    return;
+  }
+  input.reloadOnce();
+}
+
+function addProductPromptShareReturnListeners(
+  listeners: ProductPromptShareReturnDomListeners
+): void {
+  globalThis.document?.addEventListener(
+    "visibilitychange",
+    listeners.handleVisibilityChange
+  );
+  globalThis.window.addEventListener("pagehide", listeners.handlePageHide);
+  globalThis.window.addEventListener("blur", listeners.handleBlur);
+  globalThis.window.addEventListener("pageshow", listeners.reloadOnce, {
+    once: true,
+  });
+  globalThis.window.addEventListener("focus", listeners.reloadOnce, {
+    once: true,
+  });
+}
+
+function removeProductPromptShareReturnListeners(
+  listeners: ProductPromptShareReturnDomListeners
+): void {
+  globalThis.document?.removeEventListener(
+    "visibilitychange",
+    listeners.handleVisibilityChange
+  );
+  globalThis.window.removeEventListener("pagehide", listeners.handlePageHide);
+  globalThis.window.removeEventListener("blur", listeners.handleBlur);
+  globalThis.window.removeEventListener("pageshow", listeners.reloadOnce);
+  globalThis.window.removeEventListener("focus", listeners.reloadOnce);
+}
+
+function shouldReloadProductPromptAfterShareReturn(): boolean {
+  return shouldUseProductPromptIosPwaShareFallback();
+}
+
+function shouldUseProductPromptIosPwaShareFallback(): boolean {
+  return (
+    typeof globalThis.window !== "undefined" &&
+    typeof globalThis.navigator !== "undefined" &&
+    isProductPromptAppleTouchBrowser() &&
+    isProductPromptStandaloneApp()
+  );
+}
+
+function recoverProductPromptShareReturnState(): void {
+  const session = readProductPromptShareReturnSession();
+  if (!session) return;
+  resetProductPromptShareReturnInteractionLocks();
+  if (!shouldReloadProductPromptAfterShareReturn()) {
+    finishProductPromptShareReturnRecovery();
+    return;
+  }
+  if (shouldFinishProductPromptShareReturnRecovery(session)) {
+    finishProductPromptShareReturnRecovery();
+    return;
+  }
+  writeProductPromptShareReturnSession({
+    ...session,
+    reloadAttempted: true,
+  });
+  hardReloadProductPromptPageAfterShareReturn(session);
+}
+
+function ensureProductPromptShareReturnSession(returnUrl?: string): void {
+  if (readProductPromptShareReturnSession()) return;
+  writeProductPromptShareReturnSession({
+    reloadAttempted: false,
+    returnUrl,
+    startedAt: Date.now(),
+  });
+}
+
+function shouldFinishProductPromptShareReturnRecovery(
+  session: ProductPromptShareReturnSession
+): boolean {
+  const sessionAge = Date.now() - session.startedAt;
+  return (
+    session.reloadAttempted ||
+    sessionAge < 0 ||
+    sessionAge > PRODUCT_PROMPT_SHARE_RETURN_MAX_AGE_MS
+  );
+}
+
+function finishProductPromptShareReturnRecovery(): void {
+  clearProductPromptShareReturnSession();
+  removeProductPromptShareReturnUrlParam();
+  resetProductPromptShareReturnInteractionLocks();
+}
+
+function readProductPromptShareReturnSession(): ProductPromptShareReturnSession | null {
+  try {
+    const storedSession = globalThis.sessionStorage?.getItem(
+      PRODUCT_PROMPT_SHARE_RETURN_STORAGE_KEY
+    );
+    if (!storedSession) return null;
+    const parsedSession: unknown = JSON.parse(storedSession);
+    return isProductPromptShareReturnSession(parsedSession)
+      ? parsedSession
+      : null;
+  } catch {
+    return null;
+  }
+}
+
+function writeProductPromptShareReturnSession(
+  session: ProductPromptShareReturnSession
+): void {
+  try {
+    globalThis.sessionStorage?.setItem(
+      PRODUCT_PROMPT_SHARE_RETURN_STORAGE_KEY,
+      JSON.stringify(session)
+    );
+  } catch {
+    // Session storage is a best-effort recovery marker for iOS PWA handoff bugs.
+  }
+}
+
+function clearProductPromptShareReturnSession(): void {
+  try {
+    globalThis.sessionStorage?.removeItem(PRODUCT_PROMPT_SHARE_RETURN_STORAGE_KEY);
+  } catch {
+    // Nothing else can be done if storage is unavailable during recovery.
+  }
+}
+
+function isProductPromptShareReturnSession(
+  value: unknown
+): value is ProductPromptShareReturnSession {
+  if (!value || typeof value !== "object") return false;
+  const session = value as Partial<ProductPromptShareReturnSession>;
+  return (
+    typeof session.reloadAttempted === "boolean" &&
+    isOptionalProductPromptShareReturnUrl(session.returnUrl) &&
+    typeof session.startedAt === "number"
+  );
+}
+
+function isOptionalProductPromptShareReturnUrl(value: unknown): boolean {
+  return typeof value === "undefined" || typeof value === "string";
+}
+
+function resetProductPromptShareReturnInteractionLocks(): void {
+  if (typeof globalThis.document === "undefined") return;
+  resetProductPromptShareReturnElementLocks(globalThis.document.documentElement);
+  resetProductPromptShareReturnElementLocks(globalThis.document.body);
+  removeStaleProductPromptShareReturnOverlays();
+}
+
+function resetProductPromptShareReturnElementLocks(
+  element: HTMLElement | null
+): void {
+  if (!element) return;
+  element.style.pointerEvents = "";
+  element.style.overflow = "";
+  element.style.touchAction = "";
+  element.style.position = "";
+  element.style.top = "";
+  element.style.width = "";
+  element.removeAttribute("data-scroll-locked");
+}
+
+function removeStaleProductPromptShareReturnOverlays(): void {
+  const overlaySelector = [
+    "[data-slot='drawer-overlay']",
+    "[data-slot='dialog-overlay']",
+    "[data-vaul-drawer-overlay]",
+    "[data-radix-dialog-overlay]",
+  ].join(",");
+  globalThis.document
+    ?.querySelectorAll(overlaySelector)
+    .forEach((overlay) => overlay.remove());
+}
+
+function hardReloadProductPromptPageAfterShareReturn(
+  session: ProductPromptShareReturnSession
+): void {
+  const reloadUrl = buildProductPromptShareReturnReloadUrl(session);
+  const recoveryWindow = globalThis.window as ProductPromptShareRecoveryWindow;
+  if (typeof recoveryWindow.__stockShiftProductPromptHardReload === "function") {
+    recoveryWindow.__stockShiftProductPromptHardReload(reloadUrl);
+    return;
+  }
+  globalThis.window.location.replace(reloadUrl);
+}
+
+function buildProductPromptShareReturnReloadUrl(
+  session: ProductPromptShareReturnSession
+): string {
+  const reloadUrl = new URL(
+    session.returnUrl ?? globalThis.window.location.href,
+    globalThis.window.location.href
+  );
+  reloadUrl.searchParams.set(
+    PRODUCT_PROMPT_SHARE_RETURN_URL_PARAM,
+    String(Date.now())
+  );
+  return reloadUrl.toString();
+}
+
+function removeProductPromptShareReturnUrlParam(): void {
+  const currentUrl = new URL(globalThis.window.location.href);
+  if (!currentUrl.searchParams.has(PRODUCT_PROMPT_SHARE_RETURN_URL_PARAM)) return;
+  currentUrl.searchParams.delete(PRODUCT_PROMPT_SHARE_RETURN_URL_PARAM);
+  globalThis.window.history.replaceState(
+    globalThis.window.history.state,
+    "",
+    currentUrl.toString()
+  );
+}
+
+function isProductPromptAppleTouchBrowser(): boolean {
+  const platform = globalThis.navigator.platform ?? "";
+  const userAgent = globalThis.navigator.userAgent ?? "";
+  const isModernIpad = platform === "MacIntel" && globalThis.navigator.maxTouchPoints > 1;
+  return /iPad|iPhone|iPod/.test(userAgent) || isModernIpad;
+}
+
+function isProductPromptStandaloneApp(): boolean {
+  const navigatorWithStandalone = globalThis.navigator as Navigator & {
+    standalone?: boolean;
+  };
+  return (
+    navigatorWithStandalone.standalone === true ||
+    globalThis.window.matchMedia?.("(display-mode: standalone)").matches === true
+  );
+}
+
+async function convertProductPromptImageBlobToJpeg(
+  imageBlob: Blob,
+  filePrefix: string
+): Promise<File> {
+  try {
+    const convertedBlob = await drawProductPromptImageBlobToJpeg(imageBlob);
+    return buildProductPromptImageFile(convertedBlob, filePrefix, "image/jpeg");
+  } catch {
+    return buildProductPromptImageFile(imageBlob, filePrefix, imageBlob.type || "image/png");
+  }
+}
+
+async function composeProductPromptImageWithLogo(
+  productImageBlob: Blob,
+  companyLogoBlob: Blob
+): Promise<Blob | null> {
+  const objectUrls: string[] = [];
+  const loadedImages: ProductPromptDrawableImage[] = [];
+  try {
+    const productImage = await loadProductPromptDrawableImage(
+      productImageBlob,
+      objectUrls
+    );
+    loadedImages.push(productImage);
+    const logoImage = await loadProductPromptOptionalDrawableImage(
+      companyLogoBlob,
+      objectUrls,
+      loadedImages
+    );
+    const canvas = drawProductPromptImageWithLogoToCanvas(productImage, logoImage);
+    return await exportProductPromptCanvasJpeg(canvas);
+  } catch {
+    return null;
+  } finally {
+    loadedImages.forEach(closeProductPromptDrawableImage);
+    objectUrls.forEach((objectUrl) => URL.revokeObjectURL(objectUrl));
+  }
+}
+
+async function drawProductPromptImageBlobToJpeg(imageBlob: Blob): Promise<Blob> {
+  const objectUrl = URL.createObjectURL(imageBlob);
+  try {
+    const imageElement = await loadProductPromptImageElement(objectUrl);
+    const canvas = drawProductPromptImageToCanvas(imageElement);
+    return await exportProductPromptCanvasJpeg(canvas);
+  } finally {
+    URL.revokeObjectURL(objectUrl);
+  }
+}
+
+async function loadProductPromptDrawableImage(
+  imageBlob: Blob,
+  objectUrls: string[]
+): Promise<ProductPromptDrawableImage> {
+  if (typeof globalThis.createImageBitmap === "function") {
+    try {
+      return await globalThis.createImageBitmap(imageBlob);
+    } catch {
+      // Fallback for browsers that expose createImageBitmap but reject this blob.
+    }
+  }
+  const objectUrl = URL.createObjectURL(imageBlob);
+  objectUrls.push(objectUrl);
+  return loadProductPromptImageElement(objectUrl);
+}
+
+async function loadProductPromptOptionalDrawableImage(
+  imageBlob: Blob,
+  objectUrls: string[],
+  loadedImages: ProductPromptDrawableImage[]
+): Promise<ProductPromptDrawableImage | null> {
+  try {
+    const image = await loadProductPromptDrawableImage(imageBlob, objectUrls);
+    loadedImages.push(image);
+    return image;
+  } catch {
+    return null;
+  }
+}
+
+function closeProductPromptDrawableImage(image: ProductPromptDrawableImage): void {
+  if ("close" in image && typeof image.close === "function") {
+    image.close();
+  }
+}
+
+function loadProductPromptImageElement(objectUrl: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const imageElement = new Image();
+    imageElement.onload = () => resolve(imageElement);
+    imageElement.onerror = () => reject(new Error("Unable to load share image."));
+    imageElement.src = objectUrl;
+  });
+}
+
+function drawProductPromptImageWithLogoToCanvas(
+  productImage: ProductPromptDrawableImage,
+  logoImage: ProductPromptDrawableImage | null
+): HTMLCanvasElement {
+  const productWidth = getProductPromptImageWidth(productImage);
+  const productHeight = getProductPromptImageHeight(productImage);
+  const productPlacement = calculateProductPromptCanvasImageSize(
+    productWidth,
+    productHeight
+  );
+  const headerHeight = calculateProductPromptBrandHeaderHeight(
+    productPlacement.width
+  );
+  const canvas = document.createElement("canvas");
+  canvas.width = productPlacement.width;
+  canvas.height = headerHeight + productPlacement.height;
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("Canvas 2D context unavailable.");
+  context.save();
+  context.fillStyle = "#ffffff";
+  context.fillRect(0, 0, canvas.width, canvas.height);
+  context.fillStyle = "#000000";
+  context.fillRect(0, 0, canvas.width, headerHeight);
+  if (logoImage) {
+    drawProductPromptLogoInHeader(context, logoImage, canvas.width, headerHeight);
+  }
+  context.drawImage(
+    productImage,
+    0,
+    headerHeight,
+    productPlacement.width,
+    productPlacement.height
+  );
+  context.restore();
+  return canvas;
+}
+
+function drawProductPromptLogoInHeader(
+  context: CanvasRenderingContext2D,
+  logoImage: ProductPromptDrawableImage,
+  canvasWidth: number,
+  headerHeight: number
+): void {
+  try {
+    const logoPlacement = calculateProductPromptHeaderLogoPlacement(
+      canvasWidth,
+      headerHeight,
+      getProductPromptImageWidth(logoImage),
+      getProductPromptImageHeight(logoImage)
+    );
+    context.drawImage(
+      logoImage,
+      logoPlacement.x,
+      logoPlacement.y,
+      logoPlacement.width,
+      logoPlacement.height
+    );
+  } catch {
+    // Keep the brand header even if the logo metadata is unusable.
+  }
+}
+
+function drawProductPromptImageToCanvas(
+  imageElement: ProductPromptDrawableImage
+): HTMLCanvasElement {
+  const imageSize = calculateProductPromptCanvasImageSize(
+    getProductPromptImageWidth(imageElement),
+    getProductPromptImageHeight(imageElement)
+  );
+  const canvas = document.createElement("canvas");
+  canvas.width = imageSize.width;
+  canvas.height = imageSize.height;
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("Canvas 2D context unavailable.");
+  context.fillStyle = "#ffffff";
+  context.fillRect(0, 0, canvas.width, canvas.height);
+  context.drawImage(imageElement, 0, 0, imageSize.width, imageSize.height);
+  return canvas;
+}
+
+function calculateProductPromptCanvasImageSize(width: number, height: number) {
+  if (width <= 0 || height <= 0) throw new Error("Invalid image dimensions.");
+  const scale = Math.min(
+    1,
+    PRODUCT_PROMPT_CANVAS_MAX_LONG_EDGE / Math.max(width, height)
+  );
+  return {
+    height: Math.max(1, Math.round(height * scale)),
+    width: Math.max(1, Math.round(width * scale)),
+  };
+}
+
+function calculateProductPromptBrandHeaderHeight(canvasWidth: number): number {
+  if (canvasWidth <= 0) throw new Error("Invalid image dimensions.");
+  return Math.max(96, Math.round(canvasWidth * 0.36));
+}
+
+function calculateProductPromptHeaderLogoPlacement(
+  canvasWidth: number,
+  headerHeight: number,
+  logoWidth: number,
+  logoHeight: number
+) {
+  if (canvasWidth <= 0 || headerHeight <= 0 || logoWidth <= 0 || logoHeight <= 0) {
+    throw new Error("Invalid image dimensions.");
+  }
+  const maxLogoWidth = Math.max(1, Math.round(canvasWidth * 0.48));
+  const maxLogoHeight = Math.max(1, Math.round(headerHeight * 0.72));
+  const logoScale = Math.min(maxLogoWidth / logoWidth, maxLogoHeight / logoHeight);
+  const drawnLogoWidth = Math.max(1, Math.round(logoWidth * logoScale));
+  const drawnLogoHeight = Math.max(1, Math.round(logoHeight * logoScale));
+  return {
+    height: drawnLogoHeight,
+    width: drawnLogoWidth,
+    x: Math.round((canvasWidth - drawnLogoWidth) / 2),
+    y: Math.round((headerHeight - drawnLogoHeight) / 2),
+  };
+}
+
+function getProductPromptImageWidth(imageElement: ProductPromptDrawableImage): number {
+  if ("naturalWidth" in imageElement) {
+    return imageElement.naturalWidth || imageElement.width;
+  }
+  return imageElement.width;
+}
+
+function getProductPromptImageHeight(imageElement: ProductPromptDrawableImage): number {
+  if ("naturalHeight" in imageElement) {
+    return imageElement.naturalHeight || imageElement.height;
+  }
+  return imageElement.height;
+}
+
+function exportProductPromptCanvasJpeg(canvas: HTMLCanvasElement): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (!blob) {
+        reject(new Error("Canvas JPEG export failed."));
+        return;
+      }
+      resolve(blob);
+    }, "image/jpeg", PRODUCT_PROMPT_CANVAS_JPEG_QUALITY);
+  });
+}
+
+function buildProductPromptImageFileName(filePrefix: string, imageType: string): string {
+  const extension = getProductPromptImageExtension(imageType);
+  return `${filePrefix}.${extension}`;
+}
+
+function getProductPromptImageExtension(imageType: string): string {
+  if (imageType === "image/jpeg" || imageType === "image/jpg") return "jpg";
+  if (imageType === "image/webp") return "webp";
+  return "png";
+}
+
+function getProductPromptShareFailure(
+  error: unknown
+): ProductPromptAssetShareResult {
+  if (isProductPromptShareCancelled(error)) return "cancelled";
+  return "share-failed";
+}
+
+function isProductPromptShareCancelled(error: unknown): boolean {
+  if (typeof DOMException === "undefined") return false;
+  if (!(error instanceof DOMException)) return false;
+  return error.name === "AbortError";
+}
diff --git a/app/(pages)/products/[id]/prompts/product-prompts.form-footer.tsx b/app/(pages)/products/[id]/prompts/product-prompts.form-footer.tsx
new file mode 100644
index 0000000..20b67e5
--- /dev/null
+++ b/app/(pages)/products/[id]/prompts/product-prompts.form-footer.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { Bot, Loader2, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export function ProductPromptFormFooter({
+  cancelLabel,
+  isSubmitting,
+  loadingLabel,
+  onCancel,
+  submitLabel,
+}: {
+  cancelLabel: string;
+  isSubmitting: boolean;
+  loadingLabel?: string;
+  onCancel: () => void;
+  submitLabel: string;
+}) {
+  const displayedSubmitLabel = isSubmitting && loadingLabel ? loadingLabel : submitLabel;
+
+  return (
+    <div className="flex flex-col-reverse gap-2 border-t border-neutral-800 pt-4 md:flex-row md:justify-end">
+      <Button
+        type="button"
+        variant="outline"
+        onClick={onCancel}
+        className="rounded-[4px] border-neutral-800 bg-transparent text-xs font-bold uppercase tracking-wide text-neutral-300 hover:bg-neutral-900"
+      >
+        <X className="mr-2 size-4" />
+        {cancelLabel}
+      </Button>
+      <Button
+        type="submit"
+        disabled={isSubmitting}
+        aria-busy={isSubmitting}
+        className="min-h-12 w-full rounded-[4px] bg-blue-600 px-4 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 md:min-h-10 md:w-auto"
+      >
+        {isSubmitting ? (
+          <Loader2 className="size-4 animate-spin" />
+        ) : (
+          <Bot className="size-4" />
+        )}
+        <span className="min-w-0 text-center leading-tight">
+          {displayedSubmitLabel}
+        </span>
+      </Button>
+    </div>
+  );
+}
diff --git a/app/(pages)/products/[id]/prompts/product-prompts.model.test.ts b/app/(pages)/products/[id]/prompts/product-prompts.model.test.ts
new file mode 100644
index 0000000..9a8f18c
--- /dev/null
+++ b/app/(pages)/products/[id]/prompts/product-prompts.model.test.ts
@@ -0,0 +1,740 @@
+import { act, cleanup, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  buildGeneratePromptDefaults,
+  buildProductPromptChatGptMessage,
+  buildProductPromptCreateFormData,
+  buildProductPromptPriceInstruction,
+  buildProductPromptPricePreview,
+  calculateProductPromptCashPriceCents,
+  calculateProductPromptInstallmentBaseCents,
+  calculateProductPromptInstallmentCents,
+  formatProductPromptBrl,
+  findLatestProductPromptBatch,
+  getProductPromptPositionLabel,
+  useProductPromptGenerateForm,
+  useProductPromptsModel,
+} from "./product-prompts.model";
+import { useProductPromptGeneratePageModel } from "./[promptId]/product-prompt-generate.model";
+import type { Product, ProductBatch } from "../products-detail.types";
+import type {
+  ProductPromptAssetShareInput,
+  ProductPromptAssetShareResult,
+  ProductPromptBatchesResponse,
+  ProductPromptBrowserActions,
+  ProductPromptCompanyResponse,
+  ProductPromptListResponse,
+  ProductPromptProductResponse,
+  ProductPromptTextCopyInput,
+  ProductPromptTextCopyResult,
+  SavedProductImagePrompt,
+} from "./product-prompts.types";
+import {
+  productPromptGenerateSchema,
+  type ProductPromptCreateFormData,
+} from "./product-prompts.schema";
+
+const mocks = vi.hoisted(() => ({
+  apiGet: vi.fn(),
+  apiPost: vi.fn(),
+  swr: vi.fn(),
+  swrMutate: vi.fn(),
+  useSelectedWarehouse: vi.fn(),
+  toastSuccess: vi.fn(),
+  toastInfo: vi.fn(),
+  toastError: vi.fn(),
+  routerPush: vi.fn(),
+}));
+
+vi.mock("swr", () => ({
+  default: (...args: unknown[]) => mocks.swr(...args),
+  mutate: (...args: unknown[]) => mocks.swrMutate(...args),
+}));
+
+vi.mock("@/lib/api", () => ({
+  api: {
+    get: (...args: unknown[]) => mocks.apiGet(...args),
+    post: (...args: unknown[]) => mocks.apiPost(...args),
+  },
+}));
+
+vi.mock("@/components/breadcrumb", () => ({ useBreadcrumb: vi.fn() }));
+
+vi.mock("@/hooks/use-selected-warehouse", () => ({
+  useSelectedWarehouse: () => mocks.useSelectedWarehouse(),
+}));
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: mocks.routerPush }),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    success: (...args: unknown[]) => mocks.toastSuccess(...args),
+    info: (...args: unknown[]) => mocks.toastInfo(...args),
+    error: (...args: unknown[]) => mocks.toastError(...args),
+  },
+}));
+
+class FakeProductPromptBrowserActions implements ProductPromptBrowserActions {
+  copiedPromptText: string | null = null;
+  sharedCompanyLogoUrl: string | null | undefined = null;
+  sharedProductImageUrl: string | null = null;
+  sharedReturnUrl: string | undefined = undefined;
+  copyResult: ProductPromptTextCopyResult = "text";
+  shareResult: ProductPromptAssetShareResult = "shared";
+
+  async copyPromptText(
+    input: ProductPromptTextCopyInput
+  ): Promise<ProductPromptTextCopyResult> {
+    this.copiedPromptText = input.promptText;
+    return this.copyResult;
+  }
+
+  async sharePromptAssets(
+    input: ProductPromptAssetShareInput
+  ): Promise<ProductPromptAssetShareResult> {
+    this.sharedCompanyLogoUrl = input.companyLogoUrl;
+    this.sharedProductImageUrl = input.productImageUrl;
+    this.sharedReturnUrl = input.returnUrl;
+    return this.shareResult;
+  }
+}
+
+const product: Product = {
+  id: "prod-1",
+  name: "Produto Teste",
+  description: null,
+  imageUrl: "https://example.com/product.png",
+  categoryId: null,
+  categoryName: null,
+  brand: null,
+  barcode: null,
+  barcodeType: null,
+  sku: null,
+  isKit: false,
+  attributes: null,
+  hasExpiration: false,
+  active: true,
+  createdAt: "2026-01-01T00:00:00Z",
+  updatedAt: "2026-01-01T00:00:00Z",
+};
+
+const olderBatch: ProductBatch = {
+  id: "batch-old",
+  productId: "prod-1",
+  warehouseId: "wh-1",
+  warehouseName: "Principal",
+  quantity: 3,
+  sellingPrice: 1800,
+  createdAt: "2026-01-01T10:00:00Z",
+  updatedAt: "2026-01-01T10:00:00Z",
+};
+
+const latestBatch: ProductBatch = {
+  ...olderBatch,
+  id: "batch-new",
+  quantity: 8,
+  sellingPrice: 2500,
+  createdAt: "2026-01-02T10:00:00Z",
+};
+
+const savedPrompt: SavedProductImagePrompt = {
+  id: "prompt-1",
+  name: "Oferta premium",
+  prompt: "Crie uma arte sofisticada com o produto em destaque.",
+  imageUrl: "https://example.com/reference.png",
+  createdAt: "2026-01-03T10:00:00Z",
+  updatedAt: "2026-01-03T10:00:00Z",
+};
+
+const productResponse: ProductPromptProductResponse = {
+  success: true,
+  message: null,
+  data: product,
+};
+const promptListResponse: ProductPromptListResponse = {
+  success: true,
+  message: null,
+  data: [savedPrompt],
+};
+const batchesResponse: ProductPromptBatchesResponse = {
+  success: true,
+  message: null,
+  data: [olderBatch, latestBatch],
+};
+const companyResponse: ProductPromptCompanyResponse = {
+  success: true,
+  message: null,
+  data: {
+    logoUrl: "https://example.com/company-logo.png",
+  },
+};
+function readBlobText(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result));
+    reader.onerror = () => reject(reader.error);
+    reader.readAsText(blob);
+  });
+}
+
+function expectGeneratePromptSchemaInvalid(
+  result: ReturnType<typeof productPromptGenerateSchema.safeParse>
+) {
+  expect(result.success).toBe(false);
+  if (result.success) {
+    throw new Error("Expected generate prompt schema to be invalid.");
+  }
+  return result.error.issues;
+}
+
+function createDeferredProductPromptShareResult() {
+  let resolve!: (value: ProductPromptAssetShareResult) => void;
+  const promise = new Promise<ProductPromptAssetShareResult>((innerResolve) => {
+    resolve = innerResolve;
+  });
+  return { promise, resolve };
+}
+
+interface GeneratePromptFormHookProps {
+  batch: ProductBatch | null;
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mocks.useSelectedWarehouse.mockReturnValue({ warehouseId: "wh-1" });
+  mocks.apiGet.mockReturnValue({ json: vi.fn(async () => companyResponse) });
+  mocks.apiPost.mockReturnValue({
+    json: vi.fn(async () => ({ success: true, message: null, data: savedPrompt })),
+  });
+  mocks.swr.mockImplementation((key: string | null) => {
+    if (key === "products/prod-1") {
+      return { data: productResponse, error: null, isLoading: false };
+    }
+    if (key === "product-prompts") {
+      return { data: promptListResponse, error: null, isLoading: false };
+    }
+    if (key === "batches/warehouses/wh-1/products/prod-1/batches") {
+      return { data: batchesResponse, error: null, isLoading: false };
+    }
+    return { data: undefined, error: null, isLoading: false };
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+describe("product prompt price helpers", () => {
+  it("formata valores em BRL", () => {
+    expect(formatProductPromptBrl(35490)).toBe("R$ 354,90");
+  });
+
+  it("calcula preço à vista por desconto", () => {
+    const cashPrice = calculateProductPromptCashPriceCents({
+      normalPriceCents: 10000,
+      showCashOffer: true,
+      cashOfferMode: "discount-percent",
+      cashDiscountPercent: 15,
+      pricePosition: "top-center",
+    });
+
+    expect(cashPrice).toBe(8500);
+  });
+
+  it("monta prévia com oferta à vista por preço final", () => {
+    const preview = buildProductPromptPricePreview({
+      normalPriceCents: 35490,
+      showCashOffer: true,
+      cashOfferMode: "final-price",
+      cashPriceCents: 23589,
+      showInstallments: false,
+      installmentBase: "normal-price",
+      pricePosition: "top-center",
+    });
+
+    expect(preview).toBe("De: R$ 354,90\nPor: R$ 235,89 à vista");
+  });
+
+  it("calcula base própria e parcela", () => {
+    const input = {
+      normalPriceCents: 35490,
+      showCashOffer: true,
+      cashOfferMode: "final-price" as const,
+      cashPriceCents: 23589,
+      showInstallments: true,
+      installments: 10,
+      installmentBase: "custom-price" as const,
+      installmentPriceCents: 28990,
+      pricePosition: "bottom-right" as const,
+    };
+
+    expect(calculateProductPromptInstallmentBaseCents(input)).toBe(28990);
+    expect(calculateProductPromptInstallmentCents(input)).toBe(2899);
+  });
+
+  it("monta prévia com preço normal e parcelamento", () => {
+    const preview = buildProductPromptPricePreview({
+      normalPriceCents: 10000,
+      showCashOffer: false,
+      cashOfferMode: "final-price",
+      showInstallments: true,
+      installments: 5,
+      installmentBase: "normal-price",
+      pricePosition: "middle-left",
+    });
+
+    expect(preview).toBe("Por: R$ 100,00\nOu em 5x de R$ 20,00 sem juros");
+  });
+
+  it("monta instrução final com regras de logo e preço", () => {
+    const instruction = buildProductPromptPriceInstruction({
+      normalPriceCents: 35490,
+      showCashOffer: true,
+      cashOfferMode: "final-price",
+      cashPriceCents: 23589,
+      showInstallments: true,
+      installments: 10,
+      installmentBase: "custom-price",
+      installmentPriceCents: 28990,
+      pricePosition: "top-center",
+      savedPrompt: "Prompt base",
+    });
+
+    expect(instruction).toContain("Use a imagem enviada como referência");
+    expect(instruction).toContain("Posicione a logo em: inferior centro");
+    expect(instruction).toContain(
+      "Adicione na imagem um bloco de preço estilizado na posição: Sup. centro."
+    );
+    expect(instruction).not.toContain("Texto do bloco:");
+    expect(instruction).toContain("De: R$ 354,90");
+    expect(instruction).toContain("Ou em 10x de R$ 28,99 sem juros");
+    expect(instruction).toContain("proporção 9:16");
+    expect(instruction).toContain("Use uma fonte serifada bold para o preço");
+  });
+});
+
+describe("product prompt composition helpers", () => {
+  it("concatena prompt salvo e instrução de preço sem URL da imagem", () => {
+    const message = buildProductPromptChatGptMessage({
+      savedPrompt: "Prompt base",
+      normalPriceCents: 10000,
+      showCashOffer: true,
+      cashOfferMode: "discount-percent",
+      cashDiscountPercent: 10,
+      showInstallments: false,
+      installmentBase: "normal-price",
+      pricePosition: "top-left",
+    });
+
+    expect(message).toMatch(/^Prompt base\n\nUse a imagem enviada/);
+    expect(message).not.toContain("Imagem do produto para referência:");
+    expect(message).not.toContain("https://example.com/product.png");
+  });
+});
+
+describe("product prompt form data", () => {
+  it("monta multipart com JSON do prompt e arquivo de imagem", async () => {
+    const imageFile = new File(["image"], "prompt.png", { type: "image/png" });
+    const formData = buildProductPromptCreateFormData({
+      imageFile,
+      name: "  Nova arte  ",
+      prompt: "  Prompt de teste  ",
+    });
+
+    const promptPart = formData.get("prompt");
+    expect(promptPart).toBeInstanceOf(Blob);
+    expect(JSON.parse(await readBlobText(promptPart as Blob))).toEqual({
+      name: "Nova arte",
+      prompt: "Prompt de teste",
+    });
+    expect(formData.get("image")).toBe(imageFile);
+  });
+});
+
+describe("product prompt generate schema", () => {
+  it("exige preço à vista quando oferta por preço final está ativa", () => {
+    const result = productPromptGenerateSchema.safeParse({
+      normalPriceCents: 10000,
+      showCashOffer: true,
+      cashOfferMode: "final-price",
+      showInstallments: false,
+      installmentBase: "normal-price",
+      pricePosition: "top-center",
+    });
+
+    const issues = expectGeneratePromptSchemaInvalid(result);
+    expect(issues.some((issue) => issue.path[0] === "cashPriceCents")).toBe(true);
+  });
+
+  it("bloqueia desconto maior que 100%", () => {
+    const result = productPromptGenerateSchema.safeParse({
+      normalPriceCents: 10000,
+      showCashOffer: true,
+      cashOfferMode: "discount-percent",
+      cashDiscountPercent: 101,
+      showInstallments: false,
+      installmentBase: "normal-price",
+      pricePosition: "top-center",
+    });
+
+    const issues = expectGeneratePromptSchemaInvalid(result);
+    expect(issues.some((issue) => issue.path[0] === "cashDiscountPercent")).toBe(
+      true
+    );
+  });
+
+  it("exige parcelas maior que 1 quando parcelamento está ativo", () => {
+    const result = productPromptGenerateSchema.safeParse({
+      normalPriceCents: 10000,
+      showCashOffer: false,
+      cashOfferMode: "final-price",
+      showInstallments: true,
+      installments: 1,
+      installmentBase: "normal-price",
+      pricePosition: "top-center",
+    });
+
+    const issues = expectGeneratePromptSchemaInvalid(result);
+    expect(issues.some((issue) => issue.path[0] === "installments")).toBe(true);
+  });
+
+  it("exige preço próprio quando essa é a base do parcelamento", () => {
+    const result = productPromptGenerateSchema.safeParse({
+      normalPriceCents: 10000,
+      showCashOffer: false,
+      cashOfferMode: "final-price",
+      showInstallments: true,
+      installments: 10,
+      installmentBase: "custom-price",
+      pricePosition: "top-center",
+    });
+
+    const issues = expectGeneratePromptSchemaInvalid(result);
+    expect(issues.some((issue) => issue.path[0] === "installmentPriceCents")).toBe(
+      true
+    );
+  });
+
+  it("bloqueia base à vista quando a oferta à vista não existe", () => {
+    const result = productPromptGenerateSchema.safeParse({
+      normalPriceCents: 10000,
+      showCashOffer: false,
+      cashOfferMode: "final-price",
+      showInstallments: true,
+      installments: 10,
+      installmentBase: "cash-price",
+      pricePosition: "top-center",
+    });
+
+    const issues = expectGeneratePromptSchemaInvalid(result);
+    expect(issues.some((issue) => issue.path[0] === "installmentBase")).toBe(true);
+  });
+
+  it("bloqueia base à vista quando a oferta está ativa mas sem preço calculado", () => {
+    const result = productPromptGenerateSchema.safeParse({
+      normalPriceCents: 10000,
+      showCashOffer: true,
+      cashOfferMode: "final-price",
+      showInstallments: true,
+      installments: 10,
+      installmentBase: "cash-price",
+      pricePosition: "top-center",
+    });
+
+    const issues = expectGeneratePromptSchemaInvalid(result);
+    expect(issues.some((issue) => issue.path[0] === "installmentBase")).toBe(true);
+  });
+});
+
+describe("product prompt batch helpers", () => {
+  it("seleciona o lote mais recente por data de criação", () => {
+    expect(findLatestProductPromptBatch([olderBatch, latestBatch])).toEqual(
+      latestBatch
+    );
+  });
+
+  it("usa preço do lote mais recente nos valores padrão", () => {
+    expect(buildGeneratePromptDefaults(latestBatch).normalPriceCents).toBe(2500);
+  });
+
+  it("retorna label da posição escolhida", () => {
+    expect(getProductPromptPositionLabel("middle-center")).toBe("Centro");
+  });
+});
+
+describe("useProductPromptGenerateForm", () => {
+  it("preenche preço normal quando o lote chega depois da montagem", async () => {
+    const initialProps: GeneratePromptFormHookProps = { batch: null };
+    const { result, rerender } = renderHook(
+      ({ batch }: GeneratePromptFormHookProps) =>
+        useProductPromptGenerateForm(batch),
+      { initialProps },
+    );
+
+    expect(result.current.getValues("normalPriceCents")).toBeUndefined();
+
+    rerender({ batch: latestBatch });
+
+    await waitFor(() => {
+      expect(result.current.getValues("normalPriceCents")).toBe(2500);
+    });
+  });
+});
+
+describe("useProductPromptsModel", () => {
+  it("carrega produto e prompts globais via SWR", async () => {
+    const { result } = renderHook(() => useProductPromptsModel("prod-1"));
+
+    await waitFor(() => expect(result.current.prompts).toEqual([savedPrompt]));
+    expect(mocks.swr).toHaveBeenCalledWith("product-prompts", expect.any(Function));
+    expect(result.current.product).toEqual(product);
+  });
+
+  it("cria prompt no backend com multipart e invalida product-prompts", async () => {
+    const imageFile = new File(["image"], "prompt.png", { type: "image/png" });
+    const payload: ProductPromptCreateFormData = {
+      imageFile,
+      name: "  Nova arte  ",
+      prompt: "  Prompt de teste  ",
+    };
+
+    const { result } = renderHook(() => useProductPromptsModel("prod-1"));
+
+    await act(async () => {
+      await result.current.submitCreatePrompt(payload);
+    });
+
+    expect(mocks.apiPost).toHaveBeenCalledWith("product-prompts", {
+      body: expect.any(FormData),
+    });
+    const body = (mocks.apiPost.mock.calls[0][1] as { body: FormData }).body;
+    const promptPart = body.get("prompt");
+    expect(JSON.parse(await readBlobText(promptPart as Blob))).toEqual({
+      name: "Nova arte",
+      prompt: "Prompt de teste",
+    });
+    expect(body.get("image")).toBe(imageFile);
+    expect(mocks.swrMutate).toHaveBeenCalledWith("product-prompts");
+    expect(mocks.toastSuccess).toHaveBeenCalledWith("Prompt criado com sucesso.");
+  });
+});
+
+describe("useProductPromptGeneratePageModel", () => {
+  it("carrega o prompt escolhido e usa o preço do lote mais recente", async () => {
+    const actions = new FakeProductPromptBrowserActions();
+
+    const { result } = renderHook(() =>
+      useProductPromptGeneratePageModel("prod-1", "prompt-1", {
+        browserActions: actions,
+      })
+    );
+
+    await waitFor(() => expect(result.current.selectedPrompt).toEqual(savedPrompt));
+    expect(result.current.generatePromptForm.getValues("normalPriceCents")).toBe(2500);
+  });
+
+  it("copia o prompt e compartilha a imagem do produto com a logo", async () => {
+    const actions = new FakeProductPromptBrowserActions();
+
+    const { result } = renderHook(() =>
+      useProductPromptGeneratePageModel("prod-1", "prompt-1", {
+        browserActions: actions,
+      })
+    );
+
+    await act(async () => {
+      await result.current.submitGeneratePrompt({
+        normalPriceCents: 10000,
+        showCashOffer: true,
+        cashOfferMode: "discount-percent",
+        cashDiscountPercent: 10,
+        showInstallments: true,
+        installments: 10,
+        installmentBase: "cash-price",
+        pricePosition: "top-center",
+      });
+    });
+
+    expect(actions.copiedPromptText).toContain(savedPrompt.prompt);
+    expect(actions.copiedPromptText).toContain("Use a imagem enviada");
+    expect(actions.copiedPromptText).toContain("Ou em 10x");
+    expect(actions.copiedPromptText).not.toContain(product.imageUrl);
+    expect(actions.sharedCompanyLogoUrl).toBe(companyResponse.data.logoUrl);
+    expect(actions.sharedProductImageUrl).toBe(product.imageUrl);
+    expect(actions.sharedReturnUrl).toBe("/products/prod-1/prompts");
+    expect(mocks.toastSuccess).toHaveBeenCalledWith(
+      "Imagem do produto enviada para compartilhamento. Prompt copiado."
+    );
+    expect(mocks.toastSuccess).toHaveBeenCalledTimes(1);
+  });
+
+  it("marca preparação da imagem enquanto compartilha o arquivo composto", async () => {
+    const shareDeferred = createDeferredProductPromptShareResult();
+    const actions: ProductPromptBrowserActions = {
+      copyPromptText: vi.fn(async () => "text" as ProductPromptTextCopyResult),
+      sharePromptAssets: vi.fn(() => shareDeferred.promise),
+    };
+
+    const { result } = renderHook(() =>
+      useProductPromptGeneratePageModel("prod-1", "prompt-1", {
+        browserActions: actions,
+      })
+    );
+
+    let submitPromise!: Promise<void>;
+    act(() => {
+      submitPromise = result.current.submitGeneratePrompt({
+        normalPriceCents: 10000,
+        showCashOffer: true,
+        cashOfferMode: "discount-percent",
+        cashDiscountPercent: 10,
+        showInstallments: true,
+        installments: 10,
+        installmentBase: "cash-price",
+        pricePosition: "top-center",
+      });
+    });
+
+    await waitFor(() => expect(result.current.isPreparingShareImage).toBe(true));
+
+    await act(async () => {
+      shareDeferred.resolve("shared");
+      await submitPromise;
+    });
+
+    expect(result.current.isPreparingShareImage).toBe(false);
+  });
+
+  it("mostra um único aviso quando compartilha mas o clipboard falha", async () => {
+    const actions = new FakeProductPromptBrowserActions();
+    actions.copyResult = "unsupported";
+
+    const { result } = renderHook(() =>
+      useProductPromptGeneratePageModel("prod-1", "prompt-1", {
+        browserActions: actions,
+      })
+    );
+
+    await act(async () => {
+      await result.current.submitGeneratePrompt({
+        normalPriceCents: 10000,
+        showCashOffer: false,
+        cashOfferMode: "final-price",
+        showInstallments: false,
+        installmentBase: "normal-price",
+        pricePosition: "top-center",
+      });
+    });
+
+    expect(actions.copiedPromptText).toContain(savedPrompt.prompt);
+    expect(actions.sharedProductImageUrl).toBe(product.imageUrl);
+    expect(mocks.toastInfo).toHaveBeenCalledWith(
+      "Imagem do produto enviada. Copie o prompt manualmente."
+    );
+    expect(mocks.toastInfo).toHaveBeenCalledTimes(1);
+    expect(mocks.toastError).not.toHaveBeenCalled();
+  });
+
+  it("avisa o bloqueio do envio automático de imagem no PWA do iOS", async () => {
+    const actions = new FakeProductPromptBrowserActions();
+    actions.shareResult = "ios-pwa-file-share-blocked";
+
+    const { result } = renderHook(() =>
+      useProductPromptGeneratePageModel("prod-1", "prompt-1", {
+        browserActions: actions,
+      })
+    );
+
+    await act(async () => {
+      await result.current.submitGeneratePrompt({
+        normalPriceCents: 10000,
+        showCashOffer: false,
+        cashOfferMode: "final-price",
+        showInstallments: false,
+        installmentBase: "normal-price",
+        pricePosition: "top-center",
+      });
+    });
+
+    expect(actions.copiedPromptText).toContain(savedPrompt.prompt);
+    expect(mocks.toastInfo).toHaveBeenCalledWith(
+      "Prompt copiado. No PWA do iOS, envie a imagem manualmente para evitar travamento."
+    );
+    expect(mocks.toastError).not.toHaveBeenCalled();
+  });
+
+  it("mostra um único erro quando copia o prompt mas a imagem falha", async () => {
+    const actions = new FakeProductPromptBrowserActions();
+    actions.shareResult = "product-image-failed";
+
+    const { result } = renderHook(() =>
+      useProductPromptGeneratePageModel("prod-1", "prompt-1", {
+        browserActions: actions,
+      })
+    );
+
+    await act(async () => {
+      await result.current.submitGeneratePrompt({
+        normalPriceCents: 10000,
+        showCashOffer: false,
+        cashOfferMode: "final-price",
+        showInstallments: false,
+        installmentBase: "normal-price",
+        pricePosition: "top-center",
+      });
+    });
+
+    expect(actions.copiedPromptText).toContain(savedPrompt.prompt);
+    expect(mocks.toastError).toHaveBeenCalledWith(
+      "Prompt copiado, mas a imagem do produto não pôde ser preparada."
+    );
+    expect(mocks.toastError).toHaveBeenCalledTimes(1);
+    expect(mocks.toastSuccess).not.toHaveBeenCalled();
+  });
+
+  it("não compartilha quando o produto está sem imagem", async () => {
+    const actions = new FakeProductPromptBrowserActions();
+    mocks.swr.mockImplementation((key: string | null) => {
+      if (key === "products/prod-1") {
+        return {
+          data: { ...productResponse, data: { ...product, imageUrl: null } },
+          error: null,
+          isLoading: false,
+        };
+      }
+      if (key === "product-prompts") {
+        return { data: promptListResponse, error: null, isLoading: false };
+      }
+      if (key === "product-prompts/company-assets") {
+        return { data: companyResponse, error: null, isLoading: false };
+      }
+      return { data: batchesResponse, error: null, isLoading: false };
+    });
+
+    const { result } = renderHook(() =>
+      useProductPromptGeneratePageModel("prod-1", "prompt-1", {
+        browserActions: actions,
+      })
+    );
+
+    await act(async () => {
+      await result.current.submitGeneratePrompt({
+        normalPriceCents: 10000,
+        showCashOffer: false,
+        cashOfferMode: "final-price",
+        showInstallments: false,
+        installmentBase: "normal-price",
+        pricePosition: "top-center",
+      });
+    });
+
+    expect(actions.sharedProductImageUrl).toBeNull();
+    expect(actions.copiedPromptText).toBeNull();
+    expect(mocks.toastError).toHaveBeenCalledWith(
+      "Produto sem imagem. Adicione uma imagem antes de gerar."
+    );
+  });
+});
diff --git a/app/(pages)/products/[id]/prompts/product-prompts.model.ts b/app/(pages)/products/[id]/prompts/product-prompts.model.ts
new file mode 100644
index 0000000..8960aba
--- /dev/null
+++ b/app/(pages)/products/[id]/prompts/product-prompts.model.ts
@@ -0,0 +1,452 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm, type UseFormReturn } from "react-hook-form";
+import { toast } from "sonner";
+import useSWR, { mutate } from "swr";
+import { useBreadcrumb } from "@/components/breadcrumb";
+import { api } from "@/lib/api";
+import {
+  productPromptCreateSchema,
+  productPromptGenerateSchema,
+  type ProductPromptCreateFormData,
+  type ProductPromptGenerateFormData,
+} from "./product-prompts.schema";
+import {
+  copyProductPromptText,
+  installProductPromptShareReturnRecovery,
+  shareProductPromptAssets,
+} from "./product-prompts.clipboard";
+import {
+  buildProductPromptChatGptMessage,
+  PRODUCT_PROMPT_DEFAULT_POSITION,
+} from "./product-prompts.pricing";
+import type { ProductBatch } from "../products-detail.types";
+import type {
+  ProductPromptAssetShareInput,
+  ProductPromptAssetShareResult,
+  ProductPromptBatchesResponse,
+  ProductPromptBrowserActions,
+  ProductPromptCompanyResponse,
+  ProductPromptListResponse,
+  ProductPromptMutationResponse,
+  ProductPromptPricePosition,
+  ProductPromptProductResponse,
+  ProductPromptTextCopyInput,
+  ProductPromptTextCopyResult,
+  SavedProductImagePrompt,
+} from "./product-prompts.types";
+
+export {
+  copyProductPromptText,
+  installProductPromptShareReturnRecovery,
+  shareProductPromptAssets,
+} from "./product-prompts.clipboard";
+
+export {
+  buildProductPromptChatGptMessage,
+  buildProductPromptPriceInstruction,
+  buildProductPromptPricePreview,
+  calculateProductPromptCashPriceCents,
+  calculateProductPromptInstallmentBaseCents,
+  calculateProductPromptInstallmentCents,
+  formatProductPromptBrl,
+  getProductPromptLogoPositionLabel,
+  getProductPromptPositionLabel,
+  PRODUCT_PROMPT_POSITION_OPTIONS,
+} from "./product-prompts.pricing";
+
+const PRODUCT_PROMPTS_KEY = "product-prompts";
+
+export const browserProductPromptActions: ProductPromptBrowserActions = {
+  copyPromptText: (input: ProductPromptTextCopyInput) =>
+    copyProductPromptText(input),
+  sharePromptAssets: (input: ProductPromptAssetShareInput) =>
+    shareProductPromptAssets(input),
+};
+
+export function useProductPromptsModel(productId: string) {
+  const [isCreatePromptOpen, setIsCreatePromptOpen] = useState(false);
+
+  const productRequest = useProductPromptProductRequest(productId);
+  const promptsRequest = useProductPromptListRequest();
+
+  useProductPromptsBreadcrumb(productId);
+
+  const createPromptForm = useProductPromptCreateForm();
+  const createPromptImageFile = createPromptForm.watch("imageFile");
+
+  useProductPromptShareReturnRecovery();
+
+  const closeCreatePromptForm = useCallback(() => {
+    setIsCreatePromptOpen(false);
+    createPromptForm.reset();
+  }, [createPromptForm]);
+
+  return {
+    product: productRequest.product,
+    prompts: promptsRequest.prompts,
+    isLoading: productRequest.isLoading || promptsRequest.isLoading,
+    error: productRequest.error ?? promptsRequest.error,
+    isCreatePromptOpen,
+    createPromptForm,
+    createPromptImageFile,
+    openCreatePromptForm: () => setIsCreatePromptOpen(true),
+    closeCreatePromptForm,
+    setCreatePromptImageFile: (file: File | null) => {
+      if (!file) {
+        createPromptForm.resetField("imageFile");
+        return;
+      }
+      createPromptForm.setValue("imageFile", file, { shouldDirty: true, shouldValidate: true });
+    },
+    submitCreatePrompt: createSubmitPromptHandler({
+      closeCreatePromptForm,
+    }),
+  };
+}
+
+export function useProductPromptCompanyRequest() {
+  const { data } = useSWR<ProductPromptCompanyResponse>(
+    "product-prompts/company-assets",
+    async (url: string) => api.get(url).json<ProductPromptCompanyResponse>()
+  );
+
+  return { logoUrl: data?.data.logoUrl ?? null };
+}
+
+export function useProductPromptProductRequest(productId: string) {
+  const { data, error, isLoading } = useSWR<ProductPromptProductResponse>(
+    productId ? `products/${productId}` : null,
+    async (url: string) => api.get(url).json<ProductPromptProductResponse>()
+  );
+
+  return {
+    product: data?.data ?? null,
+    error: (error as Error | undefined) ?? null,
+    isLoading,
+  };
+}
+
+export function useProductPromptListRequest() {
+  const { data, error, isLoading } = useSWR<ProductPromptListResponse>(
+    PRODUCT_PROMPTS_KEY,
+    async (url: string) => api.get(url).json<ProductPromptListResponse>()
+  );
+
+  return {
+    prompts: data?.data ?? [],
+    error: (error as Error | undefined) ?? null,
+    isLoading,
+  };
+}
+
+export function useProductPromptBatchesRequest(
+  productId: string,
+  warehouseId: string | null
+) {
+  const batchKey =
+    productId && warehouseId
+      ? `batches/warehouses/${warehouseId}/products/${productId}/batches`
+      : null;
+  const { data } = useSWR<ProductPromptBatchesResponse>(
+    batchKey,
+    async (url: string) => api.get(url).json<ProductPromptBatchesResponse>()
+  );
+
+  return { batches: data?.data ?? [] };
+}
+
+function useProductPromptsBreadcrumb(productId: string): void {
+  useBreadcrumb({
+    title: "Artes com IA",
+    backUrl: `/products/${productId}`,
+  });
+}
+
+function useProductPromptCreateForm() {
+  return useForm<ProductPromptCreateFormData>({
+    resolver: zodResolver(productPromptCreateSchema),
+    defaultValues: {
+      name: "",
+      prompt: "",
+    },
+  });
+}
+
+export function useProductPromptGenerateForm(latestBatch: ProductBatch | null) {
+  const latestBatchSellingPrice = latestBatch?.sellingPrice ?? undefined;
+  const form = useForm<ProductPromptGenerateFormData>({
+    resolver: zodResolver(productPromptGenerateSchema),
+    defaultValues: buildGeneratePromptDefaults(latestBatch),
+  });
+
+  useLatestBatchPromptPriceAutofill(form, latestBatchSellingPrice);
+  return form;
+}
+
+function useLatestBatchPromptPriceAutofill(
+  form: UseFormReturn<ProductPromptGenerateFormData>,
+  latestBatchSellingPrice: number | undefined
+): void {
+  const appliedBatchPriceRef = useRef<number | undefined>(
+    latestBatchSellingPrice
+  );
+
+  useEffect(() => {
+    if (latestBatchSellingPrice === undefined) return;
+
+    const currentPrice = form.getValues("normalPriceCents");
+    const hasManualPrice =
+      currentPrice !== undefined &&
+      currentPrice !== appliedBatchPriceRef.current;
+    if (hasManualPrice) return;
+
+    form.setValue("normalPriceCents", latestBatchSellingPrice, {
+      shouldDirty: false,
+      shouldTouch: false,
+      shouldValidate: true,
+    });
+    appliedBatchPriceRef.current = latestBatchSellingPrice;
+  }, [form, latestBatchSellingPrice]);
+}
+
+function createSubmitPromptHandler(input: {
+  closeCreatePromptForm: () => void;
+}) {
+  return async (data: ProductPromptCreateFormData): Promise<void> => {
+    try {
+      const formData = buildProductPromptCreateFormData(data);
+      await api
+        .post(PRODUCT_PROMPTS_KEY, { body: formData })
+        .json<ProductPromptMutationResponse>();
+      await mutate(PRODUCT_PROMPTS_KEY);
+      toast.success("Prompt criado com sucesso.");
+      input.closeCreatePromptForm();
+    } catch {
+      toast.error("Erro ao criar prompt. Verifique os dados.");
+    }
+  };
+}
+
+export function buildProductPromptCreateFormData(
+  data: ProductPromptCreateFormData
+): FormData {
+  const formData = new FormData();
+  const promptBlob = new Blob(
+    [
+      JSON.stringify({
+        name: data.name.trim(),
+        prompt: data.prompt.trim(),
+      }),
+    ],
+    { type: "application/json" }
+  );
+  formData.append("prompt", promptBlob);
+  formData.append("image", data.imageFile);
+  return formData;
+}
+
+export function createGeneratePromptHandler(input: {
+  browserActions: ProductPromptBrowserActions;
+  companyLogoUrl: string | null;
+  productImageUrl: string | null;
+  selectedPrompt: SavedProductImagePrompt | null;
+  setIsPreparingShareImage: (isPreparing: boolean) => void;
+  shareReturnUrl?: string;
+}) {
+  return async (data: ProductPromptGenerateFormData): Promise<void> => {
+    if (!input.selectedPrompt || !input.productImageUrl) {
+      toast.error("Produto sem imagem. Adicione uma imagem antes de gerar.");
+      return;
+    }
+    const promptText = buildProductPromptChatGptMessage({
+      ...data,
+      savedPrompt: input.selectedPrompt.prompt,
+    });
+    const copyResult = await copyProductPromptTextSafely(input.browserActions, {
+      promptText,
+    });
+    const companyLogoUrl = await resolveProductPromptCompanyLogoUrl(
+      input.companyLogoUrl
+    );
+    input.setIsPreparingShareImage(true);
+    const shareResult = await shareProductPromptAssetsSafely(input.browserActions, {
+      companyLogoUrl,
+      productImageUrl: input.productImageUrl,
+      returnUrl: input.shareReturnUrl,
+    }).finally(() => {
+      input.setIsPreparingShareImage(false);
+    });
+    notifyProductPromptGenerateResult(copyResult, shareResult);
+  };
+}
+
+function useProductPromptShareReturnRecovery(): void {
+  useEffect(() => installProductPromptShareReturnRecovery(), []);
+}
+
+async function resolveProductPromptCompanyLogoUrl(
+  currentLogoUrl: string | null
+): Promise<string | null> {
+  if (currentLogoUrl) return currentLogoUrl;
+  try {
+    const response = await api.get("product-prompts/company-assets").json<ProductPromptCompanyResponse>();
+    return response.data.logoUrl ?? null;
+  } catch {
+    return null;
+  }
+}
+
+async function copyProductPromptTextSafely(browserActions: ProductPromptBrowserActions, input: ProductPromptTextCopyInput): Promise<ProductPromptTextCopyResult> {
+  try {
+    return await browserActions.copyPromptText(input);
+  } catch {
+    return "copy-failed";
+  }
+}
+
+async function shareProductPromptAssetsSafely(browserActions: ProductPromptBrowserActions, input: ProductPromptAssetShareInput): Promise<ProductPromptAssetShareResult> {
+  try {
+    return await browserActions.sharePromptAssets(input);
+  } catch {
+    return "share-failed";
+  }
+}
+
+function notifyProductPromptGenerateResult(
+  copyResult: ProductPromptTextCopyResult, shareResult: ProductPromptAssetShareResult
+): void {
+  if (shareResult === "shared") {
+    notifyProductPromptShared(copyResult);
+    return;
+  }
+  if (shareResult === "cancelled") {
+    notifyProductPromptCopyOnly(copyResult);
+    return;
+  }
+  notifyProductPromptGenerateFailure(copyResult, shareResult);
+}
+
+function notifyProductPromptShared(
+  copyResult: ProductPromptTextCopyResult
+): void {
+  if (copyResult === "text") {
+    toast.success("Imagem do produto enviada para compartilhamento. Prompt copiado.");
+    return;
+  }
+  toast.info("Imagem do produto enviada. Copie o prompt manualmente.");
+}
+
+function notifyProductPromptCopyOnly(copyResult: ProductPromptTextCopyResult): void {
+  if (copyResult === "text") {
+    toast.success("Prompt copiado.");
+    return;
+  }
+  if (copyResult === "unsupported") {
+    toast.info("Compartilhamento cancelado. Copie o prompt manualmente.");
+    return;
+  }
+  toast.error("Compartilhamento cancelado e o prompt não foi copiado.");
+}
+
+function notifyProductPromptGenerateFailure(
+  copyResult: ProductPromptTextCopyResult, shareResult: ProductPromptAssetShareResult
+): void {
+  if (shareResult === "unsupported") {
+    notifyProductPromptUnsupportedShare(copyResult);
+    return;
+  }
+  if (shareResult === "ios-pwa-file-share-blocked") {
+    notifyProductPromptIosPwaFileShareBlocked(copyResult);
+    return;
+  }
+  if (shareResult === "product-image-failed") {
+    toast.error(
+      copyResult === "text"
+        ? "Prompt copiado, mas a imagem do produto não pôde ser preparada."
+        : "Não foi possível preparar a imagem do produto para compartilhar."
+    );
+    return;
+  }
+  if (shareResult === "brand-image-failed") {
+    toast.error(
+      copyResult === "text"
+        ? "Prompt copiado, mas a imagem com a logo não pôde ser preparada."
+        : "Não foi possível preparar a imagem com a logo."
+    );
+    return;
+  }
+  notifyProductPromptShareFailure(copyResult);
+}
+
+function notifyProductPromptIosPwaFileShareBlocked(
+  copyResult: ProductPromptTextCopyResult
+): void {
+  if (copyResult === "text") {
+    toast.info(
+      "Prompt copiado. No PWA do iOS, envie a imagem manualmente para evitar travamento."
+    );
+    return;
+  }
+  toast.error(
+    "No PWA do iOS, o envio automático da imagem foi bloqueado para evitar travamento."
+  );
+}
+
+function notifyProductPromptUnsupportedShare(
+  copyResult: ProductPromptTextCopyResult
+): void {
+  if (copyResult === "text") {
+    toast.error("Prompt copiado, mas este navegador não permite compartilhar imagens.");
+    return;
+  }
+  toast.error("Este navegador não permite compartilhar imagens automaticamente.");
+}
+
+function notifyProductPromptShareFailure(copyResult: ProductPromptTextCopyResult): void {
+  if (copyResult === "text") {
+    toast.error("Prompt copiado, mas o compartilhamento de imagens falhou.");
+    return;
+  }
+  toast.error("Não foi possível abrir o compartilhamento de imagens.");
+}
+
+export function buildGeneratePromptDefaults(
+  latestBatch: ProductBatch | null
+): Partial<ProductPromptGenerateFormData> & {
+  pricePosition: ProductPromptPricePosition;
+} {
+  return {
+    normalPriceCents: latestBatch?.sellingPrice ?? undefined,
+    showCashOffer: false,
+    cashOfferMode: "final-price",
+    cashPriceCents: undefined,
+    cashDiscountPercent: undefined,
+    showInstallments: false,
+    installments: undefined,
+    installmentBase: "normal-price",
+    installmentPriceCents: undefined,
+    pricePosition: PRODUCT_PROMPT_DEFAULT_POSITION,
+  };
+}
+
+export function findLatestProductPromptBatch(
+  batches: ProductBatch[]
+): ProductBatch | null {
+  if (batches.length === 0) return null;
+  return batches.toSorted((firstBatch, secondBatch) => {
+    return getProductPromptBatchTime(secondBatch) - getProductPromptBatchTime(firstBatch);
+  })[0];
+}
+
+export function findSavedProductPromptById(
+  prompts: SavedProductImagePrompt[],
+  promptId: string
+): SavedProductImagePrompt | null {
+  return prompts.find((prompt) => prompt.id === promptId) ?? null;
+}
+
+function getProductPromptBatchTime(batch: ProductBatch): number {
+  const parsedTime = Date.parse(batch.createdAt);
+  return Number.isFinite(parsedTime) ? parsedTime : 0;
+}
diff --git a/app/(pages)/products/[id]/prompts/product-prompts.pricing.ts b/app/(pages)/products/[id]/prompts/product-prompts.pricing.ts
new file mode 100644
index 0000000..70d010c
--- /dev/null
+++ b/app/(pages)/products/[id]/prompts/product-prompts.pricing.ts
@@ -0,0 +1,171 @@
+import type {
+  ProductPromptGenerationInput,
+  ProductPromptPositionOption,
+  ProductPromptPriceConfigInput,
+  ProductPromptPricePosition,
+} from "./product-prompts.types";
+
+export const PRODUCT_PROMPT_DEFAULT_POSITION: ProductPromptPricePosition =
+  "top-center";
+
+export const PRODUCT_PROMPT_POSITION_OPTIONS: ProductPromptPositionOption[] = [
+  { value: "top-left", label: "Sup. esq." },
+  { value: "top-center", label: "Sup. centro" },
+  { value: "top-right", label: "Sup. dir." },
+  { value: "middle-left", label: "Centro esq." },
+  { value: "middle-center", label: "Centro" },
+  { value: "middle-right", label: "Centro dir." },
+  { value: "bottom-left", label: "Inf. esq." },
+  { value: "bottom-center", label: "Inf. centro" },
+  { value: "bottom-right", label: "Inf. dir." },
+];
+
+const PRODUCT_PROMPT_CURRENCY_FORMATTER = new Intl.NumberFormat("pt-BR", {
+  style: "currency",
+  currency: "BRL",
+});
+
+const PRODUCT_PROMPT_LOGO_POSITION_BY_PRICE_POSITION: Record<
+  ProductPromptPricePosition,
+  string
+> = {
+  "top-left": "superior direito",
+  "top-center": "inferior centro",
+  "top-right": "superior esquerdo",
+  "middle-left": "superior direito",
+  "middle-center": "superior centro",
+  "middle-right": "superior esquerdo",
+  "bottom-left": "superior direito",
+  "bottom-center": "superior centro",
+  "bottom-right": "superior esquerdo",
+};
+
+export function formatProductPromptBrl(valueCents: number): string {
+  return PRODUCT_PROMPT_CURRENCY_FORMATTER.format(valueCents / 100);
+}
+
+export function calculateProductPromptCashPriceCents(
+  input: ProductPromptPriceConfigInput
+): number | null {
+  if (!input.showCashOffer) return null;
+  if (!hasPositiveCents(input.normalPriceCents)) return null;
+  if (input.cashOfferMode === "final-price") {
+    return hasPositiveCents(input.cashPriceCents) ? input.cashPriceCents : null;
+  }
+  if (!hasDefinedNumber(input.cashDiscountPercent)) return null;
+  const discountMultiplier = (100 - input.cashDiscountPercent) / 100;
+  return Math.round(input.normalPriceCents * discountMultiplier);
+}
+
+export function calculateProductPromptInstallmentBaseCents(
+  input: ProductPromptPriceConfigInput
+): number | null {
+  if (!input.showInstallments) return null;
+  if (input.installmentBase === "cash-price") {
+    return calculateProductPromptCashPriceCents(input);
+  }
+  if (input.installmentBase === "custom-price") {
+    return hasPositiveCents(input.installmentPriceCents)
+      ? input.installmentPriceCents
+      : null;
+  }
+  return hasPositiveCents(input.normalPriceCents) ? input.normalPriceCents : null;
+}
+
+export function calculateProductPromptInstallmentCents(
+  input: ProductPromptPriceConfigInput
+): number | null {
+  if (!input.showInstallments || !input.installments || input.installments <= 1) {
+    return null;
+  }
+  const installmentBaseCents = calculateProductPromptInstallmentBaseCents(input);
+  if (installmentBaseCents === null) return null;
+  return Math.round(installmentBaseCents / input.installments);
+}
+
+export function buildProductPromptPricePreview(
+  input: ProductPromptPriceConfigInput
+): string {
+  if (!hasPositiveCents(input.normalPriceCents)) return "";
+  const cashPriceCents = calculateProductPromptCashPriceCents(input);
+  const priceLines =
+    cashPriceCents === null
+      ? [`Por: ${formatProductPromptBrl(input.normalPriceCents)}`]
+      : [
+          `De: ${formatProductPromptBrl(input.normalPriceCents)}`,
+          `Por: ${formatProductPromptBrl(cashPriceCents)} à vista`,
+        ];
+  const installmentCents = calculateProductPromptInstallmentCents(input);
+  if (installmentCents === null || !input.installments) {
+    return priceLines.join("\n");
+  }
+  return [
+    ...priceLines,
+    `Ou em ${input.installments}x de ${formatProductPromptBrl(
+      installmentCents
+    )} sem juros`,
+  ].join("\n");
+}
+
+export function buildProductPromptChatGptMessage(
+  input: ProductPromptGenerationInput
+): string {
+  return [input.savedPrompt.trim(), buildProductPromptPriceInstruction(input)].join(
+    "\n\n"
+  );
+}
+
+export function buildProductPromptPriceInstruction(
+  input: ProductPromptGenerationInput
+): string {
+  const pricePreview = buildProductPromptPricePreview(input);
+  const pricePositionLabel = getProductPromptPositionLabel(input.pricePosition);
+  const logoPositionLabel = getProductPromptLogoPositionLabel(input.pricePosition);
+  return [
+    "Use a imagem enviada como referência do produto e da marca.",
+    "",
+    "A parte superior da imagem contém uma área preta com a logo. Ignore o fundo preto e extraia apenas a logo, incluindo símbolo e texto. Reinsira essa logo na nova imagem de forma elegante, sem fundo, em uma área limpa da composição. Posicione a logo em: " +
+      `${logoPositionLabel}. Escolha automaticamente uma cor com bom contraste em relação ao fundo.`,
+    "",
+    `Adicione na imagem um bloco de preço estilizado na posição: ${pricePositionLabel}.`,
+    "",
+    pricePreview,
+    "",
+    "Use hierarquia visual:",
+    "- “De” menor e secundário.",
+    "- “Por” maior e mais chamativo.",
+    "- Parcelamento em tamanho intermediário.",
+    "- Garanta bom contraste com o fundo.",
+    "- Não cubra o produto principal nem a logo.",
+    "",
+    "Não reproduza a faixa preta original. Não distorça a logo. Não adicione textos extras. A imagem final deve parecer um anúncio premium profissional.",
+    "",
+    "proporção 9:16",
+    "",
+    "Use uma fonte serifada bold para o preço",
+  ].join("\n");
+}
+
+export function getProductPromptPositionLabel(
+  position: ProductPromptPricePosition
+): string {
+  const option = PRODUCT_PROMPT_POSITION_OPTIONS.find((item) => item.value === position);
+  if (!option) {
+    throw new Error(`Invalid position "${position}". Expected price position option.`);
+  }
+  return option.label;
+}
+
+export function getProductPromptLogoPositionLabel(
+  pricePosition: ProductPromptPricePosition
+): string {
+  return PRODUCT_PROMPT_LOGO_POSITION_BY_PRICE_POSITION[pricePosition];
+}
+
+function hasDefinedNumber(value: number | undefined): value is number {
+  return typeof value === "number" && Number.isFinite(value);
+}
+
+function hasPositiveCents(value: number | undefined): value is number {
+  return hasDefinedNumber(value) && value > 0;
+}
diff --git a/app/(pages)/products/[id]/prompts/product-prompts.schema.ts b/app/(pages)/products/[id]/prompts/product-prompts.schema.ts
new file mode 100644
index 0000000..f7cf3e1
--- /dev/null
+++ b/app/(pages)/products/[id]/prompts/product-prompts.schema.ts
@@ -0,0 +1,176 @@
+import { z } from "zod";
+
+export const PRODUCT_PROMPT_PRICE_POSITION_VALUES = [
+  "top-left",
+  "top-center",
+  "top-right",
+  "middle-left",
+  "middle-center",
+  "middle-right",
+  "bottom-left",
+  "bottom-center",
+  "bottom-right",
+] as const;
+
+export const PRODUCT_PROMPT_CASH_OFFER_MODE_VALUES = [
+  "final-price",
+  "discount-percent",
+] as const;
+
+export const PRODUCT_PROMPT_INSTALLMENT_BASE_VALUES = [
+  "normal-price",
+  "cash-price",
+  "custom-price",
+] as const;
+
+const PRODUCT_PROMPT_ALLOWED_IMAGE_TYPES = [
+  "image/png",
+  "image/jpeg",
+  "image/jpg",
+  "image/webp",
+];
+
+const PRODUCT_PROMPT_MAX_IMAGE_BYTES = 5 * 1024 * 1024;
+
+function isPromptImageFile(value: unknown): value is File {
+  return typeof File !== "undefined" && value instanceof File;
+}
+
+function hasAllowedProductPromptImageType(file: File): boolean {
+  return PRODUCT_PROMPT_ALLOWED_IMAGE_TYPES.includes(file.type);
+}
+
+function hasAllowedProductPromptImageSize(file: File): boolean {
+  return file.size <= PRODUCT_PROMPT_MAX_IMAGE_BYTES;
+}
+
+export const productPromptCreateSchema = z.object({
+  imageFile: z
+    .custom<File>(isPromptImageFile, {
+      message: "Imagem referente ao prompt é obrigatória",
+    })
+    .refine(hasAllowedProductPromptImageType, "Use PNG, JPG, JPEG ou WEBP")
+    .refine(hasAllowedProductPromptImageSize, "Imagem deve ter até 5MB"),
+  name: z
+    .string()
+    .trim()
+    .min(1, "Nome do prompt é obrigatório")
+    .max(80, "Nome deve ter no máximo 80 caracteres"),
+  prompt: z
+    .string()
+    .trim()
+    .min(1, "Prompt é obrigatório")
+    .max(4000, "Prompt deve ter no máximo 4000 caracteres"),
+});
+
+export const productPromptGenerateSchema = z.object({
+  normalPriceCents: z
+    .number({ message: "Preço normal é obrigatório" })
+    .int("Preço normal deve estar em centavos")
+    .min(1, "Preço normal deve ser maior que zero"),
+  showCashOffer: z.boolean(),
+  cashOfferMode: z.enum(PRODUCT_PROMPT_CASH_OFFER_MODE_VALUES, {
+    message: "Escolha como calcular o preço à vista",
+  }),
+  cashPriceCents: z
+    .number()
+    .int("Preço à vista deve estar em centavos")
+    .min(0, "Preço à vista não pode ser negativo")
+    .optional(),
+  cashDiscountPercent: z
+    .number()
+    .min(0, "Desconto não pode ser negativo")
+    .max(100, "Desconto deve ser no máximo 100%")
+    .optional(),
+  showInstallments: z.boolean(),
+  installments: z
+    .number()
+    .int("Parcelas devem conter somente números")
+    .min(1, "Parcelas devem ser maior que zero")
+    .max(60, "Parcelas devem ser no máximo 60")
+    .optional(),
+  installmentBase: z.enum(PRODUCT_PROMPT_INSTALLMENT_BASE_VALUES, {
+    message: "Escolha a base do parcelamento",
+  }),
+  installmentPriceCents: z
+    .number()
+    .int("Preço parcelado deve estar em centavos")
+    .min(0, "Preço parcelado não pode ser negativo")
+    .optional(),
+  pricePosition: z.enum(PRODUCT_PROMPT_PRICE_POSITION_VALUES, {
+    message: "Escolha uma posição válida para o preço",
+  }),
+}).superRefine((data, context) => {
+  if (data.showCashOffer && data.cashOfferMode === "final-price" && !data.cashPriceCents) {
+    context.addIssue({
+      code: "custom",
+      message: "Preço à vista é obrigatório",
+      path: ["cashPriceCents"],
+    });
+  }
+
+  if (
+    data.showCashOffer &&
+    data.cashOfferMode === "discount-percent" &&
+    data.cashDiscountPercent === undefined
+  ) {
+    context.addIssue({
+      code: "custom",
+      message: "Desconto é obrigatório",
+      path: ["cashDiscountPercent"],
+    });
+  }
+
+  if (data.showInstallments && (!data.installments || data.installments <= 1)) {
+    context.addIssue({
+      code: "custom",
+      message: "Parcelas devem ser maior que 1",
+      path: ["installments"],
+    });
+  }
+
+  if (
+    data.showInstallments &&
+    data.installmentBase === "cash-price" &&
+    !hasValidCashOffer(data)
+  ) {
+    context.addIssue({
+      code: "custom",
+      message: "Informe o preço à vista com desconto para usar esta base",
+      path: ["installmentBase"],
+    });
+  }
+
+  if (
+    data.showInstallments &&
+    data.installmentBase === "custom-price" &&
+    !data.installmentPriceCents
+  ) {
+    context.addIssue({
+      code: "custom",
+      message: "Preço parcelado é obrigatório",
+      path: ["installmentPriceCents"],
+    });
+  }
+});
+
+function hasValidCashOffer(data: {
+  cashDiscountPercent?: number;
+  cashOfferMode: (typeof PRODUCT_PROMPT_CASH_OFFER_MODE_VALUES)[number];
+  cashPriceCents?: number;
+  showCashOffer: boolean;
+}): boolean {
+  if (!data.showCashOffer) return false;
+  if (data.cashOfferMode === "final-price") {
+    return typeof data.cashPriceCents === "number" && data.cashPriceCents > 0;
+  }
+  return typeof data.cashDiscountPercent === "number";
+}
+
+export type ProductPromptCreateFormData = z.infer<
+  typeof productPromptCreateSchema
+>;
+
+export type ProductPromptGenerateFormData = z.infer<
+  typeof productPromptGenerateSchema
+>;
diff --git a/app/(pages)/products/[id]/prompts/product-prompts.types.ts b/app/(pages)/products/[id]/prompts/product-prompts.types.ts
new file mode 100644
index 0000000..efb9f5c
--- /dev/null
+++ b/app/(pages)/products/[id]/prompts/product-prompts.types.ts
@@ -0,0 +1,160 @@
+import type { UseFormReturn } from "react-hook-form";
+import type { Product, ProductBatch } from "../products-detail.types";
+import type {
+  ProductPromptCreateFormData,
+  ProductPromptGenerateFormData,
+} from "./product-prompts.schema";
+
+export type ProductPromptPricePosition =
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "middle-left"
+  | "middle-center"
+  | "middle-right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right";
+
+export interface ProductPromptPositionOption {
+  value: ProductPromptPricePosition;
+  label: string;
+}
+
+export type ProductPromptCashOfferMode = "final-price" | "discount-percent";
+
+export type ProductPromptInstallmentBase =
+  | "normal-price"
+  | "cash-price"
+  | "custom-price";
+
+export interface ProductPromptPriceConfigInput {
+  normalPriceCents?: number;
+  showCashOffer?: boolean;
+  cashOfferMode?: ProductPromptCashOfferMode;
+  cashPriceCents?: number;
+  cashDiscountPercent?: number;
+  showInstallments?: boolean;
+  installments?: number;
+  installmentBase?: ProductPromptInstallmentBase;
+  installmentPriceCents?: number;
+  pricePosition: ProductPromptPricePosition;
+}
+
+export interface SavedProductImagePrompt {
+  id: string;
+  name: string;
+  prompt: string;
+  imageUrl: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ProductPromptProductResponse {
+  success: boolean;
+  message: string | null;
+  data: Product;
+}
+
+export interface ProductPromptListResponse {
+  success: boolean;
+  message: string | null;
+  data: SavedProductImagePrompt[];
+}
+
+export interface ProductPromptMutationResponse {
+  success: boolean;
+  message: string | null;
+  data: SavedProductImagePrompt;
+}
+
+export interface ProductPromptBatchesResponse {
+  success: boolean;
+  message: string | null;
+  data: ProductBatch[];
+}
+
+export interface ProductPromptCompanyResponse {
+  success: boolean;
+  message?: string | null;
+  data: {
+    logoUrl: string | null;
+  };
+}
+
+export interface ProductPromptGenerationInput {
+  savedPrompt: string;
+  normalPriceCents: number;
+  showCashOffer: boolean;
+  cashOfferMode: ProductPromptCashOfferMode;
+  cashPriceCents?: number;
+  cashDiscountPercent?: number;
+  showInstallments: boolean;
+  installments?: number;
+  installmentBase: ProductPromptInstallmentBase;
+  installmentPriceCents?: number;
+  pricePosition: ProductPromptPricePosition;
+}
+
+export type ProductPromptTextCopyResult =
+  | "text"
+  | "unsupported"
+  | "copy-failed";
+
+export type ProductPromptAssetShareResult =
+  | "shared"
+  | "unsupported"
+  | "ios-pwa-file-share-blocked"
+  | "product-image-failed"
+  | "brand-image-failed"
+  | "share-failed"
+  | "cancelled";
+
+export interface ProductPromptTextCopyInput {
+  promptText: string;
+}
+
+export interface ProductPromptAssetShareInput {
+  productImageUrl: string;
+  companyLogoUrl?: string | null;
+  returnUrl?: string;
+}
+
+export interface ProductPromptBrowserActions {
+  copyPromptText: (
+    input: ProductPromptTextCopyInput
+  ) => Promise<ProductPromptTextCopyResult>;
+  sharePromptAssets: (
+    input: ProductPromptAssetShareInput
+  ) => Promise<ProductPromptAssetShareResult>;
+}
+
+export interface UseProductPromptsModelDependencies {
+  browserActions?: ProductPromptBrowserActions;
+}
+
+export interface ProductPromptsViewProps {
+  product: Product | null;
+  prompts: SavedProductImagePrompt[];
+  isLoading: boolean;
+  error: Error | null;
+  isCreatePromptOpen: boolean;
+  createPromptForm: UseFormReturn<ProductPromptCreateFormData>;
+  createPromptImageFile?: File;
+  openCreatePromptForm: () => void;
+  closeCreatePromptForm: () => void;
+  setCreatePromptImageFile: (file: File | null) => void;
+  submitCreatePrompt: (data: ProductPromptCreateFormData) => Promise<void>;
+}
+
+export interface ProductPromptGenerateViewProps {
+  product: Product | null;
+  selectedPrompt: SavedProductImagePrompt | null;
+  isLoading: boolean;
+  error: Error | null;
+  isPreparingShareImage: boolean;
+  pricePositionOptions: ProductPromptPositionOption[];
+  generatePromptForm: UseFormReturn<ProductPromptGenerateFormData>;
+  closeGeneratePromptPage: () => void;
+  submitGeneratePrompt: (data: ProductPromptGenerateFormData) => Promise<void>;
+}
diff --git a/app/(pages)/products/[id]/prompts/product-prompts.view.tsx b/app/(pages)/products/[id]/prompts/product-prompts.view.tsx
new file mode 100644
index 0000000..b032455
--- /dev/null
+++ b/app/(pages)/products/[id]/prompts/product-prompts.view.tsx
@@ -0,0 +1,256 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import {
+  Image as ImageIcon,
+  Plus,
+  Sparkles,
+} from "lucide-react";
+import { ImageDropzone } from "@/components/product/image-dropzone";
+import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/ui/empty-state";
+import { ErrorState } from "@/components/ui/error-state";
+import { FormSection } from "@/components/ui/form-section";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { LoadingState } from "@/components/ui/loading-state";
+import { PageContainer } from "@/components/ui/page-container";
+import { PageHeader } from "@/components/ui/page-header";
+import { ResponsiveModal } from "@/components/ui/responsive-modal";
+import { Textarea } from "@/components/ui/textarea";
+import { ProductPromptFormFooter } from "./product-prompts.form-footer";
+import type {
+  ProductPromptsViewProps,
+  SavedProductImagePrompt,
+} from "./product-prompts.types";
+
+export function ProductPromptsView(props: ProductPromptsViewProps) {
+  if (props.isLoading) {
+    return <PageContainer><LoadingState message="Carregando produto..." /></PageContainer>;
+  }
+
+  if (props.error || !props.product) {
+    return (
+      <PageContainer>
+        <ErrorState
+          title="Produto não encontrado"
+          description="Não foi possível carregar os dados para gerar artes."
+        />
+      </PageContainer>
+    );
+  }
+
+  return (
+    <PageContainer>
+      <PageHeader
+        title="Artes com IA"
+        subtitle={props.product.name}
+        actions={<ProductPromptCreateButton onClick={props.openCreatePromptForm} />}
+      />
+      <ProductPromptImageWarning productImageUrl={props.product.imageUrl} />
+      <ProductPromptGrid props={props} productId={props.product.id} />
+      <CreateProductPromptModal props={props} />
+    </PageContainer>
+  );
+}
+
+function ProductPromptCreateButton({ onClick }: { onClick: () => void }) {
+  return (
+    <Button
+      onClick={onClick}
+      className="h-10 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 md:w-auto"
+    >
+      <Plus className="mr-2 size-4" />
+      Criar prompt
+    </Button>
+  );
+}
+
+function ProductPromptImageWarning({ productImageUrl }: { productImageUrl: string | null }) {
+  if (productImageUrl) return null;
+
+  return (
+    <div className="mb-6 rounded-[4px] border border-amber-900/40 bg-amber-950/10 p-4 text-xs text-amber-400">
+      Este produto ainda não possui imagem. Adicione uma imagem ao produto antes
+      de gerar a arte no ChatGPT.
+    </div>
+  );
+}
+
+function ProductPromptGrid({
+  productId,
+  props,
+}: {
+  productId: string;
+  props: ProductPromptsViewProps;
+}) {
+  if (props.prompts.length === 0) {
+    return (
+      <EmptyState
+        icon={ImageIcon}
+        title="Nenhum prompt criado"
+        description="Crie prompts com uma imagem de referência para montar a biblioteca de artes da empresa."
+        action={{ label: "Criar prompt", onClick: props.openCreatePromptForm }}
+        className="bg-[#171717]/30"
+      />
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-2 gap-3 sm:gap-4 lg:grid-cols-3 xl:grid-cols-4">
+      {props.prompts.map((prompt) => (
+        <ProductPromptCard
+          key={prompt.id}
+          prompt={prompt}
+          productId={productId}
+        />
+      ))}
+    </div>
+  );
+}
+
+function ProductPromptCard({
+  prompt,
+  productId,
+}: {
+  prompt: SavedProductImagePrompt;
+  productId: string;
+}) {
+  return (
+    <Link
+      href={`/products/${productId}/prompts/${prompt.id}`}
+      className="group block overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717] text-left hover:border-blue-600"
+    >
+      <div className="relative aspect-[4/5] bg-neutral-950">
+        <Image
+          src={prompt.imageUrl}
+          alt={prompt.name}
+          fill
+          unoptimized
+          sizes="(min-width: 1280px) 25vw, (min-width: 1024px) 33vw, 50vw"
+          className="object-cover"
+        />
+      </div>
+      <div className="border-t border-neutral-800 p-2.5 sm:p-4">
+        <p className="line-clamp-2 text-sm font-bold leading-snug text-white sm:text-base">
+          {prompt.name}
+        </p>
+        <p className="mt-2 hidden text-xs leading-relaxed text-neutral-500 sm:line-clamp-2">
+          {prompt.prompt}
+        </p>
+      </div>
+    </Link>
+  );
+}
+
+function CreateProductPromptModal({ props }: { props: ProductPromptsViewProps }) {
+  return (
+    <ResponsiveModal
+      open={props.isCreatePromptOpen}
+      onOpenChange={(open) => {
+        if (!open) props.closeCreatePromptForm();
+      }}
+      title="Criar prompt"
+      description="Cadastre uma imagem de referência, nome e texto base."
+      maxWidth="sm:max-w-[720px]"
+    >
+      <Form {...props.createPromptForm}>
+        <form
+          onSubmit={props.createPromptForm.handleSubmit(props.submitCreatePrompt)}
+          className="space-y-5"
+        >
+          <FormSection icon={Sparkles} title="Prompt pré feito">
+            <CreatePromptImageField props={props} />
+            <CreatePromptNameField props={props} />
+            <CreatePromptTextField props={props} />
+          </FormSection>
+          <ProductPromptFormFooter
+            cancelLabel="Cancelar"
+            submitLabel="Criar prompt"
+            isSubmitting={props.createPromptForm.formState.isSubmitting}
+            loadingLabel="Criando prompt"
+            onCancel={props.closeCreatePromptForm}
+          />
+        </form>
+      </Form>
+    </ResponsiveModal>
+  );
+}
+
+function CreatePromptImageField({ props }: { props: ProductPromptsViewProps }) {
+  return (
+    <FormField
+      control={props.createPromptForm.control}
+      name="imageFile"
+      render={() => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            Imagem referente ao prompt
+          </FormLabel>
+          <ImageDropzone
+            value={props.createPromptImageFile ?? null}
+            onImageSelect={props.setCreatePromptImageFile}
+            text="Adicionar imagem de referência"
+          />
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function CreatePromptNameField({ props }: { props: ProductPromptsViewProps }) {
+  return (
+    <FormField
+      control={props.createPromptForm.control}
+      name="name"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            Nome do prompt
+          </FormLabel>
+          <FormControl>
+            <Input
+              {...field}
+              placeholder="Ex: Oferta premium"
+              className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+            />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function CreatePromptTextField({ props }: { props: ProductPromptsViewProps }) {
+  return (
+    <FormField
+      control={props.createPromptForm.control}
+      name="prompt"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            Prompt
+          </FormLabel>
+          <FormControl>
+            <Textarea
+              {...field}
+              placeholder="Descreva o estilo, cenário e composição da arte."
+              className="min-h-32 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+            />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
diff --git a/app/(pages)/products/components/product-form.types.ts b/app/(pages)/products/components/product-form.types.ts
index 4b10f20..6bbc16c 100644
--- a/app/(pages)/products/components/product-form.types.ts
+++ b/app/(pages)/products/components/product-form.types.ts
@@ -83,7 +83,9 @@ export interface ProductFormProps {
   // Imagem
   productImage: File | null;
   currentImageUrl?: string; // URL da imagem existente (edit mode)
+  isImageProcessing?: boolean;
   handleImageSelect: (file: File | null) => void;
+  handleImageProcessingChange?: (isProcessing: boolean) => void;
   handleImageRemove?: () => void; // Optional - only needed in edit mode
 
   // Scanner
diff --git a/app/(pages)/products/components/product-form.view.tsx b/app/(pages)/products/components/product-form.view.tsx
index 91f5aca..c52827c 100644
--- a/app/(pages)/products/components/product-form.view.tsx
+++ b/app/(pages)/products/components/product-form.view.tsx
@@ -69,7 +69,7 @@ import {
 } from "lucide-react";
 import Link from "next/link";
 import { PermissionGate } from "@/components/permission-gate";
-import { ProductFormProps } from "./product-form.types";
+import type { BatchesDrawerProps, ProductFormProps } from "./product-form.types";
 import { cn } from "@/lib/utils";
 
 interface BatchModeSwitchProps {
@@ -78,6 +78,28 @@ interface BatchModeSwitchProps {
   compact?: boolean;
 }
 
+interface ProductFormViewState {
+  batchesDrawerState?: BatchesDrawerProps;
+  continuousMode: boolean;
+  isFooterVisible: boolean;
+  isInlineMode: boolean;
+  isInlineEdit: boolean;
+  isProfitable: boolean;
+  margin: number;
+  productCancelHref: string;
+  profit: number;
+  showBatchDateFields: boolean;
+  showContinuousMode: boolean;
+  showMobileBatchModeToggle: boolean;
+  showPricingCard: boolean;
+  showQuantityField: boolean;
+  submitLabel: string;
+}
+
+const getCategoryParentName = (
+  category: ProductFormProps["categories"][number],
+) => category.parentCategoryName ?? category.parentCategory?.name ?? null;
+
 const BatchModeSwitch = ({
   control,
   isInlineMode,
@@ -118,73 +140,20 @@ const BatchModeSwitch = ({
   />
 );
 
-export const ProductForm = ({
-  mode,
-  form,
-  onSubmit,
-  isSubmitting,
-  categories,
-  isLoadingCategories,
-  brands,
-  isLoadingBrands,
-  customAttributes,
-  addCustomAttribute,
-  removeCustomAttribute,
-  updateCustomAttribute,
-  nameInputRef,
-  openScanner,
-  closeScanner,
-  isScannerOpen,
-  handleBarcodeScan,
-  warehouseId,
-  productImage,
-  currentImageUrl,
-  handleImageSelect,
-  handleImageRemove,
-  batchesDrawer,
-  isAiModalOpen,
-  openAiModal,
-  closeAiModal,
-  handleAiFill,
-  cancelHref,
-  onCancel,
-  isInlineEdit,
-  onQuantityIncrement,
-  onQuantityDecrement,
-}: ProductFormProps) => {
+export const ProductForm = (productForm: ProductFormProps) => {
+  const { form, mode } = productForm;
   const costPrice = form.watch("costPrice") || 0;
   const sellingPrice = form.watch("sellingPrice") || 0;
-  const continuousMode = form.watch("continuousMode");
+  const continuousMode = Boolean(form.watch("continuousMode"));
+  const isInlineMode = mode === "inline";
+  const isInlineEdit = Boolean(productForm.isInlineEdit);
   const profit = sellingPrice - costPrice;
   const margin = costPrice > 0 ? (profit / costPrice) * 100 : 0;
-  const isProfitable = profit > 0;
-
-  const batchesDrawerState = mode === "edit" ? batchesDrawer : undefined;
-  const isInlineMode = mode === "inline";
-  const showPricingCard = mode === "create" || isInlineMode;
-  const showQuantityField = mode === "create" || isInlineMode;
-  const showBatchDateFields = mode === "create" || isInlineMode;
-  const showContinuousMode = mode === "create" || (isInlineMode && !isInlineEdit);
-  const productCancelHref = cancelHref || "/products";
   const [isFooterVisible, setIsFooterVisible] = useState(true);
   const [showMobileBatchModeToggle, setShowMobileBatchModeToggle] = useState(
-    isInlineMode && !isInlineEdit && Boolean(continuousMode),
+    isInlineMode && !isInlineEdit && continuousMode,
   );
   const lastScrollYRef = useRef(0);
-  const submitLabel = isInlineMode
-    ? isInlineEdit
-      ? "Salvar edição"
-      : continuousMode
-      ? "Adicionar e continuar"
-      : "Adicionar e voltar"
-    : mode === "create"
-      ? "Salvar Produto"
-      : "Atualizar Produto";
-  const getCategoryParentName = (
-    category: ProductFormProps["categories"][number],
-  ) => {
-    return category.parentCategoryName ?? category.parentCategory?.name ?? null;
-  };
 
   useEffect(() => {
     if (!isInlineMode || isInlineEdit || !continuousMode) return;
@@ -206,1004 +175,1311 @@ export const ProductForm = ({
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
-  return (
-    <div
-      className={cn(
-        "min-h-screen bg-[#0A0A0A] font-sans text-neutral-200 md:pb-20",
-        isInlineMode ? "pb-56" : "pb-24",
-      )}
-    >
-      {/* Barcode Scanner Modal */}
-      <BarcodeScannerModal
-        open={isScannerOpen}
-        onClose={closeScanner}
-        onScan={handleBarcodeScan}
-      />
+  const viewState: ProductFormViewState = {
+    batchesDrawerState: mode === "edit" ? productForm.batchesDrawer : undefined,
+    continuousMode,
+    isFooterVisible,
+    isInlineMode,
+    isInlineEdit,
+    isProfitable: profit > 0,
+    margin,
+    productCancelHref: productForm.cancelHref || "/products",
+    profit,
+    showBatchDateFields: mode === "create" || isInlineMode,
+    showContinuousMode: mode === "create" || (isInlineMode && !isInlineEdit),
+    showMobileBatchModeToggle,
+    showPricingCard: mode === "create" || isInlineMode,
+    showQuantityField: mode === "create" || isInlineMode,
+    submitLabel: isInlineMode
+      ? isInlineEdit
+        ? "Salvar edição"
+        : continuousMode
+          ? "Adicionar e continuar"
+          : "Adicionar e voltar"
+      : mode === "create"
+        ? "Salvar Produto"
+        : "Atualizar Produto",
+  };
 
-      <main className="mx-auto w-full max-w-7xl py-8 px-4 md:px-6 lg:px-8">
-        {/* AI Fill Modal */}
-        {(mode === "create" || isInlineMode) &&
-          isAiModalOpen !== undefined &&
-          closeAiModal &&
-          handleAiFill && (
-            <ProductAiFillModal
-              open={isAiModalOpen}
-              onClose={closeAiModal}
-              onConfirm={handleAiFill}
-              categories={categories}
-              brands={brands}
-            />
-          )}
+  return <ProductFormShell productForm={productForm} viewState={viewState} />;
+};
 
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
-            <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
-              {/* Left Column - Main Content */}
-              <div className="space-y-6 lg:col-span-2">
-                {/* Basic Info Card */}
-                <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
-                  <CardHeader className="border-b border-neutral-800 pb-4">
-                    <div className="flex flex-col md:flex-row items-start md:items-center gap-5 md:gap-0 justify-between">
-                      <div className="flex items-center gap-2">
-                        <Box className="size-4 text-blue-500" />
-                        <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
-                          Informações Básicas
-                        </CardTitle>
-                      </div>
+const ProductFormShell = ({
+  productForm,
+  viewState,
+}: {
+  productForm: ProductFormProps;
+  viewState: ProductFormViewState;
+}) => (
+  <div
+    className={cn(
+      "min-h-screen bg-[#0A0A0A] font-sans text-neutral-200 md:pb-20",
+      viewState.isInlineMode ? "pb-56" : "pb-24",
+    )}
+  >
+    <BarcodeScannerModal
+      open={productForm.isScannerOpen}
+      onClose={productForm.closeScanner}
+      onScan={productForm.handleBarcodeScan}
+    />
+    <main className="mx-auto w-full max-w-7xl px-4 py-8 md:px-6 lg:px-8">
+      <ProductAiModal productForm={productForm} viewState={viewState} />
+      <ProductFormBody productForm={productForm} viewState={viewState} />
+    </main>
+    <ProductBatchesDrawer viewState={viewState} />
+  </div>
+);
 
-                      {(mode === "create" || isInlineMode) && openAiModal && (
-                        <PermissionGate permission="products:analyze_image">
-                          <Button
-                            type="button"
-                            onClick={openAiModal}
-                            className="w-full md:w-fit h-9 rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 shadow-[0_0_15px_-5px_rgba(37,99,235,0.3)]"
-                          >
-                            <Sparkles className="size-3" />
-                            Pegar dados de uma foto
-                          </Button>
-                        </PermissionGate>
-                      )}
-                    </div>
-                  </CardHeader>
-                  <CardContent className="pt-6 space-y-5">
-                    <FormField
-                      control={form.control}
-                      name="name"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                            Nome do Produto{" "}
-                            <span className="text-rose-500">*</span>
-                          </FormLabel>
-                          <FormControl>
-                            <Input
-                              placeholder="EX: MONITOR ULTRAWIDE 34 POLEGADAS"
-                              className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
-                              {...field}
-                              ref={nameInputRef}
-                            />
-                          </FormControl>
-                          <FormMessage className="text-xs text-rose-500" />
-                        </FormItem>
-                      )}
-                    />
+const ProductAiModal = ({
+  productForm,
+  viewState,
+}: {
+  productForm: ProductFormProps;
+  viewState: ProductFormViewState;
+}) => {
+  if (!viewState.showPricingCard) return null;
+  if (productForm.isAiModalOpen === undefined) return null;
+  if (!productForm.closeAiModal || !productForm.handleAiFill) return null;
 
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
-                      <FormField
-                        control={form.control}
-                        name="barcode"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400 flex items-center gap-2">
-                              <Barcode className="size-3" /> Código de Barras
-                            </FormLabel>
-                            <div className="flex gap-2">
-                              <FormControl>
-                                <Input
-                                  placeholder="EAN / UPC / CODE128"
-                                  className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0 font-mono"
-                                  {...field}
-                                />
-                              </FormControl>
-                              <Button
-                                type="button"
-                                variant="outline"
-                                onClick={openScanner}
-                                className="size-10 shrink-0 rounded-[4px] border-neutral-800 bg-neutral-900 hover:bg-neutral-800 hover:text-white"
-                              >
-                                <Scan className="size-4" />
-                              </Button>
-                            </div>
-                            <FormMessage className="text-xs text-rose-500" />
-                          </FormItem>
-                        )}
-                      />
-                    </div>
+  return (
+    <ProductAiFillModal
+      open={productForm.isAiModalOpen}
+      onClose={productForm.closeAiModal}
+      onConfirm={productForm.handleAiFill}
+      categories={productForm.categories}
+      brands={productForm.brands}
+    />
+  );
+};
 
-                    <FormField
-                      control={form.control}
-                      name="description"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                            Descrição Detalhada
-                          </FormLabel>
-                          <FormControl>
-                            <Textarea
-                              placeholder="Especificações técnicas, detalhes de uso, etc…"
-                              className="min-h-[100px] resize-y rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
-                              {...field}
-                            />
-                          </FormControl>
-                          <FormMessage className="text-xs text-rose-500" />
-                        </FormItem>
-                      )}
-                    />
-                  </CardContent>
-                </Card>
+const ProductFormBody = ({
+  productForm,
+  viewState,
+}: {
+  productForm: ProductFormProps;
+  viewState: ProductFormViewState;
+}) => (
+  <Form {...productForm.form}>
+    <form onSubmit={productForm.form.handleSubmit(productForm.onSubmit)}>
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+        <ProductMainColumn productForm={productForm} viewState={viewState} />
+        <ProductSidebar productForm={productForm} viewState={viewState} />
+      </div>
+      <ProductFooterActionBar productForm={productForm} viewState={viewState} />
+    </form>
+  </Form>
+);
 
-                {/* Attributes & Dimensions Card */}
-                <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
-                  <CardHeader className="border-b border-neutral-800 pb-4">
-                    <div className="flex items-center gap-2">
-                      <Ruler className="size-4 text-blue-500" />
-                      <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
-                        Dimensões e Atributos
-                      </CardTitle>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="pt-6 space-y-6">
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
-                      <FormField
-                        control={form.control}
-                        name="attributes.weight"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400 flex items-center gap-2">
-                              <Scale className="size-3" /> Peso
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                placeholder="EX: 1.5 KG"
-                                className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
-                                {...field}
-                              />
-                            </FormControl>
-                            <FormMessage className="text-xs text-rose-500" />
-                          </FormItem>
-                        )}
-                      />
-                      <FormField
-                        control={form.control}
-                        name="attributes.dimensions"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400 flex items-center gap-2">
-                              <Box className="size-3" /> Dimensões (C x L x A)
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                placeholder="EX: 10 x 20 x 5 CM"
-                                className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
-                                {...field}
-                              />
-                            </FormControl>
-                            <FormMessage className="text-xs text-rose-500" />
-                          </FormItem>
-                        )}
-                      />
-                    </div>
+const ProductMainColumn = ({
+  productForm,
+  viewState,
+}: {
+  productForm: ProductFormProps;
+  viewState: ProductFormViewState;
+}) => (
+  <div className="space-y-6 lg:col-span-2">
+    <ProductBasicInfoCard productForm={productForm} viewState={viewState} />
+    <ProductAttributesCard productForm={productForm} />
+    {viewState.showPricingCard && (
+      <ProductInventoryPricingCard
+        productForm={productForm}
+        viewState={viewState}
+      />
+    )}
+  </div>
+);
 
-                    <div className="pt-4 border-t border-neutral-800">
-                      <h4 className="text-xs font-semibold uppercase tracking-wide text-white mb-4">
-                        Atributos Personalizados
-                      </h4>
-                      <CustomAttributesBuilder
-                        attributes={customAttributes}
-                        onAdd={addCustomAttribute}
-                        onRemove={removeCustomAttribute}
-                        onUpdate={updateCustomAttribute}
-                      />
-                    </div>
-                  </CardContent>
-                </Card>
+const ProductBasicInfoCard = ({
+  productForm,
+  viewState,
+}: {
+  productForm: ProductFormProps;
+  viewState: ProductFormViewState;
+}) => (
+  <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
+    <CardHeader className="border-b border-neutral-800 pb-4">
+      <div className="flex flex-col items-start justify-between gap-5 md:flex-row md:items-center md:gap-0">
+        <div className="flex items-center gap-2">
+          <Box className="size-4 text-blue-500" />
+          <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
+            Informações Básicas
+          </CardTitle>
+        </div>
+        {viewState.showPricingCard && productForm.openAiModal && (
+          <PermissionGate permission="products:analyze_image">
+            <Button
+              type="button"
+              onClick={productForm.openAiModal}
+              className="h-9 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 md:w-fit"
+            >
+              <Sparkles className="size-3" />
+              Pegar dados de uma foto
+            </Button>
+          </PermissionGate>
+        )}
+      </div>
+    </CardHeader>
+    <CardContent className="space-y-5 pt-6">
+      <ProductNameField productForm={productForm} />
+      <ProductBarcodeField productForm={productForm} />
+      <ProductDescriptionField productForm={productForm} />
+    </CardContent>
+  </Card>
+);
 
-                {/* Inventory & Pricing Card */}
-                {showPricingCard && (
-                  <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
-                    <CardHeader className="border-b border-neutral-800 pb-4">
-                      <div className="flex items-center gap-2">
-                        <DollarSign className="size-4 text-emerald-500" />
-                        <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
-                          Estoque e Precificação
-                        </CardTitle>
-                      </div>
-                      <CardDescription className="mt-2 text-xs text-neutral-500">
-                        {isInlineMode
-                          ? "Os preços serão aplicados ao primeiro lote criado pela movimentação."
-                          : "Ao salvar, o primeiro lote do produto será criado automaticamente com os dados informados nesta seção."}
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent className="pt-6 space-y-6">
-                      {/* Pricing Row */}
-                      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
-                        <FormField
-                          control={form.control}
-                          name="costPrice"
-                          render={({ field }) => {
-                            const { onChange, value, ...rest } = field;
-                            return (
-                              <FormItem>
-                                <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                                  Preço de Custo
-                                </FormLabel>
-                                <FormControl>
-                                  <CurrencyInput
-                                    {...rest}
-                                    value={value}
-                                    onValueChange={onChange}
-                                    placeholder="0,00"
-                                    className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0 text-white"
-                                  />
-                                </FormControl>
-                                <FormMessage className="text-xs text-rose-500" />
-                              </FormItem>
-                            );
-                          }}
-                        />
-                        <FormField
-                          control={form.control}
-                          name="sellingPrice"
-                          render={({ field }) => {
-                            const { onChange, value, ...rest } = field;
-                            return (
-                              <FormItem>
-                                <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                                  Preço de Venda
-                                </FormLabel>
-                                <FormControl>
-                                  <CurrencyInput
-                                    {...rest}
-                                    value={value}
-                                    onValueChange={onChange}
-                                    placeholder="0,00"
-                                    className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-emerald-600 focus:ring-0 text-emerald-500 font-bold"
-                                  />
-                                </FormControl>
-                                <FormMessage className="text-xs text-rose-500" />
-                              </FormItem>
-                            );
-                          }}
-                        />
-                      </div>
+const ProductNameField = ({
+  productForm,
+}: {
+  productForm: ProductFormProps;
+}) => (
+  <FormField
+    control={productForm.form.control}
+    name="name"
+    render={({ field }) => (
+      <FormItem>
+        <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+          Nome do Produto <span className="text-rose-500">*</span>
+        </FormLabel>
+        <FormControl>
+          <Input
+            placeholder="EX: MONITOR ULTRAWIDE 34 POLEGADAS"
+            className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+            {...field}
+            ref={productForm.nameInputRef}
+          />
+        </FormControl>
+        <FormMessage className="text-xs text-rose-500" />
+      </FormItem>
+    )}
+  />
+);
 
-                      <div
-                        className={cn(
-                          "mt-4 rounded-[4px] border px-4 py-3 flex items-center justify-between",
-                          isProfitable
-                            ? "border-emerald-900/30 bg-emerald-950/10"
-                            : "border-rose-900/30 bg-rose-950/10",
-                        )}
-                      >
-                        <span className="text-xs font-medium uppercase tracking-wide text-neutral-400">
-                          Lucro Estimado
-                        </span>
-                        <div className="flex items-center gap-2">
-                          <span
-                            className={cn(
-                              "text-sm font-bold font-mono",
-                              isProfitable
-                                ? "text-emerald-500"
-                                : "text-rose-500",
-                            )}
-                          >
-                            {(profit / 100).toLocaleString("pt-BR", {
-                              style: "currency",
-                              currency: "BRL",
-                            })}
-                          </span>
-                          <div
-                            className={cn(
-                              "text-[10px] font-bold px-1.5 py-0.5 rounded border ml-1",
-                              isProfitable
-                                ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-500"
-                                : "border-rose-500/30 bg-rose-500/10 text-rose-500",
-                            )}
-                          >
-                            {margin.toFixed(1)}%
-                          </div>
-                        </div>
-                      </div>
+const ProductBarcodeField = ({
+  productForm,
+}: {
+  productForm: ProductFormProps;
+}) => (
+  <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
+    <FormField
+      control={productForm.form.control}
+      name="barcode"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            <Barcode className="size-3" /> Código de Barras
+          </FormLabel>
+          <div className="flex gap-2">
+            <FormControl>
+              <Input
+                placeholder="EAN / UPC / CODE128"
+                className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 font-mono text-sm focus:border-blue-600 focus:ring-0"
+                {...field}
+              />
+            </FormControl>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={productForm.openScanner}
+              className="size-10 shrink-0 rounded-[4px] border-neutral-800 bg-neutral-900 hover:bg-neutral-800 hover:text-white"
+            >
+              <Scan className="size-4" />
+            </Button>
+          </div>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  </div>
+);
 
-                      {showBatchDateFields && (
-                        <div
-                          className={cn(
-                            "grid grid-cols-1 gap-5",
-                            showQuantityField
-                              ? "md:grid-cols-3"
-                              : "md:grid-cols-2",
-                          )}
-                        >
-                          {showQuantityField && (
-                            <FormField
-                              control={form.control}
-                              name="quantity"
-                              render={({ field }) => {
-                                const { onChange, value, ...rest } = field;
-                                return (
-                                  <FormItem>
-                                    <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                                      {isInlineMode ? "Quantidade" : "Qtd. Inicial"}{" "}
-                                      <span className="text-rose-500">*</span>
-                                    </FormLabel>
-                                    {onQuantityIncrement && onQuantityDecrement ? (
-                                      <div className="flex">
-                                        <Button
-                                          type="button"
-                                          variant="outline"
-                                          onClick={onQuantityDecrement}
-                                          className="size-10 rounded-l-[4px] rounded-r-none border-neutral-800 bg-neutral-900 p-0 hover:bg-neutral-800 hover:text-white"
-                                          aria-label="Diminuir quantidade"
-                                        >
-                                          <Minus className="size-4" />
-                                        </Button>
-                                        <FormControl>
-                                          <NumberInput
-                                            {...rest}
-                                            value={value}
-                                            onValueChange={onChange}
-                                            mode="integer"
-                                            placeholder="0"
-                                            className="h-10 min-w-0 flex-1 rounded-none border-x-0 border-neutral-800 bg-neutral-900 text-center text-sm focus:border-blue-600 focus:ring-0"
-                                          />
-                                        </FormControl>
-                                        <Button
-                                          type="button"
-                                          variant="outline"
-                                          onClick={onQuantityIncrement}
-                                          className="size-10 rounded-l-none rounded-r-[4px] border-neutral-800 bg-neutral-900 p-0 hover:bg-neutral-800 hover:text-white"
-                                          aria-label="Aumentar quantidade"
-                                        >
-                                          <Plus className="size-4" />
-                                        </Button>
-                                      </div>
-                                    ) : (
-                                      <FormControl>
-                                        <NumberInput
-                                          {...rest}
-                                          value={value}
-                                          onValueChange={onChange}
-                                          mode="integer"
-                                          placeholder="0"
-                                          className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
-                                        />
-                                      </FormControl>
-                                    )}
-                                    <FormMessage className="text-xs text-rose-500" />
-                                  </FormItem>
-                                );
-                              }}
-                            />
-                          )}
-                          <FormField
-                            control={form.control}
-                            name="manufacturedDate"
-                            render={({ field }) => (
-                              <FormItem>
-                                <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400 flex items-center gap-2">
-                                  <Calendar className="size-3" /> Fabricação
-                                </FormLabel>
-                                <FormControl>
-                                  <Input
-                                    type="date"
-                                    className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
-                                    {...field}
-                                  />
-                                </FormControl>
-                                <FormMessage className="text-xs text-rose-500" />
-                              </FormItem>
-                            )}
-                          />
-                          <FormField
-                            control={form.control}
-                            name="expirationDate"
-                            render={({ field }) => (
-                              <FormItem>
-                                <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400 flex items-center gap-2">
-                                  <Calendar className="size-3" /> Validade
-                                </FormLabel>
-                                <FormControl>
-                                  <Input
-                                    type="date"
-                                    className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
-                                    {...field}
-                                  />
-                                </FormControl>
-                                <FormMessage className="text-xs text-rose-500" />
-                              </FormItem>
-                            )}
-                          />
-                        </div>
-                      )}
-                    </CardContent>
-                  </Card>
-                )}
-              </div>
+const ProductDescriptionField = ({
+  productForm,
+}: {
+  productForm: ProductFormProps;
+}) => (
+  <FormField
+    control={productForm.form.control}
+    name="description"
+    render={({ field }) => (
+      <FormItem>
+        <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+          Descrição Detalhada
+        </FormLabel>
+        <FormControl>
+          <Textarea
+            placeholder="Especificações técnicas, detalhes de uso, etc…"
+            className="min-h-[100px] resize-y rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+            {...field}
+          />
+        </FormControl>
+        <FormMessage className="text-xs text-rose-500" />
+      </FormItem>
+    )}
+  />
+);
 
-              {/* Right Column - Sidebar */}
-              <div className="space-y-6">
-                <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
-                  <CardHeader className="border-b border-neutral-800 pb-4">
-                    <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
-                      Imagem do Produto
-                    </CardTitle>
-                    {isInlineMode && (
-                      <CardDescription className="mt-2 text-xs text-neutral-500">
-                        A imagem será enviada somente ao registrar a movimentação.
-                      </CardDescription>
-                    )}
-                  </CardHeader>
-                  <CardContent className="pt-6">
-                    <ImageDropzone
-                      value={productImage}
-                      currentImageUrl={currentImageUrl}
-                      onImageSelect={handleImageSelect}
-                      onRemoveImage={handleImageRemove}
-                      disabled={isSubmitting}
-                      text={isInlineMode ? "Adicionar imagem temporária" : undefined}
-                    />
-                  </CardContent>
-                </Card>
+const ProductAttributesCard = ({
+  productForm,
+}: {
+  productForm: ProductFormProps;
+}) => (
+  <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
+    <CardHeader className="border-b border-neutral-800 pb-4">
+      <div className="flex items-center gap-2">
+        <Ruler className="size-4 text-blue-500" />
+        <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
+          Dimensões e Atributos
+        </CardTitle>
+      </div>
+    </CardHeader>
+    <CardContent className="space-y-6 pt-6">
+      <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
+        <ProductAttributeTextField
+          productForm={productForm}
+          name="attributes.weight"
+          icon={<Scale className="size-3" />}
+          label="Peso"
+          placeholder="EX: 1.5 KG"
+        />
+        <ProductAttributeTextField
+          productForm={productForm}
+          name="attributes.dimensions"
+          icon={<Box className="size-3" />}
+          label="Dimensões (C x L x A)"
+          placeholder="EX: 10 x 20 x 5 CM"
+        />
+      </div>
+      <div className="border-t border-neutral-800 pt-4">
+        <h4 className="mb-4 text-xs font-semibold uppercase tracking-wide text-white">
+          Atributos Personalizados
+        </h4>
+        <CustomAttributesBuilder
+          attributes={productForm.customAttributes}
+          onAdd={productForm.addCustomAttribute}
+          onRemove={productForm.removeCustomAttribute}
+          onUpdate={productForm.updateCustomAttribute}
+        />
+      </div>
+    </CardContent>
+  </Card>
+);
 
-                {/* Organization Card */}
-                <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
-                  <CardHeader className="border-b border-neutral-800 pb-4">
-                    <div className="flex items-center gap-2">
-                      <Tag className="size-4 text-amber-500" />
-                      <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
-                        Categorização
-                      </CardTitle>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="pt-6">
-                    <div className="grid grid-cols-1 gap-5">
-                      <FormField
-                        control={form.control}
-                        name="categoryId"
-                        render={({ field }) => (
-                          <FormItem className="space-y-1.5">
-                            <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400 flex items-center gap-2">
-                              <Layers className="size-3 text-amber-500/70" />
-                              Categoria
-                            </FormLabel>
-                            <Select
-                              key={field.value || "empty"}
-                              onValueChange={field.onChange}
-                              value={field.value || undefined}
-                            >
-                              <FormControl>
-                                <SelectTrigger className="w-full h-11 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:ring-0 focus:border-blue-600 transition-colors">
-                                  <SelectValue placeholder="Selecione a categoria…" />
-                                </SelectTrigger>
-                              </FormControl>
-                              <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300 max-h-[300px]">
-                                {isLoadingCategories ? (
-                                  <>
-                                    {field.value && (
-                                      <SelectItem
-                                        value={field.value}
-                                        className="text-xs"
-                                      >
-                                        Carregando…
-                                      </SelectItem>
-                                    )}
-                                    <div className="flex items-center justify-center p-2 text-xs text-muted-foreground">
-                                      <Loader2 className="mr-2 size-3 animate-spin" />
-                                      Carregando…
-                                    </div>
-                                  </>
-                                ) : (
-                                  categories.map((category) => {
-                                    const parentName =
-                                      getCategoryParentName(category);
+const ProductAttributeTextField = ({
+  icon,
+  label,
+  name,
+  placeholder,
+  productForm,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  name: "attributes.weight" | "attributes.dimensions";
+  placeholder: string;
+  productForm: ProductFormProps;
+}) => (
+  <FormField
+    control={productForm.form.control}
+    name={name}
+    render={({ field }) => (
+      <FormItem>
+        <FormLabel className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+          {icon} {label}
+        </FormLabel>
+        <FormControl>
+          <Input
+            placeholder={placeholder}
+            className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+            {...field}
+          />
+        </FormControl>
+        <FormMessage className="text-xs text-rose-500" />
+      </FormItem>
+    )}
+  />
+);
 
-                                    return (
-                                      <SelectItem
-                                        key={category.id}
-                                        value={category.id}
-                                        className="text-xs focus:bg-neutral-800 focus:text-white py-2.5"
-                                      >
-                                        <div className="flex items-center gap-2">
-                                          <div className="size-2 rounded-full bg-amber-500/50" />
-                                          {parentName ? (
-                                            <span className="inline-flex items-center gap-1">
-                                              <span className="text-neutral-500">
-                                                {parentName}
-                                              </span>
-                                              <span className="text-neutral-600">
-                                                /
-                                              </span>
-                                              <span>{category.name}</span>
-                                            </span>
-                                          ) : (
-                                            category.name
-                                          )}
-                                        </div>
-                                      </SelectItem>
-                                    );
-                                  })
-                                )}
-                              </SelectContent>
-                            </Select>
-                            <FormMessage className="text-xs text-rose-500" />
-                          </FormItem>
-                        )}
-                      />
+const ProductInventoryPricingCard = ({
+  productForm,
+  viewState,
+}: {
+  productForm: ProductFormProps;
+  viewState: ProductFormViewState;
+}) => (
+  <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
+    <CardHeader className="border-b border-neutral-800 pb-4">
+      <div className="flex items-center gap-2">
+        <DollarSign className="size-4 text-emerald-500" />
+        <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
+          Estoque e Precificação
+        </CardTitle>
+      </div>
+      <CardDescription className="mt-2 text-xs text-neutral-500">
+        {viewState.isInlineMode
+          ? "Os preços serão aplicados ao primeiro lote criado pela movimentação."
+          : "Ao salvar, o primeiro lote do produto será criado automaticamente com os dados informados nesta seção."}
+      </CardDescription>
+    </CardHeader>
+    <CardContent className="space-y-6 pt-6">
+      <PricingFields productForm={productForm} />
+      <ProfitSummary viewState={viewState} />
+      {viewState.showBatchDateFields && (
+        <BatchSeedFields productForm={productForm} viewState={viewState} />
+      )}
+    </CardContent>
+  </Card>
+);
 
-                      <FormField
-                        control={form.control}
-                        name="brandId"
-                        render={({ field }) => (
-                          <FormItem className="space-y-1.5">
-                            <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400 flex items-center gap-2">
-                              <CheckCircle2 className="size-3 text-blue-500/70" />
-                              Marca / Fabricante
-                            </FormLabel>
-                            <Select
-                              key={field.value || "empty"}
-                              onValueChange={field.onChange}
-                              value={field.value || undefined}
-                            >
-                              <FormControl>
-                                <SelectTrigger className="w-full h-11 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:ring-0 focus:border-blue-600 transition-colors">
-                                  <SelectValue placeholder="Selecione a marca…" />
-                                </SelectTrigger>
-                              </FormControl>
-                              <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300 max-h-[300px]">
-                                {isLoadingBrands ? (
-                                  <>
-                                    {field.value && (
-                                      <SelectItem
-                                        value={field.value}
-                                        className="text-xs"
-                                      >
-                                        Carregando…
-                                      </SelectItem>
-                                    )}
-                                    <div className="flex items-center justify-center p-2 text-xs text-muted-foreground">
-                                      <Loader2 className="mr-2 size-3 animate-spin" />
-                                      Carregando…
-                                    </div>
-                                  </>
-                                ) : (
-                                  brands.map((brand) => (
-                                    <SelectItem
-                                      key={brand.id}
-                                      value={brand.id}
-                                      className="text-xs focus:bg-neutral-800 focus:text-white py-2.5"
-                                    >
-                                      <div className="flex items-center gap-2">
-                                        {brand.logoUrl ? (
-                                          <Image
-                                            src={brand.logoUrl}
-                                            alt={brand.name}
-                                            width={16}
-                                            height={16}
-                                            unoptimized
-                                            className="size-4 object-contain rounded-[2px]"
-                                          />
-                                        ) : (
-                                          <div className="size-4 rounded-[2px] bg-neutral-800 flex items-center justify-center text-[8px] font-bold text-neutral-500">
-                                            {brand.name.substring(0, 1)}
-                                          </div>
-                                        )}
-                                        {brand.name}
-                                      </div>
-                                    </SelectItem>
-                                  ))
-                                )}
-                              </SelectContent>
-                            </Select>
-                            <FormMessage className="text-xs text-rose-500" />
-                          </FormItem>
-                        )}
-                      />
-                    </div>
-                  </CardContent>
-                </Card>
+const PricingFields = ({
+  productForm,
+}: {
+  productForm: ProductFormProps;
+}) => (
+  <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
+    <CurrencyFormField
+      productForm={productForm}
+      name="costPrice"
+      label="Preço de Custo"
+      placeholder="0,00"
+      className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-white focus:border-blue-600 focus:ring-0"
+    />
+    <CurrencyFormField
+      productForm={productForm}
+      name="sellingPrice"
+      label="Preço de Venda"
+      placeholder="0,00"
+      className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm font-bold text-emerald-500 focus:border-emerald-600 focus:ring-0"
+    />
+  </div>
+);
 
-                {/* Settings Card */}
-                <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
-                  <CardHeader className="border-b border-neutral-800 pb-4">
-                    <div className="flex items-center gap-2">
-                      <Settings2 className="size-4 text-neutral-500" />
-                      <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
-                        Configurações
-                      </CardTitle>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="pt-4 space-y-3">
-                    <FormField
-                      control={form.control}
-                      name="active"
-                      render={({ field }) => (
-                        <FormItem className="flex items-center justify-between rounded-[4px] border border-neutral-800 bg-neutral-900 p-3">
-                          <div className="space-y-0.5">
-                            <FormLabel className="text-xs font-bold uppercase tracking-wide text-white">
-                              {field.value ? "Ativo" : "Inativo"}
-                            </FormLabel>
-                            <FormDescription className="text-[10px] text-neutral-500">
-                              Status do produto no sistema
-                            </FormDescription>
-                          </div>
-                          <FormControl>
-                            <Switch
-                              checked={field.value}
-                              onCheckedChange={field.onChange}
-                              className="data-[state=checked]:bg-blue-600"
-                            />
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
+const CurrencyFormField = ({
+  className,
+  label,
+  name,
+  placeholder,
+  productForm,
+}: {
+  className: string;
+  label: string;
+  name: "costPrice" | "sellingPrice";
+  placeholder: string;
+  productForm: ProductFormProps;
+}) => (
+  <FormField
+    control={productForm.form.control}
+    name={name}
+    render={({ field }) => {
+      const { onChange, value, ...rest } = field;
+      return (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            {label}
+          </FormLabel>
+          <FormControl>
+            <CurrencyInput
+              {...rest}
+              value={value}
+              onValueChange={onChange}
+              placeholder={placeholder}
+              className={className}
+            />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      );
+    }}
+  />
+);
 
-                    {showContinuousMode && (
-                      <BatchModeSwitch
-                        control={form.control}
-                        isInlineMode={isInlineMode}
-                      />
-                    )}
+const ProfitSummary = ({
+  viewState,
+}: {
+  viewState: ProductFormViewState;
+}) => (
+  <div
+    className={cn(
+      "mt-4 flex items-center justify-between rounded-[4px] border px-4 py-3",
+      viewState.isProfitable
+        ? "border-emerald-900/30 bg-emerald-950/10"
+        : "border-rose-900/30 bg-rose-950/10",
+    )}
+  >
+    <span className="text-xs font-medium uppercase tracking-wide text-neutral-400">
+      Lucro Estimado
+    </span>
+    <div className="flex items-center gap-2">
+      <span
+        className={cn(
+          "font-mono text-sm font-bold",
+          viewState.isProfitable ? "text-emerald-500" : "text-rose-500",
+        )}
+      >
+        {(viewState.profit / 100).toLocaleString("pt-BR", {
+          style: "currency",
+          currency: "BRL",
+        })}
+      </span>
+      <div
+        className={cn(
+          "ml-1 rounded-[4px] border px-1.5 py-0.5 text-[10px] font-bold",
+          viewState.isProfitable
+            ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-500"
+            : "border-rose-500/30 bg-rose-500/10 text-rose-500",
+        )}
+      >
+        {viewState.margin.toFixed(1)}%
+      </div>
+    </div>
+  </div>
+);
 
-                    <div className="rounded-[4px] border border-neutral-800 bg-neutral-900/50 p-3">
-                      <FormField
-                        control={form.control}
-                        name="isKit"
-                        render={({ field }) => (
-                          <FormItem className="flex items-center justify-between">
-                            <FormLabel className="text-xs font-medium text-neutral-400 cursor-pointer">
-                              É um Kit (Combo)
-                            </FormLabel>
-                            <FormControl>
-                              <Switch
-                                checked={field.value}
-                                onCheckedChange={field.onChange}
-                                className="data-[state=checked]:bg-blue-600 scale-90"
-                              />
-                            </FormControl>
-                          </FormItem>
-                        )}
-                      />
-                    </div>
-                  </CardContent>
-                </Card>
-              </div>
-            </div>
+const BatchSeedFields = ({
+  productForm,
+  viewState,
+}: {
+  productForm: ProductFormProps;
+  viewState: ProductFormViewState;
+}) => (
+  <div
+    className={cn(
+      "grid grid-cols-1 gap-5",
+      viewState.showQuantityField ? "md:grid-cols-3" : "md:grid-cols-2",
+    )}
+  >
+    {viewState.showQuantityField && (
+      <QuantityField productForm={productForm} viewState={viewState} />
+    )}
+    <DateFormField
+      productForm={productForm}
+      name="manufacturedDate"
+      label="Fabricação"
+    />
+    <DateFormField
+      productForm={productForm}
+      name="expirationDate"
+      label="Validade"
+    />
+  </div>
+);
 
-            {/* Footer Action Bar */}
-            <div
-              className={cn(
-                "fixed bottom-0 left-0 right-0 z-40 border-t border-neutral-800 bg-[#0A0A0A]/95 p-4 backdrop-blur-sm md:ml-[var(--sidebar-width)]",
-                isFooterVisible
-                  ? "translate-y-0"
-                  : "translate-y-[calc(100%+1rem)]",
-              )}
-            >
-              <div className="mx-auto flex w-full max-w-7xl flex-col md:flex-row items-center md:justify-end gap-3 px-4 md:px-6 lg:px-8">
-                {isInlineMode && showMobileBatchModeToggle && (
-                  <div className="w-full md:hidden">
-                    <BatchModeSwitch
-                      control={form.control}
-                      isInlineMode={isInlineMode}
-                      compact
-                    />
-                  </div>
-                )}
-                <Button
-                  variant="outline"
-                  type="button"
-                  className="h-10 w-full md:w-auto rounded-[4px] border-neutral-700 bg-transparent text-xs font-bold uppercase tracking-wide text-neutral-300 hover:bg-neutral-800 hover:text-white"
-                  asChild
-                >
-                  <Link href={productCancelHref} onClick={onCancel}>
-                    Cancelar
-                  </Link>
-                </Button>
-                <Button
-                  type="submit"
-                  className="h-10 w-full md:w-[160px] rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 shadow-[0_0_20px_-5px_rgba(37,99,235,0.3)]"
-                  disabled={isSubmitting || (!isInlineMode && !warehouseId)}
-                >
-                  {isSubmitting ? (
-                    <>
-                      <Loader2 className="mr-2 size-3.5 animate-spin" />
-                      Salvando…
-                    </>
-                  ) : (
-                    <>
-                      <CheckCircle2 className="mr-2 size-3.5" />
-                      {submitLabel}
-                    </>
-                  )}
-                </Button>
-              </div>
+const QuantityField = ({
+  productForm,
+  viewState,
+}: {
+  productForm: ProductFormProps;
+  viewState: ProductFormViewState;
+}) => (
+  <FormField
+    control={productForm.form.control}
+    name="quantity"
+    render={({ field }) => {
+      const { onChange, value, ...rest } = field;
+      const hasStepper = productForm.onQuantityIncrement && productForm.onQuantityDecrement;
+      return (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            {viewState.isInlineMode ? "Quantidade" : "Qtd. Inicial"}{" "}
+            <span className="text-rose-500">*</span>
+          </FormLabel>
+          {hasStepper ? (
+            <div className="flex">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={productForm.onQuantityDecrement}
+                className="size-10 rounded-l-[4px] rounded-r-none border-neutral-800 bg-neutral-900 p-0 hover:bg-neutral-800 hover:text-white"
+                aria-label="Diminuir quantidade"
+              >
+                <Minus className="size-4" />
+              </Button>
+              <FormControl>
+                <NumberInput
+                  {...rest}
+                  value={value}
+                  onValueChange={onChange}
+                  mode="integer"
+                  placeholder="0"
+                  className="h-10 min-w-0 flex-1 rounded-none border-x-0 border-neutral-800 bg-neutral-900 text-center text-sm focus:border-blue-600 focus:ring-0"
+                />
+              </FormControl>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={productForm.onQuantityIncrement}
+                className="size-10 rounded-l-none rounded-r-[4px] border-neutral-800 bg-neutral-900 p-0 hover:bg-neutral-800 hover:text-white"
+                aria-label="Aumentar quantidade"
+              >
+                <Plus className="size-4" />
+              </Button>
             </div>
-          </form>
-        </Form>
-      </main>
+          ) : (
+            <FormControl>
+              <NumberInput
+                {...rest}
+                value={value}
+                onValueChange={onChange}
+                mode="integer"
+                placeholder="0"
+                className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+              />
+            </FormControl>
+          )}
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      );
+    }}
+  />
+);
 
-      {batchesDrawerState && (
-        <Drawer
-          open={batchesDrawerState.isOpen}
-          onOpenChange={batchesDrawerState.onOpenChange}
-          direction={batchesDrawerState.direction}
+const DateFormField = ({
+  label,
+  name,
+  productForm,
+}: {
+  label: string;
+  name: "manufacturedDate" | "expirationDate";
+  productForm: ProductFormProps;
+}) => (
+  <FormField
+    control={productForm.form.control}
+    name={name}
+    render={({ field }) => (
+      <FormItem>
+        <FormLabel className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+          <Calendar className="size-3" /> {label}
+        </FormLabel>
+        <FormControl>
+          <Input
+            type="date"
+            className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+            {...field}
+          />
+        </FormControl>
+        <FormMessage className="text-xs text-rose-500" />
+      </FormItem>
+    )}
+  />
+);
+
+const ProductSidebar = ({
+  productForm,
+  viewState,
+}: {
+  productForm: ProductFormProps;
+  viewState: ProductFormViewState;
+}) => (
+  <div className="space-y-6">
+    <ProductImageCard productForm={productForm} viewState={viewState} />
+    <ProductOrganizationCard productForm={productForm} />
+    <ProductSettingsCard productForm={productForm} viewState={viewState} />
+  </div>
+);
+
+const ProductImageCard = ({
+  productForm,
+  viewState,
+}: {
+  productForm: ProductFormProps;
+  viewState: ProductFormViewState;
+}) => (
+  <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
+    <CardHeader className="border-b border-neutral-800 pb-4">
+      <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
+        Imagem do Produto
+      </CardTitle>
+      {viewState.isInlineMode && (
+        <CardDescription className="mt-2 text-xs text-neutral-500">
+          A imagem será enviada somente ao registrar a movimentação.
+        </CardDescription>
+      )}
+    </CardHeader>
+    <CardContent className="pt-6">
+      <ImageDropzone
+        value={productForm.productImage}
+        currentImageUrl={productForm.currentImageUrl}
+        onImageSelect={productForm.handleImageSelect}
+        onProcessingChange={productForm.handleImageProcessingChange}
+        onRemoveImage={productForm.handleImageRemove}
+        disabled={productForm.isSubmitting}
+        text={
+          viewState.isInlineMode ? "Adicionar imagem temporária" : undefined
+        }
+      />
+    </CardContent>
+  </Card>
+);
+
+const ProductOrganizationCard = ({
+  productForm,
+}: {
+  productForm: ProductFormProps;
+}) => (
+  <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
+    <CardHeader className="border-b border-neutral-800 pb-4">
+      <div className="flex items-center gap-2">
+        <Tag className="size-4 text-amber-500" />
+        <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
+          Categorização
+        </CardTitle>
+      </div>
+    </CardHeader>
+    <CardContent className="pt-6">
+      <div className="grid grid-cols-1 gap-5">
+        <CategorySelectField productForm={productForm} />
+        <BrandSelectField productForm={productForm} />
+      </div>
+    </CardContent>
+  </Card>
+);
+
+const CategorySelectField = ({
+  productForm,
+}: {
+  productForm: ProductFormProps;
+}) => (
+  <FormField
+    control={productForm.form.control}
+    name="categoryId"
+    render={({ field }) => (
+      <FormItem className="space-y-1.5">
+        <FormLabel className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+          <Layers className="size-3 text-amber-500/70" />
+          Categoria
+        </FormLabel>
+        <Select
+          key={field.value || "empty"}
+          onValueChange={field.onChange}
+          value={field.value || undefined}
         >
-          <DrawerContent className="border-neutral-800 bg-[#171717] data-[vaul-drawer-direction=right]:w-full data-[vaul-drawer-direction=right]:max-w-xl">
-            <div className="flex h-full flex-col">
-              <DrawerHeader className="border-b border-neutral-800 px-4 py-3">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <div className="flex size-8 items-center justify-center rounded-[4px] bg-neutral-900 border border-neutral-800">
-                      <Layers className="size-4 text-blue-500" />
-                    </div>
-                    <div>
-                      <DrawerTitle className="text-sm font-bold uppercase tracking-wide text-white">
-                        Gerenciar Lotes
-                      </DrawerTitle>
-                      <p className="text-[10px] text-neutral-500">
-                        Edite os lotes vinculados a este produto
-                      </p>
-                    </div>
-                  </div>
-                  <DrawerClose asChild>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      className="size-8 rounded-[4px] text-neutral-400 hover:bg-neutral-800 hover:text-white"
-                    >
-                      <X className="size-4" />
-                    </Button>
-                  </DrawerClose>
-                </div>
-              </DrawerHeader>
+          <FormControl>
+            <SelectTrigger className="h-11 w-full rounded-[4px] border-neutral-800 bg-neutral-900 text-sm transition-colors focus:border-blue-600 focus:ring-0">
+              <SelectValue placeholder="Selecione a categoria…" />
+            </SelectTrigger>
+          </FormControl>
+          <SelectContent className="max-h-[300px] rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+            {productForm.isLoadingCategories ? (
+              <LoadingSelectContent value={field.value} />
+            ) : (
+              productForm.categories.map((category) => (
+                <CategorySelectItem key={category.id} category={category} />
+              ))
+            )}
+          </SelectContent>
+        </Select>
+        <FormMessage className="text-xs text-rose-500" />
+      </FormItem>
+    )}
+  />
+);
+
+const LoadingSelectContent = ({ value }: { value?: string | null }) => (
+  <>
+    {value && (
+      <SelectItem value={value} className="text-xs">
+        Carregando…
+      </SelectItem>
+    )}
+    <div className="flex items-center justify-center p-2 text-xs text-muted-foreground">
+      <Loader2 className="mr-2 size-3 animate-spin" />
+      Carregando…
+    </div>
+  </>
+);
+
+const CategorySelectItem = ({
+  category,
+}: {
+  category: ProductFormProps["categories"][number];
+}) => {
+  const parentName = getCategoryParentName(category);
+
+  return (
+    <SelectItem
+      value={category.id}
+      className="py-2.5 text-xs focus:bg-neutral-800 focus:text-white"
+    >
+      <div className="flex items-center gap-2">
+        <div className="size-2 rounded-[2px] bg-amber-500/50" />
+        {parentName ? (
+          <span className="inline-flex items-center gap-1">
+            <span className="text-neutral-500">{parentName}</span>
+            <span className="text-neutral-600">/</span>
+            <span>{category.name}</span>
+          </span>
+        ) : (
+          category.name
+        )}
+      </div>
+    </SelectItem>
+  );
+};
 
-              <div className="flex-1 overflow-y-auto p-4 custom-scrollbar">
-                {batchesDrawerState.isLoading && (
-                  <div className="flex items-center justify-center rounded-[4px] border border-neutral-800 bg-neutral-900/50 p-6">
-                    <Loader2 className="mr-2 size-4 animate-spin text-blue-600" />
-                    <span className="text-xs text-neutral-400">
-                      Carregando lotes…
-                    </span>
-                  </div>
-                )}
+const BrandSelectField = ({
+  productForm,
+}: {
+  productForm: ProductFormProps;
+}) => (
+  <FormField
+    control={productForm.form.control}
+    name="brandId"
+    render={({ field }) => (
+      <FormItem className="space-y-1.5">
+        <FormLabel className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+          <CheckCircle2 className="size-3 text-blue-500/70" />
+          Marca / Fabricante
+        </FormLabel>
+        <Select
+          key={field.value || "empty"}
+          onValueChange={field.onChange}
+          value={field.value || undefined}
+        >
+          <FormControl>
+            <SelectTrigger className="h-11 w-full rounded-[4px] border-neutral-800 bg-neutral-900 text-sm transition-colors focus:border-blue-600 focus:ring-0">
+              <SelectValue placeholder="Selecione a marca…" />
+            </SelectTrigger>
+          </FormControl>
+          <SelectContent className="max-h-[300px] rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+            {productForm.isLoadingBrands ? (
+              <LoadingSelectContent value={field.value} />
+            ) : (
+              productForm.brands.map((brand) => (
+                <BrandSelectItem key={brand.id} brand={brand} />
+              ))
+            )}
+          </SelectContent>
+        </Select>
+        <FormMessage className="text-xs text-rose-500" />
+      </FormItem>
+    )}
+  />
+);
 
-                {!batchesDrawerState.isLoading &&
-                  batchesDrawerState.fields.length === 0 && (
-                    <div className="rounded-[4px] border border-neutral-800 bg-neutral-900/50 p-6 text-center">
-                      <p className="text-xs uppercase tracking-wide text-neutral-500">
-                        Nenhum lote encontrado para este produto
-                      </p>
-                    </div>
-                  )}
+const BrandSelectItem = ({
+  brand,
+}: {
+  brand: ProductFormProps["brands"][number];
+}) => (
+  <SelectItem
+    value={brand.id}
+    className="py-2.5 text-xs focus:bg-neutral-800 focus:text-white"
+  >
+    <div className="flex items-center gap-2">
+      {brand.logoUrl ? (
+        <Image
+          src={brand.logoUrl}
+          alt={brand.name}
+          width={16}
+          height={16}
+          unoptimized
+          className="size-4 rounded-[2px] object-contain"
+        />
+      ) : (
+        <div className="flex size-4 items-center justify-center rounded-[2px] bg-neutral-800 text-[8px] font-bold text-neutral-500">
+          {brand.name.substring(0, 1)}
+        </div>
+      )}
+      {brand.name}
+    </div>
+  </SelectItem>
+);
 
-                {!batchesDrawerState.isLoading &&
-                  batchesDrawerState.fields.length > 0 && (
-                    <Form {...batchesDrawerState.form}>
-                      <Accordion type="multiple" className="space-y-3">
-                        {batchesDrawerState.fields.map((batch, index) => (
-                          <AccordionItem
-                            key={batch.fieldId || batch.id}
-                            value={batch.fieldId || batch.id}
-                            className="rounded-[4px] border border-neutral-800 bg-neutral-900/30 px-3"
-                          >
-                            <AccordionTrigger className="py-3 hover:no-underline">
-                              <div className="flex flex-1 flex-col gap-1 text-left">
-                                <div className="flex items-center justify-between gap-3">
-                                  <span className="text-xs font-bold uppercase tracking-wide text-white">
-                                    {batch.batchCode}
-                                  </span>
-                                  <span className="text-[10px] font-mono text-neutral-400 bg-neutral-900 px-1.5 py-0.5 rounded-[2px] border border-neutral-800">
-                                    QTD: {batch.quantity}
-                                  </span>
-                                </div>
-                                <div className="flex flex-wrap items-center gap-2 text-[10px] text-neutral-500">
-                                  <span className="uppercase">
-                                    {batch.warehouseName}
-                                  </span>
-                                  <span className="text-neutral-700">•</span>
-                                  <span>
-                                    {batch.expirationDate
-                                      ? `VAL: ${batch.expirationDate}`
-                                      : "SEM VALIDADE"}
-                                  </span>
-                                </div>
-                              </div>
-                            </AccordionTrigger>
-                            <AccordionContent>
-                              <div
-                                className="max-h-[70vh] overflow-y-auto pr-1"
-                                data-testid="batch-accordion-scroll"
-                              >
-                                <div className="space-y-4 pb-2 pt-2">
-                                  <div className="grid gap-4">
-                                    <div className="grid gap-4 md:grid-cols-2">
-                                      <FormField
-                                        control={
-                                          batchesDrawerState.form.control
-                                        }
-                                        name={`batches.${index}.quantity`}
-                                        render={({ field }) => (
-                                          <FormItem>
-                                            <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                                              Quantidade
-                                            </FormLabel>
-                                            <FormControl>
-                                              <Input
-                                                type="number"
-                                                className="h-9 rounded-[4px] border-neutral-800 bg-neutral-900 text-xs focus:border-blue-600 focus:ring-0"
-                                                {...field}
-                                                value={field.value ?? 0}
-                                                onChange={(event) => {
-                                                  const value =
-                                                    event.target.value;
-                                                  field.onChange(
-                                                    value === ""
-                                                      ? 0
-                                                      : Number(value),
-                                                  );
-                                                }}
-                                              />
-                                            </FormControl>
-                                            <FormMessage />
-                                          </FormItem>
-                                        )}
-                                      />
-                                      <FormField
-                                        control={
-                                          batchesDrawerState.form.control
-                                        }
-                                        name={`batches.${index}.expirationDate`}
-                                        render={({ field }) => (
-                                          <FormItem>
-                                            <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                                              Validade
-                                            </FormLabel>
-                                            <FormControl>
-                                              <Input
-                                                type="date"
-                                                className="h-9 rounded-[4px] border-neutral-800 bg-neutral-900 text-xs focus:border-blue-600 focus:ring-0"
-                                                {...field}
-                                                value={field.value || ""}
-                                                onChange={(event) =>
-                                                  field.onChange(
-                                                    event.target.value || "",
-                                                  )
-                                                }
-                                              />
-                                            </FormControl>
-                                            <FormMessage />
-                                          </FormItem>
-                                        )}
-                                      />
-                                    </div>
+const ProductSettingsCard = ({
+  productForm,
+  viewState,
+}: {
+  productForm: ProductFormProps;
+  viewState: ProductFormViewState;
+}) => (
+  <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
+    <CardHeader className="border-b border-neutral-800 pb-4">
+      <div className="flex items-center gap-2">
+        <Settings2 className="size-4 text-neutral-500" />
+        <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
+          Configurações
+        </CardTitle>
+      </div>
+    </CardHeader>
+    <CardContent className="space-y-3 pt-4">
+      <ProductActiveSwitch productForm={productForm} />
+      {viewState.showContinuousMode && (
+        <BatchModeSwitch
+          control={productForm.form.control}
+          isInlineMode={viewState.isInlineMode}
+        />
+      )}
+      <ProductKitSwitch productForm={productForm} />
+    </CardContent>
+  </Card>
+);
 
-                                    <div className="grid gap-4 md:grid-cols-2">
-                                      <FormField
-                                        control={
-                                          batchesDrawerState.form.control
-                                        }
-                                        name={`batches.${index}.costPrice`}
-                                        render={({ field }) => {
-                                          const { onChange, value, ...rest } =
-                                            field;
-                                          return (
-                                            <FormItem>
-                                              <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                                                Custo Unitário
-                                              </FormLabel>
-                                              <FormControl>
-                                                <CurrencyInput
-                                                  {...rest}
-                                                  value={value}
-                                                  onValueChange={onChange}
-                                                  placeholder="0,00"
-                                                  className="h-9 rounded-[4px] border-neutral-800 bg-neutral-900 text-xs focus:border-blue-600 focus:ring-0"
-                                                />
-                                              </FormControl>
-                                              <FormMessage />
-                                            </FormItem>
-                                          );
-                                        }}
-                                      />
-                                      <FormField
-                                        control={
-                                          batchesDrawerState.form.control
-                                        }
-                                        name={`batches.${index}.sellingPrice`}
-                                        render={({ field }) => {
-                                          const { onChange, value, ...rest } =
-                                            field;
-                                          return (
-                                            <FormItem>
-                                              <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                                                Preço de Venda
-                                              </FormLabel>
-                                              <FormControl>
-                                                <CurrencyInput
-                                                  {...rest}
-                                                  value={value}
-                                                  onValueChange={onChange}
-                                                  placeholder="0,00"
-                                                  className="h-9 rounded-[4px] border-neutral-800 bg-neutral-900 text-xs focus:border-emerald-600 focus:ring-0 text-emerald-500 font-bold"
-                                                />
-                                              </FormControl>
-                                              <FormMessage />
-                                            </FormItem>
-                                          );
-                                        }}
-                                      />
-                                    </div>
+const ProductActiveSwitch = ({
+  productForm,
+}: {
+  productForm: ProductFormProps;
+}) => (
+  <FormField
+    control={productForm.form.control}
+    name="active"
+    render={({ field }) => (
+      <FormItem className="flex items-center justify-between rounded-[4px] border border-neutral-800 bg-neutral-900 p-3">
+        <div className="space-y-0.5">
+          <FormLabel className="text-xs font-bold uppercase tracking-wide text-white">
+            {field.value ? "Ativo" : "Inativo"}
+          </FormLabel>
+          <FormDescription className="text-[10px] text-neutral-500">
+            Status do produto no sistema
+          </FormDescription>
+        </div>
+        <FormControl>
+          <Switch
+            checked={field.value}
+            onCheckedChange={field.onChange}
+            className="data-[state=checked]:bg-blue-600"
+          />
+        </FormControl>
+      </FormItem>
+    )}
+  />
+);
 
-                                    <FormField
-                                      control={batchesDrawerState.form.control}
-                                      name={`batches.${index}.notes`}
-                                      render={({ field }) => (
-                                        <FormItem>
-                                          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                                            Observações
-                                          </FormLabel>
-                                          <FormControl>
-                                            <Textarea
-                                              className="min-h-[60px] resize-none rounded-[4px] border-neutral-800 bg-neutral-900 text-xs focus:border-blue-600 focus:ring-0"
-                                              {...field}
-                                              value={field.value || ""}
-                                              onChange={(event) =>
-                                                field.onChange(
-                                                  event.target.value,
-                                                )
-                                              }
-                                            />
-                                          </FormControl>
-                                          <FormMessage />
-                                        </FormItem>
-                                      )}
-                                    />
-                                  </div>
+const ProductKitSwitch = ({
+  productForm,
+}: {
+  productForm: ProductFormProps;
+}) => (
+  <div className="rounded-[4px] border border-neutral-800 bg-neutral-900/50 p-3">
+    <FormField
+      control={productForm.form.control}
+      name="isKit"
+      render={({ field }) => (
+        <FormItem className="flex items-center justify-between">
+          <FormLabel className="cursor-pointer text-xs font-medium text-neutral-400">
+            É um Kit (Combo)
+          </FormLabel>
+          <FormControl>
+            <Switch
+              checked={field.value}
+              onCheckedChange={field.onChange}
+              className="scale-90 data-[state=checked]:bg-blue-600"
+            />
+          </FormControl>
+        </FormItem>
+      )}
+    />
+  </div>
+);
 
-                                  <Button
-                                    type="button"
-                                    onClick={() =>
-                                      batchesDrawerState.onSave(index)
-                                    }
-                                    disabled={
-                                      batchesDrawerState.updatingBatchId ===
-                                      batch.id
-                                    }
-                                    className="w-full h-9 rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 shadow-[0_0_15px_-5px_rgba(37,99,235,0.3)]"
-                                  >
-                                    {batchesDrawerState.updatingBatchId ===
-                                    batch.id ? (
-                                      <>
-                                        <Loader2 className="mr-2 size-3.5 animate-spin" />
-                                        Salvando…
-                                      </>
-                                    ) : (
-                                      "Salvar Alterações"
-                                    )}
-                                  </Button>
-                                </div>
-                              </div>
-                            </AccordionContent>
-                          </AccordionItem>
-                        ))}
-                      </Accordion>
-                    </Form>
-                  )}
-              </div>
-            </div>
-          </DrawerContent>
-        </Drawer>
+const ProductFooterActionBar = ({
+  productForm,
+  viewState,
+}: {
+  productForm: ProductFormProps;
+  viewState: ProductFormViewState;
+}) => (
+  <div
+    className={cn(
+      "fixed bottom-0 left-0 right-0 z-40 border-t border-neutral-800 bg-[#0A0A0A]/95 p-4 backdrop-blur-sm md:ml-[var(--sidebar-width)]",
+      viewState.isFooterVisible
+        ? "translate-y-0"
+        : "translate-y-[calc(100%+1rem)]",
+    )}
+  >
+    <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-3 px-4 md:flex-row md:justify-end md:px-6 lg:px-8">
+      {viewState.isInlineMode && viewState.showMobileBatchModeToggle && (
+        <div className="w-full md:hidden">
+          <BatchModeSwitch
+            control={productForm.form.control}
+            isInlineMode={viewState.isInlineMode}
+            compact
+          />
+        </div>
       )}
+      <Button
+        variant="outline"
+        type="button"
+        className="h-10 w-full rounded-[4px] border-neutral-700 bg-transparent text-xs font-bold uppercase tracking-wide text-neutral-300 hover:bg-neutral-800 hover:text-white md:w-auto"
+        asChild
+      >
+        <Link href={viewState.productCancelHref} onClick={productForm.onCancel}>
+          Cancelar
+        </Link>
+      </Button>
+      <Button
+        type="submit"
+        className="h-10 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 md:w-[160px]"
+        disabled={
+          productForm.isSubmitting ||
+          Boolean(productForm.isImageProcessing) ||
+          (!viewState.isInlineMode && !productForm.warehouseId)
+        }
+      >
+        {productForm.isImageProcessing ? (
+          <>
+            <Loader2 className="mr-2 size-3.5 animate-spin" />
+            Imagem…
+          </>
+        ) : productForm.isSubmitting ? (
+          <>
+            <Loader2 className="mr-2 size-3.5 animate-spin" />
+            Salvando…
+          </>
+        ) : (
+          <>
+            <CheckCircle2 className="mr-2 size-3.5" />
+            {viewState.submitLabel}
+          </>
+        )}
+      </Button>
     </div>
+  </div>
+);
+
+const ProductBatchesDrawer = ({
+  viewState,
+}: {
+  viewState: ProductFormViewState;
+}) => {
+  if (!viewState.batchesDrawerState) return null;
+
+  return (
+    <Drawer
+      open={viewState.batchesDrawerState.isOpen}
+      onOpenChange={viewState.batchesDrawerState.onOpenChange}
+      direction={viewState.batchesDrawerState.direction}
+    >
+      <DrawerContent className="border-neutral-800 bg-[#171717] data-[vaul-drawer-direction=right]:w-full data-[vaul-drawer-direction=right]:max-w-xl">
+        <div className="flex h-full flex-col">
+          <BatchesDrawerHeader />
+          <BatchesDrawerBody drawerState={viewState.batchesDrawerState} />
+        </div>
+      </DrawerContent>
+    </Drawer>
   );
 };
+
+const BatchesDrawerHeader = () => (
+  <DrawerHeader className="border-b border-neutral-800 px-4 py-3">
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-2">
+        <div className="flex size-8 items-center justify-center rounded-[4px] border border-neutral-800 bg-neutral-900">
+          <Layers className="size-4 text-blue-500" />
+        </div>
+        <div>
+          <DrawerTitle className="text-sm font-bold uppercase tracking-wide text-white">
+            Gerenciar Lotes
+          </DrawerTitle>
+          <p className="text-[10px] text-neutral-500">
+            Edite os lotes vinculados a este produto
+          </p>
+        </div>
+      </div>
+      <DrawerClose asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="size-8 rounded-[4px] text-neutral-400 hover:bg-neutral-800 hover:text-white"
+        >
+          <X className="size-4" />
+        </Button>
+      </DrawerClose>
+    </div>
+  </DrawerHeader>
+);
+
+const BatchesDrawerBody = ({
+  drawerState,
+}: {
+  drawerState: BatchesDrawerProps;
+}) => (
+  <div className="custom-scrollbar flex-1 overflow-y-auto p-4">
+    {drawerState.isLoading && <BatchesDrawerLoading />}
+    {!drawerState.isLoading && drawerState.fields.length === 0 && (
+      <BatchesDrawerEmpty />
+    )}
+    {!drawerState.isLoading && drawerState.fields.length > 0 && (
+      <BatchesDrawerForm drawerState={drawerState} />
+    )}
+  </div>
+);
+
+const BatchesDrawerLoading = () => (
+  <div className="flex items-center justify-center rounded-[4px] border border-neutral-800 bg-neutral-900/50 p-6">
+    <Loader2 className="mr-2 size-4 animate-spin text-blue-600" />
+    <span className="text-xs text-neutral-400">Carregando lotes…</span>
+  </div>
+);
+
+const BatchesDrawerEmpty = () => (
+  <div className="rounded-[4px] border border-neutral-800 bg-neutral-900/50 p-6 text-center">
+    <p className="text-xs uppercase tracking-wide text-neutral-500">
+      Nenhum lote encontrado para este produto
+    </p>
+  </div>
+);
+
+const BatchesDrawerForm = ({
+  drawerState,
+}: {
+  drawerState: BatchesDrawerProps;
+}) => (
+  <Form {...drawerState.form}>
+    <Accordion type="multiple" className="space-y-3">
+      {drawerState.fields.map((batch, index) => (
+        <BatchesDrawerItem
+          key={batch.fieldId || batch.id}
+          batch={batch}
+          drawerState={drawerState}
+          index={index}
+        />
+      ))}
+    </Accordion>
+  </Form>
+);
+
+const BatchesDrawerItem = ({
+  batch,
+  drawerState,
+  index,
+}: {
+  batch: BatchesDrawerProps["fields"][number];
+  drawerState: BatchesDrawerProps;
+  index: number;
+}) => (
+  <AccordionItem
+    value={batch.fieldId || batch.id}
+    className="rounded-[4px] border border-neutral-800 bg-neutral-900/30 px-3"
+  >
+    <AccordionTrigger className="py-3 hover:no-underline">
+      <BatchesDrawerItemHeader batch={batch} />
+    </AccordionTrigger>
+    <AccordionContent>
+      <div
+        className="max-h-[70vh] overflow-y-auto pr-1"
+        data-testid="batch-accordion-scroll"
+      >
+        <div className="space-y-4 pb-2 pt-2">
+          <BatchesDrawerFields drawerState={drawerState} index={index} />
+          <BatchesDrawerSaveButton
+            batchId={batch.id}
+            drawerState={drawerState}
+            index={index}
+          />
+        </div>
+      </div>
+    </AccordionContent>
+  </AccordionItem>
+);
+
+const BatchesDrawerItemHeader = ({
+  batch,
+}: {
+  batch: BatchesDrawerProps["fields"][number];
+}) => (
+  <div className="flex flex-1 flex-col gap-1 text-left">
+    <div className="flex items-center justify-between gap-3">
+      <span className="text-xs font-bold uppercase tracking-wide text-white">
+        {batch.batchCode}
+      </span>
+      <span className="rounded-[2px] border border-neutral-800 bg-neutral-900 px-1.5 py-0.5 font-mono text-[10px] text-neutral-400">
+        QTD: {batch.quantity}
+      </span>
+    </div>
+    <div className="flex flex-wrap items-center gap-2 text-[10px] text-neutral-500">
+      <span className="uppercase">{batch.warehouseName}</span>
+      <span className="text-neutral-700">•</span>
+      <span>
+        {batch.expirationDate ? `VAL: ${batch.expirationDate}` : "SEM VALIDADE"}
+      </span>
+    </div>
+  </div>
+);
+
+const BatchesDrawerFields = ({
+  drawerState,
+  index,
+}: {
+  drawerState: BatchesDrawerProps;
+  index: number;
+}) => (
+  <div className="grid gap-4">
+    <div className="grid gap-4 md:grid-cols-2">
+      <BatchDrawerQuantityField drawerState={drawerState} index={index} />
+      <BatchDrawerDateField drawerState={drawerState} index={index} />
+    </div>
+    <div className="grid gap-4 md:grid-cols-2">
+      <BatchDrawerCurrencyField
+        drawerState={drawerState}
+        index={index}
+        label="Custo Unitário"
+        name="costPrice"
+        className="h-9 rounded-[4px] border-neutral-800 bg-neutral-900 text-xs focus:border-blue-600 focus:ring-0"
+      />
+      <BatchDrawerCurrencyField
+        drawerState={drawerState}
+        index={index}
+        label="Preço de Venda"
+        name="sellingPrice"
+        className="h-9 rounded-[4px] border-neutral-800 bg-neutral-900 text-xs font-bold text-emerald-500 focus:border-emerald-600 focus:ring-0"
+      />
+    </div>
+    <BatchDrawerNotesField drawerState={drawerState} index={index} />
+  </div>
+);
+
+const BatchDrawerQuantityField = ({
+  drawerState,
+  index,
+}: {
+  drawerState: BatchesDrawerProps;
+  index: number;
+}) => (
+  <FormField
+    control={drawerState.form.control}
+    name={`batches.${index}.quantity` as const}
+    render={({ field }) => (
+      <FormItem>
+        <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+          Quantidade
+        </FormLabel>
+        <FormControl>
+          <Input
+            type="number"
+            className="h-9 rounded-[4px] border-neutral-800 bg-neutral-900 text-xs focus:border-blue-600 focus:ring-0"
+            {...field}
+            value={field.value ?? 0}
+            onChange={(event) => {
+              const value = event.target.value;
+              field.onChange(value === "" ? 0 : Number(value));
+            }}
+          />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    )}
+  />
+);
+
+const BatchDrawerDateField = ({
+  drawerState,
+  index,
+}: {
+  drawerState: BatchesDrawerProps;
+  index: number;
+}) => (
+  <FormField
+    control={drawerState.form.control}
+    name={`batches.${index}.expirationDate` as const}
+    render={({ field }) => (
+      <FormItem>
+        <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+          Validade
+        </FormLabel>
+        <FormControl>
+          <Input
+            type="date"
+            className="h-9 rounded-[4px] border-neutral-800 bg-neutral-900 text-xs focus:border-blue-600 focus:ring-0"
+            {...field}
+            value={field.value || ""}
+            onChange={(event) => field.onChange(event.target.value || "")}
+          />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    )}
+  />
+);
+
+const BatchDrawerCurrencyField = ({
+  className,
+  drawerState,
+  index,
+  label,
+  name,
+}: {
+  className: string;
+  drawerState: BatchesDrawerProps;
+  index: number;
+  label: string;
+  name: "costPrice" | "sellingPrice";
+}) => (
+  <FormField
+    control={drawerState.form.control}
+    name={`batches.${index}.${name}` as const}
+    render={({ field }) => {
+      const { onChange, value, ...rest } = field;
+      return (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            {label}
+          </FormLabel>
+          <FormControl>
+            <CurrencyInput
+              {...rest}
+              value={value}
+              onValueChange={onChange}
+              placeholder="0,00"
+              className={className}
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      );
+    }}
+  />
+);
+
+const BatchDrawerNotesField = ({
+  drawerState,
+  index,
+}: {
+  drawerState: BatchesDrawerProps;
+  index: number;
+}) => (
+  <FormField
+    control={drawerState.form.control}
+    name={`batches.${index}.notes` as const}
+    render={({ field }) => (
+      <FormItem>
+        <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+          Observações
+        </FormLabel>
+        <FormControl>
+          <Textarea
+            className="min-h-[60px] resize-none rounded-[4px] border-neutral-800 bg-neutral-900 text-xs focus:border-blue-600 focus:ring-0"
+            {...field}
+            value={field.value || ""}
+            onChange={(event) => field.onChange(event.target.value)}
+          />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    )}
+  />
+);
+
+const BatchesDrawerSaveButton = ({
+  batchId,
+  drawerState,
+  index,
+}: {
+  batchId: string;
+  drawerState: BatchesDrawerProps;
+  index: number;
+}) => (
+  <Button
+    type="button"
+    onClick={() => drawerState.onSave(index)}
+    disabled={drawerState.updatingBatchId === batchId}
+    className="h-9 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
+  >
+    {drawerState.updatingBatchId === batchId ? (
+      <>
+        <Loader2 className="mr-2 size-3.5 animate-spin" />
+        Salvando…
+      </>
+    ) : (
+      "Salvar Alterações"
+    )}
+  </Button>
+);
diff --git a/app/(pages)/products/create/products-create.model.test.ts b/app/(pages)/products/create/products-create.model.test.ts
index 89e6916..b2a5b5a 100644
--- a/app/(pages)/products/create/products-create.model.test.ts
+++ b/app/(pages)/products/create/products-create.model.test.ts
@@ -14,6 +14,7 @@ vi.mock("swr", () => ({
     data: { data: [] },
     isLoading: false,
   })),
+  mutate: vi.fn(),
 }));
 
 vi.mock("@/hooks/use-selected-warehouse", () => ({
@@ -130,6 +131,23 @@ describe("useProductCreateModel - multipart submit", () => {
     expect(imagePart).toBeInstanceOf(File);
   });
 
+  it("blocks submit while image is still processing", async () => {
+    const { result } = renderHook(() => useProductCreateModel());
+
+    act(() => {
+      result.current.handleImageProcessingChange(true);
+    });
+
+    await act(async () => {
+      await result.current.onSubmit(baseFormData);
+    });
+
+    expect(mockPost).not.toHaveBeenCalled();
+    expect(toast.error).toHaveBeenCalledWith(
+      "Aguarde a imagem terminar de processar antes de salvar.",
+    );
+  });
+
   it("handles scanner, AI modal and AI fill data", () => {
     const { result } = renderHook(() => useProductCreateModel());
     const image = new File(["img"], "ai.png", { type: "image/png" });
diff --git a/app/(pages)/products/create/products-create.model.ts b/app/(pages)/products/create/products-create.model.ts
index 0128b25..bfa1a40 100644
--- a/app/(pages)/products/create/products-create.model.ts
+++ b/app/(pages)/products/create/products-create.model.ts
@@ -8,7 +8,7 @@ import { api } from "@/lib/api";
 import { useRouter } from "next/navigation";
 import { useState, useEffect, useRef } from "react";
 import { toast } from "sonner";
-import useSWR from "swr";
+import useSWR, { mutate } from "swr";
 import { useSelectedWarehouse } from "@/hooks/use-selected-warehouse";
 import {
   CategoriesResponse,
@@ -59,6 +59,7 @@ export const useProductCreateModel = () => {
     []
   );
   const [productImage, setProductImage] = useState<File | null>(null);
+  const [isImageProcessing, setIsImageProcessing] = useState(false);
   const [isAiModalOpen, setIsAiModalOpen] = useState(false);
   const nameInputRef = useRef<HTMLInputElement>(null);
 
@@ -159,6 +160,10 @@ export const useProductCreateModel = () => {
     setProductImage(file);
   };
 
+  const handleImageProcessingChange = (isProcessing: boolean) => {
+    setIsImageProcessing(isProcessing);
+  };
+
   const openAiModal = () => setIsAiModalOpen(true);
   const closeAiModal = () => setIsAiModalOpen(false);
 
@@ -254,6 +259,11 @@ export const useProductCreateModel = () => {
       return;
     }
 
+    if (isImageProcessing) {
+      toast.error("Aguarde a imagem terminar de processar antes de salvar.");
+      return;
+    }
+
     setIsSubmitting(true);
     try {
       const payload = buildCreateProductWithBatchPayload(
@@ -284,6 +294,9 @@ export const useProductCreateModel = () => {
           resetForm(true); // Preserve category
         } else {
           toast.success("Produto e lote criados com sucesso!");
+          mutate((key) =>
+            typeof key === "string" && key.includes("products"),
+          );
           router.push("/products");
         }
       }
@@ -314,7 +327,9 @@ export const useProductCreateModel = () => {
     handleBarcodeScan,
     warehouseId,
     productImage,
+    isImageProcessing,
     handleImageSelect,
+    handleImageProcessingChange,
     currentImageUrl: undefined, // Create mode has no existing image
     handleImageRemove: undefined, // Create mode doesn't need remove handler
     isAiModalOpen,
diff --git a/app/(pages)/products/products.view.tsx b/app/(pages)/products/products.view.tsx
index c9e4cb8..cbb923a 100644
--- a/app/(pages)/products/products.view.tsx
+++ b/app/(pages)/products/products.view.tsx
@@ -69,21 +69,40 @@ import {
   Product,
   StockStatus,
   ActiveStatus,
+  ProductFilters,
 } from "./products.types";
 import { cn } from "@/lib/utils";
 
-// ── Filter option constants ──
-
 const STOCK_FILTER_OPTIONS: Array<{
   value: StockStatus;
   label: string;
   tone: string;
   icon: ReactNode;
 }> = [
-  { value: "all", label: "Todos", tone: "text-neutral-200", icon: <LayoutList className="size-3.5" strokeWidth={2.5} /> },
-  { value: "inStock", label: "Com estoque", tone: "text-emerald-400", icon: <CheckCircle2 className="size-3.5" strokeWidth={2.5} /> },
-  { value: "lowStock", label: "Baixo estoque", tone: "text-amber-400", icon: <TrendingDown className="size-3.5" strokeWidth={2.5} /> },
-  { value: "outOfStock", label: "Sem estoque", tone: "text-rose-400", icon: <XCircle className="size-3.5" strokeWidth={2.5} /> },
+  {
+    value: "all",
+    label: "Todos",
+    tone: "text-neutral-200",
+    icon: <LayoutList className="size-3.5" strokeWidth={2.5} />,
+  },
+  {
+    value: "inStock",
+    label: "Com estoque",
+    tone: "text-emerald-400",
+    icon: <CheckCircle2 className="size-3.5" strokeWidth={2.5} />,
+  },
+  {
+    value: "lowStock",
+    label: "Baixo estoque",
+    tone: "text-amber-400",
+    icon: <TrendingDown className="size-3.5" strokeWidth={2.5} />,
+  },
+  {
+    value: "outOfStock",
+    label: "Sem estoque",
+    tone: "text-rose-400",
+    icon: <XCircle className="size-3.5" strokeWidth={2.5} />,
+  },
 ];
 
 const ACTIVE_FILTER_OPTIONS: Array<{
@@ -92,9 +111,24 @@ const ACTIVE_FILTER_OPTIONS: Array<{
   tone: string;
   icon: ReactNode;
 }> = [
-  { value: "all", label: "Todos", tone: "text-neutral-200", icon: <LayoutList className="size-3.5" strokeWidth={2.5} /> },
-  { value: "active", label: "Ativos", tone: "text-emerald-400", icon: <Power className="size-3.5" strokeWidth={2.5} /> },
-  { value: "inactive", label: "Inativos", tone: "text-neutral-400", icon: <PowerOff className="size-3.5" strokeWidth={2.5} /> },
+  {
+    value: "all",
+    label: "Todos",
+    tone: "text-neutral-200",
+    icon: <LayoutList className="size-3.5" strokeWidth={2.5} />,
+  },
+  {
+    value: "active",
+    label: "Ativos",
+    tone: "text-emerald-400",
+    icon: <Power className="size-3.5" strokeWidth={2.5} />,
+  },
+  {
+    value: "inactive",
+    label: "Inativos",
+    tone: "text-neutral-400",
+    icon: <PowerOff className="size-3.5" strokeWidth={2.5} />,
+  },
 ];
 
 const SORT_FILTER_OPTIONS: Array<{
@@ -103,22 +137,22 @@ const SORT_FILTER_OPTIONS: Array<{
 }> = [
   { value: "name-asc", label: "Nome (A-Z)" },
   { value: "name-desc", label: "Nome (Z-A)" },
-  { value: "sku-asc", label: "SKU (A-Z)" },
-  { value: "sku-desc", label: "SKU (Z-A)" },
+  { value: "barcode-asc", label: "Código de barras (A-Z)" },
+  { value: "barcode-desc", label: "Código de barras (Z-A)" },
   { value: "createdAt-desc", label: "Recentes" },
   { value: "createdAt-asc", label: "Antigos" },
 ];
 
-// ── Label helpers ──
-
 const getStockFilterLabel = (status: StockStatus) =>
-  STOCK_FILTER_OPTIONS.find((o) => o.value === status)?.label ?? "Todos";
+  STOCK_FILTER_OPTIONS.find((option) => option.value === status)?.label ??
+  "Todos";
 
 const getActiveFilterLabel = (status: ActiveStatus) =>
-  ACTIVE_FILTER_OPTIONS.find((o) => o.value === status)?.label ?? "Todos";
+  ACTIVE_FILTER_OPTIONS.find((option) => option.value === status)?.label ??
+  "Todos";
 
 const getSortLabel = (sortBy: SortField, sortOrder: SortOrder) =>
-  SORT_FILTER_OPTIONS.find((o) => o.value === `${sortBy}-${sortOrder}`)
+  SORT_FILTER_OPTIONS.find((option) => option.value === `${sortBy}-${sortOrder}`)
     ?.label ?? "Nome (A-Z)";
 
 const getActiveFilterCount = (
@@ -134,8 +168,6 @@ const getActiveFilterCount = (
   return count;
 };
 
-// ── Drawer dismiss guard ──
-
 const preventDrawerDismissFromSelectPortal = (event: Event) => {
   const target = event.target as HTMLElement | null;
   if (
@@ -146,50 +178,8 @@ const preventDrawerDismissFromSelectPortal = (event: Event) => {
   }
 };
 
-// ── FilterToken component ──
-
-const FilterToken = ({
-  active,
-  count,
-  icon,
-  label,
-  onClick,
-  value,
-}: {
-  active?: boolean;
-  count?: number;
-  icon: ReactNode;
-  label: string;
-  onClick: () => void;
-  value?: string;
-}) => (
-  <Button
-    type="button"
-    variant="outline"
-    onClick={onClick}
-    className={cn(
-      "h-9 shrink-0 gap-2 rounded-[4px] border-neutral-800 bg-[#171717] px-3 text-[10px] font-bold uppercase tracking-widest text-neutral-400 hover:border-neutral-700 hover:bg-neutral-900 hover:text-white",
-      active &&
-        "border-blue-500/50 bg-blue-500/10 text-blue-100 hover:border-blue-500/70 hover:bg-blue-500/15",
-    )}
-  >
-    {icon}
-    <span>{label}</span>
-    {value && (
-      <span className="max-w-[120px] truncate text-neutral-200">{value}</span>
-    )}
-    {Boolean(count) && (
-      <span className="min-w-5 rounded-[4px] bg-blue-600 px-1.5 py-0.5 text-center text-[10px] font-black leading-none text-white">
-        {count}
-      </span>
-    )}
-  </Button>
-);
-
-// ── Status helpers ──
-
 const getStockStatus = (quantity: number) => {
-  if (quantity === 0)
+  if (quantity === 0) {
     return {
       label: "SEM ESTOQUE",
       color: "text-rose-500",
@@ -197,7 +187,9 @@ const getStockStatus = (quantity: number) => {
       border: "border-rose-500/20",
       indicator: "bg-rose-500",
     };
-  if (quantity < 10)
+  }
+
+  if (quantity < 10) {
     return {
       label: "BAIXO",
       color: "text-amber-500",
@@ -205,7 +197,9 @@ const getStockStatus = (quantity: number) => {
       border: "border-amber-500/20",
       indicator: "bg-amber-500",
     };
-  if (quantity < 50)
+  }
+
+  if (quantity < 50) {
     return {
       label: "REGULAR",
       color: "text-blue-500",
@@ -213,6 +207,8 @@ const getStockStatus = (quantity: number) => {
       border: "border-blue-500/20",
       indicator: "bg-blue-500",
     };
+  }
+
   return {
     label: "ALTO",
     color: "text-emerald-500",
@@ -222,22 +218,93 @@ const getStockStatus = (quantity: number) => {
   };
 };
 
-// ── Tone maps for filter buttons ──
+const stockToneMap: Record<
+  string,
+  { activeBorder: string; activeBg: string; activeText: string }
+> = {
+  all: {
+    activeBorder: "border-neutral-500/50",
+    activeBg: "bg-neutral-500/10",
+    activeText: "text-neutral-100",
+  },
+  inStock: {
+    activeBorder: "border-emerald-500/50",
+    activeBg: "bg-emerald-500/10",
+    activeText: "text-emerald-100",
+  },
+  lowStock: {
+    activeBorder: "border-amber-500/50",
+    activeBg: "bg-amber-500/10",
+    activeText: "text-amber-100",
+  },
+  outOfStock: {
+    activeBorder: "border-rose-500/50",
+    activeBg: "bg-rose-500/10",
+    activeText: "text-rose-100",
+  },
+};
 
-const stockToneMap: Record<string, { activeBorder: string; activeBg: string; activeText: string }> = {
-  all: { activeBorder: "border-neutral-500/50", activeBg: "bg-neutral-500/10", activeText: "text-neutral-100" },
-  inStock: { activeBorder: "border-emerald-500/50", activeBg: "bg-emerald-500/10", activeText: "text-emerald-100" },
-  lowStock: { activeBorder: "border-amber-500/50", activeBg: "bg-amber-500/10", activeText: "text-amber-100" },
-  outOfStock: { activeBorder: "border-rose-500/50", activeBg: "bg-rose-500/10", activeText: "text-rose-100" },
+const activeToneMap: Record<
+  string,
+  { activeBorder: string; activeBg: string; activeText: string }
+> = {
+  all: {
+    activeBorder: "border-neutral-500/50",
+    activeBg: "bg-neutral-500/10",
+    activeText: "text-neutral-100",
+  },
+  active: {
+    activeBorder: "border-emerald-500/50",
+    activeBg: "bg-emerald-500/10",
+    activeText: "text-emerald-100",
+  },
+  inactive: {
+    activeBorder: "border-neutral-500/50",
+    activeBg: "bg-neutral-500/10",
+    activeText: "text-neutral-300",
+  },
 };
 
-const activeToneMap: Record<string, { activeBorder: string; activeBg: string; activeText: string }> = {
-  all: { activeBorder: "border-neutral-500/50", activeBg: "bg-neutral-500/10", activeText: "text-neutral-100" },
-  active: { activeBorder: "border-emerald-500/50", activeBg: "bg-emerald-500/10", activeText: "text-emerald-100" },
-  inactive: { activeBorder: "border-neutral-500/50", activeBg: "bg-neutral-500/10", activeText: "text-neutral-300" },
+const hasVisibleProductFilters = (filters: ProductFilters) =>
+  filters.stockStatus !== "all" ||
+  filters.activeStatus !== "all" ||
+  Boolean(filters.searchQuery) ||
+  filters.sortBy !== "name" ||
+  filters.sortOrder !== "asc";
+
+export const ProductsView = (props: ProductsViewProps) => {
+  const activeFilterCount = getActiveFilterCount(
+    props.filters.stockStatus,
+    props.filters.activeStatus,
+    props.filters.sortBy,
+    props.filters.sortOrder,
+  );
+  const outOfStockCount = props.filteredProducts.filter(
+    (product) => product.totalQuantity === 0,
+  ).length;
+  const summary = { activeFilterCount, outOfStockCount };
+
+  return (
+    <>
+      <div className="min-h-screen bg-[#0A0A0A] pb-20 font-sans text-neutral-200">
+        <main className="mx-auto w-full max-w-7xl px-4 py-8 md:px-6 lg:px-8">
+          <div className="space-y-6">
+            <ProductsHeaderPanel props={props} summary={summary} />
+            <ProductsDataDisplay props={props} />
+          </div>
+        </main>
+      </div>
+      <ProductsMobileFiltersDrawer props={props} />
+      <ProductDeleteDialog props={props} />
+      <ProductSecondConfirmDialog props={props} />
+    </>
+  );
 };
 
-// ── Main View ──
+type ProductsSummary = {
+  activeFilterCount: number;
+  outOfStockCount: number;
+};
 
 const SortIcon = ({
   field,
@@ -249,6 +316,7 @@ const SortIcon = ({
   sortOrder: SortOrder;
 }) => {
   if (sortBy !== field) return <div className="size-3 opacity-0" />;
+
   return sortOrder === "asc" ? (
     <ArrowUp className="ml-1 size-3 text-blue-500" />
   ) : (
@@ -256,59 +324,149 @@ const SortIcon = ({
   );
 };
 
-const ProductActions = ({
-  product,
-  onOpenDeleteDialog,
+const FilterToken = ({
+  active,
+  count,
+  icon,
+  label,
+  onClick,
+  value,
 }: {
-  product: Product;
-  onOpenDeleteDialog: (product: Product) => void;
+  active?: boolean;
+  count?: number;
+  icon: ReactNode;
+  label: string;
+  onClick: () => void;
+  value?: string;
 }) => (
-  <DropdownMenu>
-    <DropdownMenuTrigger asChild>
-      <Button
-        variant="ghost"
-        size="icon"
-        className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-white"
-      >
-        <MoreHorizontal className="size-4" />
-      </Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent
-      align="end"
-      className="w-48 rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-200 shadow-xl"
+  <Button
+    type="button"
+    variant="outline"
+    onClick={onClick}
+    className={cn(
+      "h-9 shrink-0 gap-2 rounded-[4px] border-neutral-800 bg-[#171717] px-3 text-[10px] font-bold uppercase tracking-widest text-neutral-400 hover:border-neutral-700 hover:bg-neutral-900 hover:text-white",
+      active &&
+        "border-blue-500/50 bg-blue-500/10 text-blue-100 hover:border-blue-500/70 hover:bg-blue-500/15",
+    )}
+  >
+    {icon}
+    <span>{label}</span>
+    {value && (
+      <span className="max-w-[120px] truncate text-neutral-200">{value}</span>
+    )}
+    {Boolean(count) && (
+      <span className="min-w-5 rounded-[4px] bg-blue-600 px-1.5 py-0.5 text-center text-[10px] font-black leading-none text-white">
+        {count}
+      </span>
+    )}
+  </Button>
+);
+
+const ProductsHeaderPanel = ({
+  props,
+  summary,
+}: {
+  props: ProductsViewProps;
+  summary: ProductsSummary;
+}) => (
+  <div className="flex flex-col gap-5">
+    <ProductsPageTitle />
+    <ProductsMobileFilterTokens props={props} summary={summary} />
+    <ProductsKpiArea props={props} summary={summary} />
+    <ProductsToolbar props={props} />
+  </div>
+);
+
+const ProductsPageTitle = () => (
+  <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+    <div>
+      <h1 className="text-2xl font-semibold tracking-tighter text-white">
+        Produtos
+      </h1>
+      <p className="mt-1 text-sm text-neutral-500">
+        Gerencie o inventário de produtos
+      </p>
+    </div>
+  </div>
+);
+
+const ProductsMobileFilterTokens = ({
+  props,
+  summary,
+}: {
+  props: ProductsViewProps;
+  summary: ProductsSummary;
+}) => (
+  <div className="md:hidden">
+    <div className="relative -mx-4">
+      <div className="overflow-x-auto px-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        <div className="flex min-w-max gap-2 pb-1 pr-8">
+          <FilterToken
+            active={summary.activeFilterCount > 0}
+            count={summary.activeFilterCount}
+            icon={<SlidersHorizontal className="size-3.5" />}
+            label="Filtros"
+            onClick={props.onOpenMobileFilters}
+          />
+          <FilterToken
+            active={props.filters.stockStatus !== "all"}
+            icon={<Package className="size-3.5" />}
+            label="Estoque"
+            value={getStockFilterLabel(props.filters.stockStatus)}
+            onClick={props.onOpenMobileFilters}
+          />
+          <FilterToken
+            active={props.filters.activeStatus !== "all"}
+            icon={<Power className="size-3.5" />}
+            label="Status"
+            value={getActiveFilterLabel(props.filters.activeStatus)}
+            onClick={props.onOpenMobileFilters}
+          />
+          <FilterToken
+            active={
+              props.filters.sortBy !== "name" ||
+              props.filters.sortOrder !== "asc"
+            }
+            icon={<ArrowDownUp className="size-3.5" />}
+            label="Ordem"
+            value={getSortLabel(props.filters.sortBy, props.filters.sortOrder)}
+            onClick={props.onOpenMobileFilters}
+          />
+        </div>
+      </div>
+      <div className="pointer-events-none absolute bottom-0 right-0 top-0 w-12 bg-gradient-to-l from-[#0A0A0A] to-transparent" />
+    </div>
+  </div>
+);
+
+const ProductsKpiArea = ({
+  props,
+  summary,
+}: {
+  props: ProductsViewProps;
+  summary: ProductsSummary;
+}) => (
+  <>
+    <div className="hidden md:block">
+      <InsightCards
+        totalElements={props.pagination.totalElements}
+        outOfStockCount={summary.outOfStockCount}
+        isOutOfStockActive={props.filters.stockStatus === "outOfStock"}
+        onOutOfStockKpiClick={props.onOutOfStockKpiClick}
+      />
+    </div>
+    <div
+      data-slot="mobile-product-kpis"
+      className="grid grid-cols-2 gap-2 md:hidden"
     >
-      <DropdownMenuLabel className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-        Ações do Produto
-      </DropdownMenuLabel>
-      <DropdownMenuSeparator className="bg-neutral-800" />
-      <DropdownMenuItem asChild>
-        <Link
-          href={`/products/${product.id}`}
-          className="cursor-pointer focus:bg-neutral-800 focus:text-white flex items-center w-full"
-        >
-          <Eye className="mr-2 size-3.5" /> Detalhes
-        </Link>
-      </DropdownMenuItem>
-      <PermissionGate permission="products:update">
-        <DropdownMenuItem asChild>
-          <Link
-            href={`/products/${product.id}/edit`}
-            className="cursor-pointer focus:bg-neutral-800 focus:text-white flex items-center w-full"
-          >
-            <Pencil className="mr-2 size-3.5" /> Editar
-          </Link>
-        </DropdownMenuItem>
-      </PermissionGate>
-      <PermissionGate permission="batches:delete">
-        <DropdownMenuItem
-          onClick={() => onOpenDeleteDialog(product)}
-          className="cursor-pointer text-rose-500 focus:bg-rose-950/20 focus:text-rose-400"
-        >
-          <Trash2 className="mr-2 size-3.5" /> Remover do armazém
-        </DropdownMenuItem>
-      </PermissionGate>
-    </DropdownMenuContent>
-  </DropdownMenu>
+      <MobileInsightCards
+        totalElements={props.pagination.totalElements}
+        outOfStockCount={summary.outOfStockCount}
+        isOutOfStockActive={props.filters.stockStatus === "outOfStock"}
+        onOutOfStockKpiClick={props.onOutOfStockKpiClick}
+      />
+    </div>
+  </>
 );
 
 const InsightCards = ({
@@ -322,53 +480,44 @@ const InsightCards = ({
   isOutOfStockActive: boolean;
   onOutOfStockKpiClick: () => void;
 }) => (
-  <div className="flex items-center justify-between gap-6 rounded-[4px] border border-neutral-800 bg-[#171717] p-4 sm:p-5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-    {/* Total Items */}
-    <div className="flex items-center gap-3 sm:gap-4 shrink-0">
-      <div className="flex size-11 sm:size-12 shrink-0 items-center justify-center rounded-[4px] border border-blue-500/30 bg-blue-500/10">
-        <BarChart3 className="size-5 sm:size-6 text-blue-500" strokeWidth={2} />
+  <div className="flex items-center justify-between gap-6 overflow-x-auto rounded-[4px] border border-neutral-800 bg-[#171717] p-4 [scrollbar-width:none] sm:p-5 [&::-webkit-scrollbar]:hidden">
+    <div className="flex shrink-0 items-center gap-3 sm:gap-4">
+      <div className="flex size-11 shrink-0 items-center justify-center rounded-[4px] border border-blue-500/30 bg-blue-500/10 sm:size-12">
+        <BarChart3 className="size-5 text-blue-500 sm:size-6" strokeWidth={2} />
       </div>
       <div>
         <div className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
           Total Geral
         </div>
         <div className="mt-0.5 flex items-baseline gap-1.5">
-          <span className="font-mono text-xl sm:text-2xl font-bold tracking-tight text-white">
+          <span className="font-mono text-xl font-bold tracking-tight text-white sm:text-2xl">
             {totalElements}
           </span>
-          <span className="text-xs font-medium text-neutral-400">
-            itens
-          </span>
+          <span className="text-xs font-medium text-neutral-400">itens</span>
         </div>
       </div>
     </div>
-
-    {/* Divider */}
-    <div className="h-10 w-[1px] shrink-0 bg-neutral-800" />
-
-    {/* Out of Stock */}
+    <div className="h-10 w-px shrink-0 bg-neutral-800" />
     <button
       type="button"
       onClick={onOutOfStockKpiClick}
-      className="flex items-center gap-3 sm:gap-4 shrink-0 text-left"
+      className="flex shrink-0 items-center gap-3 text-left sm:gap-4"
     >
-      <div className="flex size-11 sm:size-12 shrink-0 items-center justify-center rounded-[4px] border border-rose-500/30 bg-rose-500/10">
-        <XCircle className="size-5 sm:size-6 text-rose-500" strokeWidth={2} />
+      <div className="flex size-11 shrink-0 items-center justify-center rounded-[4px] border border-rose-500/30 bg-rose-500/10 sm:size-12">
+        <XCircle className="size-5 text-rose-500 sm:size-6" strokeWidth={2} />
       </div>
       <div>
         <div className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
           Sem Estoque
           {isOutOfStockActive && (
-            <span className="size-1.5 rounded-[1px] bg-blue-500 shrink-0" />
+            <span className="size-1.5 shrink-0 rounded-[1px] bg-blue-500" />
           )}
         </div>
         <div className="mt-0.5 flex items-baseline gap-1.5">
-          <span className="font-mono text-xl sm:text-2xl font-bold tracking-tight text-white">
+          <span className="font-mono text-xl font-bold tracking-tight text-white sm:text-2xl">
             {outOfStockCount}
           </span>
-          <span className="text-xs font-medium text-neutral-400">
-            itens
-          </span>
+          <span className="text-xs font-medium text-neutral-400">itens</span>
         </div>
       </div>
     </button>
@@ -403,7 +552,6 @@ const MobileInsightCards = ({
         </div>
       </div>
     </div>
-
     <button
       type="button"
       onClick={onOutOfStockKpiClick}
@@ -430,824 +578,805 @@ const MobileInsightCards = ({
   </>
 );
 
-export const ProductsView = ({
-  filteredProducts,
-  isLoading,
-  error,
-  filters,
-  setFilters,
-  pagination,
-  onPageChange,
-  onPageSizeChange,
-  onSearchChange,
-  onSortChange,
-  onOutOfStockKpiClick,
-  isMobileFiltersOpen,
-  mobileFiltersDraft,
-  onMobileFiltersOpenChange,
-  onOpenMobileFilters,
-  onApplyMobileFilters,
-  onClearFilters,
-  onClearMobileFilters,
-  onMobileFilterDraftChange,
-  onOpenDeleteDialog,
-  onConfirmDelete,
-  onSecondConfirmDelete,
-  onCloseDeleteDialog,
-  onCloseSecondConfirm,
-  deleteDialogOpen,
-  secondConfirmOpen,
-  deleteProduct,
-  deleteBatches,
-  isCheckingDeleteBatches,
-  isDeletingProduct,
-}: ProductsViewProps) => {
-  const activeFilterCount = getActiveFilterCount(
-    filters.stockStatus,
-    filters.activeStatus,
-    filters.sortBy,
-    filters.sortOrder,
-  );
+const ProductsToolbar = ({ props }: { props: ProductsViewProps }) => (
+  <div className="flex w-full flex-col gap-3 md:h-12 md:flex-row md:items-center">
+    <ProductsSearchInput props={props} />
+    <ProductsDesktopFilters props={props} />
+  </div>
+);
 
-  // Stats from filtered products
-  const outOfStockCount = filteredProducts.filter((p) => p.totalQuantity === 0).length;
+const ProductsSearchInput = ({ props }: { props: ProductsViewProps }) => (
+  <div className="relative flex h-12 min-w-[200px] flex-1 items-center">
+    <div className="absolute left-3 text-neutral-500">
+      <Search className="size-3.5" />
+    </div>
+    <Input
+      placeholder="Pesquisar no inventário (nome, SKU, código)..."
+      value={props.filters.searchQuery}
+      onChange={(event) => props.onSearchChange(event.target.value)}
+      className="w-full rounded-[4px] border-neutral-800 bg-[#171717] pl-10 text-sm text-neutral-200 placeholder:text-neutral-600 transition-all hover:border-neutral-700 focus:border-blue-600 focus:ring-0"
+    />
+  </div>
+);
 
-  const handleSort = (field: SortField) => {
-    const newOrder: SortOrder =
-      filters.sortBy === field && filters.sortOrder === "asc" ? "desc" : "asc";
-    onSortChange(field, newOrder);
-  };
+const ProductsDesktopFilters = ({ props }: { props: ProductsViewProps }) => (
+  <div className="hidden h-auto flex-col items-center gap-2 md:flex md:h-12 md:flex-row">
+    <ProductsStockSelect props={props} />
+    <ProductsSortSelect props={props} />
+    <ProductsPageSizeSelect props={props} />
+    {hasVisibleProductFilters(props.filters) && (
+      <Button
+        variant="outline"
+        onClick={props.onClearFilters}
+        className="w-full rounded-[4px] border-neutral-800 bg-[#171717] text-[10px] font-bold uppercase tracking-widest text-neutral-400 hover:bg-neutral-800 hover:text-white md:w-auto"
+      >
+        Limpar
+      </Button>
+    )}
+  </div>
+);
+
+const ProductsStockSelect = ({ props }: { props: ProductsViewProps }) => (
+  <Select
+    value={props.filters.stockStatus}
+    onValueChange={(value) =>
+      props.setFilters((current) => ({
+        ...current,
+        stockStatus: value as StockStatus,
+      }))
+    }
+  >
+    <SelectTrigger className="h-12 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-[10px] font-bold uppercase tracking-widest text-neutral-400 transition-colors hover:border-neutral-700 focus:border-blue-600 focus:ring-0 md:w-[150px]">
+      <div className="flex items-center gap-2">
+        <Package className="size-3.5 text-neutral-500" />
+        <SelectValue placeholder="Estoque" />
+      </div>
+    </SelectTrigger>
+    <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+      {STOCK_FILTER_OPTIONS.map((option) => (
+        <SelectItem
+          key={option.value}
+          value={option.value}
+          className={cn(
+            "text-[9px] font-bold uppercase focus:bg-neutral-800",
+            option.tone,
+          )}
+        >
+          {option.label}
+        </SelectItem>
+      ))}
+    </SelectContent>
+  </Select>
+);
 
+const ProductsSortSelect = ({ props }: { props: ProductsViewProps }) => (
+  <Select
+    value={`${props.filters.sortBy}-${props.filters.sortOrder}`}
+    onValueChange={(value) => {
+      const [field, order] = value.split("-") as [SortField, SortOrder];
+      props.onSortChange(field, order);
+    }}
+  >
+    <SelectTrigger className="h-12 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-[10px] font-bold uppercase tracking-widest text-neutral-400 transition-colors hover:border-neutral-700 focus:border-blue-600 focus:ring-0 md:w-[150px]">
+      <div className="flex items-center gap-2">
+        <Filter className="size-3.5 text-neutral-500" />
+        <SelectValue />
+      </div>
+    </SelectTrigger>
+    <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+      {SORT_FILTER_OPTIONS.map((option) => (
+        <SelectItem
+          key={option.value}
+          value={option.value}
+          className="text-[12px] font-bold uppercase focus:bg-neutral-800"
+        >
+          {option.label}
+        </SelectItem>
+      ))}
+    </SelectContent>
+  </Select>
+);
 
+const ProductsPageSizeSelect = ({ props }: { props: ProductsViewProps }) => (
+  <Select
+    value={props.filters.pageSize.toString()}
+    onValueChange={(value) => props.onPageSizeChange(Number(value))}
+  >
+    <SelectTrigger className="h-12 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-400 transition-colors hover:border-neutral-700 focus:border-blue-600 focus:ring-0 md:w-[75px]">
+      <SelectValue />
+    </SelectTrigger>
+    <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+      {["10", "20", "50"].map((pageSize) => (
+        <SelectItem
+          key={pageSize}
+          value={pageSize}
+          className="text-[12px] font-bold uppercase focus:bg-neutral-800"
+        >
+          {pageSize}
+        </SelectItem>
+      ))}
+    </SelectContent>
+  </Select>
+);
 
+const ProductsDataDisplay = ({ props }: { props: ProductsViewProps }) => {
+  if (props.isLoading) return <ProductsLoadingState />;
+  if (props.error) return <ProductsErrorState />;
+  if (props.filteredProducts.length === 0) return <ProductsEmptyState props={props} />;
 
-  // ── Mobile filter drawer ──
-  const mobileFiltersPanel = (
-    <Drawer open={isMobileFiltersOpen} onOpenChange={onMobileFiltersOpenChange}>
-      <DrawerContent
-        className="border-neutral-800 bg-[#171717] text-neutral-100"
-        onInteractOutside={preventDrawerDismissFromSelectPortal}
-        onPointerDownOutside={preventDrawerDismissFromSelectPortal}
-      >
-        <DrawerHeader className="px-5 pb-2 text-left">
-          <DrawerTitle className="text-lg font-black tracking-tight text-white">
-            Filtros
-          </DrawerTitle>
-          <DrawerDescription className="text-xs text-neutral-500">
-            Refine os produtos por estoque, status e ordenação.
-          </DrawerDescription>
-        </DrawerHeader>
-
-        <div className="max-h-[68vh] overflow-y-auto px-5 py-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-          <div className="space-y-6">
-            {/* Stock status */}
-            <section className="space-y-3">
-              <h3 className="text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
-                Nível de estoque
-              </h3>
-              <div className="grid grid-cols-2 gap-2">
-                {STOCK_FILTER_OPTIONS.map((option) => {
-                  const tones = stockToneMap[option.value];
-                  const isActive = mobileFiltersDraft.stockStatus === option.value;
-                  return (
-                    <Button
-                      key={option.value}
-                      type="button"
-                      variant="outline"
-                      onClick={() =>
-                        onMobileFilterDraftChange({ stockStatus: option.value })
-                      }
-                      className={cn(
-                        "h-10 w-full rounded-[4px] border text-xs font-bold transition-colors",
-                        isActive
-                          ? cn(tones.activeBorder, tones.activeBg, tones.activeText)
-                          : "border-neutral-800 bg-neutral-950/50 text-neutral-500 hover:border-neutral-700 hover:bg-neutral-900 hover:text-white",
-                      )}
-                    >
-                      {option.icon}
-                      {option.label}
-                    </Button>
-                  );
-                })}
-              </div>
-            </section>
-
-            <div className="h-px bg-neutral-800/60" />
-
-            {/* Active status */}
-            <section className="space-y-3">
-              <h3 className="text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
-                Status do produto
-              </h3>
-              <div className="grid grid-cols-3 gap-2">
-                {ACTIVE_FILTER_OPTIONS.map((option) => {
-                  const tones = activeToneMap[option.value];
-                  const isActive = mobileFiltersDraft.activeStatus === option.value;
-                  return (
-                    <Button
-                      key={option.value}
-                      type="button"
-                      variant="outline"
-                      onClick={() =>
-                        onMobileFilterDraftChange({ activeStatus: option.value })
-                      }
-                      className={cn(
-                        "h-10 w-full rounded-[4px] border text-xs font-bold transition-colors",
-                        isActive
-                          ? cn(tones.activeBorder, tones.activeBg, tones.activeText)
-                          : "border-neutral-800 bg-neutral-950/50 text-neutral-500 hover:border-neutral-700 hover:bg-neutral-900 hover:text-white",
-                      )}
-                    >
-                      {option.icon}
-                      {option.label}
-                    </Button>
-                  );
-                })}
-              </div>
-            </section>
-
-            <div className="h-px bg-neutral-800/60" />
-
-            {/* Sort order */}
-            <section className="space-y-3">
-              <h3 className="text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
-                Ordenar por
-              </h3>
-              <Select
-                value={`${mobileFiltersDraft.sortBy}-${mobileFiltersDraft.sortOrder}`}
-                onValueChange={(value) => {
-                  const [sortBy, sortOrder] = value.split("-") as [SortField, SortOrder];
-                  onMobileFilterDraftChange({ sortBy, sortOrder });
-                }}
-              >
-                <SelectTrigger className="h-10 w-full rounded-[4px] border-neutral-800 bg-neutral-950/50 text-xs text-neutral-300 focus:border-blue-600 focus:ring-0">
-                  <SelectValue placeholder="Ordenar por" />
-                </SelectTrigger>
-                <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
-                  {SORT_FILTER_OPTIONS.map((option) => (
-                    <SelectItem
-                      key={option.value}
-                      value={option.value}
-                      className="text-xs focus:bg-neutral-800"
-                    >
-                      {option.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </section>
-          </div>
-        </div>
+  return (
+    <div className="min-h-[400px]">
+      <ProductsTable props={props} />
+      <ProductsMobileCards props={props} />
+      <ProductsPagination props={props} />
+    </div>
+  );
+};
+
+const ProductsLoadingState = () => (
+  <div className="min-h-[400px]">
+    <div className="flex h-64 w-full flex-col items-center justify-center gap-4 rounded-[4px] border border-neutral-800 bg-[#171717]/50">
+      <Loader2 className="size-8 animate-spin text-blue-600" />
+      <span className="text-xs uppercase tracking-wide text-neutral-500">
+        Carregando dados…
+      </span>
+    </div>
+  </div>
+);
 
-        <DrawerFooter className="flex-row gap-3 border-t border-neutral-800 px-5 pt-4">
+const ProductsErrorState = () => (
+  <div className="min-h-[400px]">
+    <div className="flex h-64 w-full flex-col items-center justify-center gap-4 rounded-[4px] border border-rose-900/30 bg-rose-950/10">
+      <AlertTriangle className="size-8 text-rose-500" />
+      <div className="text-center">
+        <h3 className="text-sm font-semibold uppercase text-rose-500">
+          Falha na conexão
+        </h3>
+        <p className="text-xs text-rose-500/70">
+          Não foi possível carregar a lista de produtos
+        </p>
+      </div>
+    </div>
+  </div>
+);
+
+const ProductsEmptyState = ({ props }: { props: ProductsViewProps }) => {
+  const hasFilters = hasVisibleProductFilters(props.filters);
+
+  return (
+    <div className="min-h-[400px]">
+      <div className="flex h-96 w-full flex-col items-center justify-center gap-6 rounded-[4px] border border-dashed border-neutral-800 bg-[#171717]/30">
+        <div className="flex size-20 items-center justify-center rounded-[4px] bg-neutral-900 ring-1 ring-neutral-800">
+          <Package className="size-8 text-neutral-600" />
+        </div>
+        <div className="text-center">
+          <h3 className="text-sm font-semibold uppercase tracking-wide text-neutral-300">
+            {hasFilters ? "Nenhum resultado encontrado" : "Nenhum produto cadastrado"}
+          </h3>
+          <p className="mt-1 max-w-xs text-xs text-neutral-500">
+            {hasFilters
+              ? "Tente ajustar seus termos de busca ou filtros."
+              : "O inventário deste armazém está vazio. Comece adicionando produtos."}
+          </p>
+        </div>
+        {hasFilters ? (
           <Button
-            type="button"
             variant="outline"
-            onClick={onClearMobileFilters}
-            className="h-11 flex-1 rounded-[4px] border-neutral-700 bg-transparent text-[10px] font-bold uppercase tracking-widest text-neutral-400 hover:bg-neutral-800 hover:text-white"
-          >
-            <Trash2 className="mr-2 size-3.5" />
-            Limpar
-          </Button>
-          <Button
-            type="button"
-            onClick={onApplyMobileFilters}
-            className="h-11 flex-[2] rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
+            onClick={props.onClearFilters}
+            className="rounded-[4px] border-neutral-700 text-xs uppercase text-neutral-300 hover:bg-neutral-800"
           >
-            Aplicar filtros
+            Limpar Filtros
           </Button>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
+        ) : null}
+      </div>
+    </div>
   );
+};
+
+const ProductsTable = ({ props }: { props: ProductsViewProps }) => {
+  const handleSort = (field: SortField) => {
+    const nextOrder: SortOrder =
+      props.filters.sortBy === field && props.filters.sortOrder === "asc"
+        ? "desc"
+        : "asc";
+    props.onSortChange(field, nextOrder);
+  };
 
   return (
-    <>
-      <div className="min-h-screen bg-[#0A0A0A] pb-20 font-sans text-neutral-200">
-        <main className="mx-auto w-full max-w-7xl px-4 py-8 md:px-6 lg:px-8">
-          {/* Main Content */}
-          <div className="space-y-6">
-            <div className="flex flex-col gap-5">
-              <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-                <div>
-                  <h1 className="text-2xl font-semibold tracking-tighter text-white">
-                    Produtos
-                  </h1>
-                  <p className="text-sm text-neutral-500 mt-1">
-                    Gerencie o inventário de produtos
-                  </p>
-                </div>
-              </div>
-
-              {/* Mobile Filter Tokens */}
-              <div className="md:hidden">
-                <div className="relative -mx-4">
-                  <div className="overflow-x-auto px-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-                    <div className="flex min-w-max gap-2 pb-1 pr-8">
-                      <FilterToken
-                        active={activeFilterCount > 0}
-                        count={activeFilterCount}
-                        icon={<SlidersHorizontal className="size-3.5" />}
-                        label="Filtros"
-                        onClick={onOpenMobileFilters}
-                      />
-                      <FilterToken
-                        active={filters.stockStatus !== "all"}
-                        icon={<Package className="size-3.5" />}
-                        label="Estoque"
-                        value={getStockFilterLabel(filters.stockStatus)}
-                        onClick={onOpenMobileFilters}
-                      />
-                      <FilterToken
-                        active={filters.activeStatus !== "all"}
-                        icon={<Power className="size-3.5" />}
-                        label="Status"
-                        value={getActiveFilterLabel(filters.activeStatus)}
-                        onClick={onOpenMobileFilters}
-                      />
-                      <FilterToken
-                        active={filters.sortBy !== "name" || filters.sortOrder !== "asc"}
-                        icon={<ArrowDownUp className="size-3.5" />}
-                        label="Ordem"
-                        value={getSortLabel(filters.sortBy, filters.sortOrder)}
-                        onClick={onOpenMobileFilters}
-                      />
-                    </div>
-                  </div>
-                  <div className="pointer-events-none absolute bottom-0 right-0 top-0 w-12 bg-gradient-to-l from-[#0A0A0A] to-transparent" />
-                </div>
-              </div>
-
-              {/* Row 1: Insight Cards */}
-              <div className="hidden md:block">
-                <InsightCards
-                  totalElements={pagination.totalElements}
-                  outOfStockCount={outOfStockCount}
-                  isOutOfStockActive={filters.stockStatus === "outOfStock"}
-                  onOutOfStockKpiClick={onOutOfStockKpiClick}
-                />
-              </div>
-
-              {/* Mobile Insight Cards */}
-              <div
-                data-slot="mobile-product-kpis"
-                className="grid grid-cols-2 gap-2 md:hidden"
-              >
-                <MobileInsightCards
-                  totalElements={pagination.totalElements}
-                  outOfStockCount={outOfStockCount}
-                  isOutOfStockActive={filters.stockStatus === "outOfStock"}
-                  onOutOfStockKpiClick={onOutOfStockKpiClick}
-                />
-              </div>
-
-              {/* Row 2: Search & Filters */}
-              <div className="flex flex-col gap-3 md:flex-row md:items-center md:h-12 w-full">
-                <div className="relative h-12 flex-1 min-w-[200px] flex items-center">
-                  <div className="text-neutral-500 absolute left-3">
-                    <Search className="size-3.5" />
-                  </div>
-                  <Input
-                    placeholder="Pesquisar no inventário (nome, SKU, código)..."
-                    value={filters.searchQuery}
-                    onChange={(e) => onSearchChange(e.target.value)}
-                    className="w-full rounded-[4px] border-neutral-800 bg-[#171717] pl-10 text-sm text-neutral-200 placeholder:text-neutral-600 focus:border-blue-600 focus:ring-0 transition-all hover:border-neutral-700"
-                  />
-                </div>
-
-                {/* Desktop filters */}
-                <div className="hidden flex-col items-center gap-2 h-auto md:flex md:h-12 md:flex-row">
-                  <Select
-                    value={filters.stockStatus}
-                    onValueChange={(value) =>
-                      setFilters((current) => ({
-                        ...current,
-                        stockStatus: value as StockStatus,
-                      }))
-                    }
-                  >
-                    <SelectTrigger className="h-12 w-full md:w-[150px] rounded-[4px] border-neutral-800 bg-[#171717] text-[10px] font-bold uppercase tracking-widest text-neutral-400 focus:border-blue-600 focus:ring-0 hover:border-neutral-700 transition-colors">
-                      <div className="flex items-center gap-2">
-                        <Package className="size-3.5 text-neutral-500" />
-                        <SelectValue placeholder="Estoque" />
-                      </div>
-                    </SelectTrigger>
-                    <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
-                      <SelectItem
-                        value="all"
-                        className="text-[9px] font-bold uppercase focus:bg-neutral-800"
-                      >
-                        Todos
-                      </SelectItem>
-                      <SelectItem
-                        value="inStock"
-                        className="text-[9px] font-bold uppercase focus:bg-neutral-800 text-emerald-500"
-                      >
-                        Com estoque
-                      </SelectItem>
-                      <SelectItem
-                        value="lowStock"
-                        className="text-[9px] font-bold uppercase focus:bg-neutral-800 text-amber-500"
-                      >
-                        Baixo estoque
-                      </SelectItem>
-                      <SelectItem
-                        value="outOfStock"
-                        className="text-[9px] font-bold uppercase focus:bg-neutral-800 text-rose-500"
-                      >
-                        Sem estoque
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-
-                  <Select
-                    value={`${filters.sortBy}-${filters.sortOrder}`}
-                    onValueChange={(value) => {
-                      const [field, order] = value.split("-") as [
-                        SortField,
-                        SortOrder,
-                      ];
-                      onSortChange(field, order);
-                    }}
-                  >
-                    <SelectTrigger className="h-12 w-full md:w-[150px] rounded-[4px] border-neutral-800 bg-[#171717] text-[10px] font-bold uppercase tracking-widest text-neutral-400 focus:border-blue-600 focus:ring-0 hover:border-neutral-700 transition-colors">
-                      <div className="flex items-center gap-2">
-                        <Filter className="size-3.5 text-neutral-500" />
-                        <SelectValue />
-                      </div>
-                    </SelectTrigger>
-                    <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
-                      <SelectItem
-                        value="name-asc"
-                        className="text-[12px] font-bold uppercase focus:bg-neutral-800"
-                      >
-                        Nome (A-Z)
-                      </SelectItem>
-                      <SelectItem
-                        value="name-desc"
-                        className="text-[12px] font-bold uppercase focus:bg-neutral-800"
-                      >
-                        Nome (Z-A)
-                      </SelectItem>
-                      <SelectItem
-                        value="sku-asc"
-                        className="text-[12px] font-bold uppercase focus:bg-neutral-800"
-                      >
-                        SKU (A-Z)
-                      </SelectItem>
-                      <SelectItem
-                        value="sku-desc"
-                        className="text-[12px] font-bold uppercase focus:bg-neutral-800"
-                      >
-                        SKU (Z-A)
-                      </SelectItem>
-                      <SelectItem
-                        value="createdAt-desc"
-                        className="text-[12px] font-bold uppercase focus:bg-neutral-800"
-                      >
-                        Recentes
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-
-                  <Select
-                    value={filters.pageSize.toString()}
-                    onValueChange={(value) => onPageSizeChange(Number(value))}
-                  >
-                    <SelectTrigger className="h-12 w-full md:w-[75px] rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-400 focus:border-blue-600 focus:ring-0 hover:border-neutral-700 transition-colors">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
-                      <SelectItem
-                        value="10"
-                        className="text-[12px] font-bold uppercase focus:bg-neutral-800"
-                      >
-                        10
-                      </SelectItem>
-                      <SelectItem
-                        value="20"
-                        className="text-[12px] font-bold uppercase focus:bg-neutral-800"
-                      >
-                        20
-                      </SelectItem>
-                      <SelectItem
-                        value="50"
-                        className="text-[12px] font-bold uppercase focus:bg-neutral-800"
-                      >
-                        50
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-
-                  {(filters.stockStatus !== "all" ||
-                    filters.activeStatus !== "all" ||
-                    filters.searchQuery ||
-                    filters.sortBy !== "name" ||
-                    filters.sortOrder !== "asc") && (
-                    <Button
-                      variant="outline"
-                      onClick={onClearFilters}
-                      className="w-full md:w-auto rounded-[4px] border-neutral-800 bg-[#171717] text-[10px] font-bold uppercase tracking-widest text-neutral-400 hover:bg-neutral-800 hover:text-white"
-                    >
-                      Limpar
-                    </Button>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            {/* Data Display */}
-            <div className="min-h-[400px]">
-              {/* Loading */}
-              {isLoading && (
-                <div className="flex h-64 w-full flex-col items-center justify-center gap-4 rounded-[4px] border border-neutral-800 bg-[#171717]/50">
-                  <Loader2 className="size-8 animate-spin text-blue-600" />
-                  <span className="text-xs uppercase tracking-wide text-neutral-500">
-                    Carregando dados…
-                  </span>
-                </div>
-              )}
-
-              {/* Error */}
-              {error && (
-                <div className="flex h-64 w-full flex-col items-center justify-center gap-4 rounded-[4px] border border-rose-900/30 bg-rose-950/10">
-                  <AlertTriangle className="size-8 text-rose-500" />
-                  <div className="text-center">
-                    <h3 className="text-sm font-semibold uppercase text-rose-500">
-                      Falha na conexão
-                    </h3>
-                    <p className="text-xs text-rose-500/70">
-                      Não foi possível carregar a lista de produtos
-                    </p>
-                  </div>
-                </div>
-              )}
-
-              {/* Empty State */}
-              {!isLoading && !error && filteredProducts.length === 0 && (
-                <div className="flex h-96 w-full flex-col items-center justify-center gap-6 rounded-[4px] border border-dashed border-neutral-800 bg-[#171717]/30">
-                  <div className="flex size-20 items-center justify-center rounded-full bg-neutral-900 ring-1 ring-neutral-800">
-                    <Package className="size-8 text-neutral-600" />
-                  </div>
-                  <div className="text-center">
-                    <h3 className="text-sm font-semibold uppercase tracking-wide text-neutral-300">
-                      {filters.searchQuery || filters.stockStatus !== "all" || filters.activeStatus !== "all"
-                        ? "Nenhum resultado encontrado"
-                        : "Nenhum produto cadastrado"}
-                    </h3>
-                    <p className="mt-1 max-w-xs text-xs text-neutral-500">
-                      {filters.searchQuery || filters.stockStatus !== "all" || filters.activeStatus !== "all"
-                        ? "Tente ajustar seus termos de busca ou filtros."
-                        : "O inventário deste armazém está vazio. Comece adicionando produtos."}
-                    </p>
-                  </div>
-                  {filters.searchQuery || filters.stockStatus !== "all" || filters.activeStatus !== "all" ? (
-                    <Button
-                      variant="outline"
-                      onClick={onClearFilters}
-                      className="rounded-[4px] border-neutral-700 text-xs uppercase text-neutral-300 hover:bg-neutral-800"
-                    >
-                      Limpar Filtros
-                    </Button>
-                  ) : null}
-                </div>
-              )}
-
-              {/* Table View (Desktop) */}
-              {!isLoading && !error && filteredProducts.length > 0 && (
-                <>
-                  <div className="hidden overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717] md:block">
-                    <Table>
-                      <TableHeader className="bg-neutral-900">
-                        <TableRow className="border-b border-neutral-800 hover:bg-neutral-900">
-                          <TableHead
-                            className="h-10 cursor-pointer text-[10px] font-bold uppercase tracking-widest text-neutral-500 hover:text-white"
-                            onClick={() => handleSort("name")}
-                          >
-                            <div className="flex items-center gap-1">
-                              Nome <SortIcon field="name" sortBy={filters.sortBy} sortOrder={filters.sortOrder} />
-                            </div>
-                          </TableHead>
-                          <TableHead
-                            className="h-10 cursor-pointer text-[10px] font-bold uppercase tracking-widest text-neutral-500 hover:text-white"
-                            onClick={() => handleSort("sku")}
-                          >
-                            <div className="flex items-center gap-1">
-                              SKU <SortIcon field="sku" sortBy={filters.sortBy} sortOrder={filters.sortOrder} />
-                            </div>
-                          </TableHead>
-                          <TableHead className="h-10 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Categoria / Marca
-                          </TableHead>
-                          <TableHead className="h-10 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Estoque
-                          </TableHead>
-                          <TableHead className="h-10 text-center text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Status
-                          </TableHead>
-                          <TableHead className="h-10 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Ações
-                          </TableHead>
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody>
-                        {filteredProducts.map((product) => {
-                          const stockStatus = getStockStatus(
-                            product.totalQuantity,
-                          );
-                          return (
-                            <TableRow
-                              key={product.id}
-                              className="group border-b border-neutral-800/50 hover:bg-neutral-800/50 transition-colors"
-                            >
-                              <TableCell className="py-3">
-                                <div className="flex flex-col gap-0.5">
-                                  <span className="font-medium text-white">
-                                    {product.name}
-                                  </span>
-                                  {product.barcode && (
-                                    <span className="font-mono text-[10px] text-neutral-500">
-                                      {product.barcode}
-                                    </span>
-                                  )}
-                                </div>
-                              </TableCell>
-                              <TableCell className="py-3 font-mono text-xs text-neutral-400">
-                                {product.sku || "—"}
-                              </TableCell>
-                              <TableCell className="py-3">
-                                <div className="flex flex-col text-xs">
-                                  <span className="text-neutral-300">
-                                    {product.categoryName || "—"}
-                                  </span>
-                                  <span className="text-[10px] text-neutral-600">
-                                    {product.brand?.name || "—"}
-                                  </span>
-                                </div>
-                              </TableCell>
-                              <TableCell className="py-3 text-right">
-                                <span className="font-mono text-sm font-bold tracking-tighter text-white">
-                                  {product.totalQuantity}
-                                </span>
-                              </TableCell>
-                              <TableCell className="py-3 text-center">
-                                <Badge
-                                  variant="outline"
-                                  className={cn(
-                                    "rounded-[2px] border px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider",
-                                    stockStatus.bg,
-                                    stockStatus.color,
-                                    stockStatus.border,
-                                  )}
-                                >
-                                  {stockStatus.label}
-                                </Badge>
-                              </TableCell>
-                              <TableCell className="py-3 text-right">
-                                <div className="flex justify-end gap-1 transition-opacity">
-                                  <Button
-                                    asChild
-                                    variant="ghost"
-                                    size="icon"
-                                    className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-white"
-                                  >
-                                    <Link href={`/products/${product.id}`}>
-                                      <Eye className="size-4" />
-                                    </Link>
-                                  </Button>
-                                  <PermissionGate permission="products:update">
-                                    <Button
-                                      asChild
-                                      variant="ghost"
-                                      size="icon"
-                                      className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-white"
-                                    >
-                                      <Link
-                                        href={`/products/${product.id}/edit`}
-                                      >
-                                        <Pencil className="size-4" />
-                                      </Link>
-                                    </Button>
-                                  </PermissionGate>
-                                  <PermissionGate permission="batches:delete">
-                                    <Button
-                                      variant="ghost"
-                                      size="icon"
-                                      onClick={() =>
-                                        onOpenDeleteDialog(product)
-                                      }
-                                      className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-rose-500"
-                                    >
-                                      <Trash2 className="size-4" />
-                                    </Button>
-                                  </PermissionGate>
-                                </div>
-                              </TableCell>
-                            </TableRow>
-                          );
-                        })}
-                      </TableBody>
-                    </Table>
-                  </div>
-
-                  {/* Mobile Grid */}
-                  <div className="grid gap-3 md:hidden">
-                    {filteredProducts.map((product) => {
-                      const stockStatus = getStockStatus(product.totalQuantity);
-                      return (
-                        <div
-                          key={product.id}
-                          className="relative flex flex-col gap-3 rounded-[4px] border border-neutral-800 bg-[#171717] p-4 transition-colors hover:border-neutral-700"
-                        >
-                          <div className="flex items-start justify-between">
-                            <div className="flex-1 pr-2">
-                              <h3 className="font-semibold text-white">
-                                {product.name}
-                              </h3>
-                              <div className="mt-1 flex items-center gap-2 text-xs text-neutral-500">
-                                <span className="font-mono">
-                                  {product.sku || "SEM SKU"}
-                                </span>
-                                <span>•</span>
-                                <span>{product.categoryName}</span>
-                              </div>
-                            </div>
-                            <div className="flex items-start gap-3">
-                              <Badge
-                                variant="outline"
-                                className={cn(
-                                  "rounded-[2px] border px-1.5 py-0.5 text-[10px] font-bold uppercase",
-                                  stockStatus.bg,
-                                  stockStatus.color,
-                                  stockStatus.border,
-                                )}
-                              >
-                                {product.totalQuantity} un
-                              </Badge>
-                              <ProductActions product={product} onOpenDeleteDialog={onOpenDeleteDialog} />
-                            </div>
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
-
-                  {/* Pagination */}
-                  {pagination.totalPages > 1 && (
-                    <div className="flex items-center justify-between border-t border-neutral-800 pt-6">
-                      <div className="text-xs text-neutral-500">
-                        Mostrando {pagination.page * pagination.pageSize + 1} a{" "}
-                        {Math.min(
-                          (pagination.page + 1) * pagination.pageSize,
-                          pagination.totalElements,
-                        )}{" "}
-                        de {pagination.totalElements} produtos
-                      </div>
-                      <div className="flex gap-2">
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => onPageChange(pagination.page - 1)}
-                          disabled={pagination.page === 0}
-                          className="size-8 rounded-[4px] border-neutral-800 bg-[#171717] p-0 hover:bg-neutral-800 disabled:opacity-30"
-                        >
-                          <ChevronLeft className="size-4" />
-                        </Button>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => onPageChange(pagination.page + 1)}
-                          disabled={
-                            pagination.page >= pagination.totalPages - 1
-                          }
-                          className="size-8 rounded-[4px] border-neutral-800 bg-[#171717] p-0 hover:bg-neutral-800 disabled:opacity-30"
-                        >
-                          <ChevronRight className="size-4" />
-                        </Button>
-                      </div>
-                    </div>
-                  )}
-                </>
-              )}
-            </div>
-          </div>
-        </main>
-      </div>
+    <div className="hidden overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717] md:block">
+      <Table>
+        <TableHeader className="bg-neutral-900">
+          <TableRow className="border-b border-neutral-800 hover:bg-neutral-900">
+            <ProductSortableHead
+              field="name"
+              label="Nome"
+              filters={props.filters}
+              onSort={handleSort}
+            />
+            <ProductSortableHead
+              field="barcode"
+              label="Código de barras"
+              filters={props.filters}
+              onSort={handleSort}
+            />
+            <TableHead className="h-10 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Categoria / Marca
+            </TableHead>
+            <TableHead className="h-10 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Estoque
+            </TableHead>
+            <TableHead className="h-10 text-center text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Status
+            </TableHead>
+            <TableHead className="h-10 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Ações
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {props.filteredProducts.map((product) => (
+            <ProductTableRow
+              key={product.id}
+              product={product}
+              onOpenDeleteDialog={props.onOpenDeleteDialog}
+            />
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
 
-      {/* Mobile Filter Drawer */}
-      {mobileFiltersPanel}
-
-      {/* Delete Confirmation Modals */}
-      <ResponsiveModal
-        open={deleteDialogOpen}
-        onOpenChange={(open) => {
-          if (!open) onCloseDeleteDialog();
-        }}
-        title="Confirmar exclusão"
-        description={`Tem certeza que deseja remover ${deleteProduct?.name} deste armazém? Esta ação apagará os lotes associados ao armazém atual.`}
-        maxWidth="sm:max-w-[450px]"
-        footer={
-          <>
-            <Button
-              variant="ghost"
-              onClick={onCloseDeleteDialog}
-              className="rounded-[4px] border-neutral-700 bg-transparent text-xs uppercase hover:bg-neutral-800 hover:text-white"
-            >
-              Cancelar
-            </Button>
-            <Button
-              type="button"
-              onClick={onConfirmDelete}
-              disabled={isCheckingDeleteBatches || isDeletingProduct}
-              className="rounded-[4px] bg-rose-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-rose-700"
-            >
-              {isDeletingProduct ? (
-                <>
-                  <Loader2 className="mr-2 size-3.5 animate-spin" />
-                  Removendo…
-                </>
-              ) : (
-                "Remover"
-              )}
-            </Button>
-          </>
-        }
-      >
-        <div className="space-y-4">
-          {isCheckingDeleteBatches && (
-            <div className="flex items-center gap-2 rounded-[4px] border border-blue-900/30 bg-blue-950/10 px-3 py-2 text-xs text-blue-500">
-              <Loader2 className="size-3.5 animate-spin" />
-              Verificando estoque…
-            </div>
-          )}
+const ProductSortableHead = ({
+  field,
+  filters,
+  label,
+  onSort,
+}: {
+  field: SortField;
+  filters: ProductFilters;
+  label: string;
+  onSort: (field: SortField) => void;
+}) => (
+  <TableHead
+    className="h-10 cursor-pointer text-[10px] font-bold uppercase tracking-widest text-neutral-500 hover:text-white"
+    onClick={() => onSort(field)}
+  >
+    <div className="flex items-center gap-1">
+      {label}
+      <SortIcon field={field} sortBy={filters.sortBy} sortOrder={filters.sortOrder} />
+    </div>
+  </TableHead>
+);
 
-          {!isCheckingDeleteBatches && deleteBatches.length > 0 && (
-            <div className="rounded-[4px] border border-amber-900/30 bg-amber-950/10 p-3 text-xs text-amber-500">
-              <div className="flex items-center gap-2 font-bold uppercase tracking-wide">
-                <AlertTriangle className="size-3.5" />
-                Estoque Existente
-              </div>
-              <p className="mt-1 opacity-90">
-                Ainda existe estoque deste produto neste armazém. A remoção irá
-                apagar os lotes associados ao armazém atual.
-              </p>
-              <div className="mt-2 space-y-1 text-[10px] font-semibold uppercase tracking-wider text-amber-400">
-                {deleteBatches.map((batch) => (
-                  <div
-                    key={batch.id}
-                    className="flex items-center justify-between"
-                  >
-                    <span>Lote {batch.id.slice(0, 8)}</span>
-                    <span>{batch.quantity} un</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
+const ProductTableRow = ({
+  product,
+  onOpenDeleteDialog,
+}: {
+  product: Product;
+  onOpenDeleteDialog: (product: Product) => void;
+}) => {
+  const stockStatus = getStockStatus(product.totalQuantity);
+
+  return (
+    <TableRow className="group border-b border-neutral-800/50 transition-colors hover:bg-neutral-800/50">
+      <TableCell className="py-3">
+        <div className="flex flex-col gap-0.5">
+          <span className="font-medium text-white">{product.name}</span>
         </div>
-      </ResponsiveModal>
-
-      <ResponsiveModal
-        open={secondConfirmOpen}
-        onOpenChange={(open) => {
-          if (!open) onCloseSecondConfirm();
-        }}
-        title="Confirmação Final"
-        description={`Tem certeza que deseja remover ${deleteProduct?.name} deste armazém?`}
-        maxWidth="sm:max-w-[400px]"
-        footer={
-          <>
-            <Button
-              variant="ghost"
-              onClick={onCloseSecondConfirm}
-              className="rounded-[4px] border-neutral-700 bg-transparent text-xs uppercase hover:bg-neutral-800 hover:text-white"
-            >
-              Cancelar
-            </Button>
-            <Button
-              onClick={onSecondConfirmDelete}
-              disabled={isDeletingProduct}
-              className="rounded-[4px] bg-rose-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-rose-700"
-            >
-              {isDeletingProduct ? (
-                <>
-                  <Loader2 className="mr-2 size-3.5 animate-spin" />
-                  Removendo…
-                </>
-              ) : (
-                "Confirmar Remoção"
-              )}
-            </Button>
-          </>
-        }
+      </TableCell>
+      <TableCell className="py-3 font-mono text-xs text-neutral-400">
+        {product.barcode || "—"}
+      </TableCell>
+      <TableCell className="py-3">
+        <div className="flex flex-col text-xs">
+          <span className="text-neutral-300">{product.categoryName || "—"}</span>
+          <span className="text-[10px] text-neutral-600">
+            {product.brand?.name || "—"}
+          </span>
+        </div>
+      </TableCell>
+      <TableCell className="py-3 text-right">
+        <span className="font-mono text-sm font-bold tracking-tighter text-white">
+          {product.totalQuantity}
+        </span>
+      </TableCell>
+      <TableCell className="py-3 text-center">
+        <ProductStockBadge label={stockStatus.label} stockStatus={stockStatus} />
+      </TableCell>
+      <TableCell className="py-3 text-right">
+        <ProductTableActions product={product} onOpenDeleteDialog={onOpenDeleteDialog} />
+      </TableCell>
+    </TableRow>
+  );
+};
+
+const ProductStockBadge = ({
+  label,
+  stockStatus,
+}: {
+  label: string;
+  stockStatus: ReturnType<typeof getStockStatus>;
+}) => (
+  <Badge
+    variant="outline"
+    className={cn(
+      "rounded-[2px] border px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider",
+      stockStatus.bg,
+      stockStatus.color,
+      stockStatus.border,
+    )}
+  >
+    {label}
+  </Badge>
+);
+
+const ProductTableActions = ({
+  product,
+  onOpenDeleteDialog,
+}: {
+  product: Product;
+  onOpenDeleteDialog: (product: Product) => void;
+}) => (
+  <div className="flex justify-end gap-1 transition-opacity">
+    <Button
+      asChild
+      variant="ghost"
+      size="icon"
+      className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-white"
+    >
+      <Link href={`/products/${product.id}`}>
+        <Eye className="size-4" />
+      </Link>
+    </Button>
+    <PermissionGate permission="products:update">
+      <Button
+        asChild
+        variant="ghost"
+        size="icon"
+        className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-white"
       >
-        <div className="py-2">
-          <p className="text-xs text-neutral-500">
-            Esta é a última confirmação antes de apagar os lotes deste produto
-            no armazém atual.
-          </p>
+        <Link href={`/products/${product.id}/edit`}>
+          <Pencil className="size-4" />
+        </Link>
+      </Button>
+    </PermissionGate>
+    <PermissionGate permission="batches:delete">
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={() => onOpenDeleteDialog(product)}
+        className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-rose-500"
+      >
+        <Trash2 className="size-4" />
+      </Button>
+    </PermissionGate>
+  </div>
+);
+
+const ProductsMobileCards = ({ props }: { props: ProductsViewProps }) => (
+  <div className="grid gap-3 md:hidden">
+    {props.filteredProducts.map((product) => (
+      <ProductMobileCard
+        key={product.id}
+        product={product}
+        onOpenDeleteDialog={props.onOpenDeleteDialog}
+      />
+    ))}
+  </div>
+);
+
+const ProductMobileCard = ({
+  product,
+  onOpenDeleteDialog,
+}: {
+  product: Product;
+  onOpenDeleteDialog: (product: Product) => void;
+}) => {
+  const stockStatus = getStockStatus(product.totalQuantity);
+
+  return (
+    <div className="relative flex flex-col gap-3 rounded-[4px] border border-neutral-800 bg-[#171717] p-4 transition-colors hover:border-neutral-700">
+      <div className="flex items-start justify-between">
+        <div className="min-w-0 flex-1 pr-2">
+          <h3 className="font-semibold text-white">{product.name}</h3>
+          <div className="mt-1 flex items-center gap-2 text-xs text-neutral-500">
+            <span className="min-w-0 truncate font-mono">
+              {product.barcode || "SEM COD. BARRAS"}
+            </span>
+            <span>•</span>
+            <span>{product.categoryName}</span>
+          </div>
         </div>
-      </ResponsiveModal>
-    </>
+        <div className="flex items-start gap-3">
+          <ProductStockBadge
+            label={`${product.totalQuantity} un`}
+            stockStatus={stockStatus}
+          />
+          <ProductActions product={product} onOpenDeleteDialog={onOpenDeleteDialog} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ProductActions = ({
+  product,
+  onOpenDeleteDialog,
+}: {
+  product: Product;
+  onOpenDeleteDialog: (product: Product) => void;
+}) => (
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-white"
+      >
+        <MoreHorizontal className="size-4" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent
+      align="end"
+      className="w-48 rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-200 shadow-xl"
+    >
+      <DropdownMenuLabel className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+        Ações do Produto
+      </DropdownMenuLabel>
+      <DropdownMenuSeparator className="bg-neutral-800" />
+      <DropdownMenuItem asChild>
+        <Link
+          href={`/products/${product.id}`}
+          className="flex w-full cursor-pointer items-center focus:bg-neutral-800 focus:text-white"
+        >
+          <Eye className="mr-2 size-3.5" /> Detalhes
+        </Link>
+      </DropdownMenuItem>
+      <PermissionGate permission="products:update">
+        <DropdownMenuItem asChild>
+          <Link
+            href={`/products/${product.id}/edit`}
+            className="flex w-full cursor-pointer items-center focus:bg-neutral-800 focus:text-white"
+          >
+            <Pencil className="mr-2 size-3.5" /> Editar
+          </Link>
+        </DropdownMenuItem>
+      </PermissionGate>
+      <PermissionGate permission="batches:delete">
+        <DropdownMenuItem
+          onClick={() => onOpenDeleteDialog(product)}
+          className="cursor-pointer text-rose-500 focus:bg-rose-950/20 focus:text-rose-400"
+        >
+          <Trash2 className="mr-2 size-3.5" /> Remover do armazém
+        </DropdownMenuItem>
+      </PermissionGate>
+    </DropdownMenuContent>
+  </DropdownMenu>
+);
+
+const ProductsPagination = ({ props }: { props: ProductsViewProps }) => {
+  if (props.pagination.totalPages <= 1) return null;
+
+  const firstVisibleItem = props.pagination.page * props.pagination.pageSize + 1;
+  const lastVisibleItem = Math.min(
+    (props.pagination.page + 1) * props.pagination.pageSize,
+    props.pagination.totalElements,
+  );
+
+  return (
+    <div className="flex items-center justify-between border-t border-neutral-800 pt-6">
+      <div className="text-xs text-neutral-500">
+        Mostrando {firstVisibleItem} a {lastVisibleItem} de{" "}
+        {props.pagination.totalElements} produtos
+      </div>
+      <div className="flex gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => props.onPageChange(props.pagination.page - 1)}
+          disabled={props.pagination.page === 0}
+          className="size-8 rounded-[4px] border-neutral-800 bg-[#171717] p-0 hover:bg-neutral-800 disabled:opacity-30"
+        >
+          <ChevronLeft className="size-4" />
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => props.onPageChange(props.pagination.page + 1)}
+          disabled={props.pagination.page >= props.pagination.totalPages - 1}
+          className="size-8 rounded-[4px] border-neutral-800 bg-[#171717] p-0 hover:bg-neutral-800 disabled:opacity-30"
+        >
+          <ChevronRight className="size-4" />
+        </Button>
+      </div>
+    </div>
   );
 };
+
+const ProductsMobileFiltersDrawer = ({ props }: { props: ProductsViewProps }) => (
+  <Drawer
+    open={props.isMobileFiltersOpen}
+    onOpenChange={props.onMobileFiltersOpenChange}
+  >
+    <DrawerContent
+      className="border-neutral-800 bg-[#171717] text-neutral-100"
+      onInteractOutside={preventDrawerDismissFromSelectPortal}
+      onPointerDownOutside={preventDrawerDismissFromSelectPortal}
+    >
+      <DrawerHeader className="px-5 pb-2 text-left">
+        <DrawerTitle className="text-lg font-black tracking-tight text-white">
+          Filtros
+        </DrawerTitle>
+        <DrawerDescription className="text-xs text-neutral-500">
+          Refine os produtos por estoque, status e ordenação.
+        </DrawerDescription>
+      </DrawerHeader>
+      <ProductsMobileFilterBody props={props} />
+      <DrawerFooter className="flex-row gap-3 border-t border-neutral-800 px-5 pt-4">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={props.onClearMobileFilters}
+          className="h-11 flex-1 rounded-[4px] border-neutral-700 bg-transparent text-[10px] font-bold uppercase tracking-widest text-neutral-400 hover:bg-neutral-800 hover:text-white"
+        >
+          <Trash2 className="mr-2 size-3.5" />
+          Limpar
+        </Button>
+        <Button
+          type="button"
+          onClick={props.onApplyMobileFilters}
+          className="h-11 flex-[2] rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
+        >
+          Aplicar filtros
+        </Button>
+      </DrawerFooter>
+    </DrawerContent>
+  </Drawer>
+);
+
+const ProductsMobileFilterBody = ({ props }: { props: ProductsViewProps }) => (
+  <div className="max-h-[68vh] overflow-y-auto px-5 py-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+    <div className="space-y-6">
+      <ProductStockMobileFilter props={props} />
+      <div className="h-px bg-neutral-800/60" />
+      <ProductActiveMobileFilter props={props} />
+      <div className="h-px bg-neutral-800/60" />
+      <ProductSortMobileFilter props={props} />
+    </div>
+  </div>
+);
+
+const ProductStockMobileFilter = ({ props }: { props: ProductsViewProps }) => (
+  <section className="space-y-3">
+    <h3 className="text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
+      Nível de estoque
+    </h3>
+    <div className="grid grid-cols-2 gap-2">
+      {STOCK_FILTER_OPTIONS.map((option) => {
+        const tones = stockToneMap[option.value];
+        const selected = props.mobileFiltersDraft.stockStatus === option.value;
+        return (
+          <ProductMobileFilterButton
+            key={option.value}
+            selected={selected}
+            tones={tones}
+            icon={option.icon}
+            label={option.label}
+            onClick={() =>
+              props.onMobileFilterDraftChange({ stockStatus: option.value })
+            }
+          />
+        );
+      })}
+    </div>
+  </section>
+);
+
+const ProductActiveMobileFilter = ({ props }: { props: ProductsViewProps }) => (
+  <section className="space-y-3">
+    <h3 className="text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
+      Status do produto
+    </h3>
+    <div className="grid grid-cols-3 gap-2">
+      {ACTIVE_FILTER_OPTIONS.map((option) => {
+        const tones = activeToneMap[option.value];
+        const selected = props.mobileFiltersDraft.activeStatus === option.value;
+        return (
+          <ProductMobileFilterButton
+            key={option.value}
+            selected={selected}
+            tones={tones}
+            icon={option.icon}
+            label={option.label}
+            onClick={() =>
+              props.onMobileFilterDraftChange({ activeStatus: option.value })
+            }
+          />
+        );
+      })}
+    </div>
+  </section>
+);
+
+const ProductMobileFilterButton = ({
+  icon,
+  label,
+  onClick,
+  selected,
+  tones,
+}: {
+  icon: ReactNode;
+  label: string;
+  onClick: () => void;
+  selected: boolean;
+  tones: { activeBorder: string; activeBg: string; activeText: string };
+}) => (
+  <Button
+    type="button"
+    variant="outline"
+    onClick={onClick}
+    className={cn(
+      "h-10 w-full rounded-[4px] border text-xs font-bold transition-colors",
+      selected
+        ? cn(tones.activeBorder, tones.activeBg, tones.activeText)
+        : "border-neutral-800 bg-neutral-950/50 text-neutral-500 hover:border-neutral-700 hover:bg-neutral-900 hover:text-white",
+    )}
+  >
+    {icon}
+    {label}
+  </Button>
+);
+
+const ProductSortMobileFilter = ({ props }: { props: ProductsViewProps }) => (
+  <section className="space-y-3">
+    <h3 className="text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
+      Ordenar por
+    </h3>
+    <Select
+      value={`${props.mobileFiltersDraft.sortBy}-${props.mobileFiltersDraft.sortOrder}`}
+      onValueChange={(value) => {
+        const [sortBy, sortOrder] = value.split("-") as [SortField, SortOrder];
+        props.onMobileFilterDraftChange({ sortBy, sortOrder });
+      }}
+    >
+      <SelectTrigger className="h-10 w-full rounded-[4px] border-neutral-800 bg-neutral-950/50 text-xs text-neutral-300 focus:border-blue-600 focus:ring-0">
+        <SelectValue placeholder="Ordenar por" />
+      </SelectTrigger>
+      <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+        {SORT_FILTER_OPTIONS.map((option) => (
+          <SelectItem
+            key={option.value}
+            value={option.value}
+            className="text-xs focus:bg-neutral-800"
+          >
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  </section>
+);
+
+const ProductDeleteDialog = ({ props }: { props: ProductsViewProps }) => (
+  <ResponsiveModal
+    open={props.deleteDialogOpen}
+    onOpenChange={(open) => {
+      if (!open) props.onCloseDeleteDialog();
+    }}
+    title="Confirmar exclusão"
+    description={`Tem certeza que deseja remover ${props.deleteProduct?.name} deste armazém? Esta ação apagará os lotes associados ao armazém atual.`}
+    maxWidth="sm:max-w-[450px]"
+    footer={<ProductDeleteDialogFooter props={props} />}
+  >
+    <ProductDeleteDialogBody props={props} />
+  </ResponsiveModal>
+);
+
+const ProductDeleteDialogFooter = ({ props }: { props: ProductsViewProps }) => (
+  <>
+    <Button
+      variant="ghost"
+      onClick={props.onCloseDeleteDialog}
+      className="rounded-[4px] border-neutral-700 bg-transparent text-xs uppercase hover:bg-neutral-800 hover:text-white"
+    >
+      Cancelar
+    </Button>
+    <Button
+      type="button"
+      onClick={props.onConfirmDelete}
+      disabled={props.isCheckingDeleteBatches || props.isDeletingProduct}
+      className="rounded-[4px] bg-rose-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-rose-700"
+    >
+      {props.isDeletingProduct ? (
+        <>
+          <Loader2 className="mr-2 size-3.5 animate-spin" />
+          Removendo…
+        </>
+      ) : (
+        "Remover"
+      )}
+    </Button>
+  </>
+);
+
+const ProductDeleteDialogBody = ({ props }: { props: ProductsViewProps }) => (
+  <div className="space-y-4">
+    {props.isCheckingDeleteBatches && (
+      <div className="flex items-center gap-2 rounded-[4px] border border-blue-900/30 bg-blue-950/10 px-3 py-2 text-xs text-blue-500">
+        <Loader2 className="size-3.5 animate-spin" />
+        Verificando estoque…
+      </div>
+    )}
+    {!props.isCheckingDeleteBatches && props.deleteBatches.length > 0 && (
+      <ProductExistingStockWarning props={props} />
+    )}
+  </div>
+);
+
+const ProductExistingStockWarning = ({ props }: { props: ProductsViewProps }) => (
+  <div className="rounded-[4px] border border-amber-900/30 bg-amber-950/10 p-3 text-xs text-amber-500">
+    <div className="flex items-center gap-2 font-bold uppercase tracking-wide">
+      <AlertTriangle className="size-3.5" />
+      Estoque Existente
+    </div>
+    <p className="mt-1 opacity-90">
+      Ainda existe estoque deste produto neste armazém. A remoção irá apagar os
+      lotes associados ao armazém atual.
+    </p>
+    <div className="mt-2 space-y-1 text-[10px] font-semibold uppercase tracking-wider text-amber-400">
+      {props.deleteBatches.map((batch) => (
+        <div key={batch.id} className="flex items-center justify-between">
+          <span>Lote {batch.id.slice(0, 8)}</span>
+          <span>{batch.quantity} un</span>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+const ProductSecondConfirmDialog = ({ props }: { props: ProductsViewProps }) => (
+  <ResponsiveModal
+    open={props.secondConfirmOpen}
+    onOpenChange={(open) => {
+      if (!open) props.onCloseSecondConfirm();
+    }}
+    title="Confirmação Final"
+    description={`Tem certeza que deseja remover ${props.deleteProduct?.name} deste armazém?`}
+    maxWidth="sm:max-w-[400px]"
+    footer={<ProductSecondConfirmFooter props={props} />}
+  >
+    <div className="py-2">
+      <p className="text-xs text-neutral-500">
+        Esta é a última confirmação antes de apagar os lotes deste produto no
+        armazém atual.
+      </p>
+    </div>
+  </ResponsiveModal>
+);
+
+const ProductSecondConfirmFooter = ({ props }: { props: ProductsViewProps }) => (
+  <>
+    <Button
+      variant="ghost"
+      onClick={props.onCloseSecondConfirm}
+      className="rounded-[4px] border-neutral-700 bg-transparent text-xs uppercase hover:bg-neutral-800 hover:text-white"
+    >
+      Cancelar
+    </Button>
+    <Button
+      onClick={props.onSecondConfirmDelete}
+      disabled={props.isDeletingProduct}
+      className="rounded-[4px] bg-rose-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-rose-700"
+    >
+      {props.isDeletingProduct ? (
+        <>
+          <Loader2 className="mr-2 size-3.5 animate-spin" />
+          Removendo…
+        </>
+      ) : (
+        "Confirmar Remoção"
+      )}
+    </Button>
+  </>
+);
diff --git a/app/(pages)/sales/[id]/sales-detail.view.tsx b/app/(pages)/sales/[id]/sales-detail.view.tsx
index 880a0cd..8156fb7 100644
--- a/app/(pages)/sales/[id]/sales-detail.view.tsx
+++ b/app/(pages)/sales/[id]/sales-detail.view.tsx
@@ -48,14 +48,28 @@ interface SaleDetailViewProps {
   handleCancel: (reason: string) => void;
 }
 
-export const SaleDetailView = ({
-  sale,
-  isLoading,
-  isCancelling,
-  cancelDialogOpen,
-  setCancelDialogOpen,
-  handleCancel,
-}: SaleDetailViewProps) => {
+interface SaleStatusStyle {
+  bg: string;
+  border: string;
+  color: string;
+}
+
+interface SaleDetailViewState extends SaleDetailViewProps {
+  cancelReason: string;
+  sale: Sale;
+  setCancelReason: (reason: string) => void;
+  statusStyle: SaleStatusStyle;
+}
+
+export const SaleDetailView = (props: SaleDetailViewProps) => {
+  const {
+    sale,
+    isLoading,
+    isCancelling,
+    cancelDialogOpen,
+    setCancelDialogOpen,
+    handleCancel,
+  } = props;
   const [cancelReason, setCancelReason] = useState("");
 
   if (isLoading) {
@@ -86,6 +100,17 @@ export const SaleDetailView = ({
           bg: "bg-rose-500/10",
           border: "border-rose-500/20",
         };
+  const viewState: SaleDetailViewState = {
+    ...props,
+    cancelReason,
+    isCancelling,
+    cancelDialogOpen,
+    handleCancel,
+    sale,
+    setCancelDialogOpen,
+    setCancelReason,
+    statusStyle,
+  };
 
   return (
     <div className="min-h-screen bg-[#0A0A0A] pb-20 font-sans text-neutral-200">
@@ -225,162 +250,186 @@ export const SaleDetailView = ({
             </div>
           )}
 
-          {/* Items */}
-          <div className="rounded-[4px] border border-neutral-800 bg-[#171717] overflow-hidden">
-            <div className="px-4 py-3 md:px-5 md:py-4 border-b border-neutral-800/50 flex items-center gap-3">
-              <ShoppingCart
-                className="size-5 shrink-0 text-blue-400"
-                strokeWidth={2}
-              />
-              <p className="text-sm font-bold text-white">
-                Itens da Venda ({sale.items.length})
-              </p>
-            </div>
-
-            {/* Mobile List View */}
-            <div className="flex flex-col md:hidden">
-              {sale.items.map((item) => (
-                <div
-                  key={item.id}
-                  className="flex flex-col gap-3 border-b border-neutral-800/50 p-4 last:border-0 hover:bg-neutral-900/20 transition-colors"
-                >
-                  <div className="flex justify-between items-start gap-4">
-                    <div className="flex flex-col">
-                      <p className="text-sm font-bold text-white line-clamp-2">
-                        {item.productName}
-                      </p>
-                      {item.productSku && (
-                        <p className="text-xs text-neutral-500 mt-0.5 tracking-wide">
-                          {item.productSku}
-                        </p>
-                      )}
-                    </div>
-                    <div className="flex flex-col items-end shrink-0">
-                      <p className="text-sm font-bold text-white font-mono">
-                        {formatCents(item.totalPrice)}
-                      </p>
-                    </div>
-                  </div>
+          <SaleItemsPanel sale={sale} />
+          <SaleCancelDialog viewState={viewState} />
+        </div>
+      </main>
+    </div>
+  );
+};
 
-                  <div className="grid grid-cols-2 gap-2 mt-1 rounded-[2px] bg-neutral-900/50 p-2.5">
-                    <div className="flex flex-col gap-1">
-                      <p className="text-[9px] font-bold uppercase tracking-widest text-neutral-500">
-                        Lote
-                      </p>
-                      <p className="text-xs font-medium text-neutral-300 truncate">
-                        {item.batchCode}
-                      </p>
-                    </div>
-                    <div className="flex flex-col gap-1 items-end">
-                      <p className="text-[9px] font-bold uppercase tracking-widest text-neutral-500">
-                        Qtd x Preço
-                      </p>
-                      <p className="text-xs font-medium text-neutral-300 font-mono">
-                        {item.quantity} x {formatCents(item.unitPrice)}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
+function SaleItemsPanel({ sale }: { sale: Sale }) {
+  return (
+    <div className="overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717]">
+      <div className="flex items-center gap-3 border-b border-neutral-800/50 px-4 py-3 md:px-5 md:py-4">
+        <ShoppingCart className="size-5 shrink-0 text-blue-400" />
+        <p className="text-sm font-bold text-white">
+          Itens da Venda ({sale.items.length})
+        </p>
+      </div>
+      <SaleItemsMobileList sale={sale} />
+      <SaleItemsTable sale={sale} />
+    </div>
+  );
+}
 
-            {/* Desktop Table View */}
-            <div className="hidden md:block">
-              <Table>
-                <TableHeader>
-                  <TableRow className="border-b border-neutral-800 bg-neutral-900/50 hover:bg-neutral-900/50">
-                    <TableHead className="py-3 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Produto
-                    </TableHead>
-                    <TableHead className="py-3 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Lote
-                    </TableHead>
-                    <TableHead className="py-3 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Qtd
-                    </TableHead>
-                    <TableHead className="py-3 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Preço Unit.
-                    </TableHead>
-                    <TableHead className="py-3 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Total
-                    </TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {sale.items.map((item) => (
-                    <TableRow
-                      key={item.id}
-                      className="border-b border-neutral-800 last:border-0"
-                    >
-                      <TableCell className="py-3">
-                        <div className="flex flex-col gap-0.5">
-                          <p className="text-sm font-bold text-white">
-                            {item.productName}
-                          </p>
-                          {item.productSku && (
-                            <p className="text-xs text-neutral-500">
-                              {item.productSku}
-                            </p>
-                          )}
-                        </div>
-                      </TableCell>
-                      <TableCell className="py-3">
-                        <span className="text-xs font-medium text-neutral-400">
-                          {item.batchCode}
-                        </span>
-                      </TableCell>
-                      <TableCell className="py-3 text-right font-mono text-sm font-medium text-white">
-                        {item.quantity}
-                      </TableCell>
-                      <TableCell className="py-3 text-right font-mono text-sm text-neutral-400">
-                        {formatCents(item.unitPrice)}
-                      </TableCell>
-                      <TableCell className="py-3 text-right font-mono text-sm font-bold text-white">
-                        {formatCents(item.totalPrice)}
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
+function SaleItemsMobileList({ sale }: { sale: Sale }) {
+  return (
+    <div className="flex flex-col md:hidden">
+      {sale.items.map((item) => (
+        <div
+          key={item.id}
+          className="flex flex-col gap-3 border-b border-neutral-800/50 p-4 last:border-0 hover:bg-neutral-900/20"
+        >
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex flex-col">
+              <p className="line-clamp-2 text-sm font-bold text-white">
+                {item.productName}
+              </p>
+              {item.productSku ? (
+                <p className="mt-0.5 text-xs tracking-wide text-neutral-500">
+                  {item.productSku}
+                </p>
+              ) : null}
             </div>
+            <p className="shrink-0 font-mono text-sm font-bold text-white">
+              {formatCents(item.totalPrice)}
+            </p>
+          </div>
+          <div className="mt-1 grid grid-cols-2 gap-2 rounded-[2px] bg-neutral-900/50 p-2.5">
+            <SaleItemMeta label="Lote" value={item.batchCode} />
+            <SaleItemMeta
+              align="end"
+              label="Qtd x Preço"
+              value={`${item.quantity} x ${formatCents(item.unitPrice)}`}
+            />
           </div>
-
-          {/* Cancel Dialog */}
-          <Dialog open={cancelDialogOpen} onOpenChange={setCancelDialogOpen}>
-            <DialogContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-200">
-              <DialogHeader>
-                <DialogTitle className="text-white">Cancelar Venda</DialogTitle>
-                <DialogDescription className="text-neutral-500">
-                  Esta ação irá estornar o estoque dos itens vendidos. Informe o
-                  motivo do cancelamento.
-                </DialogDescription>
-              </DialogHeader>
-              <Textarea
-                value={cancelReason}
-                onChange={(e) => setCancelReason(e.target.value)}
-                placeholder="Motivo do cancelamento..."
-                className="min-h-[100px] w-full rounded-[4px] border-2 border-neutral-800 bg-neutral-900 text-sm text-white focus:border-rose-600"
-              />
-              <DialogFooter className="flex flex-col sm:flex-row gap-2 mt-4 sm:space-x-2 sm:mt-0">
-                <Button
-                  variant="outline"
-                  onClick={() => setCancelDialogOpen(false)}
-                  className="w-full sm:w-auto rounded-[4px] border-neutral-800 text-neutral-300 hover:bg-neutral-800 hover:text-white"
-                >
-                  Voltar
-                </Button>
-                <Button
-                  onClick={() => handleCancel(cancelReason)}
-                  disabled={isCancelling || !cancelReason.trim()}
-                  className="w-full sm:w-auto rounded-[4px] bg-rose-600 text-white hover:bg-rose-700 disabled:opacity-50"
-                >
-                  {isCancelling ? "Cancelando..." : "Confirmar Cancelamento"}
-                </Button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
         </div>
-      </main>
+      ))}
     </div>
   );
-};
+}
+
+function SaleItemMeta({
+  align = "start",
+  label,
+  value,
+}: {
+  align?: "end" | "start";
+  label: string;
+  value: string;
+}) {
+  return (
+    <div className={`flex flex-col gap-1 ${align === "end" ? "items-end" : ""}`}>
+      <p className="text-[9px] font-bold uppercase tracking-widest text-neutral-500">
+        {label}
+      </p>
+      <p className="truncate font-mono text-xs font-medium text-neutral-300">
+        {value}
+      </p>
+    </div>
+  );
+}
+
+function SaleItemsTable({ sale }: { sale: Sale }) {
+  return (
+    <div className="hidden md:block">
+      <Table>
+        <TableHeader>
+          <TableRow className="border-b border-neutral-800 bg-neutral-900/50 hover:bg-neutral-900/50">
+            <TableHead className="py-3 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Produto
+            </TableHead>
+            <TableHead className="py-3 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Lote
+            </TableHead>
+            <TableHead className="py-3 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Qtd
+            </TableHead>
+            <TableHead className="py-3 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Preço Unit.
+            </TableHead>
+            <TableHead className="py-3 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Total
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {sale.items.map((item) => (
+            <TableRow key={item.id} className="border-b border-neutral-800 last:border-0">
+              <TableCell className="py-3">
+                <p className="text-sm font-bold text-white">{item.productName}</p>
+                {item.productSku ? (
+                  <p className="text-xs text-neutral-500">{item.productSku}</p>
+                ) : null}
+              </TableCell>
+              <TableCell className="py-3 text-xs font-medium text-neutral-400">
+                {item.batchCode}
+              </TableCell>
+              <TableCell className="py-3 text-right font-mono text-sm font-medium text-white">
+                {item.quantity}
+              </TableCell>
+              <TableCell className="py-3 text-right font-mono text-sm text-neutral-400">
+                {formatCents(item.unitPrice)}
+              </TableCell>
+              <TableCell className="py-3 text-right font-mono text-sm font-bold text-white">
+                {formatCents(item.totalPrice)}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+function SaleCancelDialog({
+  viewState,
+}: {
+  viewState: SaleDetailViewState;
+}) {
+  const {
+    cancelDialogOpen,
+    cancelReason,
+    handleCancel,
+    isCancelling,
+    setCancelDialogOpen,
+    setCancelReason,
+  } = viewState;
+
+  return (
+    <Dialog open={cancelDialogOpen} onOpenChange={setCancelDialogOpen}>
+      <DialogContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-200">
+        <DialogHeader>
+          <DialogTitle className="text-white">Cancelar Venda</DialogTitle>
+          <DialogDescription className="text-neutral-500">
+            Esta ação irá estornar o estoque dos itens vendidos. Informe o
+            motivo do cancelamento.
+          </DialogDescription>
+        </DialogHeader>
+        <Textarea
+          value={cancelReason}
+          onChange={(event) => setCancelReason(event.target.value)}
+          placeholder="Motivo do cancelamento..."
+          className="min-h-[100px] w-full rounded-[4px] border-2 border-neutral-800 bg-neutral-900 text-sm text-white focus:border-rose-600"
+        />
+        <DialogFooter className="mt-4 flex flex-col gap-2 sm:mt-0 sm:flex-row sm:space-x-2">
+          <Button
+            variant="outline"
+            onClick={() => setCancelDialogOpen(false)}
+            className="w-full rounded-[4px] border-neutral-800 text-neutral-300 hover:bg-neutral-800 hover:text-white sm:w-auto"
+          >
+            Voltar
+          </Button>
+          <Button
+            onClick={() => handleCancel(cancelReason)}
+            disabled={isCancelling || !cancelReason.trim()}
+            className="w-full rounded-[4px] bg-rose-600 text-white hover:bg-rose-700 disabled:opacity-50 sm:w-auto"
+          >
+            {isCancelling ? "Cancelando..." : "Confirmar Cancelamento"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/app/(pages)/sales/sales-chart.view.tsx b/app/(pages)/sales/sales-chart.view.tsx
index 558a5a9..311e01e 100644
--- a/app/(pages)/sales/sales-chart.view.tsx
+++ b/app/(pages)/sales/sales-chart.view.tsx
@@ -1,19 +1,11 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
-import {
-  AreaChart,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  Legend,
-} from "recharts";
 import type { DailyChartEntry } from "./sales.types";
 import { formatCents } from "./sales.types";
 
+type RechartsModule = typeof import("recharts");
+
 interface SalesChartProps {
   data: DailyChartEntry[];
 }
@@ -31,6 +23,26 @@ const useIsMobile = (breakpoint = 768): boolean => {
   return isMobile;
 };
 
+const useRechartsModule = (): RechartsModule | null => {
+  const [rechartsModule, setRechartsModule] = useState<RechartsModule | null>(
+    null,
+  );
+
+  useEffect(() => {
+    let isMounted = true;
+
+    void import("recharts").then((loadedModule) => {
+      if (isMounted) setRechartsModule(loadedModule);
+    });
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  return rechartsModule;
+};
+
 const formatXAxisLabel = (value: string, isMobile: boolean): string => {
   const parts = value.split("-");
   const label = `${parts[1]}/${parts[2]}`;
@@ -82,14 +94,36 @@ const CustomTooltip = ({ active, payload, label }: {
   );
 };
 
+const SalesChartLoadingState = () => (
+  <div className="flex h-72 items-center justify-center md:h-80">
+    <span className="text-[10px] font-bold uppercase tracking-widest text-neutral-600">
+      Carregando gráfico
+    </span>
+  </div>
+);
+
 export const SalesChart = ({ data }: SalesChartProps) => {
   const isMobile = useIsMobile();
+  const rechartsModule = useRechartsModule();
 
   const xTickFormatter = useCallback(
     (value: string) => formatXAxisLabel(value, isMobile),
     [isMobile],
   );
 
+  if (!rechartsModule) return <SalesChartLoadingState />;
+
+  const {
+    Area,
+    AreaChart,
+    CartesianGrid,
+    Legend,
+    ResponsiveContainer,
+    Tooltip,
+    XAxis,
+    YAxis,
+  } = rechartsModule;
+
   return (
     <div className="h-72 md:h-80">
       <ResponsiveContainer width="100%" height="100%">
diff --git a/app/(pages)/sales/sales.model.ts b/app/(pages)/sales/sales.model.ts
index 21b9dff..9d20564 100644
--- a/app/(pages)/sales/sales.model.ts
+++ b/app/(pages)/sales/sales.model.ts
@@ -169,7 +169,7 @@ const buildSalesRequestUrl = (
   return `sales?${params.toString()}`;
 };
 
-export const buildSalesMetricsRequestUrl = (
+const buildSalesMetricsRequestUrl = (
   warehouseId: string,
   filters: SaleFilters,
   range: SalesMetricsDateRange,
diff --git a/app/(pages)/sales/sales.view.tsx b/app/(pages)/sales/sales.view.tsx
index 927b6ca..ba044f1 100644
--- a/app/(pages)/sales/sales.view.tsx
+++ b/app/(pages)/sales/sales.view.tsx
@@ -1,66 +1,37 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
+import Link from "next/link";
 import type { ReactNode } from "react";
+import { format, parseISO } from "date-fns";
+import { ptBR } from "date-fns/locale";
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Input } from "@/components/ui/input";
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-} from "@/components/ui/drawer";
-import {
-  ShoppingCart,
-  Plus,
   Calendar,
   CalendarDays,
+  CheckCircle2,
+  ChevronRight,
+  CreditCard,
+  DollarSign,
   Eye,
-  MoreHorizontal,
   Filter,
-  DollarSign,
-  TrendingUp,
-  CreditCard,
+  MoreHorizontal,
+  Plus,
+  ShoppingCart,
   Trash2,
-  X,
-  CheckCircle2,
-  ChevronRight,
+  TrendingUp,
   User,
+  X,
 } from "lucide-react";
-import Link from "next/link";
 import { PermissionGate } from "@/components/permission-gate";
-import { SalesChart } from "./sales-chart.view";
+import { Button } from "@/components/ui/button";
 import {
-  SaleSummary,
-  SaleStatus,
-  SalesMetricsData,
-  SaleFilters,
-  SaleFilterDraft,
-  PaymentMethod,
-  DateFilterPreset,
-  PAYMENT_METHOD_LABELS,
-  SALE_STATUS_LABELS,
-  formatCents,
-} from "./sales.types";
-import { format, parseISO } from "date-fns";
-import { ptBR } from "date-fns/locale";
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -69,6 +40,35 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { SalesChart } from "./sales-chart.view";
+import {
+  DateFilterPreset,
+  formatCents,
+  PAYMENT_METHOD_LABELS,
+  PaymentMethod,
+  SaleFilterDraft,
+  SaleFilters,
+  SalesMetricsData,
+  SaleStatus,
+  SALE_STATUS_LABELS,
+  SaleSummary,
+} from "./sales.types";
 
 interface SalesViewProps {
   sales: SaleSummary[];
@@ -105,6 +105,8 @@ interface SalesViewProps {
   ) => void;
 }
 
+type SalesViewState = SalesViewProps;
+
 const getStatusStyle = (status: SaleStatus) =>
   status === "COMPLETED"
     ? {
@@ -158,9 +160,7 @@ const getDateSummary = (
   dateFrom?: string,
   dateTo?: string,
 ) => {
-  if (datePreset !== "CUSTOM") {
-    return DATE_PRESET_LABELS[datePreset];
-  }
+  if (datePreset !== "CUSTOM") return DATE_PRESET_LABELS[datePreset];
 
   if (dateFrom && dateTo) {
     return `${formatDateDisplay(dateFrom)} - ${formatDateDisplay(dateTo)}`;
@@ -186,9 +186,7 @@ const preventDrawerDismissFromSelectPortal = (event: Event) => {
     target.closest('[data-slot="select-content"]') ||
     target.closest("[data-radix-popper-content-wrapper]");
 
-  if (isSelectPortal) {
-    event.preventDefault();
-  }
+  if (isSelectPortal) event.preventDefault();
 };
 
 const SaleActions = ({ sale }: { sale: SaleSummary }) => (
@@ -213,7 +211,7 @@ const SaleActions = ({ sale }: { sale: SaleSummary }) => (
       <DropdownMenuItem asChild>
         <Link
           href={`/sales/${sale.id}`}
-          className="cursor-pointer focus:bg-neutral-800 focus:text-white flex items-center w-full"
+          className="flex w-full cursor-pointer items-center focus:bg-neutral-800 focus:text-white"
         >
           <Eye className="mr-2 size-3.5" /> Ver Detalhes
         </Link>
@@ -223,14 +221,14 @@ const SaleActions = ({ sale }: { sale: SaleSummary }) => (
 );
 
 const FilterToken = ({
+  badge,
   icon,
   label,
-  badge,
   onClick,
 }: {
+  badge?: number;
   icon: ReactNode;
   label: string;
-  badge?: number;
   onClick: () => void;
 }) => (
   <Button
@@ -249,695 +247,837 @@ const FilterToken = ({
   </Button>
 );
 
-export const SalesView = ({
-  sales,
-  isLoading,
+export const SalesView = (props: SalesViewProps) => {
+  const viewState: SalesViewState = props;
+
+  return (
+    <div className="min-h-screen bg-[#0A0A0A] pb-20 font-sans text-neutral-200">
+      <main className="mx-auto w-full max-w-7xl px-4 py-8 md:px-6 lg:px-8">
+        <div className="space-y-6">
+          <SalesHeader viewState={viewState} />
+          <SalesMetricsSection viewState={viewState} />
+          <SalesChartSection viewState={viewState} />
+          <SalesDesktopTable viewState={viewState} />
+          <SalesMobileCards viewState={viewState} />
+          <SalesPagination viewState={viewState} />
+        </div>
+      </main>
+      <SalesMobileFiltersDrawer viewState={viewState} />
+    </div>
+  );
+};
+
+function SalesHeader({ viewState }: { viewState: SalesViewState }) {
+  return (
+    <div className="flex flex-col gap-5">
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tighter text-white">
+            Vendas
+          </h1>
+          <p className="mt-1 text-sm text-neutral-500">
+            Histórico de vendas realizadas
+          </p>
+        </div>
+        <PermissionGate permission="sales:create">
+          <Link href="/sales/pdv" className="w-full md:w-auto">
+            <Button className="h-10 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white shadow-[0_0_20px_-5px_rgba(37,99,235,0.3)] hover:bg-blue-700 md:w-auto">
+              <Plus className="mr-2 size-4" /> Nova Venda
+            </Button>
+          </Link>
+        </PermissionGate>
+      </div>
+      <SalesMobileFilterTokens viewState={viewState} />
+      <SalesDesktopFilters viewState={viewState} />
+    </div>
+  );
+}
+
+function SalesMobileFilterTokens({
+  viewState,
+}: {
+  viewState: SalesViewState;
+}) {
+  const { filters, onOpenMobileFilters } = viewState;
+  const activeFilterCount = getActiveFilterCount(filters);
+
+  return (
+    <div className="relative -mx-4 md:hidden">
+      <div className="overflow-x-auto px-4 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        <div className="flex min-w-max gap-2 pr-8">
+          <FilterToken
+            icon={<Filter className="size-3.5" />}
+            label="Filtros"
+            badge={activeFilterCount || undefined}
+            onClick={onOpenMobileFilters}
+          />
+          <FilterToken
+            icon={<CalendarDays className="size-3.5" />}
+            label={getDateSummary(
+              filters.datePreset,
+              filters.dateFrom,
+              filters.dateTo,
+            )}
+            onClick={onOpenMobileFilters}
+          />
+          <FilterToken
+            icon={<CreditCard className="size-3.5" />}
+            label={
+              filters.paymentMethod && filters.paymentMethod !== "ALL"
+                ? PAYMENT_METHOD_LABELS[filters.paymentMethod]
+                : "Pagamento"
+            }
+            onClick={onOpenMobileFilters}
+          />
+        </div>
+      </div>
+      <div className="pointer-events-none absolute top-0 right-0 bottom-0 w-12 bg-gradient-to-l from-[#0A0A0A] to-transparent" />
+    </div>
+  );
+}
+
+function SalesDesktopFilters({ viewState }: { viewState: SalesViewState }) {
+  const {
+    filters,
+    onDateInputChange,
+    onDatePresetChange,
+    onFilterChange,
+  } = viewState;
+
+  return (
+    <div className="hidden w-full gap-3 md:flex md:h-12 md:flex-row md:items-center">
+      <Select
+        value={filters.status || "ALL"}
+        onValueChange={(value) =>
+          onFilterChange("status", value as SaleStatus | "ALL")
+        }
+      >
+        <SelectTrigger className="h-12 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-400 hover:border-neutral-700 focus:border-blue-600 focus:ring-0 md:w-[200px]">
+          <div className="flex items-center gap-2">
+            <Filter className="size-3.5 text-neutral-500" />
+            <SelectValue placeholder="Status" />
+          </div>
+        </SelectTrigger>
+        <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+          {STATUS_FILTER_OPTIONS.map((option) => (
+            <SelectItem
+              key={option.value}
+              value={option.value}
+              className="text-[12px] font-bold uppercase focus:bg-neutral-800"
+            >
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <SalesPaymentFilter filters={filters} onFilterChange={onFilterChange} />
+      <SalesDatePresetFilter
+        filters={filters}
+        onDatePresetChange={onDatePresetChange}
+      />
+      {filters.datePreset === "CUSTOM" ? (
+        <SalesCustomDateInputs
+          filters={filters}
+          onDateInputChange={onDateInputChange}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function SalesPaymentFilter({
   filters,
-  mobileFiltersDraft,
-  isMobileFiltersOpen,
-  pagination,
-  salesMetricsData,
-  salesMetricsLoading,
-  salesMetricsTitle,
-  onPageChange,
   onFilterChange,
+}: {
+  filters: SaleFilters;
+  onFilterChange: SalesViewProps["onFilterChange"];
+}) {
+  return (
+    <Select
+      value={filters.paymentMethod || "ALL"}
+      onValueChange={(value) =>
+        onFilterChange("paymentMethod", value as PaymentMethod | "ALL")
+      }
+    >
+      <SelectTrigger className="h-12 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-400 hover:border-neutral-700 focus:border-blue-600 focus:ring-0 md:w-[200px]">
+        <div className="flex items-center gap-2">
+          <Filter className="size-3.5 text-neutral-500" />
+          <SelectValue placeholder="Pagamento" />
+        </div>
+      </SelectTrigger>
+      <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+        {PAYMENT_FILTER_OPTIONS.map((option) => (
+          <SelectItem
+            key={option.value}
+            value={option.value}
+            className="text-[12px] font-bold uppercase focus:bg-neutral-800"
+          >
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+function SalesDatePresetFilter({
+  filters,
   onDatePresetChange,
+}: {
+  filters: SaleFilters;
+  onDatePresetChange: (preset: DateFilterPreset) => void;
+}) {
+  return (
+    <Select
+      value={filters.datePreset}
+      onValueChange={(value) => onDatePresetChange(value as DateFilterPreset)}
+    >
+      <SelectTrigger className="h-12 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-400 hover:border-neutral-700 focus:border-blue-600 focus:ring-0 md:w-[190px]">
+        <div className="flex items-center gap-2">
+          <CalendarDays className="size-3.5 text-neutral-500" />
+          <SelectValue />
+        </div>
+      </SelectTrigger>
+      <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+        {Object.entries(DATE_PRESET_LABELS).map(([value, label]) => (
+          <SelectItem
+            key={value}
+            value={value}
+            className="text-[12px] font-bold uppercase focus:bg-neutral-800"
+          >
+            {label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+function SalesCustomDateInputs({
+  filters,
   onDateInputChange,
-  onOpenMobileFilters,
-  onCloseMobileFilters,
-  onApplyMobileFilters,
-  onClearMobileFilters,
-  onMobileDatePresetChange,
-  onMobileDateInputChange,
-  onMobileFilterDraftChange,
-}: SalesViewProps) => {
-
-
-  const draft = mobileFiltersDraft;
-  const mobileFiltersPanel = (
-      <Drawer
-        direction="bottom"
-        open={isMobileFiltersOpen}
-        onOpenChange={(open) => {
-          if (!open) onCloseMobileFilters();
-        }}
+}: {
+  filters: SaleFilters;
+  onDateInputChange: SalesViewProps["onDateInputChange"];
+}) {
+  return (
+    <>
+      <Input
+        type="date"
+        value={filters.dateFrom ?? ""}
+        onChange={(event) => onDateInputChange("dateFrom", event.target.value)}
+        className="h-12 w-[160px] rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-300 [color-scheme:dark] focus-visible:border-blue-600 focus-visible:ring-0"
+      />
+      <Input
+        type="date"
+        value={filters.dateTo ?? ""}
+        onChange={(event) => onDateInputChange("dateTo", event.target.value)}
+        className="h-12 w-[160px] rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-300 [color-scheme:dark] focus-visible:border-blue-600 focus-visible:ring-0"
+      />
+    </>
+  );
+}
+
+function SalesMetricsSection({ viewState }: { viewState: SalesViewState }) {
+  return (
+    <div className="space-y-3">
+      <div className="flex min-h-12 items-center gap-2 rounded-[4px] border border-neutral-800 bg-[#171717] px-4 text-xs font-bold uppercase tracking-widest text-neutral-300">
+        <CalendarDays className="size-4 shrink-0 text-blue-500" />
+        <span>{viewState.salesMetricsTitle}</span>
+      </div>
+      <SalesMetricsContent viewState={viewState} />
+    </div>
+  );
+}
+
+function SalesMetricsContent({ viewState }: { viewState: SalesViewState }) {
+  if (viewState.salesMetricsLoading) {
+    return (
+      <div className="flex items-center justify-center rounded-[4px] border border-neutral-800 bg-[#171717] p-5 py-6">
+        <div className="size-6 animate-spin rounded-full border-2 border-neutral-500 border-t-blue-500" />
+      </div>
+    );
+  }
+
+  if (!viewState.salesMetricsData) return null;
+
+  const { kpiSummary } = viewState.salesMetricsData;
+
+  return (
+    <div className="overflow-x-auto rounded-[4px] border border-neutral-800 bg-[#171717] p-4 [scrollbar-width:none] sm:p-5 [&::-webkit-scrollbar]:hidden">
+      <div className="flex min-w-max items-center justify-between gap-6">
+        <SalesMetricItem
+          icon={<ShoppingCart className="size-5 sm:size-6" strokeWidth={2} />}
+          iconClassName="bg-blue-500/10 text-blue-400"
+          label="Vendas"
+          value={String(kpiSummary.count)}
+          suffix="vendas"
+        />
+        <SalesMetricDivider />
+        <SalesMetricItem
+          icon={<DollarSign className="size-5 sm:size-6" strokeWidth={2} />}
+          iconClassName="bg-emerald-500/10 text-emerald-400"
+          label="Faturamento"
+          value={formatCents(kpiSummary.revenue)}
+        />
+        <SalesMetricDivider />
+        <SalesMetricItem
+          icon={<TrendingUp className="size-5 sm:size-6" strokeWidth={2} />}
+          iconClassName="bg-amber-500/10 text-amber-400"
+          label="Ticket Médio"
+          value={formatCents(kpiSummary.avgTicket)}
+        />
+      </div>
+    </div>
+  );
+}
+
+function SalesMetricItem({
+  icon,
+  iconClassName,
+  label,
+  suffix,
+  value,
+}: {
+  icon: ReactNode;
+  iconClassName: string;
+  label: string;
+  suffix?: string;
+  value: string;
+}) {
+  return (
+    <div className="flex shrink-0 items-center gap-3 sm:gap-4">
+      <div
+        className={`flex size-11 shrink-0 items-center justify-center rounded-[4px] sm:size-12 ${iconClassName}`}
       >
-        <DrawerContent
-          onInteractOutside={preventDrawerDismissFromSelectPortal}
-          onPointerDownOutside={preventDrawerDismissFromSelectPortal}
-          className="max-h-[88vh] rounded-t-[4px] border-neutral-800 bg-[#0e0e0e] text-neutral-200 md:hidden"
-        >
-          <DrawerHeader className="relative px-5 pb-2 pt-5 text-left">
-            <DrawerTitle className="text-xl font-bold tracking-tight text-white">
-              Filtros
-            </DrawerTitle>
-            <DrawerDescription className="mt-1 text-xs text-neutral-500">
-              Refine o histórico de vendas
-            </DrawerDescription>
-            <div className="absolute right-5 top-5 flex items-center gap-2">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={onClearMobileFilters}
-                className="h-9 rounded-[4px] px-2 text-xs font-bold text-rose-500 hover:bg-rose-500/10 hover:text-rose-400"
-              >
-                <Trash2 className="mr-1.5 size-3.5" />
-                Limpar
-              </Button>
-              <DrawerClose asChild>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  className="size-9 rounded-[4px] p-0 text-neutral-400 hover:bg-neutral-800 hover:text-white"
-                >
-                  <X className="size-4" />
-                </Button>
-              </DrawerClose>
-            </div>
-          </DrawerHeader>
-
-          <div className="overflow-y-auto px-5 pb-2 pt-3">
-            <div className="space-y-7">
-              <div>
-                <h3 className="mb-3 text-sm font-semibold text-white">Status</h3>
-                <div className="flex flex-wrap gap-2">
-                  {STATUS_FILTER_OPTIONS.map((option) => {
-                    const isSelected = draft.status === option.value;
-                    return (
-                      <Button
-                        key={option.value}
-                        type="button"
-                        variant="outline"
-                        onClick={() =>
-                          onMobileFilterDraftChange("status", option.value)
-                        }
-                        className={`h-10 rounded-[4px] border px-3 text-sm font-semibold ${
-                          isSelected
-                            ? "border-blue-500 bg-blue-500/15 text-blue-300"
-                            : "border-neutral-700 bg-neutral-900/30 text-neutral-300 hover:border-neutral-600 hover:bg-neutral-800"
-                        }`}
-                      >
-                        {option.label}
-                      </Button>
-                    );
-                  })}
-                </div>
-              </div>
-
-              <div>
-                <h3 className="mb-3 text-sm font-semibold text-white">
-                  Pagamento
-                </h3>
-                <div className="flex flex-wrap gap-2">
-                  {PAYMENT_FILTER_OPTIONS.map((option) => {
-                    const isSelected = draft.paymentMethod === option.value;
-                    return (
-                      <Button
-                        key={option.value}
-                        type="button"
-                        variant="outline"
-                        onClick={() =>
-                          onMobileFilterDraftChange(
-                            "paymentMethod",
-                            option.value,
-                          )
-                        }
-                        className={`h-10 rounded-[4px] border px-3 text-sm font-semibold ${
-                          isSelected
-                            ? "border-blue-500 bg-blue-500/15 text-blue-300"
-                            : "border-neutral-700 bg-neutral-900/30 text-neutral-300 hover:border-neutral-600 hover:bg-neutral-800"
-                        }`}
-                      >
-                        {option.label}
-                      </Button>
-                    );
-                  })}
-                </div>
-              </div>
-
-              <div>
-                <h3 className="mb-3 text-sm font-semibold text-white">Período</h3>
-                <Select
-                  value={draft.datePreset}
-                  onValueChange={(value) =>
-                    onMobileDatePresetChange(value as DateFilterPreset)
-                  }
-                >
-                  <SelectTrigger className="h-12 rounded-[4px] border-neutral-700 bg-neutral-900/30 text-neutral-200 focus:border-blue-600 focus:ring-0">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
-                    {Object.entries(DATE_PRESET_LABELS).map(
-                      ([value, label]) => (
-                        <SelectItem
-                          key={value}
-                          value={value}
-                          className="focus:bg-neutral-800"
-                        >
-                          {label}
-                        </SelectItem>
-                      ),
-                    )}
-                  </SelectContent>
-                </Select>
-
-                {draft.datePreset === "CUSTOM" ? (
-                  <div className="mt-4 grid grid-cols-1 gap-3">
-                    <label
-                      htmlFor="sales-mobile-date-from"
-                      className="space-y-1.5"
-                    >
-                      <span className="text-xs font-medium text-neutral-400">
-                        Data inicial
-                      </span>
-                      <Input
-                        id="sales-mobile-date-from"
-                        type="date"
-                        value={draft.dateFrom ?? ""}
-                        onChange={(event) =>
-                          onMobileDateInputChange(
-                            "dateFrom",
-                            event.target.value,
-                          )
-                        }
-                        className="h-12 rounded-[4px] border-neutral-700 bg-neutral-900/30 text-neutral-200 [color-scheme:dark] focus-visible:border-blue-600 focus-visible:ring-0"
-                      />
-                    </label>
-                    <label
-                      htmlFor="sales-mobile-date-to"
-                      className="space-y-1.5"
-                    >
-                      <span className="text-xs font-medium text-neutral-400">
-                        Data final
-                      </span>
-                      <Input
-                        id="sales-mobile-date-to"
-                        type="date"
-                        value={draft.dateTo ?? ""}
-                        onChange={(event) =>
-                          onMobileDateInputChange(
-                            "dateTo",
-                            event.target.value,
-                          )
-                        }
-                        className="h-12 rounded-[4px] border-neutral-700 bg-neutral-900/30 text-neutral-200 [color-scheme:dark] focus-visible:border-blue-600 focus-visible:ring-0"
-                      />
-                    </label>
-                  </div>
-                ) : null}
-              </div>
-            </div>
-          </div>
+        {icon}
+      </div>
+      <div>
+        <div className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          {label}
+        </div>
+        <div className="mt-0.5 flex items-baseline gap-1.5">
+          <span className="font-mono text-xl font-bold tracking-tight text-white sm:text-2xl">
+            {value}
+          </span>
+          {suffix ? (
+            <span className="text-xs font-medium text-neutral-400">{suffix}</span>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
 
-          <DrawerFooter className="border-t border-neutral-800 px-5 pb-5 pt-4">
-            <Button
-              type="button"
-              onClick={onApplyMobileFilters}
-              className="h-12 w-full rounded-[4px] bg-blue-600 text-sm font-bold text-white hover:bg-blue-700"
-            >
-              Aplicar filtros
-            </Button>
-          </DrawerFooter>
-        </DrawerContent>
-      </Drawer>
+function SalesMetricDivider() {
+  return <div className="h-10 w-px shrink-0 bg-neutral-800" />;
+}
+
+function SalesChartSection({ viewState }: { viewState: SalesViewState }) {
+  const data = viewState.salesMetricsData?.dailyChart ?? [];
+
+  if (data.length === 0) return null;
+
+  return (
+    <div className="rounded-[4px] border border-neutral-800 bg-[#171717] p-4">
+      <h3 className="mb-4 text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
+        Evolução diária
+      </h3>
+      <SalesChart data={data} />
+    </div>
   );
+}
 
-  const activeFilterCount = getActiveFilterCount(filters);
+function SalesDesktopTable({ viewState }: { viewState: SalesViewState }) {
+  return (
+    <div className="hidden overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717] md:block">
+      <div className="overflow-x-auto">
+        <Table>
+          <SalesTableHeader />
+          <TableBody>
+            <SalesTableBody viewState={viewState} />
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}
 
+function SalesTableHeader() {
   return (
-    <div className="min-h-screen bg-[#0A0A0A] pb-20 font-sans text-neutral-200">
-      <main className="mx-auto w-full max-w-7xl px-4 py-8 md:px-6 lg:px-8">
-        <div className="space-y-6">
-          <div className="flex flex-col gap-5">
-            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-              <div>
-                <h1 className="text-2xl font-semibold tracking-tighter text-white">
-                  Vendas
-                </h1>
-                <p className="text-sm text-neutral-500 mt-1">
-                  Histórico de vendas realizadas
-                </p>
-              </div>
-              <PermissionGate permission="sales:create">
-                <Link href="/sales/pdv" className="w-full md:w-auto">
-                  <Button className="h-10 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 shadow-[0_0_20px_-5px_rgba(37,99,235,0.3)] md:w-auto">
-                    <Plus className="mr-2 size-4" /> Nova Venda
-                  </Button>
-                </Link>
-              </PermissionGate>
-            </div>
-
-            <div className="relative -mx-4 md:hidden">
-              <div className="overflow-x-auto px-4 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-                <div className="flex min-w-max gap-2 pr-8">
-                  <FilterToken
-                    icon={<Filter className="size-3.5" />}
-                    label="Filtros"
-                    badge={activeFilterCount || undefined}
-                    onClick={onOpenMobileFilters}
-                  />
-                  <FilterToken
-                    icon={<CalendarDays className="size-3.5" />}
-                    label={getDateSummary(
-                      filters.datePreset,
-                      filters.dateFrom,
-                      filters.dateTo,
-                    )}
-                    onClick={onOpenMobileFilters}
-                  />
-                  <FilterToken
-                    icon={<CreditCard className="size-3.5" />}
-                    label={
-                      filters.paymentMethod && filters.paymentMethod !== "ALL"
-                        ? PAYMENT_METHOD_LABELS[filters.paymentMethod]
-                        : "Pagamento"
-                    }
-                    onClick={onOpenMobileFilters}
-                  />
-                </div>
-              </div>
-              <div className="pointer-events-none absolute bottom-0 right-0 top-0 w-12 bg-gradient-to-l from-[#0A0A0A] to-transparent" />
-            </div>
-
-            <div className="hidden w-full gap-3 md:flex md:h-12 md:flex-row md:items-center">
-              <Select
-                value={filters.status || "ALL"}
-                onValueChange={(value) =>
-                  onFilterChange("status", value as SaleStatus | "ALL")
-                }
-              >
-                <SelectTrigger className="h-12 w-full md:w-[200px] rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-400 focus:border-blue-600 focus:ring-0 hover:border-neutral-700">
-                  <div className="flex items-center gap-2">
-                    <Filter className="size-3.5 text-neutral-500" />
-                    <SelectValue placeholder="Status" />
-                  </div>
-                </SelectTrigger>
-                <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
-                  <SelectItem
-                    value="ALL"
-                    className="text-[12px] font-bold uppercase focus:bg-neutral-800"
-                  >
-                    Todos
-                  </SelectItem>
-                  <SelectItem
-                    value="COMPLETED"
-                    className="text-[12px] font-bold uppercase focus:bg-neutral-800"
-                  >
-                    Concluída
-                  </SelectItem>
-                  <SelectItem
-                    value="CANCELLED"
-                    className="text-[12px] font-bold uppercase focus:bg-neutral-800"
-                  >
-                    Cancelada
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-
-              <Select
-                value={filters.paymentMethod || "ALL"}
-                onValueChange={(value) =>
-                  onFilterChange(
-                    "paymentMethod",
-                    value as PaymentMethod | "ALL",
-                  )
-                }
-              >
-                <SelectTrigger className="h-12 w-full md:w-[200px] rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-400 focus:border-blue-600 focus:ring-0 hover:border-neutral-700">
-                  <div className="flex items-center gap-2">
-                    <Filter className="size-3.5 text-neutral-500" />
-                    <SelectValue placeholder="Pagamento" />
-                  </div>
-                </SelectTrigger>
-                <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
-                  <SelectItem
-                    value="ALL"
-                    className="text-[12px] font-bold uppercase focus:bg-neutral-800"
-                  >
-                    Todos
-                  </SelectItem>
-                  {Object.entries(PAYMENT_METHOD_LABELS).map(([key, label]) => (
-                    <SelectItem
-                      key={key}
-                      value={key}
-                      className="text-[12px] font-bold uppercase focus:bg-neutral-800"
-                    >
-                      {label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-
-              <Select
-                value={filters.datePreset}
-                onValueChange={(value) =>
-                  onDatePresetChange(value as DateFilterPreset)
-                }
-              >
-                <SelectTrigger className="h-12 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-400 hover:border-neutral-700 focus:border-blue-600 focus:ring-0 md:w-[190px]">
-                  <div className="flex items-center gap-2">
-                    <CalendarDays className="size-3.5 text-neutral-500" />
-                    <SelectValue />
-                  </div>
-                </SelectTrigger>
-                <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
-                  {Object.entries(DATE_PRESET_LABELS).map(([value, label]) => (
-                    <SelectItem
-                      key={value}
-                      value={value}
-                      className="text-[12px] font-bold uppercase focus:bg-neutral-800"
-                    >
-                      {label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-
-              {filters.datePreset === "CUSTOM" ? (
-                <>
-                  <Input
-                    type="date"
-                    value={filters.dateFrom ?? ""}
-                    onChange={(event) =>
-                      onDateInputChange("dateFrom", event.target.value)
-                    }
-                    className="h-12 w-[160px] rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-300 [color-scheme:dark] focus-visible:border-blue-600 focus-visible:ring-0"
-                  />
-                  <Input
-                    type="date"
-                    value={filters.dateTo ?? ""}
-                    onChange={(event) =>
-                      onDateInputChange("dateTo", event.target.value)
-                    }
-                    className="h-12 w-[160px] rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-300 [color-scheme:dark] focus-visible:border-blue-600 focus-visible:ring-0"
-                  />
-                </>
-              ) : null}
-            </div>
-          </div>
+    <TableHeader>
+      <TableRow className="border-b border-neutral-800 bg-neutral-900/50 hover:bg-neutral-900/50">
+        <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Código
+        </TableHead>
+        <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Data
+        </TableHead>
+        <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Vendedor
+        </TableHead>
+        <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Pagamento
+        </TableHead>
+        <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Total
+        </TableHead>
+        <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Status
+        </TableHead>
+        <TableHead className="py-4 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Ações
+        </TableHead>
+      </TableRow>
+    </TableHeader>
+  );
+}
 
-          {/* KPI Cards */}
-          <div className="space-y-3">
-            <div className="flex min-h-12 items-center gap-2 rounded-[4px] border border-neutral-800 bg-[#171717] px-4 text-xs font-bold uppercase tracking-widest text-neutral-300">
-              <CalendarDays className="size-4 shrink-0 text-blue-500" />
-              <span>{salesMetricsTitle}</span>
-            </div>
-
-            {salesMetricsLoading ? (
-              <div className="rounded-[4px] border border-neutral-800 bg-[#171717] p-5 flex items-center justify-center py-6">
-                <div className="size-6 animate-spin rounded-full border-2 border-neutral-500 border-t-blue-500" />
-              </div>
-            ) : salesMetricsData ? (
-              <div className="rounded-[4px] border border-neutral-800 bg-[#171717] p-4 sm:p-5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-                <div className="flex items-center justify-between gap-6 min-w-max">
-                  {/* Item 1 */}
-                  <div className="flex items-center gap-3 sm:gap-4 shrink-0">
-                    <div className="flex size-11 sm:size-12 shrink-0 items-center justify-center rounded-[4px] bg-blue-500/10 text-blue-400">
-                      <ShoppingCart className="size-5 sm:size-6" strokeWidth={2} />
-                    </div>
-                    <div>
-                      <div className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                        Vendas
-                      </div>
-                      <div className="mt-0.5 flex items-baseline gap-1.5">
-                        <span className="font-mono text-xl sm:text-2xl font-bold tracking-tight text-white">
-                          {salesMetricsData.kpiSummary.count}
-                        </span>
-                        <span className="text-xs font-medium text-neutral-400">
-                          vendas
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Divider */}
-                  <div className="h-10 w-[1px] shrink-0 bg-neutral-800" />
-
-                  {/* Item 2 */}
-                  <div className="flex items-center gap-3 sm:gap-4 shrink-0">
-                    <div className="flex size-11 sm:size-12 shrink-0 items-center justify-center rounded-[4px] bg-emerald-500/10 text-emerald-400">
-                      <DollarSign className="size-5 sm:size-6" strokeWidth={2} />
-                    </div>
-                    <div>
-                      <div className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                        Faturamento
-                      </div>
-                      <div className="mt-0.5 flex items-baseline gap-1.5">
-                        <span className="font-mono text-xl sm:text-2xl font-bold tracking-tight text-white">
-                          {formatCents(salesMetricsData.kpiSummary.revenue)}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Divider */}
-                  <div className="h-10 w-[1px] shrink-0 bg-neutral-800" />
-
-                  {/* Item 3 */}
-                  <div className="flex items-center gap-3 sm:gap-4 shrink-0">
-                    <div className="flex size-11 sm:size-12 shrink-0 items-center justify-center rounded-[4px] bg-amber-500/10 text-amber-400">
-                      <TrendingUp className="size-5 sm:size-6" strokeWidth={2} />
-                    </div>
-                    <div>
-                      <div className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                        Ticket Médio
-                      </div>
-                      <div className="mt-0.5 flex items-baseline gap-1.5">
-                        <span className="font-mono text-xl sm:text-2xl font-bold tracking-tight text-white">
-                          {formatCents(salesMetricsData.kpiSummary.avgTicket)}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ) : null}
-          </div>
+function SalesTableBody({ viewState }: { viewState: SalesViewState }) {
+  if (viewState.isLoading) {
+    return <SalesTableMessage message="Carregando vendas…" isLoading />;
+  }
+
+  if (viewState.sales.length === 0) {
+    return <SalesTableMessage message="Nenhuma venda encontrada" />;
+  }
+
+  return viewState.sales.map((sale) => (
+    <SalesTableRow key={sale.id} sale={sale} />
+  ));
+}
 
-          {/* Monthly Chart */}
-          {salesMetricsData && salesMetricsData.dailyChart.length > 0 && (
-            <div className="rounded-[4px] border border-neutral-800 bg-[#171717] p-4">
-              <h3 className="mb-4 text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
-                Evolução diária
-              </h3>
-              <SalesChart data={salesMetricsData.dailyChart} />
-            </div>
+function SalesTableMessage({
+  isLoading,
+  message,
+}: {
+  isLoading?: boolean;
+  message: string;
+}) {
+  return (
+    <TableRow>
+      <TableCell colSpan={7} className="h-48 text-center text-neutral-500">
+        <div className="flex flex-col items-center justify-center gap-2">
+          {isLoading ? (
+            <div className="size-6 animate-spin rounded-full border-2 border-neutral-500 border-t-blue-500" />
+          ) : (
+            <ShoppingCart className="size-8 text-neutral-700" />
           )}
+          <span className="text-[10px] font-bold uppercase tracking-widest">
+            {message}
+          </span>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
 
-          {/* Desktop Table */}
-          <div className="hidden md:block rounded-[4px] border border-neutral-800 bg-[#171717] overflow-hidden">
-            <div className="overflow-x-auto">
-              <Table>
-                <TableHeader>
-                  <TableRow className="border-b border-neutral-800 bg-neutral-900/50 hover:bg-neutral-900/50">
-                    <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Código
-                    </TableHead>
-                    <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Data
-                    </TableHead>
-                    <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Vendedor
-                    </TableHead>
-                    <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Pagamento
-                    </TableHead>
-                    <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Total
-                    </TableHead>
-                    <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Status
-                    </TableHead>
-                    <TableHead className="py-4 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Ações
-                    </TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {isLoading ? (
-                    <TableRow>
-                      <TableCell
-                        colSpan={7}
-                        className="h-48 text-center text-neutral-500"
-                      >
-                        <div className="flex flex-col items-center justify-center gap-2">
-                          <div className="size-6 animate-spin rounded-full border-2 border-neutral-500 border-t-blue-500" />
-                          <span className="text-[10px] uppercase font-bold tracking-widest">
-                            Carregando vendas…
-                          </span>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  ) : sales.length === 0 ? (
-                    <TableRow>
-                      <TableCell
-                        colSpan={7}
-                        className="h-48 text-center text-neutral-500"
-                      >
-                        <div className="flex flex-col items-center justify-center gap-2">
-                          <ShoppingCart className="size-8 text-neutral-700" />
-                          <span className="text-[10px] uppercase font-bold tracking-widest">
-                            Nenhuma venda encontrada
-                          </span>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  ) : (
-                    sales.map((sale) => {
-                      const s = getStatusStyle(sale.status);
-                      return (
-                        <TableRow
-                          key={sale.id}
-                          className="border-b border-neutral-800 transition-colors hover:bg-neutral-800/50"
-                        >
-                          <TableCell className="py-4">
-                            <Link
-                              href={`/sales/${sale.id}`}
-                              className="font-mono text-sm font-bold text-white hover:text-blue-400"
-                            >
-                              {sale.code}
-                            </Link>
-                          </TableCell>
-                          <TableCell className="py-4">
-                            <div className="flex items-center text-sm text-neutral-400">
-                              <Calendar className="mr-2 size-3.5" />
-                              {format(
-                                parseISO(sale.createdAt),
-                                "dd/MM/yyyy HH:mm",
-                                { locale: ptBR },
-                              )}
-                            </div>
-                          </TableCell>
-                          <TableCell className="py-4">
-                            <span className="text-sm text-neutral-300">
-                              {sale.createdByUserName || "—"}
-                            </span>
-                          </TableCell>
-                          <TableCell className="py-4">
-                            <span className="text-sm font-medium text-neutral-300">
-                              {PAYMENT_METHOD_LABELS[sale.paymentMethod]}
-                            </span>
-                          </TableCell>
-                          <TableCell className="py-4">
-                            <span className="font-mono text-sm font-bold text-white">
-                              {formatCents(sale.total)}
-                            </span>
-                          </TableCell>
-                          <TableCell className="py-4">
-                            <span
-                              className={`inline-flex items-center rounded-[2px] border px-2 py-0.5 text-[10px] font-bold uppercase tracking-widest ${s.bg} ${s.color} ${s.border}`}
-                            >
-                              {SALE_STATUS_LABELS[sale.status]}
-                            </span>
-                          </TableCell>
-                          <TableCell className="py-4 text-right">
-                            <SaleActions sale={sale} />
-                          </TableCell>
-                        </TableRow>
-                      );
-                    })
-                  )}
-                </TableBody>
-              </Table>
-            </div>
-          </div>
+function SalesTableRow({ sale }: { sale: SaleSummary }) {
+  const statusStyle = getStatusStyle(sale.status);
+
+  return (
+    <TableRow className="border-b border-neutral-800 transition-colors hover:bg-neutral-800/50">
+      <TableCell className="py-4">
+        <Link
+          href={`/sales/${sale.id}`}
+          className="font-mono text-sm font-bold text-white hover:text-blue-400"
+        >
+          {sale.code}
+        </Link>
+      </TableCell>
+      <TableCell className="py-4">
+        <div className="flex items-center text-sm text-neutral-400">
+          <Calendar className="mr-2 size-3.5" />
+          {format(parseISO(sale.createdAt), "dd/MM/yyyy HH:mm", {
+            locale: ptBR,
+          })}
+        </div>
+      </TableCell>
+      <TableCell className="py-4">
+        <span className="text-sm text-neutral-300">
+          {sale.createdByUserName || "—"}
+        </span>
+      </TableCell>
+      <TableCell className="py-4">
+        <span className="text-sm font-medium text-neutral-300">
+          {PAYMENT_METHOD_LABELS[sale.paymentMethod]}
+        </span>
+      </TableCell>
+      <TableCell className="py-4">
+        <span className="font-mono text-sm font-bold text-white">
+          {formatCents(sale.total)}
+        </span>
+      </TableCell>
+      <TableCell className="py-4">
+        <SaleStatusBadge sale={sale} statusStyle={statusStyle} />
+      </TableCell>
+      <TableCell className="py-4 text-right">
+        <SaleActions sale={sale} />
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function SaleStatusBadge({
+  sale,
+  statusStyle,
+}: {
+  sale: SaleSummary;
+  statusStyle: ReturnType<typeof getStatusStyle>;
+}) {
+  return (
+    <span
+      className={`inline-flex items-center rounded-[2px] border px-2 py-0.5 text-[10px] font-bold uppercase tracking-widest ${statusStyle.bg} ${statusStyle.color} ${statusStyle.border}`}
+    >
+      {SALE_STATUS_LABELS[sale.status]}
+    </span>
+  );
+}
 
-          {/* Mobile Cards */}
-          <div className="md:hidden space-y-4">
-            {isLoading ? (
-              <div className="flex flex-col items-center justify-center p-8 gap-2">
-                <div className="size-6 animate-spin rounded-full border-2 border-neutral-500 border-t-blue-500" />
-                <span className="text-[10px] text-neutral-500 uppercase font-bold tracking-widest">
-                  Carregando…
-                </span>
-              </div>
-            ) : sales.length === 0 ? (
-              <div className="p-8 text-center bg-[#171717] rounded-[4px] border border-neutral-800">
-                <span className="text-[10px] text-neutral-500 uppercase font-bold tracking-widest">
-                  Nenhuma venda encontrada
-                </span>
-              </div>
-            ) : (
-              sales.map((sale) => {
-                const s = getStatusStyle(sale.status);
-                return (
-                  <Link
-                    key={sale.id}
-                    href={`/sales/${sale.id}`}
-                    className="flex flex-col gap-4 rounded-[4px] border border-neutral-800 bg-[#171717] p-4 transition-colors hover:bg-neutral-800/50"
-                  >
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-3">
-                        <span className="font-mono text-base font-bold text-white">
-                          {sale.code}
-                        </span>
-                        <span
-                          className={`inline-flex items-center gap-1 rounded-[2px] border px-2 py-1 text-[10px] font-bold uppercase tracking-widest shrink-0 ${s.bg} ${s.color} ${s.border}`}
-                        >
-                          {sale.status === "COMPLETED" && (
-                            <CheckCircle2 className="size-3.5" strokeWidth={2.5} />
-                          )}
-                          {SALE_STATUS_LABELS[sale.status]}
-                        </span>
-                      </div>
-                      <ChevronRight className="size-4 shrink-0 text-neutral-500" strokeWidth={2.5} />
-                    </div>
-
-                    <div className="flex items-center gap-3 text-sm">
-                      <div className="flex items-center gap-1.5 text-neutral-400">
-                        <Calendar className="size-4" strokeWidth={2} />
-                        <span>
-                          {format(parseISO(sale.createdAt), "dd/MM/yyyy", {
-                            locale: ptBR,
-                          })}
-                        </span>
-                      </div>
-                      <span className="text-neutral-600">&bull;</span>
-                      <span className="font-medium text-white">
-                        {formatCents(sale.total)}
-                      </span>
-                      <span className="text-neutral-600">&bull;</span>
-                      <div className="flex items-center gap-1.5 text-neutral-400">
-                        <User className="size-4" strokeWidth={2} />
-                        <span className="truncate max-w-[100px] sm:max-w-none">
-                          {sale.createdByUserName || "Admin"}
-                        </span>
-                      </div>
-                    </div>
-                  </Link>
-                );
-              })
+function SalesMobileCards({ viewState }: { viewState: SalesViewState }) {
+  if (viewState.isLoading) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-2 p-8 md:hidden">
+        <div className="size-6 animate-spin rounded-full border-2 border-neutral-500 border-t-blue-500" />
+        <span className="text-[10px] font-bold tracking-widest text-neutral-500 uppercase">
+          Carregando…
+        </span>
+      </div>
+    );
+  }
+
+  if (viewState.sales.length === 0) {
+    return (
+      <div className="rounded-[4px] border border-neutral-800 bg-[#171717] p-8 text-center md:hidden">
+        <span className="text-[10px] font-bold tracking-widest text-neutral-500 uppercase">
+          Nenhuma venda encontrada
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4 md:hidden">
+      {viewState.sales.map((sale) => (
+        <SalesMobileCard key={sale.id} sale={sale} />
+      ))}
+    </div>
+  );
+}
+
+function SalesMobileCard({ sale }: { sale: SaleSummary }) {
+  const statusStyle = getStatusStyle(sale.status);
+
+  return (
+    <Link
+      href={`/sales/${sale.id}`}
+      className="flex flex-col gap-4 rounded-[4px] border border-neutral-800 bg-[#171717] p-4 transition-colors hover:bg-neutral-800/50"
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <span className="font-mono text-base font-bold text-white">
+            {sale.code}
+          </span>
+          <span
+            className={`inline-flex shrink-0 items-center gap-1 rounded-[2px] border px-2 py-1 text-[10px] font-bold uppercase tracking-widest ${statusStyle.bg} ${statusStyle.color} ${statusStyle.border}`}
+          >
+            {sale.status === "COMPLETED" && (
+              <CheckCircle2 className="size-3.5" strokeWidth={2.5} />
             )}
-          </div>
+            {SALE_STATUS_LABELS[sale.status]}
+          </span>
+        </div>
+        <ChevronRight className="size-4 shrink-0 text-neutral-500" strokeWidth={2.5} />
+      </div>
+      <div className="flex items-center gap-3 text-sm">
+        <div className="flex items-center gap-1.5 text-neutral-400">
+          <Calendar className="size-4" strokeWidth={2} />
+          <span>
+            {format(parseISO(sale.createdAt), "dd/MM/yyyy", { locale: ptBR })}
+          </span>
+        </div>
+        <span className="text-neutral-600">&bull;</span>
+        <span className="font-medium text-white">{formatCents(sale.total)}</span>
+        <span className="text-neutral-600">&bull;</span>
+        <div className="flex items-center gap-1.5 text-neutral-400">
+          <User className="size-4" strokeWidth={2} />
+          <span className="max-w-[100px] truncate sm:max-w-none">
+            {sale.createdByUserName || "Admin"}
+          </span>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+function SalesPagination({ viewState }: { viewState: SalesViewState }) {
+  const { onPageChange, pagination } = viewState;
 
-          {/* Pagination */}
-          <div className="flex items-center justify-between pt-4">
-            <p className="text-sm text-neutral-500">
-              Página {pagination.page + 1} de{" "}
-              {Math.max(1, pagination.totalPages)}
-            </p>
-            <div className="flex gap-2">
-              <Button
-                variant="outline"
-                disabled={pagination.page === 0}
-                onClick={() => onPageChange(pagination.page - 1)}
-                className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-400 hover:bg-neutral-800 hover:text-white"
-              >
-                Anterior
-              </Button>
-              <Button
-                variant="outline"
-                disabled={pagination.page >= pagination.totalPages - 1}
-                onClick={() => onPageChange(pagination.page + 1)}
-                className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-400 hover:bg-neutral-800 hover:text-white"
-              >
-                Próxima
-              </Button>
-            </div>
+  return (
+    <div className="flex items-center justify-between pt-4">
+      <p className="text-sm text-neutral-500">
+        Página {pagination.page + 1} de {Math.max(1, pagination.totalPages)}
+      </p>
+      <div className="flex gap-2">
+        <Button
+          variant="outline"
+          disabled={pagination.page === 0}
+          onClick={() => onPageChange(pagination.page - 1)}
+          className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-400 hover:bg-neutral-800 hover:text-white"
+        >
+          Anterior
+        </Button>
+        <Button
+          variant="outline"
+          disabled={pagination.page >= pagination.totalPages - 1}
+          onClick={() => onPageChange(pagination.page + 1)}
+          className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-400 hover:bg-neutral-800 hover:text-white"
+        >
+          Próxima
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function SalesMobileFiltersDrawer({
+  viewState,
+}: {
+  viewState: SalesViewState;
+}) {
+  const draft = viewState.mobileFiltersDraft;
+
+  return (
+    <Drawer
+      direction="bottom"
+      open={viewState.isMobileFiltersOpen}
+      onOpenChange={(open) => {
+        if (!open) viewState.onCloseMobileFilters();
+      }}
+    >
+      <DrawerContent
+        onInteractOutside={preventDrawerDismissFromSelectPortal}
+        onPointerDownOutside={preventDrawerDismissFromSelectPortal}
+        className="max-h-[88vh] rounded-t-[4px] border-neutral-800 bg-[#0e0e0e] text-neutral-200 md:hidden"
+      >
+        <SalesMobileFiltersHeader viewState={viewState} />
+        <div className="overflow-y-auto px-5 pt-3 pb-2">
+          <div className="space-y-7">
+            <SalesMobileStatusFilter draft={draft} viewState={viewState} />
+            <SalesMobilePaymentFilter draft={draft} viewState={viewState} />
+            <SalesMobileDateFilter draft={draft} viewState={viewState} />
           </div>
         </div>
-      </main>
-      {mobileFiltersPanel}
+        <DrawerFooter className="border-t border-neutral-800 px-5 pt-4 pb-5">
+          <Button
+            type="button"
+            onClick={viewState.onApplyMobileFilters}
+            className="h-12 w-full rounded-[4px] bg-blue-600 text-sm font-bold text-white hover:bg-blue-700"
+          >
+            Aplicar filtros
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+function SalesMobileFiltersHeader({
+  viewState,
+}: {
+  viewState: SalesViewState;
+}) {
+  return (
+    <DrawerHeader className="relative px-5 pt-5 pb-2 text-left">
+      <DrawerTitle className="text-xl font-bold tracking-tight text-white">
+        Filtros
+      </DrawerTitle>
+      <DrawerDescription className="mt-1 text-xs text-neutral-500">
+        Refine o histórico de vendas
+      </DrawerDescription>
+      <div className="absolute top-5 right-5 flex items-center gap-2">
+        <Button
+          type="button"
+          variant="ghost"
+          onClick={viewState.onClearMobileFilters}
+          className="h-9 rounded-[4px] px-2 text-xs font-bold text-rose-500 hover:bg-rose-500/10 hover:text-rose-400"
+        >
+          <Trash2 className="mr-1.5 size-3.5" />
+          Limpar
+        </Button>
+        <DrawerClose asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            className="size-9 rounded-[4px] p-0 text-neutral-400 hover:bg-neutral-800 hover:text-white"
+          >
+            <X className="size-4" />
+          </Button>
+        </DrawerClose>
+      </div>
+    </DrawerHeader>
+  );
+}
+
+function SalesMobileStatusFilter({
+  draft,
+  viewState,
+}: {
+  draft: SaleFilterDraft;
+  viewState: SalesViewState;
+}) {
+  return (
+    <div>
+      <h3 className="mb-3 text-sm font-semibold text-white">Status</h3>
+      <div className="flex flex-wrap gap-2">
+        {STATUS_FILTER_OPTIONS.map((option) => (
+          <SalesMobileFilterButton
+            key={option.value}
+            isSelected={draft.status === option.value}
+            label={option.label}
+            onClick={() => viewState.onMobileFilterDraftChange("status", option.value)}
+          />
+        ))}
+      </div>
     </div>
   );
-};
+}
+
+function SalesMobilePaymentFilter({
+  draft,
+  viewState,
+}: {
+  draft: SaleFilterDraft;
+  viewState: SalesViewState;
+}) {
+  return (
+    <div>
+      <h3 className="mb-3 text-sm font-semibold text-white">Pagamento</h3>
+      <div className="flex flex-wrap gap-2">
+        {PAYMENT_FILTER_OPTIONS.map((option) => (
+          <SalesMobileFilterButton
+            key={option.value}
+            isSelected={draft.paymentMethod === option.value}
+            label={option.label}
+            onClick={() =>
+              viewState.onMobileFilterDraftChange("paymentMethod", option.value)
+            }
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function SalesMobileFilterButton({
+  isSelected,
+  label,
+  onClick,
+}: {
+  isSelected: boolean;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      onClick={onClick}
+      className={`h-10 rounded-[4px] border px-3 text-sm font-semibold ${
+        isSelected
+          ? "border-blue-500 bg-blue-500/15 text-blue-300"
+          : "border-neutral-700 bg-neutral-900/30 text-neutral-300 hover:border-neutral-600 hover:bg-neutral-800"
+      }`}
+    >
+      {label}
+    </Button>
+  );
+}
+
+function SalesMobileDateFilter({
+  draft,
+  viewState,
+}: {
+  draft: SaleFilterDraft;
+  viewState: SalesViewState;
+}) {
+  return (
+    <div>
+      <h3 className="mb-3 text-sm font-semibold text-white">Período</h3>
+      <Select
+        value={draft.datePreset}
+        onValueChange={(value) =>
+          viewState.onMobileDatePresetChange(value as DateFilterPreset)
+        }
+      >
+        <SelectTrigger className="h-12 rounded-[4px] border-neutral-700 bg-neutral-900/30 text-neutral-200 focus:border-blue-600 focus:ring-0">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+          {Object.entries(DATE_PRESET_LABELS).map(([value, label]) => (
+            <SelectItem
+              key={value}
+              value={value}
+              className="focus:bg-neutral-800"
+            >
+              {label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      {draft.datePreset === "CUSTOM" ? (
+        <SalesMobileCustomDateInputs draft={draft} viewState={viewState} />
+      ) : null}
+    </div>
+  );
+}
+
+function SalesMobileCustomDateInputs({
+  draft,
+  viewState,
+}: {
+  draft: SaleFilterDraft;
+  viewState: SalesViewState;
+}) {
+  return (
+    <div className="mt-4 grid grid-cols-1 gap-3">
+      <SalesMobileDateInput
+        id="sales-mobile-date-from"
+        label="Data inicial"
+        value={draft.dateFrom ?? ""}
+        onChange={(value) => viewState.onMobileDateInputChange("dateFrom", value)}
+      />
+      <SalesMobileDateInput
+        id="sales-mobile-date-to"
+        label="Data final"
+        value={draft.dateTo ?? ""}
+        onChange={(value) => viewState.onMobileDateInputChange("dateTo", value)}
+      />
+    </div>
+  );
+}
+
+function SalesMobileDateInput({
+  id,
+  label,
+  onChange,
+  value,
+}: {
+  id: string;
+  label: string;
+  onChange: (value: string) => void;
+  value: string;
+}) {
+  return (
+    <label htmlFor={id} className="space-y-1.5">
+      <span className="text-xs font-medium text-neutral-400">{label}</span>
+      <Input
+        id={id}
+        type="date"
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        className="h-12 rounded-[4px] border-neutral-700 bg-neutral-900/30 text-neutral-200 [color-scheme:dark] focus-visible:border-blue-600 focus-visible:ring-0"
+      />
+    </label>
+  );
+}
diff --git a/app/(pages)/stock-movements/[id]/page.client.tsx b/app/(pages)/stock-movements/[id]/page.client.tsx
index 7392e3a..a84d4d5 100644
--- a/app/(pages)/stock-movements/[id]/page.client.tsx
+++ b/app/(pages)/stock-movements/[id]/page.client.tsx
@@ -2,20 +2,12 @@
 
 import { useParams } from "next/navigation";
 import { useStockMovementDetailModel } from "./stock-movements-detail.model";
-import { StockMovementDetailView } from "./stock-movements-detail.view";
+import { StockMovementsDetailView } from "./stock-movements-detail.view";
 
 export function PageClient() {
   const params = useParams();
   const movementId = params.id as string;
-  const { movement, batchPrices, isLoading, error } =
-    useStockMovementDetailModel(movementId);
+  const model = useStockMovementDetailModel(movementId);
 
-  return (
-    <StockMovementDetailView
-      movement={movement}
-      batchPrices={batchPrices}
-      isLoading={isLoading}
-      error={error}
-    />
-  );
+  return <StockMovementsDetailView {...model} />;
 }
diff --git a/app/(pages)/stock-movements/[id]/page.tsx b/app/(pages)/stock-movements/[id]/page.tsx
index ccf53d4..c794cbd 100644
--- a/app/(pages)/stock-movements/[id]/page.tsx
+++ b/app/(pages)/stock-movements/[id]/page.tsx
@@ -3,7 +3,7 @@ import { PageClient } from "./page.client";
 
 export const metadata: Metadata = {
   title: "Detalhe da movimentação | StockShift",
-  description: "Visualize detalhes de uma movimentação de estoque.",
+  description: "Visualize dados completos de uma movimentação de estoque.",
 };
 
 export default function Page() {
diff --git a/app/(pages)/stock-movements/[id]/stock-movements-detail.components.tsx b/app/(pages)/stock-movements/[id]/stock-movements-detail.components.tsx
new file mode 100644
index 0000000..d3efbc7
--- /dev/null
+++ b/app/(pages)/stock-movements/[id]/stock-movements-detail.components.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import {
+  ArrowDownRight,
+  ArrowUpRight,
+  ChevronRight,
+  ImageIcon,
+  Layers,
+  Package,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { formatItemQuantity } from "./stock-movements-detail.model";
+import type {
+  StockMovementItemWithImage,
+  TypeBadgeView,
+} from "./stock-movements-detail.types";
+
+interface ProductThumbProps {
+  src: string | null | undefined;
+  alt: string;
+  className?: string;
+}
+
+const ProductThumb = ({ src, alt, className }: ProductThumbProps) => (
+  <div
+    className={cn(
+      "relative shrink-0 overflow-hidden rounded-[4px] border border-neutral-800 bg-neutral-900",
+      className,
+    )}
+  >
+    {src ? (
+      <Image
+        src={src}
+        alt={alt}
+        fill
+        sizes="56px"
+        unoptimized
+        className="object-cover"
+      />
+    ) : (
+      <div className="flex h-full w-full items-center justify-center">
+        <ImageIcon
+          className="size-4 text-neutral-700"
+          strokeWidth={2}
+        />
+      </div>
+    )}
+  </div>
+);
+
+interface TypeBadgeProps {
+  badge: TypeBadgeView;
+}
+
+export const TypeBadge = ({ badge }: TypeBadgeProps) => {
+  const Icon = badge.icon === "in" ? ArrowDownRight : ArrowUpRight;
+  const directionLabel = badge.icon === "in" ? "Entrada" : "Saída";
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center gap-2 rounded-[4px] border px-3 py-1.5",
+        badge.borderClass,
+        badge.bgClass,
+      )}
+    >
+      <Icon className={cn("size-4", badge.textClass)} strokeWidth={2.5} />
+      <span
+        className={cn(
+          "text-[10px] font-bold uppercase tracking-widest",
+          badge.textClass,
+        )}
+      >
+        {directionLabel}
+      </span>
+      <span className="h-3 w-px bg-current opacity-30" />
+      <span className="text-[11px] font-bold uppercase tracking-wide text-white">
+        {badge.label}
+      </span>
+    </div>
+  );
+};
+
+interface MetaCellProps {
+  label: string;
+  value: string;
+  valueClass?: string;
+  mono?: boolean;
+}
+
+export const MetaCell = ({ label, value, valueClass, mono }: MetaCellProps) => (
+  <div>
+    <p className="mb-1 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+      {label}
+    </p>
+    <p
+      className={cn(
+        "text-sm font-bold text-white",
+        mono && "font-mono",
+        valueClass,
+      )}
+    >
+      {value}
+    </p>
+  </div>
+);
+
+interface ItemRowProps {
+  item: StockMovementItemWithImage;
+}
+
+export const ItemRowDesktop = ({ item }: ItemRowProps) => (
+  <div className="grid grid-cols-[auto_1fr_auto_auto_auto] items-center gap-4 border-t border-neutral-800 px-4 py-3 first:border-t-0 hover:bg-neutral-900/50">
+    <ProductThumb
+      src={item.productImageUrl}
+      alt={item.productName}
+      className="size-12"
+    />
+    <div className="min-w-0">
+      <p className="truncate text-sm font-bold text-white">{item.productName}</p>
+      {item.productSku && (
+        <p className="mt-0.5 text-[11px] font-mono text-neutral-500">
+          SKU: {item.productSku}
+        </p>
+      )}
+    </div>
+
+    <div className="text-right">
+      <p className="font-mono text-[11px] text-neutral-400">{item.batchCode}</p>
+      <p className="text-[10px] uppercase tracking-wider text-neutral-600">
+        Lote
+      </p>
+    </div>
+
+    <div className="text-right tabular-nums">
+      <p className="font-mono text-base font-bold text-white">
+        {formatItemQuantity(item.quantity)}
+      </p>
+      <p className="text-[10px] uppercase tracking-wider text-neutral-600">
+        un.
+      </p>
+    </div>
+
+    <div className="flex items-center gap-2">
+      <Link href={`/products/${item.productId}`}>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 rounded-[4px] border-neutral-700 bg-transparent px-2.5 text-[11px] font-bold uppercase tracking-wide text-neutral-300 hover:bg-neutral-800 hover:text-white"
+        >
+          <Package className="mr-1.5 size-3.5" />
+          Produto
+        </Button>
+      </Link>
+      <Link href={`/batches/${item.batchId}`}>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 rounded-[4px] border-blue-900/40 bg-transparent px-2.5 text-[11px] font-bold uppercase tracking-wide text-blue-400 hover:border-blue-700 hover:bg-blue-950/40 hover:text-blue-300"
+        >
+          <Layers className="mr-1.5 size-3.5" />
+          Lote
+        </Button>
+      </Link>
+    </div>
+  </div>
+);
+
+export const ItemCardMobile = ({ item }: ItemRowProps) => (
+  <div className="border-t border-neutral-800 p-4 first:border-t-0">
+    <div className="mb-3 flex items-start gap-3">
+      <ProductThumb
+        src={item.productImageUrl}
+        alt={item.productName}
+        className="size-14"
+      />
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-bold text-white">{item.productName}</p>
+        {item.productSku && (
+          <p className="mt-0.5 text-[11px] font-mono text-neutral-500">
+            SKU: {item.productSku}
+          </p>
+        )}
+        <p className="mt-1 text-[11px] font-mono text-neutral-400">
+          {item.batchCode}
+        </p>
+      </div>
+      <div className="text-right tabular-nums shrink-0">
+        <p className="font-mono text-xl font-bold text-white">
+          {formatItemQuantity(item.quantity)}
+        </p>
+        <p className="text-[10px] uppercase tracking-wider text-neutral-600">
+          un.
+        </p>
+      </div>
+    </div>
+
+    <div className="grid grid-cols-2 gap-2">
+      <Link href={`/products/${item.productId}`} className="block">
+        <Button
+          variant="outline"
+          className="h-9 w-full rounded-[4px] border-neutral-700 bg-transparent text-[11px] font-bold uppercase tracking-wide text-neutral-300 hover:bg-neutral-800 hover:text-white"
+        >
+          <Package className="mr-1.5 size-3.5" />
+          Produto
+          <ChevronRight className="ml-auto size-3.5" />
+        </Button>
+      </Link>
+      <Link href={`/batches/${item.batchId}`} className="block">
+        <Button
+          variant="outline"
+          className="h-9 w-full rounded-[4px] border-blue-900/40 bg-transparent text-[11px] font-bold uppercase tracking-wide text-blue-400 hover:border-blue-700 hover:bg-blue-950/40 hover:text-blue-300"
+        >
+          <Layers className="mr-1.5 size-3.5" />
+          Lote
+          <ChevronRight className="ml-auto size-3.5" />
+        </Button>
+      </Link>
+    </div>
+  </div>
+);
diff --git a/app/(pages)/stock-movements/[id]/stock-movements-detail.model.test.ts b/app/(pages)/stock-movements/[id]/stock-movements-detail.model.test.ts
index e128b8a..30b778c 100644
--- a/app/(pages)/stock-movements/[id]/stock-movements-detail.model.test.ts
+++ b/app/(pages)/stock-movements/[id]/stock-movements-detail.model.test.ts
@@ -1,31 +1,48 @@
 import { renderHook } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { useStockMovementDetailModel } from "./stock-movements-detail.model";
-import type { BatchPriceInfo, StockMovementDetailResponse } from "./stock-movements-detail.types";
+import {
+  computeTotalQuantity,
+  formatItemQuantity,
+  formatMovementDateTime,
+  mergeItemsWithImages,
+  resolveDetailTitle,
+  resolveTypeBadge,
+  useStockMovementDetailModel,
+} from "./stock-movements-detail.model";
+import type {
+  ProductImageResponse,
+  StockMovement,
+  StockMovementDetailResponse,
+} from "./stock-movements-detail.types";
+import type { StockMovementType } from "../stock-movements.types";
+
+type JsonResponse<T> = {
+  json: () => Promise<T>;
+};
 
 type SwrState<T> = {
   data?: T;
   error: Error | null;
   isLoading: boolean;
-  mutate: () => void;
 };
 
 const fakeSWR = vi.hoisted(() => {
-  class FakeSWR {
+  class FakeStockMovementDetailSWR {
     private readonly responses = new Map<string | null, SwrState<unknown>>();
-    private readonly defaultState: SwrState<unknown> = {
+
+    private readonly fallback: SwrState<unknown> = {
       data: undefined,
       error: null,
       isLoading: false,
-      mutate: vi.fn(),
     };
 
-    public readonly hook = vi.fn(
-      (key: string | null, fetcher?: unknown): SwrState<unknown> => {
-        void fetcher;
-        return this.responses.get(key) ?? this.defaultState;
-      },
-    );
+    public readonly hook = vi.fn<
+      (
+        key: string | null,
+        fetcher?: unknown,
+        options?: unknown,
+      ) => SwrState<unknown>
+    >((key) => this.responses.get(key) ?? this.fallback);
 
     public setState<T>(key: string | null, state: SwrState<T>): void {
       this.responses.set(key, state as SwrState<unknown>);
@@ -33,34 +50,33 @@ const fakeSWR = vi.hoisted(() => {
 
     public reset(): void {
       this.responses.clear();
-      this.defaultState.mutate.mockClear();
       this.hook.mockClear();
     }
   }
 
-  return new FakeSWR();
+  return new FakeStockMovementDetailSWR();
 });
 
 const fakeApi = vi.hoisted(() => {
-  class FakeApi {
-    public readonly get = vi.fn<(url: string) => { json: () => Promise<unknown> }>();
+  class FakeStockMovementDetailApi {
+    public readonly get = vi.fn<(url: string) => JsonResponse<unknown>>();
   }
 
-  return new FakeApi();
+  return new FakeStockMovementDetailApi();
 });
 
 const fakeBreadcrumb = vi.hoisted(() => {
-  class FakeBreadcrumb {
+  class FakeStockMovementDetailBreadcrumb {
     public readonly useBreadcrumb = vi.fn<
       (payload: { title: string; backUrl: string }) => void
     >();
   }
 
-  return new FakeBreadcrumb();
+  return new FakeStockMovementDetailBreadcrumb();
 });
 
 vi.mock("swr", () => ({
-  default: (...args: unknown[]) => fakeSWR.hook(...args),
+  default: (...args: Parameters<typeof fakeSWR.hook>) => fakeSWR.hook(...args),
 }));
 
 vi.mock("@/lib/api", () => ({
@@ -68,253 +84,387 @@ vi.mock("@/lib/api", () => ({
 }));
 
 vi.mock("@/components/breadcrumb", () => ({
-  useBreadcrumb: (...args: Parameters<typeof fakeBreadcrumb.useBreadcrumb>) => {
-    return fakeBreadcrumb.useBreadcrumb(...args);
-  },
+  useBreadcrumb: (...args: Parameters<typeof fakeBreadcrumb.useBreadcrumb>) =>
+    fakeBreadcrumb.useBreadcrumb(...args),
 }));
 
-const movementDetailResponse: StockMovementDetailResponse = {
-  success: true,
-  message: "ok",
-  data: {
-    id: "mv-100",
-    code: "MV-100",
-    warehouseId: "wh-1",
-    warehouseName: "Depósito",
-    type: "PURCHASE_IN",
-    direction: "IN",
-    notes: null,
-    createdByUserId: "user-1",
-    referenceType: null,
-    referenceId: null,
-    createdAt: "2026-04-01T10:00:00.000Z",
-    updatedAt: "2026-04-01T10:00:00.000Z",
-    items: [
-      {
-        id: "it-1",
-        productId: "prod-1",
-        productName: "Café",
-        productSku: "CAF-01",
-        batchId: "batch-1",
-        batchCode: "B-01",
-        quantity: 2,
-        productImageUrl: null,
-      },
-      {
-        id: "it-2",
-        productId: "prod-1",
-        productName: "Café",
-        productSku: "CAF-01",
-        batchId: "batch-2",
-        batchCode: "B-02",
-        quantity: 1,
-        productImageUrl: null,
-      },
-      {
-        id: "it-3",
-        productId: "prod-2",
-        productName: "Açúcar",
-        productSku: "ACU-01",
-        batchId: "batch-2",
-        batchCode: "B-02",
-        quantity: 5,
-        productImageUrl: null,
-      },
-    ],
-  },
-};
+const createJsonResponse = <T,>(payload: T): JsonResponse<T> => ({
+  json: vi.fn(async () => payload),
+});
+
+const createMovement = (
+  overrides: Partial<StockMovement> = {},
+): StockMovement => ({
+  id: "movement-1",
+  code: "MOV-0001",
+  warehouseId: "warehouse-1",
+  warehouseName: "Estoque Central",
+  type: "PURCHASE_IN",
+  direction: "IN",
+  notes: "Compra inicial",
+  createdByUserId: "user-1",
+  referenceType: null,
+  referenceId: null,
+  createdAt: "2026-01-15T10:30:00",
+  updatedAt: "2026-01-15T11:45:00",
+  items: [
+    {
+      id: "item-1",
+      productId: "product-1",
+      productName: "Café Especial",
+      productSku: "CAF-001",
+      batchId: "batch-1",
+      batchCode: "L001",
+      quantity: 2,
+      productImageUrl: null,
+    },
+    {
+      id: "item-2",
+      productId: "product-2",
+      productName: "Filtro de Papel",
+      productSku: null,
+      batchId: "batch-2",
+      batchCode: "L002",
+      quantity: 1.5,
+      productImageUrl: "/existing-image.png",
+    },
+  ],
+  ...overrides,
+});
 
-const movementBatchPrices: BatchPriceInfo[] = [
-  { batchId: "batch-1", costPrice: 3.5, sellingPrice: 5.5 },
-  { batchId: "batch-2", costPrice: null, sellingPrice: 9.9 },
-];
+const movementFixture = createMovement();
 
-const movementProductImages = new Map<string, string | null>([
-  ["prod-1", "https://cdn.example.com/cafe.png"],
-  ["prod-2", "https://cdn.example.com/acucar.png"],
-]);
+const movementResponse: StockMovementDetailResponse = {
+  success: true,
+  message: null,
+  data: movementFixture,
+};
 
 beforeEach(() => {
   vi.clearAllMocks();
   fakeSWR.reset();
-  fakeApi.get.mockReset();
-  fakeBreadcrumb.useBreadcrumb.mockClear();
-  fakeApi.get.mockReturnValue({
-    json: vi.fn(async () => undefined),
+  fakeApi.get.mockReturnValue(
+    createJsonResponse<ProductImageResponse>({
+      success: true,
+      data: { id: "product-1", imageUrl: "/product-1.png" },
+    }),
+  );
+  fakeSWR.setState("stock-movements/movement-1", {
+    data: movementResponse,
+    error: null,
+    isLoading: false,
+  });
+});
+
+describe("formatMovementDateTime", () => {
+  it("formata uma data válida no padrão de detalhe", () => {
+    expect(formatMovementDateTime("2026-01-15T10:30:00")).toMatch(
+      /15 de jan\.?, 2026 às 10:30/,
+    );
+  });
+
+  it("retorna traço para data vazia ou inválida", () => {
+    expect(formatMovementDateTime(null)).toBe("-");
+    expect(formatMovementDateTime(undefined)).toBe("-");
+    expect(formatMovementDateTime("data-invalida")).toBe("-");
+  });
+});
+
+describe("formatItemQuantity", () => {
+  it("mantém inteiros sem casas decimais", () => {
+    expect(formatItemQuantity(4)).toBe("4");
+  });
+
+  it("formata decimais com duas casas", () => {
+    expect(formatItemQuantity(4.5)).toBe("4.50");
+  });
+});
+
+describe("computeTotalQuantity", () => {
+  it("soma as quantidades dos itens", () => {
+    expect(computeTotalQuantity(movementFixture)).toBe("3.50");
+  });
+
+  it("retorna zero quando a movimentação não existe ou não possui itens", () => {
+    expect(computeTotalQuantity(null)).toBe("0");
+    expect(computeTotalQuantity(createMovement({ items: [] }))).toBe("0");
+  });
+});
+
+describe("resolveTypeBadge", () => {
+  const badgeCases: Array<{
+    type: StockMovementType;
+    label: string;
+    icon: "in" | "out";
+  }> = [
+    { type: "PURCHASE_IN", label: "Compra", icon: "in" },
+    { type: "ADJUSTMENT_IN", label: "Ajuste de Entrada", icon: "in" },
+    { type: "TRANSFER_IN", label: "Transferência (Entrada)", icon: "in" },
+    { type: "USAGE", label: "Uso", icon: "out" },
+    { type: "GIFT", label: "Presente", icon: "out" },
+    { type: "LOSS", label: "Perda", icon: "out" },
+    { type: "DAMAGE", label: "Dano", icon: "out" },
+    { type: "ADJUSTMENT_OUT", label: "Ajuste de Saída", icon: "out" },
+    { type: "SALE", label: "Venda", icon: "out" },
+    { type: "TRANSFER_OUT", label: "Transferência (Saída)", icon: "out" },
+  ];
+
+  it.each(badgeCases)("resolve badge para $type", ({ type, label, icon }) => {
+    expect(resolveTypeBadge(createMovement({ type }))).toEqual(
+      expect.objectContaining({ label, icon }),
+    );
+  });
+
+  it("retorna null quando não há movimentação", () => {
+    expect(resolveTypeBadge(null)).toBeNull();
+  });
+});
+
+describe("resolveDetailTitle", () => {
+  it("usa o código da movimentação quando disponível", () => {
+    expect(resolveDetailTitle(movementFixture, false, false)).toBe("MOV-0001");
+  });
+
+  it("usa título de carregamento apenas sem erro", () => {
+    expect(resolveDetailTitle(null, false, true)).toBe("Carregando...");
+  });
+
+  it("usa título de não encontrado quando falha ou termina sem dados", () => {
+    expect(resolveDetailTitle(null, true, true)).toBe(
+      "Movimentação não encontrada",
+    );
+    expect(resolveDetailTitle(null, false, false)).toBe(
+      "Movimentação não encontrada",
+    );
+  });
+});
+
+describe("mergeItemsWithImages", () => {
+  it("usa imagens carregadas e mantém fallback quando o mapa retorna null", () => {
+    const items = mergeItemsWithImages(
+      movementFixture,
+      new Map([
+        ["product-1", "/product-1.png"],
+        ["product-2", null],
+      ]),
+    );
+
+    expect(items[0].productImageUrl).toBe("/product-1.png");
+    expect(items[1].productImageUrl).toBe("/existing-image.png");
+  });
+
+  it("usa imagem existente do item quando o mapa não tem o produto", () => {
+    const items = mergeItemsWithImages(
+      movementFixture,
+      new Map([["product-1", "/product-1.png"]]),
+    );
+
+    expect(items[1].productImageUrl).toBe("/existing-image.png");
+  });
+
+  it("retorna lista vazia sem movimentação", () => {
+    expect(mergeItemsWithImages(null, undefined)).toEqual([]);
   });
 });
 
 describe("useStockMovementDetailModel", () => {
-  it("quando sem id, não consulta SWR", () => {
-    const { result } = renderHook(() => useStockMovementDetailModel(""));
+  it("carrega detalhes, registra breadcrumb e expõe dados derivados", () => {
+    fakeSWR.setState("stock-movement-product-images:product-1,product-2", {
+      data: new Map([
+        ["product-1", "/product-1.png"],
+        ["product-2", "/product-2.png"],
+      ]),
+      error: null,
+      isLoading: false,
+    });
 
-    expect(result.current.movement).toBeNull();
-    expect(result.current.isLoading).toBe(false);
-    expect(result.current.batchPrices).toEqual([]);
-    expect(fakeSWR.hook).toHaveBeenNthCalledWith(
-      1,
-      null,
-      expect.any(Function),
+    const { result } = renderHook(() =>
+      useStockMovementDetailModel("movement-1"),
     );
-    expect(fakeSWR.hook).toHaveBeenNthCalledWith(
-      2,
-      null,
+
+    expect(fakeSWR.hook).toHaveBeenCalledWith(
+      "stock-movements/movement-1",
       expect.any(Function),
+      expect.objectContaining({
+        shouldRetryOnError: false,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+      }),
     );
-    expect(fakeSWR.hook).toHaveBeenNthCalledWith(
-      3,
-      null,
+    expect(fakeSWR.hook).toHaveBeenCalledWith(
+      "stock-movement-product-images:product-1,product-2",
       expect.any(Function),
+      expect.objectContaining({
+        shouldRetryOnError: false,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+      }),
     );
+    expect(result.current.movement).toEqual(movementFixture);
+    expect(result.current.items.map((item) => item.productImageUrl)).toEqual([
+      "/product-1.png",
+      "/product-2.png",
+    ]);
+    expect(result.current.typeBadge?.label).toBe("Compra");
+    expect(result.current.totalQuantity).toBe("3.50");
+    expect(result.current.itemCount).toBe(2);
+    expect(result.current.hasReference).toBe(false);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.error).toBeNull();
+    expect(fakeBreadcrumb.useBreadcrumb).toHaveBeenCalledWith({
+      title: "MOV-0001",
+      backUrl: "/stock-movements",
+    });
   });
 
-  it("carrega movimento, preços e imagens e aplica imagem ao item", () => {
-    fakeSWR.setState(`stock-movements/mv-100`, {
-      data: movementDetailResponse,
-      error: null,
-      isLoading: false,
-      mutate: vi.fn(),
+  it("usa ids únicos para carregar imagens de produtos", () => {
+    const movementWithDuplicateProduct = createMovement({
+      items: [
+        movementFixture.items[0],
+        { ...movementFixture.items[0], id: "item-duplicate", batchId: "batch-3" },
+        movementFixture.items[1],
+      ],
     });
-    fakeSWR.setState("batches-prices-mv-100", {
-      data: movementBatchPrices,
+    fakeSWR.setState("stock-movements/movement-duplicate", {
+      data: {
+        success: true,
+        message: null,
+        data: movementWithDuplicateProduct,
+      },
       error: null,
       isLoading: false,
-      mutate: vi.fn(),
     });
-    fakeSWR.setState("product-images-mv-100", {
-      data: movementProductImages,
+
+    renderHook(() => useStockMovementDetailModel("movement-duplicate"));
+
+    expect(fakeSWR.hook).toHaveBeenCalledWith(
+      "stock-movement-product-images:product-1,product-2",
+      expect.any(Function),
+      expect.any(Object),
+    );
+  });
+
+  it("busca imagens pelo fetcher do segundo SWR e tolera falhas por produto", async () => {
+    fakeSWR.setState("stock-movements/image-failure", {
+      data: {
+        success: true,
+        message: null,
+        data: createMovement({
+          id: "image-failure",
+          items: [
+            {
+              ...movementFixture.items[1],
+              productImageUrl: null,
+            },
+          ],
+        }),
+      },
       error: null,
       isLoading: false,
-      mutate: vi.fn(),
+    });
+    fakeApi.get.mockImplementation((url: string) => {
+      if (url === "products/product-2") {
+        return {
+          json: vi.fn(async () => {
+            throw new Error("Imagem indisponível");
+          }),
+        };
+      }
+
+      return createJsonResponse<ProductImageResponse>({
+        success: true,
+        data: { id: "product-1", imageUrl: "/product-1.png" },
+      });
     });
 
-    const { result } = renderHook(() => useStockMovementDetailModel("mv-100"));
+    renderHook(() => useStockMovementDetailModel("image-failure"));
+    const imageFetcher = fakeSWR.hook.mock.calls.find(
+      ([key]) => key === "stock-movement-product-images:product-2",
+    )?.[1];
 
-    expect(result.current.movement?.code).toBe("MV-100");
-    expect(result.current.batchPrices).toEqual(movementBatchPrices);
-    expect(result.current.movement?.items[0].productImageUrl).toBe(
-      "https://cdn.example.com/cafe.png",
-    );
-    expect(result.current.movement?.items[2].productImageUrl).toBe(
-      "https://cdn.example.com/acucar.png",
+    expect(typeof imageFetcher).toBe("function");
+    const imageMap = await (imageFetcher as () => Promise<
+      Map<string, string | null>
+    >)();
+
+    expect(fakeApi.get).toHaveBeenCalledWith("products/product-2");
+    expect(imageMap).toEqual(new Map([["product-2", null]]));
+  });
+
+  it("não faz requisição sem id e registra estado não encontrado", () => {
+    const { result } = renderHook(() => useStockMovementDetailModel(""));
+
+    expect(fakeSWR.hook).toHaveBeenCalledWith(
+      null,
+      expect.any(Function),
+      expect.any(Object),
     );
+    expect(result.current.movement).toBeNull();
+    expect(result.current.items).toEqual([]);
+    expect(result.current.totalQuantity).toBe("0");
+    expect(result.current.itemCount).toBe(0);
+    expect(result.current.hasReference).toBe(false);
     expect(fakeBreadcrumb.useBreadcrumb).toHaveBeenCalledWith({
-      title: "MV-100",
+      title: "Movimentação não encontrada",
       backUrl: "/stock-movements",
     });
   });
 
-  it("propaga erro da requisição de detalhe", () => {
-    const error = new Error("Falhou ao carregar movimento");
-
-    fakeSWR.setState(`stock-movements/mv-100`, {
+  it("mantém carregamento somente enquanto não há erro", () => {
+    fakeSWR.setState("stock-movements/loading", {
       data: undefined,
-      error,
-      isLoading: false,
-      mutate: vi.fn(),
+      error: null,
+      isLoading: true,
     });
 
-    const { result } = renderHook(() => useStockMovementDetailModel("mv-100"));
+    const { result } = renderHook(() => useStockMovementDetailModel("loading"));
 
-    expect(result.current.error).toBe(error);
-    expect(result.current.movement).toBeNull();
+    expect(result.current.isLoading).toBe(true);
+    expect(fakeBreadcrumb.useBreadcrumb).toHaveBeenCalledWith({
+      title: "Carregando...",
+      backUrl: "/stock-movements",
+    });
   });
 
-  it("mantém estado de loading quando movimento ainda não respondeu", () => {
-    fakeSWR.setState(`stock-movements/mv-100`, {
+  it("expõe erro e interrompe loading quando a requisição falha", () => {
+    const requestError = new Error("Movimentação indisponível");
+    fakeSWR.setState("stock-movements/missing", {
       data: undefined,
-      error: null,
+      error: requestError,
       isLoading: true,
-      mutate: vi.fn(),
     });
 
-    const { result } = renderHook(() => useStockMovementDetailModel("mv-100"));
+    const { result } = renderHook(() => useStockMovementDetailModel("missing"));
 
-    expect(result.current.isLoading).toBe(true);
     expect(result.current.movement).toBeNull();
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.error).toBe(requestError);
+    expect(result.current.typeBadge).toBeNull();
+    expect(fakeBreadcrumb.useBreadcrumb).toHaveBeenCalledWith({
+      title: "Movimentação não encontrada",
+      backUrl: "/stock-movements",
+    });
   });
 
-  it("não busca preços/imagens quando não há itens no movimento", () => {
-    fakeSWR.setState(`stock-movements/mv-empty`, {
+  it("marca referência quando a movimentação possui referenceId", () => {
+    fakeSWR.setState("stock-movements/with-reference", {
       data: {
         success: true,
-        message: "ok",
-        data: {
-          ...movementDetailResponse.data,
-          id: "mv-empty",
-          code: "MV-EMPTY",
-          items: [],
-        },
+        message: null,
+        data: createMovement({
+          id: "with-reference",
+          referenceType: "TRANSFER",
+          referenceId: "transfer-1",
+        }),
       },
       error: null,
       isLoading: false,
-      mutate: vi.fn(),
     });
 
     const { result } = renderHook(() =>
-      useStockMovementDetailModel("mv-empty"),
-    );
-
-    expect(result.current.movement?.items).toEqual([]);
-    const calledKeys = fakeSWR.hook.mock.calls.map(
-      (call) => call[0] as string | null,
+      useStockMovementDetailModel("with-reference"),
     );
-    expect(calledKeys).toEqual([
-      "stock-movements/mv-empty",
-      null,
-      null,
-    ]);
-  });
-
-  it("executa fetchers de detalhe, preços e imagens com ids únicos", async () => {
-    fakeApi.get.mockImplementation((url: string) => ({
-      json: vi.fn(async () => {
-        if (url === "stock-movements/mv-100") return movementDetailResponse;
-        if (url === "batches/batch-1") {
-          return { success: true, data: { costPrice: 3.5, sellingPrice: 5.5 } };
-        }
-        if (url === "batches/batch-2") {
-          return { success: true, data: { costPrice: null, sellingPrice: 9.9 } };
-        }
-        if (url === "products/prod-1") {
-          return { success: true, data: { id: "prod-1", imageUrl: "cafe.png" } };
-        }
-        if (url === "products/prod-2") {
-          return { success: true, data: { id: "prod-2", imageUrl: null } };
-        }
-        throw new Error(`Unexpected URL ${url}`);
-      }),
-    }));
 
-    renderHook(() => useStockMovementDetailModel("mv-100"));
-
-    const detailFetcher = fakeSWR.hook.mock.calls[0][1] as (url: string) => Promise<StockMovementDetailResponse>;
-    const detail = await detailFetcher("stock-movements/mv-100");
-    expect(detail.data.code).toBe("MV-100");
-
-    fakeSWR.setState("stock-movements/mv-100", {
-      data: movementDetailResponse,
-      error: null,
-      isLoading: false,
-      mutate: vi.fn(),
-    });
-
-    renderHook(() => useStockMovementDetailModel("mv-100"));
-
-    const priceFetcher = fakeSWR.hook.mock.calls[4][1] as () => Promise<BatchPriceInfo[]>;
-    const imageFetcher = fakeSWR.hook.mock.calls[5][1] as () => Promise<Map<string, string | null>>;
-
-    await expect(priceFetcher()).resolves.toEqual([
-      { batchId: "batch-1", costPrice: 3.5, sellingPrice: 5.5 },
-      { batchId: "batch-2", costPrice: null, sellingPrice: 9.9 },
-    ]);
-    await expect(imageFetcher()).resolves.toEqual(
-      new Map([
-        ["prod-1", "cafe.png"],
-        ["prod-2", null],
-      ]),
-    );
-    expect(fakeApi.get).toHaveBeenCalledWith("batches/batch-1");
-    expect(fakeApi.get).toHaveBeenCalledWith("products/prod-2");
+    expect(result.current.hasReference).toBe(true);
   });
 });
diff --git a/app/(pages)/stock-movements/[id]/stock-movements-detail.model.ts b/app/(pages)/stock-movements/[id]/stock-movements-detail.model.ts
index 24f6dbb..2d27d7b 100644
--- a/app/(pages)/stock-movements/[id]/stock-movements-detail.model.ts
+++ b/app/(pages)/stock-movements/[id]/stock-movements-detail.model.ts
@@ -1,94 +1,232 @@
 import useSWR from "swr";
-import { api } from "@/lib/api";
+import { format, isValid, parseISO } from "date-fns";
+import { ptBR } from "date-fns/locale";
 import { useBreadcrumb } from "@/components/breadcrumb";
 import type {
+  ProductImageResponse,
+  StockMovement,
   StockMovementDetailResponse,
-  BatchDetailResponse,
-  BatchPriceInfo,
+  StockMovementItemWithImage,
+  TypeBadgeView,
 } from "./stock-movements-detail.types";
+import type { StockMovementType } from "../stock-movements.types";
 
-interface ProductImageResponse {
-  success: boolean;
-  data: { id: string; imageUrl: string | null };
-}
+const TYPE_BADGES: Record<StockMovementType, TypeBadgeView> = {
+  PURCHASE_IN: {
+    label: "Compra",
+    icon: "in",
+    borderClass: "border-emerald-500/30",
+    bgClass: "bg-emerald-950/20",
+    textClass: "text-emerald-400",
+    accentClass: "bg-emerald-500",
+    description: "Entrada por compra",
+  },
+  ADJUSTMENT_IN: {
+    label: "Ajuste de Entrada",
+    icon: "in",
+    borderClass: "border-emerald-500/30",
+    bgClass: "bg-emerald-950/20",
+    textClass: "text-emerald-400",
+    accentClass: "bg-emerald-500",
+    description: "Ajuste manual de entrada",
+  },
+  TRANSFER_IN: {
+    label: "Transferência (Entrada)",
+    icon: "in",
+    borderClass: "border-emerald-500/30",
+    bgClass: "bg-emerald-950/20",
+    textClass: "text-emerald-400",
+    accentClass: "bg-emerald-500",
+    description: "Entrada automática por transferência",
+  },
+  USAGE: {
+    label: "Uso",
+    icon: "out",
+    borderClass: "border-rose-500/30",
+    bgClass: "bg-rose-950/20",
+    textClass: "text-rose-400",
+    accentClass: "bg-rose-500",
+    description: "Produto consumido ou utilizado",
+  },
+  GIFT: {
+    label: "Presente",
+    icon: "out",
+    borderClass: "border-rose-500/30",
+    bgClass: "bg-rose-950/20",
+    textClass: "text-rose-400",
+    accentClass: "bg-rose-500",
+    description: "Produto dado como presente",
+  },
+  LOSS: {
+    label: "Perda",
+    icon: "out",
+    borderClass: "border-rose-500/30",
+    bgClass: "bg-rose-950/20",
+    textClass: "text-rose-400",
+    accentClass: "bg-rose-500",
+    description: "Produto perdido ou extraviado",
+  },
+  DAMAGE: {
+    label: "Dano",
+    icon: "out",
+    borderClass: "border-rose-500/30",
+    bgClass: "bg-rose-950/20",
+    textClass: "text-rose-400",
+    accentClass: "bg-rose-500",
+    description: "Produto danificado",
+  },
+  ADJUSTMENT_OUT: {
+    label: "Ajuste de Saída",
+    icon: "out",
+    borderClass: "border-rose-500/30",
+    bgClass: "bg-rose-950/20",
+    textClass: "text-rose-400",
+    accentClass: "bg-rose-500",
+    description: "Ajuste manual de saída",
+  },
+  SALE: {
+    label: "Venda",
+    icon: "out",
+    borderClass: "border-rose-500/30",
+    bgClass: "bg-rose-950/20",
+    textClass: "text-rose-400",
+    accentClass: "bg-rose-500",
+    description: "Saída por venda",
+  },
+  TRANSFER_OUT: {
+    label: "Transferência (Saída)",
+    icon: "out",
+    borderClass: "border-rose-500/30",
+    bgClass: "bg-rose-950/20",
+    textClass: "text-rose-400",
+    accentClass: "bg-rose-500",
+    description: "Saída automática por transferência",
+  },
+};
 
-export const useStockMovementDetailModel = (movementId: string) => {
-  const {
-    data,
-    error,
-    isLoading,
-  } = useSWR<StockMovementDetailResponse>(
-    movementId ? `stock-movements/${movementId}` : null,
-    async (url: string) => {
-      return await api.get(url).json<StockMovementDetailResponse>();
-    },
-  );
+const parseSafeDate = (value: string | null | undefined): Date | null => {
+  if (!value) return null;
+  const parsed = parseISO(value);
+  return isValid(parsed) ? parsed : null;
+};
 
-  const movement = data?.data ?? null;
+export const formatMovementDateTime = (value: string | null | undefined): string => {
+  const parsed = parseSafeDate(value);
+  if (!parsed) return "-";
+  return format(parsed, "dd 'de' MMM, yyyy 'às' HH:mm", { locale: ptBR });
+};
 
-  useBreadcrumb({
-    title: movement?.code || "Carregando...",
-    backUrl: "/stock-movements",
-  });
+export const formatItemQuantity = (quantity: number): string => {
+  return Number.isInteger(quantity) ? `${quantity}` : quantity.toFixed(2);
+};
 
-  const batchIds = extractUniqueBatchIds(movement?.items);
+export const computeTotalQuantity = (
+  movement: StockMovement | null,
+): string => {
+  if (!movement || movement.items.length === 0) return "0";
+  const total = movement.items.reduce((acc, item) => acc + item.quantity, 0);
+  return formatItemQuantity(total);
+};
 
-  const { data: batchPricesData } = useSWR<BatchPriceInfo[]>(
-    batchIds.length > 0 ? `batches-prices-${movementId}` : null,
-    () => fetchBatchPrices(batchIds),
-  );
+export const resolveTypeBadge = (
+  movement: StockMovement | null,
+): TypeBadgeView | null => {
+  if (!movement) return null;
+  return TYPE_BADGES[movement.type] ?? null;
+};
 
-  const productIds = extractUniqueProductIds(movement?.items);
+export const resolveDetailTitle = (
+  movement: StockMovement | null,
+  hasError: boolean,
+  isLoading: boolean,
+): string => {
+  if (movement) return movement.code;
+  if (isLoading && !hasError) return "Carregando...";
+  return "Movimentação não encontrada";
+};
 
-  const { data: productImagesData } = useSWR<Map<string, string | null>>(
-    productIds.length > 0 ? `product-images-${movementId}` : null,
-    () => fetchProductImages(productIds),
-  );
+const extractUniqueProductIds = (movement: StockMovement | null): string[] => {
+  if (!movement) return [];
+  return Array.from(new Set(movement.items.map((item) => item.productId)));
+};
 
-  if (movement && productImagesData) {
-    for (const item of movement.items) {
-      item.productImageUrl = productImagesData.get(item.productId) ?? null;
-    }
+const fetchProductImage = async (
+  id: string,
+): Promise<{ id: string; imageUrl: string | null }> => {
+  try {
+    const { api } = await import("@/lib/api");
+    const res = await api.get(`products/${id}`).json<ProductImageResponse>();
+    return { id, imageUrl: res.data.imageUrl ?? null };
+  } catch {
+    return { id, imageUrl: null };
   }
+};
 
-  return {
-    movement,
-    batchPrices: batchPricesData ?? [],
-    isLoading,
-    error,
-  };
+const fetchProductImages = async (
+  ids: string[],
+): Promise<Map<string, string | null>> => {
+  const results = await Promise.all(ids.map(fetchProductImage));
+  return new Map(results.map((r) => [r.id, r.imageUrl]));
 };
 
-const extractUniqueBatchIds = (items?: { batchId: string }[] | null): string[] => {
-  if (!items) return [];
-  return [...new Set(items.map((item) => item.batchId))];
+export const mergeItemsWithImages = (
+  movement: StockMovement | null,
+  images: Map<string, string | null> | undefined,
+): StockMovementItemWithImage[] => {
+  if (!movement) return [];
+  return movement.items.map((item) => ({
+    ...item,
+    productImageUrl: images?.get(item.productId) ?? item.productImageUrl ?? null,
+  }));
 };
 
-const fetchBatchPrices = async (batchIds: string[]): Promise<BatchPriceInfo[]> => {
-  const results = await Promise.all(
-    batchIds.map(async (id) => {
-      const res = await api.get(`batches/${id}`).json<BatchDetailResponse>();
-      return {
-        batchId: id,
-        costPrice: res.data.costPrice ?? null,
-        sellingPrice: res.data.sellingPrice ?? null,
-      };
-    }),
+export const useStockMovementDetailModel = (movementId: string) => {
+  const { data, error, isLoading } = useSWR<StockMovementDetailResponse>(
+    movementId ? `stock-movements/${movementId}` : null,
+    async (url: string) => {
+      const { api } = await import("@/lib/api");
+      return await api.get(url).json<StockMovementDetailResponse>();
+    },
+    {
+      shouldRetryOnError: false,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    },
   );
-  return results;
-};
 
-const extractUniqueProductIds = (items?: { productId: string }[] | null): string[] => {
-  if (!items) return [];
-  return [...new Set(items.map((item) => item.productId))];
-};
+  const movement: StockMovement | null = data?.data ?? null;
+  const hasError = Boolean(error);
+  const productIds = extractUniqueProductIds(movement);
+  const imagesKey =
+    productIds.length > 0
+      ? `stock-movement-product-images:${productIds.join(",")}`
+      : null;
 
-const fetchProductImages = async (productIds: string[]): Promise<Map<string, string | null>> => {
-  const results = await Promise.all(
-    productIds.map(async (id) => {
-      const res = await api.get(`products/${id}`).json<ProductImageResponse>();
-      return { id, imageUrl: res.data.imageUrl ?? null };
-    }),
+  const { data: imagesMap } = useSWR<Map<string, string | null>>(
+    imagesKey,
+    () => fetchProductImages(productIds),
+    {
+      shouldRetryOnError: false,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    },
   );
-  return new Map(results.map((r) => [r.id, r.imageUrl]));
+
+  useBreadcrumb({
+    title: resolveDetailTitle(movement, hasError, isLoading),
+    backUrl: "/stock-movements",
+  });
+
+  return {
+    movement,
+    items: mergeItemsWithImages(movement, imagesMap),
+    isLoading: isLoading && !hasError,
+    error: error ?? null,
+    typeBadge: resolveTypeBadge(movement),
+    formattedCreatedAt: formatMovementDateTime(movement?.createdAt),
+    formattedUpdatedAt: formatMovementDateTime(movement?.updatedAt),
+    totalQuantity: computeTotalQuantity(movement),
+    itemCount: movement?.items.length ?? 0,
+    hasReference: Boolean(movement?.referenceId),
+  };
 };
diff --git a/app/(pages)/stock-movements/[id]/stock-movements-detail.types.ts b/app/(pages)/stock-movements/[id]/stock-movements-detail.types.ts
index d075ed5..fb313fb 100644
--- a/app/(pages)/stock-movements/[id]/stock-movements-detail.types.ts
+++ b/app/(pages)/stock-movements/[id]/stock-movements-detail.types.ts
@@ -1,66 +1,41 @@
-import type {
-  StockMovement,
-  StockMovementItem,
-  StockMovementType,
-} from "../stock-movements.types";
-import type { Batch } from "../../batches/batches.types";
+import type { StockMovement, StockMovementItem } from "../stock-movements.types";
+
+export type { StockMovement };
 
 export interface StockMovementDetailResponse {
   success: boolean;
-  message: string;
+  message: string | null;
   data: StockMovement;
 }
 
-export interface BatchDetailResponse {
+export interface ProductImageResponse {
   success: boolean;
-  message?: string | null;
-  data: Batch;
-}
-
-export interface BatchPriceInfo {
-  batchId: string;
-  costPrice: number | null;
-  sellingPrice: number | null;
-}
-
-export interface FinancialSummary {
-  totalPurchaseCost: number;
-  totalExpectedSale: number;
-  totalProfit: number;
-  averageProfitMargin: number;
+  data: { id: string; imageUrl: string | null };
 }
 
-export interface GroupedProduct {
-  productId: string;
-  productName: string;
-  productSku: string | null;
+export type StockMovementItemWithImage = StockMovementItem & {
   productImageUrl: string | null;
-  items: StockMovementItem[];
-  totalQuantity: number;
-}
-
-export type MovementCategory =
-  | "purchase"
-  | "outflow"
-  | "adjustment_in"
-  | "transfer";
-
-export const MOVEMENT_CATEGORY_MAP: Record<StockMovementType, MovementCategory> = {
-  PURCHASE_IN: "purchase",
-  SALE: "outflow",
-  USAGE: "outflow",
-  GIFT: "outflow",
-  LOSS: "outflow",
-  DAMAGE: "outflow",
-  ADJUSTMENT_OUT: "outflow",
-  ADJUSTMENT_IN: "adjustment_in",
-  TRANSFER_IN: "transfer",
-  TRANSFER_OUT: "transfer",
 };
 
+export interface TypeBadgeView {
+  label: string;
+  icon: "in" | "out";
+  borderClass: string;
+  bgClass: string;
+  textClass: string;
+  accentClass: string;
+  description: string;
+}
+
 export interface StockMovementDetailViewProps {
   movement: StockMovement | null;
-  batchPrices: BatchPriceInfo[];
+  items: StockMovementItemWithImage[];
   isLoading: boolean;
   error: Error | null;
+  typeBadge: TypeBadgeView | null;
+  formattedCreatedAt: string;
+  formattedUpdatedAt: string;
+  totalQuantity: string;
+  itemCount: number;
+  hasReference: boolean;
 }
diff --git a/app/(pages)/stock-movements/[id]/stock-movements-detail.view.tsx b/app/(pages)/stock-movements/[id]/stock-movements-detail.view.tsx
index d74e0a1..16459c1 100644
--- a/app/(pages)/stock-movements/[id]/stock-movements-detail.view.tsx
+++ b/app/(pages)/stock-movements/[id]/stock-movements-detail.view.tsx
@@ -1,677 +1,198 @@
 "use client";
 
-import Image from "next/image";
 import Link from "next/link";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import {
-  ArrowLeft,
-  ArrowDownRight,
-  ArrowUpRight,
-  Package,
-  Warehouse,
-  FileText,
-  DollarSign,
-  Layers,
-  AlertCircle,
-  Link2,
-} from "lucide-react";
-import { format, parseISO } from "date-fns";
-import { ptBR } from "date-fns/locale";
+import { Boxes, ExternalLink, FileText, Warehouse } from "lucide-react";
 import { cn } from "@/lib/utils";
-import type {
-  StockMovementItem,
-  StockMovementType,
-} from "../stock-movements.types";
-import { MANUAL_MOVEMENT_TYPE_LABELS } from "../stock-movements.constants";
-import type {
-  StockMovementDetailViewProps,
-  BatchPriceInfo,
-  FinancialSummary,
-  GroupedProduct,
-  MovementCategory,
-} from "./stock-movements-detail.types";
-import { MOVEMENT_CATEGORY_MAP } from "./stock-movements-detail.types";
-
-const ALL_TYPE_LABELS: Record<StockMovementType, string> = {
-  ...MANUAL_MOVEMENT_TYPE_LABELS,
-  SALE: "Venda",
-  TRANSFER_IN: "Transf. Entrada",
-  TRANSFER_OUT: "Transf. Saída",
-};
-
-const STOCK_MOVEMENT_DETAIL_CURRENCY_FORMATTER = new Intl.NumberFormat(
-  "pt-BR",
-  {
-    style: "currency",
-    currency: "BRL",
-  },
-);
-
-const formatCurrency = (cents: number | null | undefined): string => {
-  if (cents === null || cents === undefined) return "-";
-  return STOCK_MOVEMENT_DETAIL_CURRENCY_FORMATTER.format(cents / 100);
-};
-
-const getDirectionConfig = (direction: "IN" | "OUT") => {
-  if (direction === "IN") {
-    return {
-      label: "ENTRADA",
-      color: "text-emerald-500",
-      bg: "bg-emerald-500/10",
-      border: "border-emerald-500/20",
-      icon: <ArrowDownRight className="size-3.5 mr-1" />,
-    };
-  }
-  return {
-    label: "SAÍDA",
-    color: "text-rose-500",
-    bg: "bg-rose-500/10",
-    border: "border-rose-500/20",
-    icon: <ArrowUpRight className="size-3.5 mr-1" />,
-  };
-};
-
-const computeFinancialSummary = (
-  items: StockMovementItem[],
-  batchPrices: BatchPriceInfo[],
-): FinancialSummary => {
-  const priceMap = new Map(batchPrices.map((b) => [b.batchId, b]));
-
-  let totalPurchaseCost = 0;
-  let totalExpectedSale = 0;
-  for (const item of items) {
-    const prices = priceMap.get(item.batchId);
-    if (prices) {
-      const cost = (prices.costPrice ?? 0) * item.quantity;
-      const sale = (prices.sellingPrice ?? 0) * item.quantity;
-      totalPurchaseCost += cost;
-      totalExpectedSale += sale;
-    }
-  }
-
-  const totalProfit = totalExpectedSale - totalPurchaseCost;
-  const averageProfitMargin =
-    totalPurchaseCost > 0 ? (totalProfit / totalPurchaseCost) * 100 : 0;
-
-  return {
-    totalPurchaseCost,
-    totalExpectedSale,
-    totalProfit,
-    averageProfitMargin,
-  };
-};
-
-const groupItemsByProduct = (items: StockMovementItem[]): GroupedProduct[] => {
-  const map = new Map<string, GroupedProduct>();
-
-  for (const item of items) {
-    const existing = map.get(item.productId);
-    if (existing) {
-      existing.items.push(item);
-      existing.totalQuantity += item.quantity;
-    } else {
-      map.set(item.productId, {
-        productId: item.productId,
-        productName: item.productName,
-        productSku: item.productSku,
-        productImageUrl: item.productImageUrl ?? null,
-        items: [item],
-        totalQuantity: item.quantity,
-      });
-    }
-  }
-
-  return Array.from(map.values());
-};
-
-export const StockMovementDetailView = ({
+import { PageContainer } from "@/components/ui/page-container";
+import { PageHeader } from "@/components/ui/page-header";
+import { LoadingState } from "@/components/ui/loading-state";
+import { ErrorState } from "@/components/ui/error-state";
+import {
+  ItemCardMobile,
+  ItemRowDesktop,
+  MetaCell,
+  TypeBadge,
+} from "./stock-movements-detail.components";
+import type { StockMovementDetailViewProps } from "./stock-movements-detail.types";
+
+export const StockMovementsDetailView = ({
   movement,
-  batchPrices,
+  items,
   isLoading,
   error,
+  typeBadge,
+  formattedCreatedAt,
+  formattedUpdatedAt,
+  totalQuantity,
+  itemCount,
+  hasReference,
 }: StockMovementDetailViewProps) => {
-  if (isLoading) {
-    return <LoadingState />;
+  if (isLoading && !error) {
+    return (
+      <PageContainer>
+        <LoadingState message="Carregando movimentação..." />
+      </PageContainer>
+    );
   }
 
-  if (error || !movement) {
-    return <ErrorState />;
+  if (error || !movement || !typeBadge) {
+    return (
+      <PageContainer>
+        <ErrorState
+          title="Movimentação não encontrada"
+          description="A movimentação que você procura não existe ou foi removida do sistema."
+        />
+      </PageContainer>
+    );
   }
 
-  const direction = getDirectionConfig(movement.direction);
-  const category: MovementCategory = MOVEMENT_CATEGORY_MAP[movement.type];
-  const groupedProducts = groupItemsByProduct(movement.items);
-  const totalQuantity = movement.items.reduce((sum, i) => sum + i.quantity, 0);
-
-  const showFinancial = category === "purchase" || category === "outflow";
-  const financial: FinancialSummary | null = showFinancial
-    ? computeFinancialSummary(movement.items, batchPrices)
-    : null;
+  const itemsLabel = itemCount === 1 ? "produto" : "produtos";
 
   return (
-    <div className="min-h-screen bg-[#0A0A0A] text-neutral-200 font-sans selection:bg-neutral-700 selection:text-white">
-      <main className="mx-auto w-full max-w-7xl px-4 py-8 md:px-6 lg:px-8">
-        <div className="space-y-6">
-          {/* Header */}
-          <HeaderSection
-            movement={movement}
-            direction={direction}
-            totalQuantity={totalQuantity}
-          />
-
-          {/* Main Grid */}
-          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
-            {/* Left: Items + Financial */}
-            <div className="lg:col-span-8 space-y-6">
-              {financial && showFinancial && (
-                <FinancialCard
-                  financial={financial}
-                  category={category}
-                  batchPrices={batchPrices}
-                />
-              )}
-
-              <ProductsAndLotsCard
-                groupedProducts={groupedProducts}
-                batchPrices={batchPrices}
-                category={category}
-              />
-            </div>
-
-            {/* Right Sidebar */}
-            <div className="lg:col-span-4 space-y-6">
-              <InfoCard movement={movement} direction={direction} />
-
-              {movement.referenceType && (
-                <ReferenceCard
-                  referenceType={movement.referenceType}
-                  referenceId={movement.referenceId}
-                />
-              )}
-
-              {movement.notes && <NotesCard notes={movement.notes} />}
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-};
-
-/* ─── Sub-components ─── */
-
-const LoadingState = () => (
-  <div className="min-h-screen bg-[#0A0A0A] flex flex-col">
-    <div className="h-14 border-b border-[#262626] bg-[#0A0A0A]" />
-    <div className="flex-1 flex items-center justify-center">
-      <div className="flex flex-col items-center gap-4">
-        <div className="size-6 animate-spin rounded-full border-2 border-neutral-500 border-t-blue-500" />
-        <span className="text-[10px] uppercase font-bold tracking-widest text-neutral-500">
-          Carregando movimentação…
-        </span>
-      </div>
-    </div>
-  </div>
-);
-
-const ErrorState = () => (
-  <div className="min-h-screen bg-[#0A0A0A] flex flex-col">
-    <header className="sticky top-0 z-20 border-b border-[#262626] bg-[#0A0A0A]/80 backdrop-blur-md">
-      <div className="mx-auto flex h-14 w-full max-w-7xl items-center px-4">
-        <Link
-          href="/stock-movements"
-          className="inline-flex size-8 items-center justify-center rounded-[4px] border border-[#262626] bg-[#171717] hover:bg-[#262626] transition-colors"
-        >
-          <ArrowLeft className="size-4 text-neutral-400" />
-        </Link>
-      </div>
-    </header>
-    <main className="flex-1 flex flex-col items-center justify-center p-8 text-neutral-400">
-      <AlertCircle className="size-12 mb-4 text-rose-500/50" />
-      <h2 className="text-lg font-semibold text-neutral-200">
-        Movimentação não encontrada
-      </h2>
-      <p className="text-sm mt-1">
-        A movimentação que você procura não existe ou foi removida.
-      </p>
-      <Link href="/stock-movements" className="mt-6">
-        <Button
-          variant="outline"
-          className="rounded-[4px] border-neutral-800 bg-transparent text-white hover:bg-neutral-900"
-        >
-          <ArrowLeft className="mr-2 size-4" />
-          Voltar para Movimentações
-        </Button>
-      </Link>
-    </main>
-  </div>
-);
-
-const HeaderSection = ({
-  movement,
-  direction,
-  totalQuantity,
-}: {
-  movement: {
-    code: string;
-    type: StockMovementType;
-    createdAt: string;
-    items: StockMovementItem[];
-  };
-  direction: ReturnType<typeof getDirectionConfig>;
-  totalQuantity: number;
-}) => (
-  <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-    <div>
-      <div className="flex items-center gap-3">
-        <Badge
-          className={cn(
-            "rounded-[2px] border px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider",
-            direction.bg,
-            direction.color,
-            direction.border,
+    <PageContainer>
+      <PageHeader title={movement.code} subtitle="Movimentação de estoque" />
+
+      {/* ── Hero panel ── */}
+      <section
+        className={cn(
+          "mb-6 rounded-[4px] border p-5 sm:p-6",
+          typeBadge.borderClass,
+          typeBadge.bgClass,
+        )}
+      >
+        <div className="mb-5 flex flex-wrap items-center gap-2">
+          <TypeBadge badge={typeBadge} />
+          {hasReference && movement.referenceType && (
+            <span className="rounded-[4px] border border-neutral-700 bg-neutral-950 px-2 py-1 text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+              Origem: {movement.referenceType}
+            </span>
           )}
-        >
-          {direction.icon}
-          {direction.label}
-        </Badge>
-        <span className="text-xs text-neutral-500">•</span>
-        <span className="text-sm text-neutral-400">
-          {ALL_TYPE_LABELS[movement.type]}
-        </span>
-        <span className="text-xs text-neutral-500">•</span>
-        <span className="text-sm text-neutral-500">
-          {format(parseISO(movement.createdAt), "dd/MM/yyyy 'às' HH:mm", {
-            locale: ptBR,
-          })}
-        </span>
-      </div>
-    </div>
-    <div className="ml-11 md:ml-0 flex items-center gap-2 text-sm text-neutral-400">
-      <Package className="size-4 text-neutral-500" />
-      <span>
-        {totalQuantity} un. em {movement.items.length} item(ns)
-      </span>
-    </div>
-  </div>
-);
-
-const FinancialCard = ({
-  financial,
-  category,
-  batchPrices,
-}: {
-  financial: FinancialSummary;
-  category: MovementCategory;
-  batchPrices: BatchPriceInfo[];
-}) => {
-  const hasAnyPrices = batchPrices.some(
-    (b) => b.costPrice !== null || b.sellingPrice !== null,
-  );
-  if (!hasAnyPrices) return null;
-
-  const isPurchase = category === "purchase";
-
-  return (
-    <div className="rounded-[4px] border border-[#262626] bg-[#171717]">
-      <div className="p-5">
-        <div className="flex items-center gap-2 mb-4">
-          <DollarSign className="size-4 text-emerald-500" />
-          <h3 className="text-xs font-semibold uppercase tracking-widest text-white">
-            {isPurchase ? "Resumo Financeiro da Compra" : "Resumo Financeiro"}
-          </h3>
-        </div>
-
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <MetricBox
-            label={isPurchase ? "Total Compra" : "Custo Total"}
-            value={formatCurrency(financial.totalPurchaseCost)}
-            color="text-white"
-          />
-          <MetricBox
-            label={isPurchase ? "Total Esperado Venda" : "Valor Venda"}
-            value={formatCurrency(financial.totalExpectedSale)}
-            color="text-white"
-          />
-          <MetricBox
-            label="Lucro Esperado"
-            value={formatCurrency(financial.totalProfit)}
-            color={
-              financial.totalProfit >= 0 ? "text-emerald-500" : "text-rose-500"
-            }
-          />
-          <MetricBox
-            label="Margem Média"
-            value={`${financial.averageProfitMargin.toFixed(1)}%`}
-            color={
-              financial.averageProfitMargin >= 0
-                ? "text-emerald-500"
-                : "text-rose-500"
-            }
-          />
         </div>
-      </div>
-    </div>
-  );
-};
-
-const MetricBox = ({
-  label,
-  value,
-  color,
-}: {
-  label: string;
-  value: string;
-  color: string;
-}) => (
-  <div className="rounded-[4px] border border-[#262626] bg-neutral-900/50 p-3">
-    <p className="text-[10px] uppercase tracking-wider text-neutral-500 mb-1">
-      {label}
-    </p>
-    <p className={cn("text-lg font-bold tracking-tight font-mono", color)}>
-      {value}
-    </p>
-  </div>
-);
 
-const ProductsAndLotsCard = ({
-  groupedProducts,
-  batchPrices,
-  category,
-}: {
-  groupedProducts: GroupedProduct[];
-  batchPrices: BatchPriceInfo[];
-  category: MovementCategory;
-}) => {
-  const priceMap = new Map(batchPrices.map((b) => [b.batchId, b]));
-  const showPrices = category === "purchase" || category === "outflow";
-  const hasAnyPrices = batchPrices.some(
-    (b) => b.costPrice !== null || b.sellingPrice !== null,
-  );
-  const displayPrices = showPrices && hasAnyPrices;
-
-  return (
-    <div className="rounded-[4px] border border-[#262626] bg-[#171717]">
-      <div className="flex items-center justify-between border-b border-[#262626] px-5 py-4">
-        <div className="flex items-center gap-2">
-          <Layers className="size-4 text-amber-500" />
-          <h3 className="text-xs font-semibold uppercase tracking-widest text-white">
-            Produtos e Lotes
-          </h3>
-        </div>
-        <Badge className="rounded-[2px] border border-neutral-700 bg-neutral-900 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-neutral-300">
-          {groupedProducts.length} prod.
-        </Badge>
-      </div>
-
-      <div className="p-5 space-y-4">
-        {groupedProducts.map((product) => (
-          <ProductGroup
-            key={product.productId}
-            product={product}
-            priceMap={priceMap}
-            displayPrices={displayPrices}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-const ProductGroup = ({
-  product,
-  priceMap,
-  displayPrices,
-}: {
-  product: GroupedProduct;
-  priceMap: Map<string, BatchPriceInfo>;
-  displayPrices: boolean;
-}) => (
-  <div className="rounded-[4px] border border-[#262626] bg-neutral-900/30 overflow-hidden">
-    {/* Product Header */}
-    <div className="flex flex-col gap-3 border-b border-[#262626] bg-neutral-900/60 p-3 md:flex-row md:items-center md:justify-between md:px-4">
-      <div className="flex min-w-0 items-start gap-3 md:items-center">
-        <div className="relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-[4px] bg-neutral-800">
-          {product.productImageUrl ? (
-            <Image
-              src={product.productImageUrl}
-              alt={product.productName}
-              fill
-              sizes="40px"
-              unoptimized
-              className="object-cover"
-            />
-          ) : (
-            <Package className="size-5 text-blue-500" />
-          )}
-        </div>
-        <div className="min-w-0 flex-1">
-          <Link
-            href={`/products/${product.productId}`}
-            className="block break-words text-sm font-bold text-white hover:underline decoration-blue-500/50 underline-offset-2 md:inline"
-          >
-            {product.productName}
-          </Link>
-          {product.productSku && (
-            <p className="mt-1 break-all font-mono text-[10px] text-neutral-500 md:mt-0.5">
-              SKU: {product.productSku}
+        <div className="flex flex-col gap-5 sm:flex-row sm:items-end sm:gap-10">
+          <div>
+            <p className="mb-2 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Total movimentado
             </p>
-          )}
-          {product.items[0]?.batchCode && (
-            <p className="mt-0.5 break-all font-mono text-[10px] text-neutral-500">
-              Lote: {product.items[0].batchCode}
-            </p>
-          )}
-        </div>
-      </div>
-      <div className="flex w-full items-center gap-2 md:w-auto">
-        <Link
-          href={`/products/${product.productId}`}
-          className="inline-flex h-8 flex-1 items-center justify-center gap-1.5 rounded-[4px] border border-[#262626] bg-[#171717] px-3 text-[10px] font-bold uppercase tracking-wider text-neutral-300 transition-colors hover:bg-[#262626] md:flex-none md:w-auto"
-        >
-          <Package className="size-3.5" />
-          Ver produto
-        </Link>
-        {product.items[0]?.batchId && (
-          <Link
-            href={`/batches/${product.items[0].batchId}`}
-            className="inline-flex h-8 flex-1 items-center justify-center gap-1.5 rounded-[4px] border border-[#262626] bg-[#171717] px-3 text-[10px] font-bold uppercase tracking-wider text-neutral-300 transition-colors hover:bg-[#262626] md:flex-none md:w-auto"
-          >
-            <Layers className="size-3.5" />
-            Ver lote
-          </Link>
-        )}
-      </div>
-    </div>
-
-    {/* Batch Rows */}
-    <div className="divide-y divide-[#262626]">
-      {product.items.map((item) => (
-        <BatchRow
-          key={item.id}
-          item={item}
-          priceInfo={priceMap.get(item.batchId)}
-          displayPrices={displayPrices}
-        />
-      ))}
-    </div>
-  </div>
-);
-
-const BatchRow = ({
-  item,
-  priceInfo,
-  displayPrices,
-}: {
-  item: StockMovementItem;
-  priceInfo?: BatchPriceInfo;
-  displayPrices: boolean;
-}) => {
-  const unitCost = priceInfo?.costPrice ?? null;
-  const unitSale = priceInfo?.sellingPrice ?? null;
-  const totalCost = unitCost !== null ? unitCost * item.quantity : null;
-  const totalSale = unitSale !== null ? unitSale * item.quantity : null;
-
-  return (
-    <div className="flex flex-col gap-3 p-3 text-sm md:flex-row md:items-center md:justify-between md:px-4 md:py-2.5">
-      <span className="inline-flex w-fit items-center rounded-[4px] border border-neutral-800 bg-[#0A0A0A] px-2 py-1 text-xs text-neutral-300 md:inline md:border-0 md:bg-transparent md:p-0 md:text-neutral-400">
-        {item.quantity} un.
-      </span>
-
-      {displayPrices && (
-        <div className="grid w-full grid-cols-1 gap-2 text-xs md:flex md:w-auto md:items-center md:gap-4">
-          {unitCost !== null && (
-            <div className="flex items-center justify-between gap-2 rounded-[4px] border border-neutral-800 bg-[#0A0A0A] p-2 md:border-0 md:bg-transparent md:p-0">
-              <span className="text-neutral-500">Custo:</span>
-              <span className="font-mono text-neutral-300">
-                {formatCurrency(totalCost)}
-              </span>
-            </div>
-          )}
-          {unitSale !== null && (
-            <div className="flex items-center justify-between gap-2 rounded-[4px] border border-neutral-800 bg-[#0A0A0A] p-2 md:border-0 md:bg-transparent md:p-0">
-              <span className="text-neutral-500">Venda:</span>
-              <span className="font-mono text-neutral-300">
-                {formatCurrency(totalSale)}
-              </span>
-            </div>
-          )}
-          {totalCost !== null && totalSale !== null && (
-            <div className="flex items-center justify-between gap-2 rounded-[4px] border border-neutral-800 bg-[#0A0A0A] p-2 md:border-0 md:bg-transparent md:p-0">
-              <span className="text-neutral-500">Lucro:</span>
+            <div className="flex items-baseline gap-2">
               <span
                 className={cn(
-                  "font-mono font-bold",
-                  totalSale - totalCost >= 0
-                    ? "text-emerald-500"
-                    : "text-rose-500",
+                  "font-mono text-5xl font-bold leading-none tabular-nums",
+                  typeBadge.textClass,
                 )}
               >
-                {formatCurrency(totalSale - totalCost)}
+                {totalQuantity}
+              </span>
+              <span className="text-sm font-bold uppercase text-neutral-500">
+                un.
               </span>
             </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
+            <p className="mt-2 text-xs text-neutral-400">
+              {itemCount} {itemsLabel} · {typeBadge.description}
+            </p>
+          </div>
 
-const InfoCard = ({
-  movement,
-  direction,
-}: {
-  movement: {
-    warehouseName: string;
-    createdAt: string;
-    updatedAt: string;
-    direction: "IN" | "OUT";
-  };
-  direction: ReturnType<typeof getDirectionConfig>;
-}) => (
-  <div className="rounded-[4px] border border-[#262626] bg-[#171717] p-5 space-y-4">
-    <div className="flex items-center gap-2 mb-2 text-white">
-      <Warehouse className="size-4 text-neutral-500" />
-      <h3 className="text-xs font-semibold uppercase tracking-widest text-white">
-        Informações
-      </h3>
-    </div>
+          <div className="hidden sm:block w-px self-stretch bg-neutral-800" />
+
+          <div className="flex items-center gap-3">
+            <Warehouse className="size-5 shrink-0 text-neutral-600" strokeWidth={2} />
+            <div className="min-w-0">
+              <p className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+                Armazém
+              </p>
+              <p className="text-sm font-bold text-white">
+                {movement.warehouseName}
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ── Items ── */}
+      <section className="mb-6 rounded-[4px] border border-neutral-800 bg-[#171717]">
+        <div className="flex items-center justify-between border-b border-neutral-800 px-4 py-3">
+          <div className="flex items-center gap-2">
+            <Boxes className="size-4 text-neutral-500" strokeWidth={2} />
+            <h2 className="text-[10px] font-bold uppercase tracking-widest text-neutral-400">
+              Itens da movimentação
+            </h2>
+          </div>
+          <span className="font-mono text-[11px] text-neutral-500">
+            {itemCount.toString().padStart(2, "0")}
+          </span>
+        </div>
 
-    <div className="space-y-3">
-      <div className="flex justify-between items-center pb-3 border-b border-[#262626]">
-        <span className="text-xs text-neutral-500">Armazém</span>
-        <span className="text-sm text-white">{movement.warehouseName}</span>
-      </div>
-      <div className="flex justify-between items-center pb-3 border-b border-[#262626]">
-        <span className="text-xs text-neutral-500">Direção</span>
-        <span
-          className={cn(
-            "inline-flex items-center rounded-[2px] border px-2 py-0.5 text-[10px] font-bold uppercase tracking-widest",
-            direction.bg,
-            direction.color,
-            direction.border,
+        {items.length === 0 ? (
+          <div className="px-4 py-10 text-center">
+            <p className="text-sm text-neutral-500">Nenhum item registrado</p>
+          </div>
+        ) : (
+          <>
+            <div className="hidden md:block">
+              {items.map((item) => (
+                <ItemRowDesktop key={item.id} item={item} />
+              ))}
+            </div>
+            <div className="md:hidden">
+              {items.map((item) => (
+                <ItemCardMobile key={item.id} item={item} />
+              ))}
+            </div>
+          </>
+        )}
+      </section>
+
+      {/* ── Notes & Reference ── */}
+      {(movement.notes || hasReference) && (
+        <section className="mb-6 grid grid-cols-1 gap-3 md:grid-cols-2">
+          {movement.notes && (
+            <div className="rounded-[4px] border border-neutral-800 bg-[#171717] p-4">
+              <div className="mb-2 flex items-center gap-2">
+                <FileText
+                  className="size-3.5 text-neutral-500"
+                  strokeWidth={2}
+                />
+                <p className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+                  Observações
+                </p>
+              </div>
+              <p className="whitespace-pre-wrap text-sm leading-relaxed text-neutral-300">
+                {movement.notes}
+              </p>
+            </div>
           )}
-        >
-          {direction.icon}
-          {direction.label}
-        </span>
-      </div>
-      <div className="flex justify-between items-center pb-3 border-b border-[#262626]">
-        <span className="text-xs text-neutral-500">Criado em</span>
-        <span className="text-xs font-mono text-neutral-300">
-          {format(parseISO(movement.createdAt), "dd/MM/yyyy HH:mm", {
-            locale: ptBR,
-          })}
-        </span>
-      </div>
-      <div className="flex justify-between items-center">
-        <span className="text-xs text-neutral-500">Atualizado em</span>
-        <span className="text-xs font-mono text-neutral-300">
-          {format(parseISO(movement.updatedAt), "dd/MM/yyyy HH:mm", {
-            locale: ptBR,
-          })}
-        </span>
-      </div>
-    </div>
-  </div>
-);
 
-const ReferenceCard = ({
-  referenceType,
-  referenceId,
-}: {
-  referenceType: string;
-  referenceId: string | null;
-}) => {
-  const isTransfer = referenceType === "TRANSFER";
-  const href = isTransfer && referenceId ? `/transfers/${referenceId}` : null;
-
-  return (
-    <div className="rounded-[4px] border border-[#262626] bg-[#171717] p-5">
-      <div className="flex items-center gap-2 mb-3 text-purple-500">
-        <Link2 className="size-4 text-purple-500" />
-        <h3 className="text-xs font-semibold uppercase tracking-widest text-white">
-          Referência
-        </h3>
-      </div>
-      <div className="space-y-2">
-        <div className="flex justify-between items-center">
-          <span className="text-xs text-neutral-500">Tipo</span>
-          <span className="text-xs font-medium text-white">
-            {referenceType}
-          </span>
-        </div>
-        {referenceId && (
-          <div className="flex justify-between items-center">
-            <span className="text-xs text-neutral-500">ID</span>
-            {href ? (
+          {hasReference &&
+            movement.referenceType === "TRANSFER" &&
+            movement.referenceId && (
               <Link
-                href={href}
-                className="text-xs font-mono text-blue-500 hover:underline underline-offset-2 truncate max-w-[180px]"
+                href={`/transfers/${movement.referenceId}`}
+                className="group flex items-center justify-between rounded-[4px] border border-neutral-800 bg-[#171717] p-4 hover:border-blue-700 hover:bg-blue-950/10"
               >
-                {referenceId}
+                <div>
+                  <p className="mb-1 text-[10px] font-bold uppercase tracking-widest text-neutral-500 group-hover:text-blue-400">
+                    Transferência relacionada
+                  </p>
+                  <p className="font-mono text-sm font-bold text-white group-hover:text-blue-300">
+                    {movement.referenceId.slice(0, 8)}…
+                  </p>
+                </div>
+                <ExternalLink
+                  className="size-4 text-neutral-600 group-hover:text-blue-400"
+                  strokeWidth={2}
+                />
               </Link>
-            ) : (
-              <span className="text-xs font-mono text-neutral-300 truncate max-w-[180px]">
-                {referenceId}
-              </span>
             )}
-          </div>
-        )}
-      </div>
-    </div>
+        </section>
+      )}
+
+      {/* ── Timestamps ── */}
+      <section className="rounded-[4px] border border-neutral-800 bg-[#171717] p-5">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <MetaCell label="Criado em" value={formattedCreatedAt} mono />
+          <MetaCell label="Última atualização" value={formattedUpdatedAt} mono />
+        </div>
+      </section>
+    </PageContainer>
   );
 };
-
-const NotesCard = ({ notes }: { notes: string }) => (
-  <div className="rounded-[4px] border border-[#262626] bg-[#171717] p-5">
-    <div className="flex items-center gap-2 mb-3">
-      <FileText className="size-4 text-amber-500" />
-      <h3 className="text-xs font-semibold uppercase tracking-widest text-white">
-        Observações
-      </h3>
-    </div>
-    <p className="text-sm text-neutral-300 leading-relaxed">{notes}</p>
-  </div>
-);
diff --git a/app/(pages)/stock-movements/create/create-stock-movement.model.test.ts b/app/(pages)/stock-movements/create/create-stock-movement.model.test.ts
index 75bae9a..92f670a 100644
--- a/app/(pages)/stock-movements/create/create-stock-movement.model.test.ts
+++ b/app/(pages)/stock-movements/create/create-stock-movement.model.test.ts
@@ -1,5 +1,5 @@
-import { act, renderHook } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { act, cleanup, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { useCreateStockMovementModel } from "./create-stock-movement.model";
 import {
   buildMovementPayload,
@@ -8,7 +8,10 @@ import {
   shouldShowStockMovementFooter,
 } from "./create-stock-movement.model";
 import type { CreateStockMovementSchema } from "./create-stock-movement.schema";
-import type { StockMovementDraft } from "./create-stock-movement.storage";
+import type {
+  StockMovementDraft,
+  WritableStockMovementDraft,
+} from "./create-stock-movement.storage";
 import type {
   StockMovementProductBatchPriceSource,
   StockMovementProductBatchesResponse,
@@ -63,7 +66,11 @@ const fakeSWR = vi.hoisted(() => {
 const fakeApi = vi.hoisted(() => {
   class FakeApi {
     public readonly get = vi.fn<(url: string) => JsonResponse<unknown>>();
-    public readonly post = vi.fn<(url: string, body: { json?: unknown; body?: unknown }) => Promise<unknown>>();
+    public readonly post = vi.fn<
+      (url: string, body: { json?: unknown; body?: unknown }) =>
+        | Promise<unknown>
+        | JsonResponse<unknown>
+    >();
   }
 
   return new FakeApi();
@@ -122,22 +129,37 @@ const fakeSelectedWarehouse = vi.hoisted(() => {
 const fakeStorage = vi.hoisted(() => {
   class FakeStorage {
     private draftState: StockMovementDraft | null = null;
+    private readonly currentRuntimeId = "runtime-atual";
 
-    public readonly readStockMovementDraft = vi.fn<() => StockMovementDraft | null>(() => {
+    public readonly readStockMovementDraft = vi.fn<() => Promise<StockMovementDraft | null>>(async () => {
       return this.draftState;
     });
-    public readonly writeStockMovementDraft = vi.fn<(draft: StockMovementDraft) => void>(
-      (draft) => {
-        this.draftState = draft;
+    public readonly writeStockMovementDraft = vi.fn<(draft: WritableStockMovementDraft) => Promise<void>>(
+      async (draft) => {
+        this.draftState = {
+          ...draft,
+          schemaVersion: 1,
+          updatedAt: "2026-01-20T10:00:00.000Z",
+          runtimeId: this.currentRuntimeId,
+        };
       },
     );
-    public readonly clearStockMovementDraft = vi.fn(() => {
+    public readonly clearStockMovementDraft = vi.fn(async () => {
       this.draftState = null;
     });
+    public readonly isStockMovementDraftRecoveredFromPreviousRuntime = vi.fn(
+      (draft: StockMovementDraft) => {
+        return draft.runtimeId !== this.currentRuntimeId;
+      },
+    );
 
     public setDraftState(draft: StockMovementDraft | null): void {
       this.draftState = draft;
     }
+
+    public getCurrentRuntimeId(): string {
+      return this.currentRuntimeId;
+    }
   }
 
   return new FakeStorage();
@@ -192,7 +214,9 @@ vi.mock("@/lib/api", () => ({
 
 vi.mock("./create-stock-movement.storage", () => ({
   readStockMovementDraft: () => fakeStorage.readStockMovementDraft(),
-  writeStockMovementDraft: (draft: StockMovementDraft) =>
+  isStockMovementDraftRecoveredFromPreviousRuntime: (draft: StockMovementDraft) =>
+    fakeStorage.isStockMovementDraftRecoveredFromPreviousRuntime(draft),
+  writeStockMovementDraft: (draft: WritableStockMovementDraft) =>
     fakeStorage.writeStockMovementDraft(draft),
   clearStockMovementDraft: () => fakeStorage.clearStockMovementDraft(),
   inlineProductImageToFile: (image: {
@@ -284,6 +308,8 @@ const barcodeIndex: Record<string, StockMovementProductOption> = {
 const createDraftState = (
   overrides?: Partial<StockMovementDraft>,
 ): StockMovementDraft => ({
+  schemaVersion: 1,
+  updatedAt: "2026-01-20T09:00:00.000Z",
   type: "PURCHASE_IN",
   notes: "Notas iniciais",
   items: [
@@ -358,6 +384,7 @@ beforeEach(() => {
   fakeSearchParams.setEditItem(null);
   fakeStorage.setDraftState(null);
   fakeStorage.clearStockMovementDraft.mockClear();
+  fakeStorage.isStockMovementDraftRecoveredFromPreviousRuntime.mockClear();
   fakeStorage.readStockMovementDraft.mockClear();
   fakeStorage.writeStockMovementDraft.mockClear();
   fakeRouter.push.mockClear();
@@ -389,7 +416,25 @@ beforeEach(() => {
     return createJsonResponse(productListResponse);
   });
 
-  fakeApi.post.mockResolvedValue({});
+  fakeApi.post.mockImplementation((url: string) => {
+    if (url === "uploads/product-images/temp") {
+      return createJsonResponse({
+        success: true,
+        data: {
+          uploadId: "11111111-1111-4111-8111-111111111111",
+          fileName: "inline.png",
+          contentType: "image/png",
+          sizeBytes: 3,
+        },
+      });
+    }
+    return Promise.resolve({});
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
 });
 
 describe("helpers de produto", () => {
@@ -507,17 +552,20 @@ describe("useCreateStockMovementModel", () => {
     });
   });
 
-  it("impede inicialização sem tipo válido e redireciona", () => {
+  it("mantém modelo sem tipo quando a rota não fornece tipo válido", () => {
     fakeSearchParams.setType(null);
-    renderHook(() => useCreateStockMovementModel({ typeParam: fakeSearchParams.get("type") }));
+    const { result } = renderHook(() =>
+      useCreateStockMovementModel({ typeParam: fakeSearchParams.get("type") }),
+    );
 
-    expect(fakeToast.error).toHaveBeenCalledWith(
+    expect(result.current.form.getValues("type")).toBeUndefined();
+    expect(fakeToast.error).not.toHaveBeenCalledWith(
       "Selecione o tipo de movimentação antes de continuar.",
     );
-    expect(fakeRouter.replace).toHaveBeenCalledWith("/stock-movements");
+    expect(fakeRouter.replace).not.toHaveBeenCalledWith("/stock-movements");
   });
 
-  it("carrega rascunho existente e limpa do storage", () => {
+  it("restaura rascunho legado sem limpar do storage e mostra toast", async () => {
     fakeStorage.setDraftState(
       createDraftState({
         selectedProductId: "p-2",
@@ -527,8 +575,15 @@ describe("useCreateStockMovementModel", () => {
 
     const { result } = renderHook(() => useCreateStockMovementModel({ typeParam: fakeSearchParams.get("type") }));
 
+    await waitFor(() => {
+      expect(result.current.form.getValues("notes")).toBe("Notas iniciais");
+    });
+
     expect(fakeStorage.readStockMovementDraft).toHaveBeenCalledTimes(1);
-    expect(fakeStorage.clearStockMovementDraft).toHaveBeenCalledTimes(1);
+    expect(fakeStorage.clearStockMovementDraft).not.toHaveBeenCalled();
+    expect(fakeToast.success).toHaveBeenCalledWith(
+      "Rascunho da movimentação restaurado.",
+    );
     expect(result.current.form.getValues("notes")).toBe("Notas iniciais");
     expect(result.current.form.getValues("items")).toEqual([
       {
@@ -544,30 +599,137 @@ describe("useCreateStockMovementModel", () => {
         },
       },
     ]);
-    expect(result.current.selectedProductId).toBe("");
-    expect(result.current.itemQuantity).toBe("");
+    expect(result.current.selectedProductId).toBe("p-2");
+    expect(result.current.itemQuantity).toBe("7");
+  });
+
+  it("restaura rascunho do runtime atual em silêncio", async () => {
+    fakeStorage.setDraftState(
+      createDraftState({
+        selectedProductId: "p-2",
+        runtimeId: fakeStorage.getCurrentRuntimeId(),
+      }),
+    );
+
+    const { result } = renderHook(() =>
+      useCreateStockMovementModel({ typeParam: fakeSearchParams.get("type") }),
+    );
+
+    await waitFor(() => {
+      expect(result.current.form.getValues("notes")).toBe("Notas iniciais");
+    });
+
+    expect(
+      fakeStorage.isStockMovementDraftRecoveredFromPreviousRuntime,
+    ).toHaveBeenCalledTimes(1);
+    expect(fakeToast.success).not.toHaveBeenCalledWith(
+      "Rascunho da movimentação restaurado.",
+    );
+    expect(result.current.selectedProductId).toBe("p-2");
+  });
+
+  it("restaura rascunho de runtime anterior com toast", async () => {
+    fakeStorage.setDraftState(
+      createDraftState({
+        selectedProductId: "p-2",
+        runtimeId: "runtime-anterior",
+      }),
+    );
+
+    const { result } = renderHook(() =>
+      useCreateStockMovementModel({ typeParam: fakeSearchParams.get("type") }),
+    );
+
+    await waitFor(() => {
+      expect(result.current.form.getValues("notes")).toBe("Notas iniciais");
+    });
+
+    expect(fakeToast.success).toHaveBeenCalledWith(
+      "Rascunho da movimentação restaurado.",
+    );
+    expect(result.current.selectedProductId).toBe("p-2");
+  });
+
+  it("autosalva notas e itens depois da hidratação", async () => {
+    const { result } = renderHook(() =>
+      useCreateStockMovementModel({ typeParam: fakeSearchParams.get("type") }),
+    );
+
+    await waitFor(() => {
+      expect(fakeStorage.writeStockMovementDraft).toHaveBeenCalled();
+    });
+    fakeStorage.writeStockMovementDraft.mockClear();
+
+    act(() => {
+      result.current.form.setValue("notes", "Nova observação");
+    });
+
+    await waitFor(() => {
+      expect(fakeStorage.writeStockMovementDraft).toHaveBeenCalledWith(
+        expect.objectContaining({
+          notes: "Nova observação",
+        }),
+      );
+    });
+
+    fakeStorage.writeStockMovementDraft.mockClear();
+    act(() => {
+      result.current.form.setValue("items", [
+        {
+          productId: validExistingProductUuid,
+          productName: "Café Torrado",
+          quantity: 2,
+        },
+      ]);
+    });
+
+    await waitFor(() => {
+      expect(fakeStorage.writeStockMovementDraft).toHaveBeenCalledWith(
+        expect.objectContaining({
+          items: [
+            {
+              productId: validExistingProductUuid,
+              productName: "Café Torrado",
+              quantity: 2,
+            },
+          ],
+        }),
+      );
+    });
   });
 
   it("aplica debounce de busca de produto", () => {
     vi.useFakeTimers();
+    const { result } = renderHook(() =>
+      useCreateStockMovementModel({ typeParam: fakeSearchParams.get("type") }),
+    );
 
-    try {
-      const { result } = renderHook(() => useCreateStockMovementModel({ typeParam: fakeSearchParams.get("type") }));
+    act(() => {
+      result.current.onProductSearchFocus();
+      result.current.onProductSearchChange("filtro");
+    });
+    expect(result.current.productOptions).toEqual([]);
+    expect(result.current.isProductSearchLoading).toBe(false);
 
-      act(() => {
-        result.current.onProductSearchFocus();
-        result.current.onProductSearchChange("filtro");
-      });
-      expect(result.current.productOptions).toEqual([]);
-      expect(result.current.isProductSearchLoading).toBe(false);
+    act(() => {
+      vi.advanceTimersByTime(350);
+    });
+    expect(result.current.productOptions).toHaveLength(1);
+  });
 
-      act(() => {
-        vi.advanceTimersByTime(350);
-      });
-      expect(result.current.productOptions).toHaveLength(1);
-    } finally {
-      vi.useRealTimers();
-    }
+  it("cancela debounce de busca ao desmontar", () => {
+    vi.useFakeTimers();
+    const { result, unmount } = renderHook(() =>
+      useCreateStockMovementModel({ typeParam: fakeSearchParams.get("type") }),
+    );
+
+    act(() => {
+      result.current.onProductSearchChange("filtro");
+    });
+
+    unmount();
+
+    expect(vi.getTimerCount()).toBe(0);
   });
 
   it("mantém produto selecionado quando busca bate com rótulo completo", () => {
@@ -872,9 +1034,14 @@ describe("useCreateStockMovementModel", () => {
     expect(fakeRouter.push).not.toHaveBeenCalled();
   });
 
-  it("redireciona para inclusão de produto novo em movimento de entrada", () => {
+  it("redireciona para inclusão de produto novo em movimento de entrada", async () => {
     const { result } = renderHook(() => useCreateStockMovementModel({ typeParam: fakeSearchParams.get("type") }));
 
+    await waitFor(() => {
+      expect(fakeStorage.readStockMovementDraft).toHaveBeenCalled();
+    });
+    fakeStorage.writeStockMovementDraft.mockClear();
+
     act(() => {
       result.current.onProductSelect(movementProducts[0]);
     });
@@ -882,8 +1049,8 @@ describe("useCreateStockMovementModel", () => {
       result.current.onQuantityChange("2");
       result.current.onAddItem();
     });
-    act(() => {
-      result.current.onCreateNewProduct();
+    await act(async () => {
+      await result.current.onCreateNewProduct();
     });
 
     expect(fakeStorage.writeStockMovementDraft).toHaveBeenCalled();
@@ -989,9 +1156,14 @@ describe("useCreateStockMovementModel", () => {
     expect(lastCall?.[1]).toBeUndefined();
   });
 
-  it("abre editor de produto novo quando o item do índice é válido", () => {
+  it("abre editor de produto novo quando o item do índice é válido", async () => {
     const { result } = renderHook(() => useCreateStockMovementModel({ typeParam: fakeSearchParams.get("type") }));
 
+    await waitFor(() => {
+      expect(fakeStorage.readStockMovementDraft).toHaveBeenCalled();
+    });
+    fakeStorage.writeStockMovementDraft.mockClear();
+
     act(() => {
       result.current.form.setValue("items", [
         {
@@ -1007,8 +1179,8 @@ describe("useCreateStockMovementModel", () => {
       ]);
     });
 
-    act(() => {
-      result.current.onEditNewProductItem(0);
+    await act(async () => {
+      await result.current.onEditNewProductItem(0);
     });
 
     expect(fakeStorage.writeStockMovementDraft).toHaveBeenCalled();
@@ -1060,11 +1232,12 @@ describe("useCreateStockMovementModel", () => {
     expect(fakeToast.success).toHaveBeenCalledWith(
       "Movimentação criada com sucesso!",
     );
+    expect(fakeStorage.clearStockMovementDraft).toHaveBeenCalledTimes(1);
     expect(fakeRouter.push).toHaveBeenCalledWith("/stock-movements");
     expect(result.current.isSubmitting).toBe(false);
   });
 
-  it("envia payload multipart quando há imagem inline", async () => {
+  it("envia imagem temporária e payload JSON quando há imagem inline", async () => {
     const { result } = renderHook(() => useCreateStockMovementModel({ typeParam: fakeSearchParams.get("type") }));
     const payload = createInlineSubmitPayload();
 
@@ -1072,12 +1245,45 @@ describe("useCreateStockMovementModel", () => {
       await result.current.onSubmit(payload);
     });
 
-    const [, options] = fakeApi.post.mock.calls.at(-1) as [
+    const [uploadUrl, uploadOptions] = fakeApi.post.mock.calls[0] as [
+      string,
+      { body?: FormData; json?: unknown },
+    ];
+    expect(uploadUrl).toBe("uploads/product-images/temp");
+    expect(uploadOptions.body).toBeInstanceOf(FormData);
+
+    const [movementUrl, movementOptions] = fakeApi.post.mock.calls.at(-1) as [
       string,
       { body?: FormData; json?: unknown },
     ];
-    expect(options.body).toBeInstanceOf(FormData);
-    expect(options.body?.getAll("inlineProductImages")).toHaveLength(1);
+    expect(movementUrl).toBe("stock-movements");
+    expect(movementOptions.json).toMatchObject({
+      items: [
+        {
+          imageUploadId: "11111111-1111-4111-8111-111111111111",
+        },
+      ],
+    });
+    expect(movementOptions.body).toBeUndefined();
+  });
+
+  it("não envia movimentação quando upload temporário falha", async () => {
+    fakeApi.post.mockImplementation((url: string) => {
+      if (url === "uploads/product-images/temp") {
+        throw new Error("Falha no upload");
+      }
+      return Promise.resolve({});
+    });
+    const { result } = renderHook(() => useCreateStockMovementModel({ typeParam: fakeSearchParams.get("type") }));
+
+    await act(async () => {
+      await result.current.onSubmit(createInlineSubmitPayload());
+    });
+
+    expect(fakeApi.post).toHaveBeenCalledTimes(1);
+    expect(fakeToast.error).toHaveBeenCalledWith("Falha no upload");
+    expect(fakeStorage.clearStockMovementDraft).not.toHaveBeenCalled();
+    expect(fakeRouter.push).not.toHaveBeenCalledWith("/stock-movements");
   });
 
   it("mostra erro no envio e mantém estado", async () => {
@@ -1089,6 +1295,7 @@ describe("useCreateStockMovementModel", () => {
     });
 
     expect(fakeToast.error).toHaveBeenCalledWith("Falha ao salvar");
+    expect(fakeStorage.clearStockMovementDraft).not.toHaveBeenCalled();
     expect(result.current.isSubmitting).toBe(false);
     expect(fakeRouter.push).not.toHaveBeenCalledWith("/stock-movements");
   });
diff --git a/app/(pages)/stock-movements/create/create-stock-movement.model.ts b/app/(pages)/stock-movements/create/create-stock-movement.model.ts
index ea130fa..bcd0ef1 100644
--- a/app/(pages)/stock-movements/create/create-stock-movement.model.ts
+++ b/app/(pages)/stock-movements/create/create-stock-movement.model.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useForm, useFieldArray } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import useSWR from "swr";
@@ -25,9 +25,11 @@ import {
 import {
   clearStockMovementDraft,
   inlineProductImageToFile,
+  isStockMovementDraftRecoveredFromPreviousRuntime,
   readStockMovementDraft,
   writeStockMovementDraft,
 } from "./create-stock-movement.storage";
+import type { WritableStockMovementDraft } from "./create-stock-movement.storage";
 import {
   buildExistingProductBatchesUrl,
   buildExistingProductProfitSummary,
@@ -58,7 +60,7 @@ const isExistingProductBatchDateRangeInvalid = (
 
 const buildExistingProductItemPayload = (
   item: CreateStockMovementSchema["items"][number],
-) => {
+): ExistingProductMovementPayload => {
   const payload: {
     productId: string | undefined;
     quantity: number;
@@ -77,9 +79,48 @@ const buildExistingProductItemPayload = (
   return payload;
 };
 
+interface ExistingProductMovementPayload {
+  productId: string | undefined;
+  quantity: number;
+  manufacturedDate?: string;
+  expirationDate?: string;
+  costPrice?: number;
+  sellingPrice?: number;
+}
+
+interface NewProductMovementPayload {
+  quantity: number;
+  newProduct: {
+    name: string;
+    description?: string;
+    barcode?: string;
+    categoryId?: string;
+    brandId?: string;
+    isKit?: boolean;
+    hasExpiration: boolean;
+    active?: boolean;
+    attributes?: Record<string, string>;
+  };
+  manufacturedDate?: string;
+  expirationDate?: string;
+  costPrice?: number;
+  sellingPrice?: number;
+  imageUploadId?: string;
+}
+
+type MovementItemPayload =
+  | ExistingProductMovementPayload
+  | NewProductMovementPayload;
+
+interface StockMovementPayload {
+  type: NonNullable<CreateStockMovementSchema["type"]>;
+  notes?: string;
+  items: MovementItemPayload[];
+}
+
 const buildMovementItemPayload = (
   item: CreateStockMovementSchema["items"][number],
-) => {
+): MovementItemPayload => {
   if (!item.newProductData) return buildExistingProductItemPayload(item);
   const newProduct = {
     name: item.newProductData.name,
@@ -102,38 +143,55 @@ const buildMovementItemPayload = (
   };
 };
 
-const hasInlineProductImages = (
-  items: CreateStockMovementSchema["items"],
-): boolean => {
-  return items.some((item) => Boolean(item.newProductData?.image));
-};
-
 export const buildMovementPayload = (
   selectedMovementType: NonNullable<CreateStockMovementSchema["type"]>,
   data: CreateStockMovementSchema,
-) => ({
+): StockMovementPayload => ({
   type: selectedMovementType,
   notes: data.notes || undefined,
   items: data.items.map(buildMovementItemPayload),
 });
 
-const buildMovementFormData = (
-  payload: ReturnType<typeof buildMovementPayload>,
-  items: CreateStockMovementSchema["items"],
-): FormData => {
+interface TemporaryProductImageUploadResponse {
+  success: boolean;
+  data: {
+    uploadId: string;
+    fileName: string;
+    contentType: string;
+    sizeBytes: number;
+  };
+}
+
+const uploadTemporaryInlineProductImage = async (
+  image: NonNullable<
+    NonNullable<CreateStockMovementSchema["items"][number]["newProductData"]>["image"]
+  >,
+): Promise<string> => {
   const formData = new FormData();
-  const movementBlob = new Blob([JSON.stringify(payload)], {
-    type: "application/json",
-  });
-  formData.append("movement", movementBlob);
-  items.forEach((item) => {
-    if (!item.newProductData) return;
-    const imageFile = item.newProductData.image
-      ? inlineProductImageToFile(item.newProductData.image)
-      : new File([], "empty-inline-product-image");
-    formData.append("inlineProductImages", imageFile);
-  });
-  return formData;
+  formData.append("image", inlineProductImageToFile(image));
+  const response = await api
+    .post("uploads/product-images/temp", { body: formData })
+    .json<TemporaryProductImageUploadResponse>();
+  return response.data.uploadId;
+};
+
+const uploadInlineProductImages = async (
+  payload: StockMovementPayload,
+  items: CreateStockMovementSchema["items"],
+): Promise<StockMovementPayload> => {
+  const movementItems = [...payload.items];
+  for (const [index, formItem] of items.entries()) {
+    if (!formItem.newProductData?.image) continue;
+    const itemPayload = movementItems[index];
+    if (!("newProduct" in itemPayload)) continue;
+    movementItems[index] = {
+      ...itemPayload,
+      imageUploadId: await uploadTemporaryInlineProductImage(
+        formItem.newProductData.image,
+      ),
+    };
+  }
+  return { ...payload, items: movementItems };
 };
 
 interface ProductListResponse {
@@ -213,6 +271,7 @@ export function useCreateStockMovementModel({
   const router = useRouter();
   const { warehouseId } = useSelectedWarehouse();
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submittingStep, setSubmittingStep] = useState<string | null>(null);
   const [selectedProductId, setSelectedProductId] = useState("");
   const [selectedProduct, setSelectedProduct] =
     useState<StockMovementProductOption | null>(null);
@@ -230,6 +289,7 @@ export function useCreateStockMovementModel({
   const lastScrollYRef = useRef(0);
   const productSearchBlurTimeoutRef =
     useRef<ReturnType<typeof setTimeout> | null>(null);
+  const inlineProductBarcodeRef = useRef<string | undefined>(undefined);
   const selectedMovementType = isManualMovementType(typeParam)
     ? typeParam
     : undefined;
@@ -251,34 +311,51 @@ export function useCreateStockMovementModel({
   });
 
   useEffect(() => {
-    if (!selectedMovementType) {
-      toast.error("Selecione o tipo de movimentação antes de continuar.");
-      router.replace("/stock-movements");
-      return;
-    }
-
+    if (!selectedMovementType) return;
     form.setValue("type", selectedMovementType, { shouldValidate: true });
-  }, [form, router, selectedMovementType]);
+  }, [form, selectedMovementType]);
 
   const { fields, append, remove, update } = useFieldArray({
     control: form.control,
     name: "items",
   });
 
-  useEffect(() => {
-    const draft = readStockMovementDraft();
-    if (!draft) return;
+  const [isDraftHydrated, setIsDraftHydrated] = useState(false);
 
-    form.reset({
-      type: draft.type,
-      notes: draft.notes,
-      items: draft.items,
-    });
-    setSelectedProductId("");
-    setItemQuantity("");
+  useEffect(() => {
+    let isMounted = true;
+
+    const hydrateDraft = async (): Promise<void> => {
+      if (!selectedMovementType) {
+        setIsDraftHydrated(true);
+        return;
+      }
+
+      const draft = await readStockMovementDraft();
+      if (!isMounted) return;
+
+      if (draft?.type === selectedMovementType) {
+        form.reset({
+          type: draft.type,
+          notes: draft.notes,
+          items: draft.items,
+        });
+        setSelectedProductId(draft.selectedProductId);
+        setItemQuantity(draft.itemQuantity);
+        inlineProductBarcodeRef.current = draft.inlineProductBarcode;
+        if (isStockMovementDraftRecoveredFromPreviousRuntime(draft)) {
+          toast.success("Rascunho da movimentação restaurado.");
+        }
+      }
+
+      setIsDraftHydrated(true);
+    };
 
-    clearStockMovementDraft();
-  }, [append, form]);
+    void hydrateDraft();
+    return () => {
+      isMounted = false;
+    };
+  }, [form, selectedMovementType]);
 
   const { data: productsData, isLoading: isLoadingProducts } =
     useSWR<ProductListResponse>("products", (url: string) =>
@@ -326,6 +403,84 @@ export function useCreateStockMovementModel({
     imageUrl: p.imageUrl,
   }));
 
+  useEffect(() => {
+    if (!selectedProductId || productSearchQuery || products.length === 0) return;
+    const restoredProduct = products.find((product) => {
+      return product.id === selectedProductId;
+    });
+    if (!restoredProduct) return;
+    setSelectedProduct(restoredProduct);
+    setProductSearchQuery(formatStockMovementProductLabel(restoredProduct));
+  }, [productSearchQuery, products, selectedProductId]);
+
+  const buildCurrentDraft = useCallback(
+    (inlineProductBarcode = inlineProductBarcodeRef.current): WritableStockMovementDraft | null => {
+      if (!selectedMovementType) return null;
+      return {
+        type: selectedMovementType,
+        notes: form.getValues("notes") || "",
+        items: form.getValues("items"),
+        selectedProductId,
+        itemQuantity,
+        inlineProductBarcode,
+      };
+    },
+    [form, itemQuantity, selectedMovementType, selectedProductId],
+  );
+
+  const persistCurrentDraft = useCallback(
+    async (inlineProductBarcode = inlineProductBarcodeRef.current): Promise<void> => {
+      const draft = buildCurrentDraft(inlineProductBarcode);
+      if (!draft) return;
+      await writeStockMovementDraft(draft);
+    },
+    [buildCurrentDraft],
+  );
+
+  useEffect(() => {
+    if (!isDraftHydrated || !selectedMovementType) return;
+    void persistCurrentDraft();
+  }, [
+    isDraftHydrated,
+    itemQuantity,
+    persistCurrentDraft,
+    selectedMovementType,
+    selectedProductId,
+  ]);
+
+  useEffect(() => {
+    if (!isDraftHydrated || !selectedMovementType) return;
+
+    const subscription = form.watch((_value, { name }) => {
+      if (!name || (name !== "notes" && !name.startsWith("items"))) return;
+      void persistCurrentDraft();
+    });
+
+    return () => subscription.unsubscribe();
+  }, [form, isDraftHydrated, persistCurrentDraft, selectedMovementType]);
+
+  useEffect(() => {
+    if (!isDraftHydrated || !selectedMovementType) return;
+
+    const persistBeforePageHide = (): void => {
+      void persistCurrentDraft();
+    };
+    const persistBeforeVisibilityLoss = (): void => {
+      if (document.visibilityState !== "hidden") return;
+      void persistCurrentDraft();
+    };
+
+    window.addEventListener("pagehide", persistBeforePageHide);
+    document.addEventListener("visibilitychange", persistBeforeVisibilityLoss);
+    return () => {
+      window.removeEventListener("pagehide", persistBeforePageHide);
+      document.removeEventListener(
+        "visibilitychange",
+        persistBeforeVisibilityLoss,
+      );
+    };
+  }, [isDraftHydrated, persistCurrentDraft, selectedMovementType]);
+
   useEffect(() => {
     const timeoutId = setTimeout(() => {
       setDebouncedProductSearchQuery(productSearchQuery);
@@ -615,7 +770,7 @@ export function useCreateStockMovementModel({
     closeExistingProductBatchForm();
   };
 
-  const handleCreateNewProduct = () => {
+  const handleCreateNewProduct = async (): Promise<void> => {
     setAddItemError(null);
 
     if (!selectedMovementType) {
@@ -635,44 +790,30 @@ export function useCreateStockMovementModel({
       return;
     }
 
-    writeStockMovementDraft({
-      type: selectedMovementType,
-      notes: form.getValues("notes") || "",
-      items: form.getValues("items"),
-      selectedProductId,
-      itemQuantity,
-    });
+    inlineProductBarcodeRef.current = undefined;
+    await persistCurrentDraft(undefined);
     router.push(`/stock-movements/create/new-product?type=${selectedMovementType}`);
   };
 
-  const navigateToInlineProductWithBarcode = (barcode: string) => {
+  const navigateToInlineProductWithBarcode = async (
+    barcode: string,
+  ): Promise<void> => {
     if (!selectedMovementType) return;
 
-    writeStockMovementDraft({
-      type: selectedMovementType,
-      notes: form.getValues("notes") || "",
-      items: form.getValues("items"),
-      selectedProductId,
-      itemQuantity,
-      inlineProductBarcode: barcode,
-    });
+    inlineProductBarcodeRef.current = barcode;
+    await persistCurrentDraft(barcode);
     setIsScannerOpen(false);
     router.push(`/stock-movements/create/new-product?type=${selectedMovementType}`);
   };
 
-  const handleEditNewProductItem = (index: number) => {
+  const handleEditNewProductItem = async (index: number): Promise<void> => {
     if (!selectedMovementType) return;
 
     const item = form.getValues("items")[index];
     if (!item?.newProductData) return;
 
-    writeStockMovementDraft({
-      type: selectedMovementType,
-      notes: form.getValues("notes") || "",
-      items: form.getValues("items"),
-      selectedProductId,
-      itemQuantity,
-    });
+    inlineProductBarcodeRef.current = undefined;
+    await persistCurrentDraft(undefined);
     router.push(
       `/stock-movements/create/new-product?type=${selectedMovementType}&editItem=${index}`,
     );
@@ -763,7 +904,9 @@ export function useCreateStockMovementModel({
     toast.error(`Produto com código ${barcode} não existe.`, {
       action: {
         label: "Criar Produto",
-        onClick: () => navigateToInlineProductWithBarcode(barcode),
+        onClick: () => {
+          void navigateToInlineProductWithBarcode(barcode);
+        },
       },
     });
   };
@@ -776,13 +919,18 @@ export function useCreateStockMovementModel({
     }
 
     setIsSubmitting(true);
+    setSubmittingStep("Preparando dados da movimentação…");
     try {
       const payload = buildMovementPayload(selectedMovementType, data);
-      const postOptions = hasInlineProductImages(data.items)
-        ? { body: buildMovementFormData(payload, data.items) }
-        : { json: payload };
-      await api.post("stock-movements", postOptions);
 
+      setSubmittingStep("Fazendo upload das imagens…");
+      const payloadWithImages = await uploadInlineProductImages(payload, data.items);
+
+      setSubmittingStep("Ajustando preços e quantidades…");
+      await api.post("stock-movements", { json: payloadWithImages });
+
+      setSubmittingStep("Finalizando…");
+      await clearStockMovementDraft();
       toast.success("Movimentação criada com sucesso!");
       router.push("/stock-movements");
     } catch (err: unknown) {
@@ -790,6 +938,7 @@ export function useCreateStockMovementModel({
       toast.error(error.message || "Erro ao criar movimentação.");
     } finally {
       setIsSubmitting(false);
+      setSubmittingStep(null);
     }
   };
 
@@ -799,6 +948,7 @@ export function useCreateStockMovementModel({
     products,
     isLoadingProducts,
     isSubmitting,
+    submittingStep,
     isFooterVisible,
     selectedProductId,
     productSearchQuery,
diff --git a/app/(pages)/stock-movements/create/create-stock-movement.storage.test.ts b/app/(pages)/stock-movements/create/create-stock-movement.storage.test.ts
new file mode 100644
index 0000000..de44b7f
--- /dev/null
+++ b/app/(pages)/stock-movements/create/create-stock-movement.storage.test.ts
@@ -0,0 +1,299 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  clearStockMovementDraft,
+  isStockMovementDraftRecoveredFromPreviousRuntime,
+  readStockMovementDraft,
+  STOCK_MOVEMENT_DRAFT_SCHEMA_VERSION,
+  writeStockMovementDraft,
+} from "./create-stock-movement.storage";
+import type { WritableStockMovementDraft } from "./create-stock-movement.storage";
+
+const STORE_NAME = "stockMovementDrafts";
+const DRAFT_KEY = "current";
+
+interface MutableRequest<T> {
+  result: T;
+  error: DOMException | null;
+  onsuccess: ((this: IDBRequest<T>, event: Event) => unknown) | null;
+  onerror: ((this: IDBRequest<T>, event: Event) => unknown) | null;
+}
+
+interface MutableOpenRequest extends MutableRequest<IDBDatabase> {
+  onupgradeneeded:
+    | ((this: IDBOpenDBRequest, event: IDBVersionChangeEvent) => unknown)
+    | null;
+}
+
+const createMutableRequest = <T>(initialResult: T): MutableRequest<T> => ({
+  result: initialResult,
+  error: null,
+  onsuccess: null,
+  onerror: null,
+});
+
+const createMutableOpenRequest = (): MutableOpenRequest => ({
+  ...createMutableRequest({} as IDBDatabase),
+  onupgradeneeded: null,
+});
+
+class FakeObjectStore {
+  public constructor(
+    private readonly values: Map<string, unknown>,
+    private readonly completeTransaction: () => void,
+  ) {}
+
+  public get(key: IDBValidKey): IDBRequest<unknown> {
+    const request = createMutableRequest<unknown>(undefined);
+    queueMicrotask(() => {
+      request.result = this.values.get(String(key));
+      request.onsuccess?.call(request as IDBRequest<unknown>, new Event("success"));
+      this.completeTransaction();
+    });
+    return request as IDBRequest<unknown>;
+  }
+
+  public put(value: unknown, key?: IDBValidKey): IDBRequest<IDBValidKey> {
+    const request = createMutableRequest<IDBValidKey>(key ?? DRAFT_KEY);
+    queueMicrotask(() => {
+      this.values.set(String(key ?? DRAFT_KEY), value);
+      request.onsuccess?.call(request as IDBRequest<IDBValidKey>, new Event("success"));
+      this.completeTransaction();
+    });
+    return request as IDBRequest<IDBValidKey>;
+  }
+
+  public delete(key: IDBValidKey): IDBRequest<undefined> {
+    const request = createMutableRequest<undefined>(undefined);
+    queueMicrotask(() => {
+      this.values.delete(String(key));
+      request.onsuccess?.call(request as IDBRequest<undefined>, new Event("success"));
+      this.completeTransaction();
+    });
+    return request as IDBRequest<undefined>;
+  }
+}
+
+class FakeTransaction {
+  public error: DOMException | null = null;
+  public oncomplete: ((this: IDBTransaction, event: Event) => unknown) | null =
+    null;
+  public onabort: ((this: IDBTransaction, event: Event) => unknown) | null =
+    null;
+
+  public constructor(private readonly values: Map<string, unknown>) {}
+
+  public objectStore(): IDBObjectStore {
+    return new FakeObjectStore(this.values, () => {
+      this.oncomplete?.call(this as unknown as IDBTransaction, new Event("complete"));
+    }) as unknown as IDBObjectStore;
+  }
+}
+
+class FakeDatabase {
+  public readonly objectStoreNames = {
+    contains: (storeName: string) => this.stores.has(storeName),
+  } as DOMStringList;
+
+  public constructor(private readonly stores: Map<string, Map<string, unknown>>) {}
+
+  public createObjectStore(storeName: string): IDBObjectStore {
+    const values = new Map<string, unknown>();
+    this.stores.set(storeName, values);
+    return new FakeObjectStore(values, () => {}) as unknown as IDBObjectStore;
+  }
+
+  public transaction(storeName: string): IDBTransaction {
+    const values = this.stores.get(storeName);
+    if (!values) throw new Error(`Object store ${storeName} não existe.`);
+    return new FakeTransaction(values) as unknown as IDBTransaction;
+  }
+
+  public close(): void {}
+}
+
+class FakeIndexedDb {
+  public shouldFailOpen = false;
+  private readonly stores = new Map<string, Map<string, unknown>>();
+
+  public open(): IDBOpenDBRequest {
+    const request = createMutableOpenRequest();
+    queueMicrotask(() => {
+      if (this.shouldFailOpen) {
+        request.error = new DOMException("IndexedDB indisponível", "AbortError");
+        request.onerror?.call(
+          request as unknown as IDBRequest<IDBDatabase>,
+          new Event("error"),
+        );
+        return;
+      }
+
+      const database = new FakeDatabase(this.stores);
+      request.result = database as unknown as IDBDatabase;
+      if (!database.objectStoreNames.contains(STORE_NAME)) {
+        request.onupgradeneeded?.call(
+          request as unknown as IDBOpenDBRequest,
+          new Event("upgradeneeded") as IDBVersionChangeEvent,
+        );
+      }
+      request.onsuccess?.call(
+        request as unknown as IDBRequest<IDBDatabase>,
+        new Event("success"),
+      );
+    });
+    return request as unknown as IDBOpenDBRequest;
+  }
+
+  public getStoredDraft(): unknown {
+    return this.stores.get(STORE_NAME)?.get(DRAFT_KEY);
+  }
+
+  public putStoredDraft(value: unknown): void {
+    const store = this.stores.get(STORE_NAME) ?? new Map<string, unknown>();
+    store.set(DRAFT_KEY, value);
+    this.stores.set(STORE_NAME, store);
+  }
+}
+
+const createDraft = (): WritableStockMovementDraft => ({
+  type: "PURCHASE_IN",
+  notes: "Observação",
+  selectedProductId: "product-1",
+  itemQuantity: "3",
+  items: [
+    {
+      quantity: 3,
+      productName: "Produto inline",
+      newProductData: {
+        name: "Produto inline",
+        image: {
+          name: "produto.png",
+          type: "image/png",
+          dataUrl: "data:image/png;base64,YQ==",
+        },
+      },
+    },
+  ],
+});
+
+let fakeIndexedDb: FakeIndexedDb;
+
+beforeEach(async () => {
+  fakeIndexedDb = new FakeIndexedDb();
+  Object.defineProperty(window, "indexedDB", {
+    configurable: true,
+    value: fakeIndexedDb,
+  });
+  vi.spyOn(console, "error").mockImplementation(() => {});
+  await clearStockMovementDraft();
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("create-stock-movement.storage", () => {
+  it("grava, lê e limpa draft em IndexedDB", async () => {
+    await writeStockMovementDraft(createDraft());
+
+    const draft = await readStockMovementDraft();
+
+    expect(draft).toMatchObject({
+      schemaVersion: STOCK_MOVEMENT_DRAFT_SCHEMA_VERSION,
+      type: "PURCHASE_IN",
+      notes: "Observação",
+      selectedProductId: "product-1",
+      itemQuantity: "3",
+    });
+    expect(typeof draft?.updatedAt).toBe("string");
+    expect(typeof draft?.runtimeId).toBe("string");
+
+    await clearStockMovementDraft();
+    expect(await readStockMovementDraft()).toBeNull();
+  });
+
+  it("ignora JSON inválido e remove o valor salvo", async () => {
+    fakeIndexedDb.putStoredDraft("{invalid-json");
+
+    expect(await readStockMovementDraft()).toBeNull();
+    expect(fakeIndexedDb.getStoredDraft()).toBeUndefined();
+  });
+
+  it("ignora draft com schema incompatível", async () => {
+    fakeIndexedDb.putStoredDraft({
+      schemaVersion: 999,
+      type: "PURCHASE_IN",
+      notes: "inválido",
+      items: [],
+      selectedProductId: "",
+      itemQuantity: "",
+      updatedAt: "2026-01-20T10:00:00.000Z",
+    });
+
+    expect(await readStockMovementDraft()).toBeNull();
+    expect(fakeIndexedDb.getStoredDraft()).toBeUndefined();
+  });
+
+  it("preserva imagem inline em dataUrl", async () => {
+    await writeStockMovementDraft(createDraft());
+
+    const draft = await readStockMovementDraft();
+    const image = draft?.items[0].newProductData?.image;
+
+    expect(image).toEqual({
+      name: "produto.png",
+      type: "image/png",
+      dataUrl: "data:image/png;base64,YQ==",
+    });
+  });
+
+  it("mantém fallback em memória quando IndexedDB falha", async () => {
+    fakeIndexedDb.shouldFailOpen = true;
+
+    await writeStockMovementDraft(createDraft());
+
+    const draft = await readStockMovementDraft();
+
+    expect(draft?.notes).toBe("Observação");
+    expect(console.error).toHaveBeenCalled();
+  });
+
+  it("identifica rascunho do runtime atual e de runtime anterior", async () => {
+    await writeStockMovementDraft(createDraft());
+    const currentRuntimeDraft = await readStockMovementDraft();
+
+    expect(currentRuntimeDraft).not.toBeNull();
+    expect(
+      isStockMovementDraftRecoveredFromPreviousRuntime(currentRuntimeDraft!),
+    ).toBe(false);
+
+    fakeIndexedDb.putStoredDraft({
+      ...currentRuntimeDraft!,
+      runtimeId: "runtime-anterior",
+    });
+
+    const previousRuntimeDraft = await readStockMovementDraft();
+    expect(previousRuntimeDraft).not.toBeNull();
+    expect(
+      isStockMovementDraftRecoveredFromPreviousRuntime(previousRuntimeDraft!),
+    ).toBe(true);
+  });
+
+  it("mantém compatibilidade com rascunho legado sem runtimeId", async () => {
+    fakeIndexedDb.putStoredDraft({
+      schemaVersion: STOCK_MOVEMENT_DRAFT_SCHEMA_VERSION,
+      type: "PURCHASE_IN",
+      notes: "legado",
+      items: [],
+      selectedProductId: "",
+      itemQuantity: "",
+      updatedAt: "2026-01-20T10:00:00.000Z",
+    });
+
+    const legacyDraft = await readStockMovementDraft();
+
+    expect(legacyDraft?.notes).toBe("legado");
+    expect(isStockMovementDraftRecoveredFromPreviousRuntime(legacyDraft!)).toBe(
+      true,
+    );
+  });
+});
diff --git a/app/(pages)/stock-movements/create/create-stock-movement.storage.ts b/app/(pages)/stock-movements/create/create-stock-movement.storage.ts
index 752e427..1df1e78 100644
--- a/app/(pages)/stock-movements/create/create-stock-movement.storage.ts
+++ b/app/(pages)/stock-movements/create/create-stock-movement.storage.ts
@@ -1,35 +1,280 @@
-import {
+import type {
   InlineProductImageData,
   StockMovementDraftItem,
 } from "./create-stock-movement.types";
-import { ManualMovementType } from "../stock-movements.constants";
+import { isManualMovementType } from "../stock-movements.constants";
+import type { ManualMovementType } from "../stock-movements.constants";
 
-const DRAFT_STORAGE_KEY = "stockMovementCreate:draft";
+const DRAFT_DATABASE_NAME = "stockshift";
+const DRAFT_DATABASE_VERSION = 1;
+const DRAFT_STORE_NAME = "stockMovementDrafts";
+const DRAFT_STORAGE_KEY = "current";
+export const STOCK_MOVEMENT_DRAFT_SCHEMA_VERSION = 1;
+
+const createStockMovementDraftRuntimeId = (): string => {
+  if (typeof globalThis.crypto?.randomUUID === "function") {
+    return globalThis.crypto.randomUUID();
+  }
+  const timestamp = Date.now().toString(36);
+  const randomSuffix = Math.random().toString(36).slice(2);
+  return `runtime-${timestamp}-${randomSuffix}`;
+};
+
+const STOCK_MOVEMENT_DRAFT_RUNTIME_ID = createStockMovementDraftRuntimeId();
 
 export interface StockMovementDraft {
+  schemaVersion: typeof STOCK_MOVEMENT_DRAFT_SCHEMA_VERSION;
+  updatedAt: string;
   type: ManualMovementType;
   notes: string;
   items: StockMovementDraftItem[];
   selectedProductId: string;
   itemQuantity: string;
   inlineProductBarcode?: string;
+  runtimeId?: string;
 }
 
-export const readStockMovementDraft = (): StockMovementDraft | null => {
+export type WritableStockMovementDraft = Omit<
+  StockMovementDraft,
+  "schemaVersion" | "updatedAt"
+> &
+  Partial<Pick<StockMovementDraft, "schemaVersion" | "updatedAt">>;
+
+let fallbackDraft: StockMovementDraft | null = null;
+
+const logDraftStorageError = (operation: string, error: unknown): void => {
+  console.error(`Falha ao ${operation} rascunho da movimentação`, error);
+};
+
+const getBrowserIndexedDb = (): IDBFactory | null => {
   if (typeof window === "undefined") return null;
-  const rawDraft = window.sessionStorage.getItem(DRAFT_STORAGE_KEY);
-  if (!rawDraft) return null;
-  return JSON.parse(rawDraft) as StockMovementDraft;
+  return window.indexedDB ?? null;
+};
+
+const createRequestError = (operation: string, error: unknown): Error => {
+  if (error instanceof Error) return error;
+  return new Error(`Falha ao ${operation} rascunho da movimentação.`);
+};
+
+const openDraftDatabase = (): Promise<IDBDatabase> => {
+  const indexedDb = getBrowserIndexedDb();
+  if (!indexedDb) {
+    return Promise.reject(new Error("IndexedDB indisponível para rascunhos."));
+  }
+
+  return new Promise((resolve, reject) => {
+    const request = indexedDb.open(
+      DRAFT_DATABASE_NAME,
+      DRAFT_DATABASE_VERSION,
+    );
+    request.onerror = () =>
+      reject(createRequestError("abrir", request.error));
+    request.onupgradeneeded = () => {
+      const database = request.result;
+      if (!database.objectStoreNames.contains(DRAFT_STORE_NAME)) {
+        database.createObjectStore(DRAFT_STORE_NAME);
+      }
+    };
+    request.onsuccess = () => resolve(request.result);
+  });
+};
+
+const readDraftFromIndexedDb = async (): Promise<unknown> => {
+  const database = await openDraftDatabase();
+  return new Promise((resolve, reject) => {
+    const transaction = database.transaction(DRAFT_STORE_NAME, "readonly");
+    const store = transaction.objectStore(DRAFT_STORE_NAME);
+    const request = store.get(DRAFT_STORAGE_KEY);
+    request.onerror = () => reject(createRequestError("ler", request.error));
+    request.onsuccess = () => resolve(request.result);
+    transaction.oncomplete = () => database.close();
+    transaction.onabort = () => {
+      database.close();
+      reject(createRequestError("ler", transaction.error));
+    };
+  });
+};
+
+const writeDraftToIndexedDb = async (
+  draft: StockMovementDraft,
+): Promise<void> => {
+  const database = await openDraftDatabase();
+  return new Promise((resolve, reject) => {
+    const transaction = database.transaction(DRAFT_STORE_NAME, "readwrite");
+    const store = transaction.objectStore(DRAFT_STORE_NAME);
+    const request = store.put(draft, DRAFT_STORAGE_KEY);
+    request.onerror = () => reject(createRequestError("gravar", request.error));
+    transaction.oncomplete = () => {
+      database.close();
+      resolve();
+    };
+    transaction.onabort = () => {
+      database.close();
+      reject(createRequestError("gravar", transaction.error));
+    };
+  });
+};
+
+const clearDraftFromIndexedDb = async (): Promise<void> => {
+  const database = await openDraftDatabase();
+  return new Promise((resolve, reject) => {
+    const transaction = database.transaction(DRAFT_STORE_NAME, "readwrite");
+    const store = transaction.objectStore(DRAFT_STORE_NAME);
+    const request = store.delete(DRAFT_STORAGE_KEY);
+    request.onerror = () => reject(createRequestError("limpar", request.error));
+    transaction.oncomplete = () => {
+      database.close();
+      resolve();
+    };
+    transaction.onabort = () => {
+      database.close();
+      reject(createRequestError("limpar", transaction.error));
+    };
+  });
+};
+
+const isRecord = (value: unknown): value is Record<string, unknown> => {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+};
+
+const isOptionalString = (value: unknown): value is string | undefined => {
+  return value === undefined || typeof value === "string";
+};
+
+const isOptionalBoolean = (value: unknown): value is boolean | undefined => {
+  return value === undefined || typeof value === "boolean";
+};
+
+const isOptionalNumber = (value: unknown): value is number | undefined => {
+  return value === undefined || typeof value === "number";
+};
+
+const isInlineProductImageData = (
+  value: unknown,
+): value is InlineProductImageData => {
+  return (
+    isRecord(value) &&
+    typeof value.name === "string" &&
+    typeof value.type === "string" &&
+    typeof value.dataUrl === "string"
+  );
+};
+
+const isInlineProductData = (
+  value: unknown,
+): value is StockMovementDraftItem["newProductData"] => {
+  return (
+    isRecord(value) &&
+    typeof value.name === "string" &&
+    isOptionalString(value.description) &&
+    isOptionalString(value.barcode) &&
+    isOptionalString(value.categoryId) &&
+    isOptionalString(value.brandId) &&
+    isOptionalBoolean(value.isKit) &&
+    isOptionalBoolean(value.hasExpiration) &&
+    isOptionalBoolean(value.active) &&
+    isOptionalString(value.manufacturedDate) &&
+    isOptionalString(value.expirationDate) &&
+    isOptionalNumber(value.costPrice) &&
+    isOptionalNumber(value.sellingPrice) &&
+    (value.image === undefined || isInlineProductImageData(value.image))
+  );
+};
+
+const isDraftItem = (value: unknown): value is StockMovementDraftItem => {
+  return (
+    isRecord(value) &&
+    typeof value.quantity === "number" &&
+    Number.isFinite(value.quantity) &&
+    isOptionalString(value.productId) &&
+    isOptionalString(value.productName) &&
+    isOptionalString(value.manufacturedDate) &&
+    isOptionalString(value.expirationDate) &&
+    isOptionalNumber(value.costPrice) &&
+    isOptionalNumber(value.sellingPrice) &&
+    (value.newProductData === undefined || isInlineProductData(value.newProductData))
+  );
+};
+
+const parseStoredDraft = (storedDraft: unknown): unknown => {
+  if (typeof storedDraft !== "string") return storedDraft;
+  try {
+    return JSON.parse(storedDraft) as unknown;
+  } catch {
+    return null;
+  }
 };
 
-export const writeStockMovementDraft = (draft: StockMovementDraft): void => {
-  if (typeof window === "undefined") return;
-  window.sessionStorage.setItem(DRAFT_STORAGE_KEY, JSON.stringify(draft));
+const normalizeStoredDraft = (
+  storedDraft: unknown,
+): StockMovementDraft | null => {
+  const parsedDraft = parseStoredDraft(storedDraft);
+  if (!isRecord(parsedDraft)) return null;
+  if (parsedDraft.schemaVersion !== STOCK_MOVEMENT_DRAFT_SCHEMA_VERSION) return null;
+  if (!isManualMovementType(String(parsedDraft.type))) return null;
+  if (typeof parsedDraft.updatedAt !== "string") return null;
+  if (typeof parsedDraft.notes !== "string") return null;
+  if (!Array.isArray(parsedDraft.items) || !parsedDraft.items.every(isDraftItem)) {
+    return null;
+  }
+  if (typeof parsedDraft.selectedProductId !== "string") return null;
+  if (typeof parsedDraft.itemQuantity !== "string") return null;
+  if (!isOptionalString(parsedDraft.inlineProductBarcode)) return null;
+  if (!isOptionalString(parsedDraft.runtimeId)) return null;
+  return parsedDraft as unknown as StockMovementDraft;
 };
 
-export const clearStockMovementDraft = (): void => {
-  if (typeof window === "undefined") return;
-  window.sessionStorage.removeItem(DRAFT_STORAGE_KEY);
+const buildPersistedDraft = (
+  draft: WritableStockMovementDraft,
+): StockMovementDraft => ({
+  ...draft,
+  schemaVersion: STOCK_MOVEMENT_DRAFT_SCHEMA_VERSION,
+  updatedAt: new Date().toISOString(),
+  runtimeId: STOCK_MOVEMENT_DRAFT_RUNTIME_ID,
+});
+
+export const isStockMovementDraftRecoveredFromPreviousRuntime = (
+  draft: StockMovementDraft,
+): boolean => draft.runtimeId !== STOCK_MOVEMENT_DRAFT_RUNTIME_ID;
+
+export const readStockMovementDraft =
+  async (): Promise<StockMovementDraft | null> => {
+    try {
+      const storedDraft = await readDraftFromIndexedDb();
+      if (storedDraft === undefined) return fallbackDraft;
+
+      const draft = normalizeStoredDraft(storedDraft);
+      if (!draft) {
+        await clearStockMovementDraft();
+        return null;
+      }
+      fallbackDraft = draft;
+      return draft;
+    } catch (error) {
+      logDraftStorageError("ler", error);
+      return fallbackDraft;
+    }
+  };
+
+export const writeStockMovementDraft = async (
+  draft: WritableStockMovementDraft,
+): Promise<void> => {
+  const persistedDraft = buildPersistedDraft(draft);
+  fallbackDraft = persistedDraft;
+  try {
+    await writeDraftToIndexedDb(persistedDraft);
+  } catch (error) {
+    logDraftStorageError("gravar", error);
+  }
+};
+
+export const clearStockMovementDraft = async (): Promise<void> => {
+  fallbackDraft = null;
+  try {
+    await clearDraftFromIndexedDb();
+  } catch (error) {
+    logDraftStorageError("limpar", error);
+  }
 };
 
 export const fileToInlineProductImage = (
diff --git a/app/(pages)/stock-movements/create/create-stock-movement.types.ts b/app/(pages)/stock-movements/create/create-stock-movement.types.ts
index 712aed6..3c14b62 100644
--- a/app/(pages)/stock-movements/create/create-stock-movement.types.ts
+++ b/app/(pages)/stock-movements/create/create-stock-movement.types.ts
@@ -110,6 +110,7 @@ export interface CreateStockMovementViewProps {
   products: StockMovementProductOption[];
   isLoadingProducts: boolean;
   isSubmitting: boolean;
+  submittingStep: string | null;
   isFooterVisible: boolean;
 
   // Item builder state
diff --git a/app/(pages)/stock-movements/create/create-stock-movement.view.tsx b/app/(pages)/stock-movements/create/create-stock-movement.view.tsx
index 9eb961e..bed48c4 100644
--- a/app/(pages)/stock-movements/create/create-stock-movement.view.tsx
+++ b/app/(pages)/stock-movements/create/create-stock-movement.view.tsx
@@ -38,55 +38,31 @@ import { StockMovementItemsList } from "./stock-movement-items-list.view";
 import {
   MANUAL_MOVEMENT_TYPE_LABELS,
   MANUAL_OUT_MOVEMENT_TYPES,
+  ManualMovementType,
 } from "../stock-movements.constants";
 
-export function CreateStockMovementView({
-  form,
-  onSubmit,
-  isLoadingProducts,
-  isSubmitting,
-  isFooterVisible,
-  itemQuantity,
-  selectedProductId,
-  productSearchQuery,
-  productOptions,
-  isProductOptionsOpen,
-  isProductSearchLoading,
-  addItemError,
-  isScannerOpen,
-  onProductSearchChange,
-  onProductSearchFocus,
-  onProductSearchBlur,
-  onProductSelect,
-  onProductClear,
-  onQuantityChange,
-  onAddItem,
-  onCreateNewProduct,
-  onEditNewProductItem,
-  onEditExistingProductBatchData,
-  onScannerOpenChange,
-  onBarcodeScan,
-  onRemoveItem,
-  existingProductBatchForm,
-  onExistingProductBatchOpenChange,
-  onExistingProductBatchQuantityChange,
-  onExistingProductBatchQuantityIncrement,
-  onExistingProductBatchQuantityDecrement,
-  onExistingProductBatchManufacturedDateChange,
-  onExistingProductBatchExpirationDateChange,
-  onExistingProductBatchCostPriceChange,
-  onExistingProductBatchSellingPriceChange,
-  onApplyExistingProductCostPriceSuggestion,
-  onApplyExistingProductSalePriceSuggestion,
-  onConfirmExistingProductBatchData,
-  existingProductCostPriceSuggestion,
-  existingProductSalePriceSuggestion,
-  isExistingProductPriceSuggestionLoading,
-  shouldShowMissingCostPriceSuggestion,
-  shouldShowMissingSalePriceSuggestion,
-  existingProductProfitSummary,
-  items,
-}: CreateStockMovementViewProps) {
+interface CreateStockMovementViewState extends CreateStockMovementViewProps {
+  isInMovement: boolean;
+  isNotesOpen: boolean;
+  isOutMovement: boolean;
+  notesValue: string | undefined;
+  selectedType: ManualMovementType | undefined;
+  setIsNotesOpen: (open: boolean) => void;
+  totalQuantity: number;
+  submittingStep: string | null;
+}
+
+export function CreateStockMovementView(props: CreateStockMovementViewProps) {
+  const {
+    form,
+    items,
+    isSubmitting,
+    onEditExistingProductBatchData,
+    onEditNewProductItem,
+    onRemoveItem,
+    onSubmit,
+    submittingStep,
+  } = props;
   const [isNotesOpen, setIsNotesOpen] = useState(false);
 
   const selectedType = form.watch("type");
@@ -98,9 +74,78 @@ export function CreateStockMovementView({
       )
     : false;
   const isInMovement = Boolean(selectedType) && !isOutMovement;
+  const viewState: CreateStockMovementViewState = {
+    ...props,
+    isInMovement,
+    isNotesOpen,
+    isOutMovement,
+    notesValue,
+    selectedType,
+    setIsNotesOpen,
+    submittingStep,
+    totalQuantity,
+  };
 
   return (
     <PageContainer bottomPadding="fixed-bar" className="pb-40 md:pb-28">
+      <StockMovementSubmitOverlay
+        isSubmitting={isSubmitting}
+        submittingStep={submittingStep}
+      />
+      <StockMovementCreateOverlays viewState={viewState} />
+      <StockMovementNotesButton viewState={viewState} />
+
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          <StockMovementNotesModal viewState={viewState} />
+          <StockMovementTypeNotice viewState={viewState} />
+          <StockMovementItemBuilder viewState={viewState} />
+          <StockMovementItemsList
+            items={items}
+            isInMovement={isInMovement}
+            itemsErrorMessage={form.formState.errors.items?.message}
+            onEditNewProductItem={onEditNewProductItem}
+            onEditExistingProductBatchData={onEditExistingProductBatchData}
+            onRemoveItem={onRemoveItem}
+          />
+          <StockMovementSubmitBar viewState={viewState} />
+        </form>
+      </Form>
+    </PageContainer>
+  );
+}
+
+function StockMovementCreateOverlays({
+  viewState,
+}: {
+  viewState: CreateStockMovementViewState;
+}) {
+  const {
+    existingProductBatchForm,
+    onApplyExistingProductCostPriceSuggestion,
+    onApplyExistingProductSalePriceSuggestion,
+    onBarcodeScan,
+    onConfirmExistingProductBatchData,
+    onExistingProductBatchCostPriceChange,
+    onExistingProductBatchExpirationDateChange,
+    onExistingProductBatchManufacturedDateChange,
+    onExistingProductBatchOpenChange,
+    onExistingProductBatchQuantityChange,
+    onExistingProductBatchQuantityDecrement,
+    onExistingProductBatchQuantityIncrement,
+    onExistingProductBatchSellingPriceChange,
+    existingProductCostPriceSuggestion,
+    existingProductProfitSummary,
+    existingProductSalePriceSuggestion,
+    isExistingProductPriceSuggestionLoading,
+    isScannerOpen,
+    onScannerOpenChange,
+    shouldShowMissingCostPriceSuggestion,
+    shouldShowMissingSalePriceSuggestion,
+  } = viewState;
+
+  return (
+    <>
       <StockMovementScanner
         open={isScannerOpen}
         onOpenChange={onScannerOpenChange}
@@ -126,351 +171,488 @@ export function CreateStockMovementView({
         shouldShowMissingSalePriceSuggestion={shouldShowMissingSalePriceSuggestion}
         profitSummary={existingProductProfitSummary}
       />
+    </>
+  );
+}
+
+function StockMovementNotesButton({
+  viewState,
+}: {
+  viewState: CreateStockMovementViewState;
+}) {
+  const { notesValue, setIsNotesOpen } = viewState;
+
+  return (
+    <div className="mb-6 flex justify-end">
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        onClick={() => setIsNotesOpen(true)}
+        className={`h-8 gap-2 rounded-[4px] border text-[10px] font-bold uppercase tracking-wide ${
+          notesValue
+            ? "border-blue-900/30 bg-blue-600/10 text-blue-400 hover:bg-blue-600/20 hover:text-blue-300"
+            : "border-neutral-800 text-neutral-500 hover:bg-neutral-800 hover:text-neutral-300"
+        }`}
+      >
+        <FileText className="size-3.5" />
+        {notesValue ? "Editar Obs." : "Observações"}
+      </Button>
+    </div>
+  );
+}
 
-      <div className="mb-6 flex justify-end">
+function StockMovementNotesModal({
+  viewState,
+}: {
+  viewState: CreateStockMovementViewState;
+}) {
+  const { form, isNotesOpen, setIsNotesOpen } = viewState;
+
+  return (
+    <ResponsiveModal
+      open={isNotesOpen}
+      onOpenChange={setIsNotesOpen}
+      title="Observações"
+      description="Adicione informações adicionais ou o motivo desta movimentação."
+      footer={
         <Button
           type="button"
-          variant="ghost"
-          size="sm"
-          onClick={() => setIsNotesOpen(true)}
-          className={`h-8 gap-2 rounded-[4px] border text-[10px] font-bold uppercase tracking-wide ${
-            notesValue
-              ? "border-blue-900/30 bg-blue-600/10 text-blue-400 hover:bg-blue-600/20 hover:text-blue-300"
-              : "border-neutral-800 text-neutral-500 hover:bg-neutral-800 hover:text-neutral-300"
-          }`}
+          onClick={() => setIsNotesOpen(false)}
+          className="w-full rounded-[4px] bg-neutral-800 font-bold uppercase tracking-wide text-white hover:bg-neutral-700 md:w-auto"
         >
-          <FileText className="size-3.5" />
-          {notesValue ? "Editar Obs." : "Observações"}
+          Confirmar
         </Button>
-      </div>
-
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-          {/* ── Notes Modal ── */}
-          <ResponsiveModal
-            open={isNotesOpen}
-            onOpenChange={setIsNotesOpen}
-            title="Observações"
-            description="Adicione informações adicionais ou o motivo desta movimentação."
-            footer={
-              <Button
-                type="button"
-                onClick={() => setIsNotesOpen(false)}
-                className="w-full rounded-[4px] bg-neutral-800 font-bold uppercase tracking-wide text-white hover:bg-neutral-700 md:w-auto"
-              >
-                Confirmar
-              </Button>
-            }
-          >
-            <div className="pb-4 pt-2">
-              <FormField
-                control={form.control}
-                name="notes"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormControl>
-                      <Textarea
-                        placeholder="Ex: Consumo na produção do dia, ajuste de inventário…"
-                        className="min-h-[150px] w-full rounded-[4px] border-2 border-neutral-800 bg-neutral-900 text-sm text-white focus:border-blue-600"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage className="text-xs text-rose-500" />
-                  </FormItem>
-                )}
-              />
-            </div>
-          </ResponsiveModal>
-
-          {/* ── Selected type indicator ── */}
-          {selectedType && (
-            <div
-              className={`flex items-center gap-3 rounded-[4px] border px-4 py-3 ${
-                isOutMovement
-                  ? "border-rose-900/30 bg-rose-950/10"
-                  : "border-emerald-900/30 bg-emerald-950/10"
-              }`}
-            >
-              {isOutMovement ? (
-                <TrendingDown
-                  className="size-4 flex-shrink-0 text-rose-500"
-                  strokeWidth={2}
-                />
-              ) : (
-                <TrendingUp
-                  className="size-4 flex-shrink-0 text-emerald-500"
-                  strokeWidth={2}
+      }
+    >
+      <div className="pb-4 pt-2">
+        <FormField
+          control={form.control}
+          name="notes"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Textarea
+                  placeholder="Ex: Consumo na produção do dia, ajuste de inventário…"
+                  className="min-h-[150px] w-full rounded-[4px] border-2 border-neutral-800 bg-neutral-900 text-sm text-white focus:border-blue-600"
+                  {...field}
                 />
-              )}
-              <p
-                className={`text-xs font-medium ${
-                  isOutMovement
-                    ? "text-rose-400"
-                    : "text-emerald-400"
-                }`}
-              >
-                <span className="font-bold uppercase">
-                  {MANUAL_MOVEMENT_TYPE_LABELS[selectedType]}
-                </span>{" "}
-                -{" "}
-                {isOutMovement
-                  ? "As quantidades serão deduzidas do estoque usando FIFO (lote mais antigo primeiro)."
-                  : "Um novo lote será criado ou adicionado para o produto no warehouse atual."}
-              </p>
-            </div>
+              </FormControl>
+              <FormMessage className="text-xs text-rose-500" />
+            </FormItem>
           )}
+        />
+      </div>
+    </ResponsiveModal>
+  );
+}
 
-          {/* ── Item Builder ── */}
-          <FormSection
-            icon={Package}
-            iconColor="text-blue-400"
-            title="Selecionar produto"
-            description="Busque ou escaneie o produto para adicionar à movimentação"
-          >
-            <div className="space-y-4">
-              <div className="flex flex-col gap-4 md:flex-row">
-                <div className="min-w-0 flex-1 space-y-2">
-                  <label
-                    htmlFor="stock-movement-product-search"
-                    className="text-xs font-bold text-neutral-400"
-                  >
-                    PRODUTO
-                  </label>
-                  <div className="relative">
-                    <div className="flex gap-2">
-                      <div className="relative flex-1">
-                        <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-neutral-500" />
-                        <Input
-                          id="stock-movement-product-search"
-                          value={productSearchQuery}
-                          onChange={(event) =>
-                            onProductSearchChange(event.target.value)
-                          }
-                          onFocus={onProductSearchFocus}
-                          onBlur={onProductSearchBlur}
-                          disabled={isLoadingProducts}
-                          placeholder={
-                            isLoadingProducts
-                              ? "Carregando produtos…"
-                              : "Pesquisar produto por nome, SKU ou código"
-                          }
-                          className="h-10 w-full rounded-[4px] border-2 border-neutral-800 bg-neutral-900 pl-9 pr-9 text-sm text-white focus:border-blue-600 disabled:opacity-40"
-                        />
-                        {productSearchQuery && (
-                          <Button
-                            type="button"
-                            variant="ghost"
-                            onClick={onProductClear}
-                            className="absolute right-1 top-1 size-8 rounded-[4px] p-0 text-neutral-500 hover:bg-neutral-800 hover:text-white"
-                            aria-label="Limpar produto"
-                          >
-                            <X className="size-4" />
-                          </Button>
-                        )}
-                      </div>
-                      <Button
-                        type="button"
-                        variant="outline"
-                        onClick={() => onScannerOpenChange(true)}
-                        className="size-10 shrink-0 rounded-[4px] border-neutral-800 bg-neutral-900 p-0 hover:bg-neutral-800 hover:text-white"
-                        aria-label="Ler código de barras"
-                      >
-                        <ScanLine className="size-4" strokeWidth={2.5} />
-                      </Button>
-                    </div>
+function StockMovementTypeNotice({
+  viewState,
+}: {
+  viewState: CreateStockMovementViewState;
+}) {
+  const { isOutMovement, selectedType } = viewState;
+  if (!selectedType) return null;
 
-                    {isProductOptionsOpen &&
-                      (isProductSearchLoading || productOptions.length > 0) && (
-                        <div className="absolute left-0 right-12 top-12 z-30 overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717]">
-                          {isProductSearchLoading && (
-                            <div className="flex h-10 items-center gap-2 px-3 text-xs text-neutral-500">
-                              <Loader2 className="size-3.5 animate-spin" />
-                              Buscando produtos…
-                            </div>
-                          )}
-                          {!isProductSearchLoading &&
-                            productOptions.map((product) => (
-                              <Button
-                                key={product.id}
-                                type="button"
-                                variant="ghost"
-                                onMouseDown={(event) => event.preventDefault()}
-                                onClick={() => onProductSelect(product)}
-                                className="flex h-auto w-full items-center justify-start gap-3 rounded-none border-b border-neutral-800 px-3 py-2 text-left hover:bg-neutral-800 hover:text-white last:border-b-0"
-                              >
-                                {product.imageUrl ? (
-                                  <span
-                                    role="img"
-                                    aria-label={`Foto de ${product.name}`}
-                                    className="size-10 shrink-0 rounded-[4px] border border-neutral-800 bg-neutral-900 bg-cover bg-center"
-                                    style={{
-                                      backgroundImage: `url("${product.imageUrl}")`,
-                                    }}
-                                  />
-                                ) : (
-                                  <span
-                                    role="img"
-                                    aria-label="Produto sem foto"
-                                    className="flex size-10 shrink-0 items-center justify-center rounded-[4px] border border-neutral-800 bg-neutral-900 text-neutral-500"
-                                  >
-                                    <Package className="size-4" />
-                                  </span>
-                                )}
-                                <span className="min-w-0">
-                                  <span className="block truncate text-sm font-semibold text-white">
-                                    {product.name}
-                                  </span>
-                                  <span className="mt-0.5 block truncate text-[10px] font-mono uppercase tracking-wide text-neutral-500">
-                                    {product.sku || "SEM SKU"}
-                                    {product.barcode
-                                      ? ` - ${product.barcode}`
-                                      : ""}
-                                  </span>
-                                </span>
-                              </Button>
-                            ))}
-                        </div>
-                      )}
-                  </div>
-                </div>
+  return (
+    <div
+      className={`flex items-center gap-3 rounded-[4px] border px-4 py-3 ${
+        isOutMovement
+          ? "border-rose-900/30 bg-rose-950/10"
+          : "border-emerald-900/30 bg-emerald-950/10"
+      }`}
+    >
+      {isOutMovement ? (
+        <TrendingDown className="size-4 flex-shrink-0 text-rose-500" />
+      ) : (
+        <TrendingUp className="size-4 flex-shrink-0 text-emerald-500" />
+      )}
+      <p className={`text-xs font-medium ${isOutMovement ? "text-rose-400" : "text-emerald-400"}`}>
+        <span className="font-bold uppercase">
+          {MANUAL_MOVEMENT_TYPE_LABELS[selectedType]}
+        </span>{" "}
+        -{" "}
+        {isOutMovement
+          ? "As quantidades serão deduzidas do estoque usando FIFO (lote mais antigo primeiro)."
+          : "Um novo lote será criado ou adicionado para o produto no warehouse atual."}
+      </p>
+    </div>
+  );
+}
 
-                {!isInMovement ? (
-                  <div className="space-y-2 md:w-48">
-                    <label
-                      htmlFor="stock-movement-item-quantity"
-                      className="text-xs font-bold text-neutral-400"
-                    >
-                      QUANTIDADE
-                    </label>
-                    <div className="flex items-center gap-3">
-                      <NumberInput
-                        id="stock-movement-item-quantity"
-                        value={itemQuantity ? Number(itemQuantity) : undefined}
-                        onValueChange={(val) =>
-                          onQuantityChange(val !== undefined ? String(val) : "")
-                        }
-                        className="h-10 w-full rounded-[4px] border-2 border-neutral-800 bg-neutral-900 font-mono text-sm tracking-tighter text-white focus:border-blue-600"
-                        placeholder="0"
-                      />
-                      <Button
-                        type="button"
-                        onClick={onAddItem}
-                        className="h-10 flex-shrink-0 rounded-[4px] bg-blue-600 px-5 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
-                      >
-                        <Plus className="mr-2 size-4" strokeWidth={2.5} />
-                        Add
-                      </Button>
-                    </div>
-                  </div>
-                ) : (
-                  selectedProductId && (
-                    <div className="flex items-end">
-                      <Button
-                        type="button"
-                        onClick={onAddItem}
-                        className="h-10 w-full flex-shrink-0 rounded-[4px] bg-blue-600 px-5 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 md:w-auto"
-                      >
-                        Preencher dados do lote
-                      </Button>
-                    </div>
-                  )
-                )}
-              </div>
-              <div className="flex flex-col justify-end gap-2 sm:flex-row">
-                {!isOutMovement && (
-                  <PermissionGate permission="products:create">
-                    <Button
-                      type="button"
-                      variant="default"
-                      onClick={onCreateNewProduct}
-                      className="h-9 rounded-[4px] border-white bg-white text-xs font-bold uppercase tracking-wide text-black hover:bg-neutral-200 hover:text-black"
-                    >
-                      <Plus className="mr-2 size-3.5" strokeWidth={2.5} />
-                      Criar Novo Produto
-                    </Button>
-                  </PermissionGate>
-                )}
-              </div>
+function StockMovementItemBuilder({
+  viewState,
+}: {
+  viewState: CreateStockMovementViewState;
+}) {
+  return (
+    <FormSection
+      icon={Package}
+      iconColor="text-blue-400"
+      title="Selecionar produto"
+      description="Busque ou escaneie o produto para adicionar à movimentação"
+    >
+      <div className="space-y-4">
+        <StockMovementProductSearch viewState={viewState} />
+        <StockMovementCreateProductAction viewState={viewState} />
+        <StockMovementAddItemError viewState={viewState} />
+      </div>
+    </FormSection>
+  );
+}
 
-              {addItemError && (
-                <div className="flex items-center gap-2 rounded-[4px] border border-rose-900/30 bg-rose-950/10 px-4 py-3">
-                  <AlertCircle
-                    className="size-4 flex-shrink-0 text-rose-500"
-                    strokeWidth={2}
-                  />
-                  <p className="text-xs font-medium text-rose-400">
-                    {addItemError}
-                  </p>
-                </div>
-              )}
-            </div>
-          </FormSection>
-          {/* ── Items List ── */}
-          <StockMovementItemsList
-            items={items}
-            isInMovement={isInMovement}
-            itemsErrorMessage={form.formState.errors.items?.message}
-            onEditNewProductItem={onEditNewProductItem}
-            onEditExistingProductBatchData={onEditExistingProductBatchData}
-            onRemoveItem={onRemoveItem}
-          />
+function StockMovementProductSearch({
+  viewState,
+}: {
+  viewState: CreateStockMovementViewState;
+}) {
+  const {
+    isInMovement,
+    isLoadingProducts,
+    isProductOptionsOpen,
+    isProductSearchLoading,
+    itemQuantity,
+    onAddItem,
+    onProductClear,
+    onProductSearchBlur,
+    onProductSearchChange,
+    onProductSearchFocus,
+    onProductSelect,
+    onQuantityChange,
+    onScannerOpenChange,
+    productOptions,
+    productSearchQuery,
+    selectedProductId,
+  } = viewState;
 
-          {/* ── Fixed Bottom Bar ── */}
-          <FixedBottomBar
-            className={cn(
-              "bg-[#0A0A0A]/95 backdrop-blur-sm",
-              isFooterVisible
-                ? "pointer-events-auto translate-y-0"
-                : "pointer-events-none translate-y-[calc(100%+1rem)]",
-            )}
-          >
-            <div className="mx-auto flex w-full max-w-7xl flex-col items-stretch gap-3 md:flex-row md:items-center md:justify-between">
-              <div className="hidden items-center gap-4 text-xs text-neutral-500 sm:flex">
-                <span>
-                  <span className="font-mono font-bold tracking-tighter text-neutral-300">
-                    {items.length}
-                  </span>{" "}
-                  {items.length === 1 ? "produto" : "produtos"}
-                </span>
-                {items.length > 0 && (
-                  <span>
-                    Total:{" "}
-                    <span className="font-mono font-bold tracking-tighter text-neutral-300">
-                      {totalQuantity}
-                    </span>{" "}
-                    un.
-                  </span>
-                )}
-                {selectedType && (
-                  <span className="font-bold uppercase tracking-widest text-neutral-400">
-                    {MANUAL_MOVEMENT_TYPE_LABELS[selectedType]}
-                  </span>
-                )}
-              </div>
-              <div className="flex w-full flex-col items-stretch gap-3 md:w-auto md:flex-row md:items-center">
+  return (
+    <div className="flex flex-col gap-4 md:flex-row">
+      <div className="min-w-0 flex-1 space-y-2">
+        <label htmlFor="stock-movement-product-search" className="text-xs font-bold text-neutral-400">
+          PRODUTO
+        </label>
+        <div className="relative">
+          <div className="flex gap-2">
+            <div className="relative flex-1">
+              <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-neutral-500" />
+              <Input
+                id="stock-movement-product-search"
+                value={productSearchQuery}
+                onChange={(event) => onProductSearchChange(event.target.value)}
+                onFocus={onProductSearchFocus}
+                onBlur={onProductSearchBlur}
+                disabled={isLoadingProducts}
+                placeholder={isLoadingProducts ? "Carregando produtos…" : "Pesquisar produto por nome, SKU ou código"}
+                className="h-10 w-full rounded-[4px] border-2 border-neutral-800 bg-neutral-900 pl-9 pr-9 text-sm text-white focus:border-blue-600 disabled:opacity-40"
+              />
+              {productSearchQuery ? (
                 <Button
                   type="button"
-                  variant="outline"
-                  onClick={() => window.history.back()}
-                  className="h-10 w-full rounded-[4px] border-neutral-800 text-xs font-bold uppercase tracking-wide md:w-auto"
+                  variant="ghost"
+                  onClick={onProductClear}
+                  className="absolute right-1 top-1 size-8 rounded-[4px] p-0 text-neutral-500 hover:bg-neutral-800 hover:text-white"
+                  aria-label="Limpar produto"
                 >
-                  CANCELAR
+                  <X className="size-4" />
                 </Button>
-                <PermissionGate permission="stock_movements:create">
-                  <Button
-                    type="submit"
-                    disabled={isSubmitting || isLoadingProducts}
-                    className="h-10 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 md:w-auto"
-                  >
-                    <Save className="mr-2 size-4" strokeWidth={2} />
-                    {isSubmitting ? "REGISTRANDO…" : "REGISTRAR MOVIMENTAÇÃO"}
-                  </Button>
-                </PermissionGate>
-              </div>
+              ) : null}
             </div>
-          </FixedBottomBar>
-        </form>
-      </Form>
-    </PageContainer>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onScannerOpenChange(true)}
+              className="size-10 shrink-0 rounded-[4px] border-neutral-800 bg-neutral-900 p-0 hover:bg-neutral-800 hover:text-white"
+              aria-label="Ler código de barras"
+            >
+              <ScanLine className="size-4" strokeWidth={2.5} />
+            </Button>
+          </div>
+          <StockMovementProductOptions
+            isOpen={isProductOptionsOpen}
+            isLoading={isProductSearchLoading}
+            products={productOptions}
+            onProductSelect={onProductSelect}
+          />
+        </div>
+      </div>
+      <StockMovementQuantityAction
+        isInMovement={isInMovement}
+        itemQuantity={itemQuantity}
+        selectedProductId={selectedProductId}
+        onAddItem={onAddItem}
+        onQuantityChange={onQuantityChange}
+      />
+    </div>
+  );
+}
+
+function StockMovementProductOptions({
+  isOpen,
+  isLoading,
+  products,
+  onProductSelect,
+}: {
+  isOpen: boolean;
+  isLoading: boolean;
+  products: CreateStockMovementViewProps["productOptions"];
+  onProductSelect: CreateStockMovementViewProps["onProductSelect"];
+}) {
+  if (!isOpen || (!isLoading && products.length === 0)) return null;
+
+  return (
+    <div className="absolute left-0 right-12 top-12 z-30 overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717]">
+      {isLoading ? (
+        <div className="flex h-10 items-center gap-2 px-3 text-xs text-neutral-500">
+          <Loader2 className="size-3.5 animate-spin" />
+          Buscando produtos…
+        </div>
+      ) : (
+        products.map((product) => (
+          <Button
+            key={product.id}
+            type="button"
+            variant="ghost"
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={() => onProductSelect(product)}
+            className="flex h-auto w-full items-center justify-start gap-3 rounded-none border-b border-neutral-800 px-3 py-2 text-left hover:bg-neutral-800 hover:text-white last:border-b-0"
+          >
+            <StockMovementProductOptionImage product={product} />
+            <span className="min-w-0">
+              <span className="block truncate text-sm font-semibold text-white">
+                {product.name}
+              </span>
+              <span className="mt-0.5 block truncate font-mono text-[10px] uppercase tracking-wide text-neutral-500">
+                {product.sku || "SEM SKU"}
+                {product.barcode ? ` - ${product.barcode}` : ""}
+              </span>
+            </span>
+          </Button>
+        ))
+      )}
+    </div>
+  );
+}
+
+function StockMovementProductOptionImage({
+  product,
+}: {
+  product: CreateStockMovementViewProps["productOptions"][number];
+}) {
+  if (product.imageUrl) {
+    return (
+      <span
+        role="img"
+        aria-label={`Foto de ${product.name}`}
+        className="size-10 shrink-0 rounded-[4px] border border-neutral-800 bg-neutral-900 bg-cover bg-center"
+        style={{ backgroundImage: `url("${product.imageUrl}")` }}
+      />
+    );
+  }
+
+  return (
+    <span
+      role="img"
+      aria-label="Produto sem foto"
+      className="flex size-10 shrink-0 items-center justify-center rounded-[4px] border border-neutral-800 bg-neutral-900 text-neutral-500"
+    >
+      <Package className="size-4" />
+    </span>
+  );
+}
+
+function StockMovementQuantityAction({
+  isInMovement,
+  itemQuantity,
+  selectedProductId,
+  onAddItem,
+  onQuantityChange,
+}: {
+  isInMovement: boolean;
+  itemQuantity: string;
+  selectedProductId: string;
+  onAddItem: () => void;
+  onQuantityChange: (quantity: string) => void;
+}) {
+  if (isInMovement) {
+    return selectedProductId ? (
+      <div className="flex items-end">
+        <Button
+          type="button"
+          onClick={onAddItem}
+          className="h-10 w-full flex-shrink-0 rounded-[4px] bg-blue-600 px-5 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 md:w-auto"
+        >
+          Preencher dados do lote
+        </Button>
+      </div>
+    ) : null;
+  }
+
+  return (
+    <div className="space-y-2 md:w-48">
+      <label htmlFor="stock-movement-item-quantity" className="text-xs font-bold text-neutral-400">
+        QUANTIDADE
+      </label>
+      <div className="flex items-center gap-3">
+        <NumberInput
+          id="stock-movement-item-quantity"
+          value={itemQuantity ? Number(itemQuantity) : undefined}
+          onValueChange={(value) =>
+            onQuantityChange(value !== undefined ? String(value) : "")
+          }
+          className="h-10 w-full rounded-[4px] border-2 border-neutral-800 bg-neutral-900 font-mono text-sm tracking-tighter text-white focus:border-blue-600"
+          placeholder="0"
+        />
+        <Button
+          type="button"
+          onClick={onAddItem}
+          className="h-10 flex-shrink-0 rounded-[4px] bg-blue-600 px-5 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
+        >
+          <Plus className="mr-2 size-4" strokeWidth={2.5} />
+          Add
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function StockMovementCreateProductAction({
+  viewState,
+}: {
+  viewState: CreateStockMovementViewState;
+}) {
+  const { isOutMovement, onCreateNewProduct } = viewState;
+  if (isOutMovement) return null;
+
+  return (
+    <div className="flex flex-col justify-end gap-2 sm:flex-row">
+      <PermissionGate permission="products:create">
+        <Button
+          type="button"
+          variant="default"
+          onClick={onCreateNewProduct}
+          className="h-9 rounded-[4px] border-white bg-white text-xs font-bold uppercase tracking-wide text-black hover:bg-neutral-200 hover:text-black"
+        >
+          <Plus className="mr-2 size-3.5" strokeWidth={2.5} />
+          Criar Novo Produto
+        </Button>
+      </PermissionGate>
+    </div>
+  );
+}
+
+function StockMovementAddItemError({
+  viewState,
+}: {
+  viewState: CreateStockMovementViewState;
+}) {
+  const { addItemError } = viewState;
+  if (!addItemError) return null;
+
+  return (
+    <div className="flex items-center gap-2 rounded-[4px] border border-rose-900/30 bg-rose-950/10 px-4 py-3">
+      <AlertCircle className="size-4 flex-shrink-0 text-rose-500" />
+      <p className="text-xs font-medium text-rose-400">{addItemError}</p>
+    </div>
+  );
+}
+
+function StockMovementSubmitBar({
+  viewState,
+}: {
+  viewState: CreateStockMovementViewState;
+}) {
+  const {
+    isFooterVisible,
+    isLoadingProducts,
+    isSubmitting,
+    items,
+    selectedType,
+    totalQuantity,
+  } = viewState;
+
+  return (
+    <FixedBottomBar
+      className={cn(
+        "bg-[#0A0A0A]/95 backdrop-blur-sm",
+        isFooterVisible
+          ? "pointer-events-auto translate-y-0"
+          : "pointer-events-none translate-y-[calc(100%+1rem)]",
+      )}
+    >
+      <div className="mx-auto flex w-full max-w-7xl flex-col items-stretch gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="hidden items-center gap-4 text-xs text-neutral-500 sm:flex">
+          <span>
+            <span className="font-mono font-bold tracking-tighter text-neutral-300">
+              {items.length}
+            </span>{" "}
+            {items.length === 1 ? "produto" : "produtos"}
+          </span>
+          {items.length > 0 ? (
+            <span>
+              Total:{" "}
+              <span className="font-mono font-bold tracking-tighter text-neutral-300">
+                {totalQuantity}
+              </span>{" "}
+              un.
+            </span>
+          ) : null}
+          {selectedType ? (
+            <span className="font-bold uppercase tracking-widest text-neutral-400">
+              {MANUAL_MOVEMENT_TYPE_LABELS[selectedType]}
+            </span>
+          ) : null}
+        </div>
+        <div className="flex w-full flex-col items-stretch gap-3 md:w-auto md:flex-row md:items-center">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => window.history.back()}
+            className="h-10 w-full rounded-[4px] border-neutral-800 text-xs font-bold uppercase tracking-wide md:w-auto"
+          >
+            CANCELAR
+          </Button>
+          <PermissionGate permission="stock_movements:create">
+            <Button
+              type="submit"
+              disabled={isSubmitting || isLoadingProducts}
+              className="h-10 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 md:w-auto"
+            >
+              <Save className="mr-2 size-4" />
+              {isSubmitting ? "REGISTRANDO…" : "REGISTRAR MOVIMENTAÇÃO"}
+            </Button>
+          </PermissionGate>
+        </div>
+      </div>
+    </FixedBottomBar>
+  );
+}
+
+function StockMovementSubmitOverlay({
+  isSubmitting,
+  submittingStep,
+}: {
+  isSubmitting: boolean;
+  submittingStep: string | null;
+}) {
+  if (!isSubmitting) return null;
+
+  return (
+    <div className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[#0A0A0A]/95 backdrop-blur-sm">
+      <div className="flex w-full max-w-xs flex-col items-center gap-6">
+        <Loader2 className="size-10 animate-spin text-blue-600" strokeWidth={2.5} />
+        <div className="flex flex-col items-center gap-2">
+          <p className="text-base font-bold text-white">
+            Registrando movimentação
+          </p>
+          {submittingStep ? (
+            <p className="text-sm text-neutral-400">{submittingStep}</p>
+          ) : null}
+        </div>
+        <p className="text-center text-[11px] text-neutral-600">
+          Não saia desta tela até que o processo seja concluído.
+        </p>
+      </div>
+    </div>
   );
 }
diff --git a/app/(pages)/stock-movements/create/new-product/new-product-inline.model.test.ts b/app/(pages)/stock-movements/create/new-product/new-product-inline.model.test.ts
index cab85c5..3913eeb 100644
--- a/app/(pages)/stock-movements/create/new-product/new-product-inline.model.test.ts
+++ b/app/(pages)/stock-movements/create/new-product/new-product-inline.model.test.ts
@@ -8,6 +8,9 @@ const mockSWR = vi.fn();
 const mockGet = vi.fn();
 const mockPush = vi.fn();
 const mockReplace = vi.fn();
+const mockRedirect = vi.fn((url: string): never => {
+  throw new Error(`NEXT_REDIRECT:${url}`);
+});
 const mockWriteDraft = vi.fn();
 const toastSuccess = vi.fn();
 const toastError = vi.fn();
@@ -31,6 +34,8 @@ const brandsResponse = {
 };
 
 const createDraft = (overrides?: Partial<StockMovementDraft>): StockMovementDraft => ({
+  schemaVersion: 1,
+  updatedAt: "2026-01-20T09:00:00.000Z",
   type: "PURCHASE_IN",
   notes: "",
   items: [],
@@ -62,7 +67,13 @@ const buildFormData = (
 });
 
 vi.mock("swr", () => ({
-  default: (...args: unknown[]) => mockSWR(...args),
+  default: (...args: unknown[]) =>
+    mockSWR(...args) ?? {
+      data: null,
+      isLoading: false,
+      error: null,
+      mutate: vi.fn(),
+    },
 }));
 
 vi.mock("@/lib/api", () => ({
@@ -72,6 +83,7 @@ vi.mock("@/lib/api", () => ({
 }));
 
 vi.mock("next/navigation", () => ({
+  redirect: (url: string) => mockRedirect(url),
   useRouter: () => ({
     push: (...args: unknown[]) => mockPush(...args),
     replace: (...args: unknown[]) => mockReplace(...args),
@@ -104,8 +116,11 @@ vi.mock("../create-stock-movement.storage", () => ({
     type: string;
     dataUrl: string;
   }) => new File(["x"], image.name, { type: image.type }),
-  readStockMovementDraft: () => currentDraft,
-  writeStockMovementDraft: (draft: StockMovementDraft) => mockWriteDraft(draft),
+  readStockMovementDraft: async () => currentDraft,
+  writeStockMovementDraft: async (draft: StockMovementDraft) => {
+    currentDraft = draft;
+    mockWriteDraft(draft);
+  },
 }));
 
 beforeEach(() => {
@@ -158,9 +173,13 @@ beforeEach(() => {
 });
 
 describe("useNewProductInlineModel", () => {
-  it("inicializa estado para criação com formulário limpo e sem edição", () => {
+  it("inicializa estado para criação com formulário limpo e sem edição", async () => {
     const { result } = renderHook(() => useNewProductInlineModel({ movementType, editItem: editItemQuery }));
 
+    await waitFor(() => {
+      expect(result.current.form.getValues("barcode")).toBe("7891000000001");
+    });
+
     expect(result.current.mode).toBe("inline");
     expect(result.current.isInlineEdit).toBe(false);
     expect(result.current.cancelHref).toBe("/stock-movements/create?type=PURCHASE_IN");
@@ -173,7 +192,7 @@ describe("useNewProductInlineModel", () => {
     expect(mockReplace).not.toHaveBeenCalled();
   });
 
-  it("preenche estado de edição a partir do draft com atributo customizado", () => {
+  it("preenche estado de edição a partir do draft com atributo customizado", async () => {
     currentDraft = createDraft({
       items: [
         {
@@ -199,7 +218,9 @@ describe("useNewProductInlineModel", () => {
 
     const { result } = renderHook(() => useNewProductInlineModel({ movementType, editItem: editItemQuery }));
 
-    expect(result.current.isInlineEdit).toBe(true);
+    await waitFor(() => {
+      expect(result.current.isInlineEdit).toBe(true);
+    });
     expect(result.current.form.getValues("name")).toBe("Produto Antigo");
     expect(result.current.form.getValues("description")).toBe("Desc");
     expect(result.current.form.getValues("barcode")).toBe("123");
@@ -208,6 +229,35 @@ describe("useNewProductInlineModel", () => {
     ]);
   });
 
+  it("restaura imagem do produto inline ao editar item do draft", async () => {
+    currentDraft = createDraft({
+      items: [
+        {
+          quantity: 2,
+          productName: "Produto com imagem",
+          newProductData: {
+            name: "Produto com imagem",
+            image: {
+              name: "inline.png",
+              type: "image/png",
+              dataUrl: "data:image/png;base64,YQ==",
+            },
+          },
+        },
+      ],
+    });
+    editItemQuery = "0";
+
+    const { result } = renderHook(() =>
+      useNewProductInlineModel({ movementType, editItem: editItemQuery }),
+    );
+
+    await waitFor(() => {
+      expect(result.current.productImage?.name).toBe("inline.png");
+    });
+    expect(result.current.productImage?.type).toBe("image/png");
+  });
+
   it("controla a lista de atributos customizados (adicionar, editar, remover)", () => {
     const { result } = renderHook(() => useNewProductInlineModel({ movementType, editItem: editItemQuery }));
 
@@ -293,6 +343,10 @@ describe("useNewProductInlineModel", () => {
     currentDraft = initial;
     const { result } = renderHook(() => useNewProductInlineModel({ movementType, editItem: editItemQuery }));
 
+    await waitFor(() => {
+      expect(result.current.form.getValues("barcode")).toBe("7891000000001");
+    });
+
     await act(async () => {
       await result.current.onSubmit(
         buildFormData({
@@ -338,6 +392,31 @@ describe("useNewProductInlineModel", () => {
     expect(result.current.isSubmitting).toBe(false);
   });
 
+  it("inclui produto e volta para a tela de criação", async () => {
+    const { result } = renderHook(() =>
+      useNewProductInlineModel({ movementType, editItem: editItemQuery }),
+    );
+
+    await waitFor(() => {
+      expect(result.current.form.getValues("barcode")).toBe("7891000000001");
+    });
+
+    await act(async () => {
+      await result.current.onSubmit(
+        buildFormData({
+          name: "Novo Item",
+          quantity: 3,
+          continuousMode: false,
+        }),
+      );
+    });
+
+    expect(mockWriteDraft).toHaveBeenCalledTimes(1);
+    expect(mockPush).toHaveBeenCalledWith(
+      "/stock-movements/create?type=PURCHASE_IN",
+    );
+  });
+
   it("atualiza produto existente e retorna para a tela de criação", async () => {
     currentDraft = createDraft({
       items: [
@@ -349,7 +428,13 @@ describe("useNewProductInlineModel", () => {
       ],
     });
     editItemQuery = "0";
-    const { result } = renderHook(() => useNewProductInlineModel({ movementType, editItem: editItemQuery }));
+    const { result } = renderHook(() =>
+      useNewProductInlineModel({ movementType, editItem: editItemQuery }),
+    );
+
+    await waitFor(() => {
+      expect(result.current.isInlineEdit).toBe(true);
+    });
 
     await act(async () => {
       await result.current.onSubmit(
@@ -365,7 +450,9 @@ describe("useNewProductInlineModel", () => {
     expect(toastSuccess).toHaveBeenCalledWith(
       "Produto Atualizado foi atualizado na movimentação.",
     );
-    expect(mockPush).toHaveBeenCalledWith("/stock-movements/create?type=PURCHASE_IN");
+    expect(mockPush).toHaveBeenCalledWith(
+      "/stock-movements/create?type=PURCHASE_IN",
+    );
     expect(mockWriteDraft).toHaveBeenCalledTimes(1);
 
     const writtenDraft = mockWriteDraft.mock.calls[0][0] as StockMovementDraft;
@@ -385,12 +472,15 @@ describe("useNewProductInlineModel", () => {
     movementType = "PURCHASE_IN";
     currentDraft = null;
 
-    renderHook(() => useNewProductInlineModel({ movementType, editItem: editItemQuery }));
+    renderHook(() =>
+      useNewProductInlineModel({ movementType, editItem: editItemQuery }),
+    );
 
     await waitFor(() => {
       expect(mockReplace).toHaveBeenCalledWith("/stock-movements");
     });
-    expect(toastError).toHaveBeenCalledWith(
+    expect(mockRedirect).not.toHaveBeenCalled();
+    expect(toastError).not.toHaveBeenCalledWith(
       "Volte para a movimentação antes de criar o produto.",
     );
   });
@@ -401,12 +491,14 @@ describe("useNewProductInlineModel", () => {
       items: [{ quantity: 1, productName: "Apenas 1 item", newProductData: { name: "Apenas 1 item" } }],
     });
 
-    renderHook(() => useNewProductInlineModel({ movementType, editItem: editItemQuery }));
+    renderHook(() =>
+      useNewProductInlineModel({ movementType, editItem: editItemQuery }),
+    );
 
     await waitFor(() => {
       expect(mockReplace).toHaveBeenCalledWith("/stock-movements");
     });
-    expect(mockReplace).toHaveBeenCalled();
+    expect(mockRedirect).not.toHaveBeenCalled();
   });
 
   it("alterna estado do scanner e registra barcode escaneado", () => {
diff --git a/app/(pages)/stock-movements/create/new-product/new-product-inline.model.ts b/app/(pages)/stock-movements/create/new-product/new-product-inline.model.ts
index 82fc2af..e7ee88c 100644
--- a/app/(pages)/stock-movements/create/new-product/new-product-inline.model.ts
+++ b/app/(pages)/stock-movements/create/new-product/new-product-inline.model.ts
@@ -30,6 +30,7 @@ import {
   readStockMovementDraft,
   writeStockMovementDraft,
 } from "../create-stock-movement.storage";
+import type { StockMovementDraft } from "../create-stock-movement.storage";
 
 const buildReturnHref = (type: string | null): string => {
   if (!isManualMovementType(type)) return "/stock-movements/create";
@@ -87,7 +88,7 @@ const buildInlineProductData = async (
 
 const hasDuplicateInlineProductName = (
   productName: string,
-  draft: ReturnType<typeof readStockMovementDraft>,
+  draft: StockMovementDraft | null,
   ignoredIndex: number | null,
 ): boolean => {
   const normalizedName = productName.toLowerCase();
@@ -107,29 +108,45 @@ const buildInlineMovementItem = (
   newProductData: product,
 });
 
+const isInlineProductRouteReady = (
+  movementType: string | null,
+  initialDraft: StockMovementDraft | null,
+  editItemIndex: number | null,
+  isEditingInlineProduct: boolean,
+): boolean => {
+  const hasValidEditItem = editItemIndex === null || isEditingInlineProduct;
+  return Boolean(
+    isManualMovementType(movementType) && initialDraft && hasValidEditItem,
+  );
+};
+
 const appendProductToMovementDraft = (
   product: InlineProductData,
   quantity: number,
-): void => {
-  const draft = readStockMovementDraft();
-  if (!draft) return;
-  writeStockMovementDraft({
+): Promise<void> => {
+  return updateMovementDraft((draft) => ({
     ...draft,
     items: [...draft.items, buildInlineMovementItem(product, quantity)],
     selectedProductId: "",
     itemQuantity: "",
     inlineProductBarcode: undefined,
-  });
+  }));
+};
+
+const updateMovementDraft = async (
+  buildNextDraft: (draft: StockMovementDraft) => StockMovementDraft,
+): Promise<void> => {
+  const draft = await readStockMovementDraft();
+  if (!draft) return;
+  await writeStockMovementDraft(buildNextDraft(draft));
 };
 
 const updateProductInMovementDraft = (
   index: number,
   product: InlineProductData,
   quantity: number,
-): void => {
-  const draft = readStockMovementDraft();
-  if (!draft) return;
-  writeStockMovementDraft({
+): Promise<void> => {
+  return updateMovementDraft((draft) => ({
     ...draft,
     items: draft.items.map((item, itemIndex) => {
       return itemIndex === index
@@ -139,7 +156,7 @@ const updateProductInMovementDraft = (
     selectedProductId: "",
     itemQuantity: "",
     inlineProductBarcode: undefined,
-  });
+  }));
 };
 
 export const useNewProductInlineModel = ({
@@ -150,12 +167,15 @@ export const useNewProductInlineModel = ({
   const editItemIndex = parseEditItemIndex(editItem);
   const cancelHref = buildReturnHref(movementType);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const initialDraftRef = useRef(readStockMovementDraft());
-  const initialDraft = initialDraftRef.current;
+  const [initialDraft, setInitialDraft] = useState<StockMovementDraft | null>(
+    null,
+  );
+  const [isDraftLoaded, setIsDraftLoaded] = useState(false);
   const editedItem =
     editItemIndex !== null ? initialDraft?.items[editItemIndex] : undefined;
   const editedProduct = editedItem?.newProductData;
   const isEditingInlineProduct = Boolean(editedProduct);
+
   const [customAttributes, setCustomAttributes] = useState<CustomAttribute[]>(
     () => buildCustomAttributes(editedProduct?.attributes),
   );
@@ -173,21 +193,6 @@ export const useNewProductInlineModel = ({
     subsection: isEditingInlineProduct ? "Editar Produto" : "Produto Inline",
   });
 
-  useEffect(() => {
-    const hasValidEditItem = editItemIndex === null || isEditingInlineProduct;
-    if (isManualMovementType(movementType) && initialDraft && hasValidEditItem) {
-      return;
-    }
-    toast.error("Volte para a movimentação antes de criar o produto.");
-    router.replace("/stock-movements");
-  }, [
-    editItemIndex,
-    initialDraft,
-    isEditingInlineProduct,
-    movementType,
-    router,
-  ]);
-
   const { data: categoriesData, isLoading: isLoadingCategories } =
     useSWR<CategoriesResponse>("categories", (url: string) =>
       api.get(url).json<CategoriesResponse>(),
@@ -222,6 +227,90 @@ export const useNewProductInlineModel = ({
     },
   });
 
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadDraft = async (): Promise<void> => {
+      const draft = await readStockMovementDraft();
+      if (!isMounted) return;
+      setInitialDraft(draft);
+      setIsDraftLoaded(true);
+    };
+
+    void loadDraft();
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!isDraftLoaded) return;
+    if (
+      isInlineProductRouteReady(
+        movementType,
+        initialDraft,
+        editItemIndex,
+        isEditingInlineProduct,
+      )
+    ) {
+      return;
+    }
+    router.replace("/stock-movements");
+  }, [
+    editItemIndex,
+    initialDraft,
+    isDraftLoaded,
+    isEditingInlineProduct,
+    movementType,
+    router,
+  ]);
+
+  useEffect(() => {
+    if (!isDraftLoaded || !initialDraft) return;
+    if (
+      !isInlineProductRouteReady(
+        movementType,
+        initialDraft,
+        editItemIndex,
+        isEditingInlineProduct,
+      )
+    ) {
+      return;
+    }
+
+    form.reset({
+      name: editedProduct?.name || "",
+      description: editedProduct?.description || "",
+      barcode: editedProduct?.barcode || initialDraft.inlineProductBarcode || "",
+      isKit: editedProduct?.isKit || false,
+      hasExpiration: editedProduct?.hasExpiration || false,
+      active: editedProduct?.active ?? true,
+      continuousMode: false,
+      categoryId: editedProduct?.categoryId || "",
+      brandId: editedProduct?.brandId || "",
+      attributes: {
+        weight: editedProduct?.attributes?.weight || "",
+        dimensions: editedProduct?.attributes?.dimensions || "",
+      },
+      quantity: editedItem?.quantity || 0,
+      manufacturedDate: editedProduct?.manufacturedDate || "",
+      expirationDate: editedProduct?.expirationDate || "",
+      costPrice: editedProduct?.costPrice,
+      sellingPrice: editedProduct?.sellingPrice,
+    });
+    setCustomAttributes(buildCustomAttributes(editedProduct?.attributes));
+    setProductImage(resolveInitialProductImage(editedProduct));
+  }, [
+    editItemIndex,
+    editedItem?.quantity,
+    editedProduct,
+    form,
+    initialDraft,
+    isDraftLoaded,
+    isEditingInlineProduct,
+    movementType,
+  ]);
+
   const addCustomAttribute = (): void => {
     setCustomAttributes((current) => [
       ...current,
@@ -320,10 +409,16 @@ export const useNewProductInlineModel = ({
   const onSubmit = async (data: ProductCreateFormData): Promise<void> => {
     if (!validateCustomAttributes()) return;
 
+    const currentDraft = await readStockMovementDraft();
+    if (!currentDraft) {
+      router.replace("/stock-movements");
+      return;
+    }
+
     if (
       hasDuplicateInlineProductName(
         data.name,
-        readStockMovementDraft(),
+        currentDraft,
         editItemIndex,
       )
     ) {
@@ -339,13 +434,13 @@ export const useNewProductInlineModel = ({
         productImage,
       );
       if (isEditingInlineProduct && editItemIndex !== null) {
-        updateProductInMovementDraft(editItemIndex, product, data.quantity);
+        await updateProductInMovementDraft(editItemIndex, product, data.quantity);
         toast.success(`${data.name} foi atualizado na movimentação.`);
         router.push(cancelHref);
         return;
       }
 
-      appendProductToMovementDraft(product, data.quantity);
+      await appendProductToMovementDraft(product, data.quantity);
       if (data.continuousMode) {
         toast.success(
           `${data.name} já está na movimentação. Continue adicionando novos produtos.`,
diff --git a/app/(pages)/stock-movements/create/new-product/page.tsx b/app/(pages)/stock-movements/create/new-product/page.tsx
index a001f27..f0c0b94 100644
--- a/app/(pages)/stock-movements/create/new-product/page.tsx
+++ b/app/(pages)/stock-movements/create/new-product/page.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
+import { redirect } from "next/navigation";
 import { Suspense } from "react";
 import { PageClient } from "./page.client";
+import { isManualMovementType } from "../../stock-movements.constants";
 
 export const metadata: Metadata = {
   title: "Novo produto da movimentação | StockShift",
@@ -22,10 +24,15 @@ export default async function Page({
   searchParams: PageSearchParams;
 }) {
   const params = await searchParams;
+  const movementType = firstSearchParam(params.type);
+  if (!isManualMovementType(movementType)) {
+    redirect("/stock-movements");
+  }
+
   return (
     <Suspense fallback={null}>
       <PageClient
-        movementType={firstSearchParam(params.type)}
+        movementType={movementType}
         editItem={firstSearchParam(params.editItem)}
       />
     </Suspense>
diff --git a/app/(pages)/stock-movements/create/page.tsx b/app/(pages)/stock-movements/create/page.tsx
index 7b34a06..32f2a40 100644
--- a/app/(pages)/stock-movements/create/page.tsx
+++ b/app/(pages)/stock-movements/create/page.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
+import { redirect } from "next/navigation";
 import { Suspense } from "react";
 import { PageClient } from "./page.client";
+import { isManualMovementType } from "../stock-movements.constants";
 
 export const metadata: Metadata = {
   title: "Nova movimentação | StockShift",
@@ -22,9 +24,14 @@ export default async function Page({
   searchParams: PageSearchParams;
 }) {
   const params = await searchParams;
+  const typeParam = firstSearchParam(params.type);
+  if (!isManualMovementType(typeParam)) {
+    redirect("/stock-movements");
+  }
+
   return (
     <Suspense fallback={null}>
-      <PageClient typeParam={firstSearchParam(params.type)} />
+      <PageClient typeParam={typeParam} />
     </Suspense>
   );
 }
diff --git a/app/(pages)/stock-movements/create/stock-movement-batch-data-modal.view.tsx b/app/(pages)/stock-movements/create/stock-movement-batch-data-modal.view.tsx
index 02d8e87..42439a5 100644
--- a/app/(pages)/stock-movements/create/stock-movement-batch-data-modal.view.tsx
+++ b/app/(pages)/stock-movements/create/stock-movement-batch-data-modal.view.tsx
@@ -119,10 +119,10 @@ export function StockMovementBatchDataModal({
                 type="button"
                 variant="outline"
                 onClick={onQuantityDecrement}
-                className="h-10 w-10 rounded-l-[4px] rounded-r-none border-neutral-800 bg-neutral-900 p-0 text-neutral-400 hover:bg-neutral-800 hover:text-white"
+                className="size-10 rounded-l-[4px] rounded-r-none border-neutral-800 bg-neutral-900 p-0 text-neutral-400 hover:bg-neutral-800 hover:text-white"
                 aria-label="Diminuir quantidade"
               >
-                <Minus className="h-4 w-4" />
+                <Minus className="size-4" />
               </Button>
               <NumberInput
                 id="stock-movement-batch-quantity"
@@ -137,7 +137,7 @@ export function StockMovementBatchDataModal({
                 type="button"
                 variant="outline"
                 onClick={onQuantityIncrement}
-                className="h-10 w-10 rounded-l-none rounded-r-[4px] border-neutral-800 bg-neutral-900 p-0 text-neutral-400 hover:bg-neutral-800 hover:text-white"
+                className="size-10 rounded-l-none rounded-r-[4px] border-neutral-800 bg-neutral-900 p-0 text-neutral-400 hover:bg-neutral-800 hover:text-white"
                 aria-label="Aumentar quantidade"
               >
                 <Plus className="size-4" />
@@ -266,9 +266,9 @@ function PriceSuggestionArea({
 function PriceSuggestionLoading() {
   return (
     <div className="flex items-center gap-2 rounded-[4px] border border-neutral-800 bg-neutral-950 px-3 py-2">
-      <History className="h-3.5 w-3.5 shrink-0 animate-pulse text-blue-500/50" />
+      <History className="size-3.5 shrink-0 animate-pulse text-blue-500/50" />
       <span className="text-[11px] font-medium text-neutral-500">
-        Buscando último preço...
+        Buscando último preço&hellip;
       </span>
     </div>
   );
@@ -290,7 +290,7 @@ function PriceSuggestionCard({
   return (
     <div className="flex items-center justify-between gap-3 rounded-[4px] border border-neutral-800 bg-neutral-950 px-3 py-2">
       <div className="flex min-w-0 flex-1 items-center gap-1.5">
-        <History className="h-3.5 w-3.5 shrink-0 text-blue-500" />
+        <History className="size-3.5 shrink-0 text-blue-500" />
         <p className="flex min-w-0 flex-1 items-center gap-1.5">
           <span className="truncate text-[11px] font-medium text-neutral-400">
             {title}
@@ -325,7 +325,7 @@ function ProfitTags({
   return (
     <div className="absolute right-1.5 top-1/2 flex -translate-y-1/2 items-center gap-1.5">
       <div className={cn("flex h-7 items-center gap-1.5 rounded-[4px] border px-2", style.card)}>
-        <Icon className={cn("h-3.5 w-3.5 shrink-0", style.icon)} />
+        <Icon className={cn("size-3.5 shrink-0", style.icon)} />
         <span className={cn("text-[11px] font-bold tracking-wide", style.value)}>
           {summary.unitResultLabel}
         </span>
diff --git a/app/(pages)/stock-movements/create/stock-movement-batch-pricing.model.ts b/app/(pages)/stock-movements/create/stock-movement-batch-pricing.model.ts
index 76c3ec2..31bb672 100644
--- a/app/(pages)/stock-movements/create/stock-movement-batch-pricing.model.ts
+++ b/app/(pages)/stock-movements/create/stock-movement-batch-pricing.model.ts
@@ -21,6 +21,7 @@ const currencyFormatter = new Intl.NumberFormat("pt-BR", {
   style: "currency",
   currency: "BRL",
 });
+const batchCreatedAtFormatter = new Intl.DateTimeFormat("pt-BR");
 
 export const buildExistingProductBatchesUrl = (
   warehouseId: string | null | undefined,
@@ -44,10 +45,15 @@ export const formatStockMovementBatchPrice = (cents: number): string => {
 export const findMostRecentWarehouseProductBatch = (
   batches: StockMovementProductBatchPriceSource[],
 ): StockMovementProductBatchPriceSource | null => {
-  if (batches.length === 0) return null;
-  return [...batches].sort((firstBatch, secondBatch) => {
-    return getBatchCreatedTime(secondBatch) - getBatchCreatedTime(firstBatch);
-  })[0];
+  return batches.reduce<StockMovementProductBatchPriceSource | null>(
+    (latestBatch, batch) => {
+      if (!latestBatch) return batch;
+      return getBatchCreatedTime(batch) > getBatchCreatedTime(latestBatch)
+        ? batch
+        : latestBatch;
+    },
+    null,
+  );
 };
 
 export const buildExistingProductSalePriceSuggestion = (
@@ -105,7 +111,7 @@ const getBatchCreatedTime = (
 const formatBatchCreatedAt = (createdAt: string): string => {
   const timestamp = new Date(createdAt).getTime();
   if (!Number.isFinite(timestamp)) return createdAt;
-  return new Intl.DateTimeFormat("pt-BR").format(new Date(timestamp));
+  return batchCreatedAtFormatter.format(new Date(timestamp));
 };
 
 const resolveProfitValues = ({
diff --git a/app/(pages)/stock-movements/create/stock-movement-reload-guard.model.ts b/app/(pages)/stock-movements/create/stock-movement-reload-guard.model.ts
index 2cec836..1989306 100644
--- a/app/(pages)/stock-movements/create/stock-movement-reload-guard.model.ts
+++ b/app/(pages)/stock-movements/create/stock-movement-reload-guard.model.ts
@@ -7,7 +7,7 @@ import type {
 } from "./stock-movement-reload-guard.types";
 
 const STOCK_MOVEMENT_RELOAD_WARNING =
-  "Ao recarregar esta tela, os dados preenchidos serão perdidos.";
+  "Ao recarregar esta tela, o rascunho salvo será restaurado automaticamente.";
 
 export const isStockMovementReloadShortcut = (
   event: KeyboardEvent,
diff --git a/app/(pages)/stock-movements/create/stock-movement-reload-guard.view.tsx b/app/(pages)/stock-movements/create/stock-movement-reload-guard.view.tsx
index 3cd7920..ceb3712 100644
--- a/app/(pages)/stock-movements/create/stock-movement-reload-guard.view.tsx
+++ b/app/(pages)/stock-movements/create/stock-movement-reload-guard.view.tsx
@@ -34,8 +34,8 @@ export function StockMovementReloadGuardView({
             </AlertDialogTitle>
           </div>
           <AlertDialogDescription className="text-sm leading-6 text-neutral-400">
-            Ao recarregar esta tela, os dados preenchidos nesta movimentação
-            serão perdidos. Tem certeza que deseja continuar?
+            Ao recarregar esta tela, o rascunho salvo será restaurado
+            automaticamente quando a movimentação abrir novamente.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
@@ -47,10 +47,10 @@ export function StockMovementReloadGuardView({
           </AlertDialogCancel>
           <AlertDialogAction
             onClick={onConfirmReload}
-            className="rounded-[4px] bg-rose-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-rose-700"
+            className="rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
           >
             <RotateCcw className="mr-2 size-3.5" strokeWidth={2.5} />
-            Recarregar e perder dados
+            Recarregar agora
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
diff --git a/app/(pages)/stock-movements/stock-movements.view.tsx b/app/(pages)/stock-movements/stock-movements.view.tsx
index f01bba4..7ba6738 100644
--- a/app/(pages)/stock-movements/stock-movements.view.tsx
+++ b/app/(pages)/stock-movements/stock-movements.view.tsx
@@ -1,62 +1,33 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
+import Link from "next/link";
 import type { ReactNode } from "react";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Input } from "@/components/ui/input";
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-} from "@/components/ui/drawer";
+import { format, parseISO } from "date-fns";
+import { ptBR } from "date-fns/locale";
 import {
   ArrowDownRight,
+  ArrowUpDown,
   ArrowUpRight,
-  Filter,
-  Layers,
   Calendar,
+  CalendarDays,
+  ChevronDown,
+  ChevronRight,
   Eye,
+  Filter,
+  Layers,
   MoreHorizontal,
-  ChevronDown,
-  ArrowUpDown,
-  CalendarDays,
   Trash2,
-  ChevronRight,
 } from "lucide-react";
-import Link from "next/link";
 import { PermissionGate } from "@/components/permission-gate";
+import { Button } from "@/components/ui/button";
 import {
-  StockMovementsViewProps,
-  StockMovement,
-  SortField,
-  SortOrder,
-  StockMovementType,
-  DateFilterPreset,
-} from "./stock-movements.types";
-import {
-  MANUAL_IN_MOVEMENT_TYPES,
-  MANUAL_MOVEMENT_TYPE_LABELS,
-  MANUAL_OUT_MOVEMENT_TYPES,
-} from "./stock-movements.constants";
-import { format, parseISO } from "date-fns";
-import { ptBR } from "date-fns/locale";
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -65,6 +36,45 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  MANUAL_IN_MOVEMENT_TYPES,
+  MANUAL_MOVEMENT_TYPE_LABELS,
+  MANUAL_OUT_MOVEMENT_TYPES,
+} from "./stock-movements.constants";
+import type {
+  DateFilterPreset,
+  SortField,
+  SortOrder,
+  StockMovement,
+  StockMovementsViewProps,
+  StockMovementType,
+} from "./stock-movements.types";
+
+type StockMovementsViewState = StockMovementsViewProps;
+
+interface MovementTagStyle {
+  bg: string;
+  border: string;
+  color: string;
+  icon: ReactNode;
+  label: string;
+}
 
 const MOVEMENT_TYPE_LABELS: Record<StockMovementType, string> = {
   ...MANUAL_MOVEMENT_TYPE_LABELS,
@@ -102,13 +112,9 @@ const TYPE_FILTER_OPTIONS: {
   })),
 ];
 
-const getSortLabel = (sortBy: SortField, sortOrder: SortOrder) => {
-  const option = SORT_OPTIONS.find(
-    (item) => item.value === `${sortBy}-${sortOrder}`,
-  );
-
-  return option?.label ?? "Ordenação";
-};
+const getSortLabel = (sortBy: SortField, sortOrder: SortOrder) =>
+  SORT_OPTIONS.find((item) => item.value === `${sortBy}-${sortOrder}`)
+    ?.label ?? "Ordenação";
 
 const formatDateDisplay = (value?: string) => {
   if (!value) return "";
@@ -122,9 +128,7 @@ const getDateSummary = (
   dateFrom?: string,
   dateTo?: string,
 ) => {
-  if (datePreset !== "CUSTOM") {
-    return DATE_PRESET_LABELS[datePreset];
-  }
+  if (datePreset !== "CUSTOM") return DATE_PRESET_LABELS[datePreset];
 
   if (dateFrom && dateTo) {
     return `${formatDateDisplay(dateFrom)} - ${formatDateDisplay(dateTo)}`;
@@ -149,9 +153,36 @@ const preventDrawerDismissFromSelectPortal = (event: Event) => {
     target.closest('[data-slot="select-content"]') ||
     target.closest("[data-radix-popper-content-wrapper]");
 
-  if (isSelectPortal) {
-    event.preventDefault();
-  }
+  if (isSelectPortal) event.preventDefault();
+};
+
+const getMovementTag = (type: StockMovementType): MovementTagStyle => {
+  const green = {
+    color: "text-emerald-500",
+    bg: "bg-emerald-500/10",
+    border: "border-emerald-500/20",
+    icon: <ArrowDownRight className="mr-1 size-3.5" />,
+  };
+  const red = {
+    color: "text-rose-500",
+    bg: "bg-rose-500/10",
+    border: "border-rose-500/20",
+    icon: <ArrowUpRight className="mr-1 size-3.5" />,
+  };
+  const tagMap: Record<StockMovementType, MovementTagStyle> = {
+    PURCHASE_IN: { label: "COMPRA", ...green },
+    ADJUSTMENT_IN: { label: "ENTRADA", ...green },
+    TRANSFER_IN: { label: "TRANSF. IN", ...green },
+    USAGE: { label: "USO", ...red },
+    ADJUSTMENT_OUT: { label: "SAÍDA", ...red },
+    SALE: { label: "VENDA", ...red },
+    GIFT: { label: "PRESENTE", ...red },
+    LOSS: { label: "PERDA", ...red },
+    DAMAGE: { label: "DANO", ...red },
+    TRANSFER_OUT: { label: "TRANSF. OUT", ...red },
+  };
+
+  return tagMap[type];
 };
 
 const MovementActions = ({ movement }: { movement: StockMovement }) => (
@@ -176,7 +207,7 @@ const MovementActions = ({ movement }: { movement: StockMovement }) => (
       <DropdownMenuItem asChild>
         <Link
           href={`/stock-movements/${movement.id}`}
-          className="cursor-pointer focus:bg-neutral-800 focus:text-white flex items-center w-full"
+          className="flex w-full cursor-pointer items-center focus:bg-neutral-800 focus:text-white"
         >
           <Eye className="mr-2 size-3.5" /> Ver Detalhes
         </Link>
@@ -186,12 +217,12 @@ const MovementActions = ({ movement }: { movement: StockMovement }) => (
 );
 
 const CreateMovementDropdown = ({
-  label,
   direction,
+  label,
   types,
 }: {
-  label: string;
   direction: "IN" | "OUT";
+  label: string;
   types: readonly (keyof typeof MANUAL_MOVEMENT_TYPE_LABELS)[];
 }) => {
   const isIn = direction === "IN";
@@ -259,14 +290,14 @@ const CreateMovementActions = () => (
 );
 
 const FilterToken = ({
+  badge,
   icon,
   label,
-  badge,
   onClick,
 }: {
+  badge?: number;
   icon: ReactNode;
   label: string;
-  badge?: number;
   onClick: () => void;
 }) => (
   <Button
@@ -285,606 +316,706 @@ const FilterToken = ({
   </Button>
 );
 
-export const StockMovementsView = ({
-  movements,
-  isLoading,
+export const StockMovementsView = (props: StockMovementsViewProps) => {
+  const viewState: StockMovementsViewState = props;
+
+  return (
+    <div className="min-h-screen bg-[#0A0A0A] pb-20 font-sans text-neutral-200">
+      <main className="mx-auto w-full max-w-7xl px-4 py-8 md:px-6 lg:px-8">
+        <div className="space-y-6">
+          <StockMovementsHeader viewState={viewState} />
+          <StockMovementsDesktopTable viewState={viewState} />
+          <StockMovementsMobileCards viewState={viewState} />
+          <StockMovementsPagination viewState={viewState} />
+        </div>
+      </main>
+      <StockMovementsMobileFiltersDrawer viewState={viewState} />
+    </div>
+  );
+};
+
+function StockMovementsHeader({
+  viewState,
+}: {
+  viewState: StockMovementsViewState;
+}) {
+  return (
+    <div className="flex flex-col gap-5">
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tighter text-white">
+            Movimentações
+          </h1>
+          <p className="mt-1 text-sm text-neutral-500">
+            Gerencie as entradas e saídas de estoque
+          </p>
+        </div>
+        <div className="hidden flex-col gap-2 md:flex md:flex-row md:items-center">
+          <CreateMovementActions />
+        </div>
+      </div>
+      <div className="flex flex-col gap-2 md:hidden">
+        <CreateMovementActions />
+      </div>
+      <StockMovementsMobileFilterTokens viewState={viewState} />
+      <StockMovementsDesktopFilters viewState={viewState} />
+    </div>
+  );
+}
+
+function StockMovementsMobileFilterTokens({
+  viewState,
+}: {
+  viewState: StockMovementsViewState;
+}) {
+  const { filters, onOpenMobileFilters } = viewState;
+  const activeFilterCount = getActiveFilterCount(filters);
+
+  return (
+    <div className="relative -mx-4 md:hidden">
+      <div className="overflow-x-auto px-4 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        <div className="flex min-w-max gap-2 pr-8">
+          <FilterToken
+            icon={<Filter className="size-3.5" />}
+            label="Filtros"
+            badge={activeFilterCount || undefined}
+            onClick={onOpenMobileFilters}
+          />
+          <FilterToken
+            icon={<CalendarDays className="size-3.5" />}
+            label={getDateSummary(
+              filters.datePreset,
+              filters.dateFrom,
+              filters.dateTo,
+            )}
+            onClick={onOpenMobileFilters}
+          />
+          <FilterToken
+            icon={<ArrowUpDown className="size-3.5" />}
+            label={getSortLabel(filters.sortBy, filters.sortOrder)}
+            onClick={onOpenMobileFilters}
+          />
+        </div>
+      </div>
+      <div className="pointer-events-none absolute top-0 right-0 bottom-0 w-12 bg-gradient-to-l from-[#0A0A0A] to-transparent" />
+    </div>
+  );
+}
+
+function StockMovementsDesktopFilters({
+  viewState,
+}: {
+  viewState: StockMovementsViewState;
+}) {
+  const {
+    filters,
+    onDateInputChange,
+    onDatePresetChange,
+    onFilterChange,
+    onSortChange,
+  } = viewState;
+
+  return (
+    <div className="hidden w-full gap-3 md:flex md:h-12 md:flex-row md:items-center">
+      <div className="flex h-12 w-full items-center gap-2">
+        <MovementTypeFilter filters={filters} onFilterChange={onFilterChange} />
+        <MovementDateFilter
+          filters={filters}
+          onDatePresetChange={onDatePresetChange}
+        />
+        {filters.datePreset === "CUSTOM" ? (
+          <MovementCustomDateInputs
+            filters={filters}
+            onDateInputChange={onDateInputChange}
+          />
+        ) : null}
+        <MovementSortFilter filters={filters} onSortChange={onSortChange} />
+      </div>
+    </div>
+  );
+}
+
+function MovementTypeFilter({
   filters,
-  mobileFiltersDraft,
-  isMobileFiltersOpen,
-  pagination,
-  onPageChange,
   onFilterChange,
-  onSortChange,
+}: {
+  filters: StockMovementsViewProps["filters"];
+  onFilterChange: StockMovementsViewProps["onFilterChange"];
+}) {
+  return (
+    <Select
+      value={filters.type || "ALL"}
+      onValueChange={(value) =>
+        onFilterChange("type", value as StockMovementType | "ALL")
+      }
+    >
+      <SelectTrigger className="h-12 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-400 transition-colors hover:border-neutral-700 focus:border-blue-600 focus:ring-0 md:w-[200px]">
+        <div className="flex items-center gap-2">
+          <Filter className="size-3.5 text-neutral-500" />
+          <SelectValue placeholder="Tipo" />
+        </div>
+      </SelectTrigger>
+      <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+        {TYPE_FILTER_OPTIONS.map((option) => (
+          <SelectItem
+            key={option.value}
+            value={option.value}
+            className="text-[12px] font-bold uppercase focus:bg-neutral-800"
+          >
+            {option.value === "ALL" ? "Todos os Tipos" : option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+function MovementDateFilter({
+  filters,
   onDatePresetChange,
+}: {
+  filters: StockMovementsViewProps["filters"];
+  onDatePresetChange: (preset: DateFilterPreset) => void;
+}) {
+  return (
+    <Select
+      value={filters.datePreset}
+      onValueChange={(value) => onDatePresetChange(value as DateFilterPreset)}
+    >
+      <SelectTrigger className="h-12 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-400 transition-colors hover:border-neutral-700 focus:border-blue-600 focus:ring-0 md:w-[190px]">
+        <div className="flex items-center gap-2">
+          <CalendarDays className="size-3.5 text-neutral-500" />
+          <SelectValue />
+        </div>
+      </SelectTrigger>
+      <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+        {Object.entries(DATE_PRESET_LABELS).map(([value, label]) => (
+          <SelectItem
+            key={value}
+            value={value}
+            className="text-[12px] font-bold uppercase focus:bg-neutral-800"
+          >
+            {label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+function MovementCustomDateInputs({
+  filters,
   onDateInputChange,
-  onOpenMobileFilters,
-  onCloseMobileFilters,
-  onApplyMobileFilters,
-  onClearMobileFilters,
-  onMobileDatePresetChange,
-  onMobileDateInputChange,
-  onMobileFilterDraftChange,
-}: StockMovementsViewProps) => {
-  const getMovementTag = (type: StockMovementType) => {
-    const green = {
-      color: "text-emerald-500",
-      bg: "bg-emerald-500/10",
-      border: "border-emerald-500/20",
-      icon: <ArrowDownRight className="size-3.5 mr-1" />,
-    };
-    const red = {
-      color: "text-rose-500",
-      bg: "bg-rose-500/10",
-      border: "border-rose-500/20",
-      icon: <ArrowUpRight className="size-3.5 mr-1" />,
-    };
-
-    const tagMap: Record<StockMovementType, { label: string } & typeof green> = {
-      PURCHASE_IN: { label: "COMPRA", ...green },
-      ADJUSTMENT_IN: { label: "ENTRADA", ...green },
-      TRANSFER_IN: { label: "TRANSF. IN", ...green },
-      USAGE: { label: "USO", ...red },
-      ADJUSTMENT_OUT: { label: "SAÍDA", ...red },
-      SALE: { label: "VENDA", ...red },
-      GIFT: { label: "PRESENTE", ...red },
-      LOSS: { label: "PERDA", ...red },
-      DAMAGE: { label: "DANO", ...red },
-      TRANSFER_OUT: { label: "TRANSF. OUT", ...red },
-    };
-
-    return tagMap[type];
-  };
+}: {
+  filters: StockMovementsViewProps["filters"];
+  onDateInputChange: StockMovementsViewProps["onDateInputChange"];
+}) {
+  return (
+    <>
+      <Input
+        type="date"
+        value={filters.dateFrom ?? ""}
+        onChange={(event) => onDateInputChange("dateFrom", event.target.value)}
+        className="h-12 w-[160px] rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-300 [color-scheme:dark] focus-visible:border-blue-600 focus-visible:ring-0"
+      />
+      <Input
+        type="date"
+        value={filters.dateTo ?? ""}
+        onChange={(event) => onDateInputChange("dateTo", event.target.value)}
+        className="h-12 w-[160px] rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-300 [color-scheme:dark] focus-visible:border-blue-600 focus-visible:ring-0"
+      />
+    </>
+  );
+}
+
+function MovementSortFilter({
+  filters,
+  onSortChange,
+}: {
+  filters: StockMovementsViewProps["filters"];
+  onSortChange: (sortBy: SortField, sortOrder: SortOrder) => void;
+}) {
+  return (
+    <Select
+      value={`${filters.sortBy}-${filters.sortOrder}`}
+      onValueChange={(value) => {
+        const [field, order] = value.split("-") as [SortField, SortOrder];
+        onSortChange(field, order);
+      }}
+    >
+      <SelectTrigger className="h-12 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-400 transition-colors hover:border-neutral-700 focus:border-blue-600 focus:ring-0 md:w-[200px]">
+        <div className="flex items-center gap-2">
+          <ArrowUpDown className="size-3.5 text-neutral-500" />
+          <SelectValue />
+        </div>
+      </SelectTrigger>
+      <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+        {SORT_OPTIONS.map((option) => (
+          <SelectItem
+            key={option.value}
+            value={option.value}
+            className="text-[12px] font-bold uppercase focus:bg-neutral-800"
+          >
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+function StockMovementsDesktopTable({
+  viewState,
+}: {
+  viewState: StockMovementsViewState;
+}) {
+  return (
+    <div className="hidden overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717] md:block">
+      <div className="overflow-x-auto">
+        <Table>
+          <MovementTableHeader />
+          <TableBody>
+            <MovementTableBody viewState={viewState} />
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}
 
+function MovementTableHeader() {
+  return (
+    <TableHeader>
+      <TableRow className="border-b border-neutral-800 bg-neutral-900/50 hover:bg-neutral-900/50">
+        <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Código
+        </TableHead>
+        <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Data
+        </TableHead>
+        <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Tipo
+        </TableHead>
+        <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Direção
+        </TableHead>
+        <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Itens
+        </TableHead>
+        <TableHead className="py-4 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Ações
+        </TableHead>
+      </TableRow>
+    </TableHeader>
+  );
+}
 
+function MovementTableBody({
+  viewState,
+}: {
+  viewState: StockMovementsViewState;
+}) {
+  if (viewState.isLoading) {
+    return <MovementTableMessage message="Carregando movimentações…" isLoading />;
+  }
 
+  if (viewState.movements.length === 0) {
+    return <MovementTableMessage message="Nenhuma movimentação encontrada" />;
+  }
 
+  return viewState.movements.map((movement) => (
+    <MovementTableRow key={movement.id} movement={movement} />
+  ));
+}
 
-  const draft = mobileFiltersDraft;
-  const mobileFiltersPanel = (
-      <Drawer
-        direction="bottom"
-        open={isMobileFiltersOpen}
-        onOpenChange={(open) => {
-          if (!open) onCloseMobileFilters();
-        }}
-      >
-        <DrawerContent
-          onInteractOutside={preventDrawerDismissFromSelectPortal}
-          onPointerDownOutside={preventDrawerDismissFromSelectPortal}
-          className="max-h-[88vh] rounded-t-[4px] border-neutral-800 bg-[#0e0e0e] text-neutral-200 md:hidden"
+function MovementTableMessage({
+  isLoading,
+  message,
+}: {
+  isLoading?: boolean;
+  message: string;
+}) {
+  return (
+    <TableRow>
+      <TableCell colSpan={6} className="h-48 text-center text-neutral-500">
+        <div className="flex flex-col items-center justify-center gap-2">
+          {isLoading ? (
+            <div className="size-6 animate-spin rounded-full border-2 border-neutral-500 border-t-blue-500" />
+          ) : (
+            <Layers className="size-8 text-neutral-700" />
+          )}
+          <span className="text-[10px] font-bold uppercase tracking-widest">
+            {message}
+          </span>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function MovementTableRow({ movement }: { movement: StockMovement }) {
+  const tag = getMovementTag(movement.type);
+
+  return (
+    <TableRow className="border-b border-neutral-800 transition-colors hover:bg-neutral-800/50">
+      <TableCell className="py-4">
+        <span className="font-mono text-sm font-bold text-white">
+          {movement.code}
+        </span>
+      </TableCell>
+      <TableCell className="py-4">
+        <div className="flex items-center text-sm text-neutral-400">
+          <Calendar className="mr-2 size-3.5" />
+          {format(parseISO(movement.createdAt), "dd/MM/yyyy HH:mm", {
+            locale: ptBR,
+          })}
+        </div>
+      </TableCell>
+      <TableCell className="py-4">
+        <span className="text-sm font-medium text-neutral-300">
+          {MOVEMENT_TYPE_LABELS[movement.type] || movement.type}
+        </span>
+      </TableCell>
+      <TableCell className="py-4">
+        <MovementTag tag={tag} />
+      </TableCell>
+      <TableCell className="py-4">
+        <span className="text-sm font-medium text-neutral-300">
+          {getMovementItemQuantity(movement)} un. (
+          {movement.items?.length || 0} prod.)
+        </span>
+      </TableCell>
+      <TableCell className="py-4 text-right">
+        <MovementActions movement={movement} />
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function getMovementItemQuantity(movement: StockMovement) {
+  return movement.items?.reduce((acc, item) => acc + item.quantity, 0) || 0;
+}
+
+function MovementTag({ tag }: { tag: MovementTagStyle }) {
+  return (
+    <span
+      className={`inline-flex items-center rounded-[2px] border px-2 py-0.5 text-[10px] font-bold uppercase tracking-widest ${tag.bg} ${tag.color} ${tag.border}`}
+    >
+      {tag.icon}
+      {tag.label}
+    </span>
+  );
+}
+
+function StockMovementsMobileCards({
+  viewState,
+}: {
+  viewState: StockMovementsViewState;
+}) {
+  if (viewState.isLoading) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-2 p-8 md:hidden">
+        <div className="size-6 animate-spin rounded-full border-2 border-neutral-500 border-t-blue-500" />
+        <span className="text-[10px] font-bold tracking-widest text-neutral-500 uppercase">
+          Carregando…
+        </span>
+      </div>
+    );
+  }
+
+  if (viewState.movements.length === 0) {
+    return (
+      <div className="rounded-[4px] border border-neutral-800 bg-[#171717] p-8 text-center md:hidden">
+        <span className="text-[10px] font-bold tracking-widest text-neutral-500 uppercase">
+          Nenhuma movimentação encontrada
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4 md:hidden">
+      {viewState.movements.map((movement) => (
+        <MovementMobileCard key={movement.id} movement={movement} />
+      ))}
+    </div>
+  );
+}
+
+function MovementMobileCard({ movement }: { movement: StockMovement }) {
+  const tag = getMovementTag(movement.type);
+
+  return (
+    <Link
+      href={`/stock-movements/${movement.id}`}
+      className="flex flex-col gap-4 rounded-[4px] border border-neutral-800 bg-[#171717] p-4 transition-colors hover:bg-neutral-800/50"
+    >
+      <div className="flex items-center justify-between">
+        <span className="font-mono text-base font-bold text-white">
+          {movement.code}
+        </span>
+        <ChevronRight className="size-4 text-neutral-500" />
+      </div>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-1.5 text-sm text-neutral-400">
+          <span>
+            {format(parseISO(movement.createdAt), "dd/MM/yyyy", {
+              locale: ptBR,
+            })}
+          </span>
+          <span className="text-neutral-600">&bull;</span>
+          <span>{getMovementItemQuantity(movement)} un.</span>
+        </div>
+        <MovementTag tag={tag} />
+      </div>
+    </Link>
+  );
+}
+
+function StockMovementsPagination({
+  viewState,
+}: {
+  viewState: StockMovementsViewState;
+}) {
+  const { onPageChange, pagination } = viewState;
+
+  return (
+    <div className="flex items-center justify-between pt-4">
+      <p className="text-sm text-neutral-500">
+        Página {pagination.page + 1} de {Math.max(1, pagination.totalPages)}
+      </p>
+      <div className="flex gap-2">
+        <Button
+          variant="outline"
+          disabled={pagination.page === 0}
+          onClick={() => onPageChange(pagination.page - 1)}
+          className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-400 hover:bg-neutral-800 hover:text-white"
         >
-          <DrawerHeader className="px-5 pb-2 pt-5 text-left">
-            <DrawerTitle className="text-xl font-bold tracking-tight text-white">
-              Filtros
-            </DrawerTitle>
-            <DrawerDescription className="mt-1 text-[11px] text-neutral-500">
-              Refine a listagem de movimentações
-            </DrawerDescription>
-          </DrawerHeader>
-
-          <div className="overflow-y-auto px-5 pb-2 pt-2">
-            <div className="space-y-6">
-              <div>
-                <span className="mb-3 block text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                  Tipo de movimentação
-                </span>
-                <div className="grid grid-cols-3 gap-2">
-                  {TYPE_FILTER_OPTIONS.map((option) => {
-                    const isSelected = draft.type === option.value;
-                    return (
-                      <button
-                        key={option.value}
-                        type="button"
-                        onClick={() =>
-                          onMobileFilterDraftChange("type", option.value)
-                        }
-                        className={`flex h-10 w-full items-center justify-center rounded-[4px] border text-xs font-semibold transition-colors ${
-                          isSelected
-                            ? "border-blue-600 bg-blue-600/15 text-blue-400"
-                            : "border-neutral-800 bg-[#171717] text-neutral-400 hover:border-neutral-700 hover:text-neutral-300"
-                        }`}
-                      >
-                        {option.label}
-                      </button>
-                    );
-                  })}
-                </div>
-              </div>
-
-              <div>
-                <span className="mb-3 block text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                  Período
-                </span>
-                <Select
-                  value={draft.datePreset}
-                  onValueChange={(value) =>
-                    onMobileDatePresetChange(value as DateFilterPreset)
-                  }
-                >
-                  <SelectTrigger className="h-11 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-xs font-semibold text-neutral-300 focus:border-blue-600 focus:ring-0 hover:border-neutral-700 transition-colors">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
-                    {Object.entries(DATE_PRESET_LABELS).map(([value, label]) => (
-                      <SelectItem
-                        key={value}
-                        value={value}
-                        className="text-xs font-semibold focus:bg-neutral-800 focus:text-white"
-                      >
-                        {label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-
-                {draft.datePreset === "CUSTOM" ? (
-                  <div className="mt-3 grid grid-cols-2 gap-3">
-                    <label
-                      htmlFor="stock-movements-mobile-date-from"
-                      className="space-y-1.5"
-                    >
-                      <span className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                        Data inicial
-                      </span>
-                      <Input
-                        id="stock-movements-mobile-date-from"
-                        type="date"
-                        value={draft.dateFrom ?? ""}
-                        onChange={(event) =>
-                          onMobileDateInputChange("dateFrom", event.target.value)
-                        }
-                        className="h-11 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-xs font-semibold text-neutral-300 [color-scheme:dark] focus-visible:border-blue-600 focus-visible:ring-0 hover:border-neutral-700 transition-colors"
-                      />
-                    </label>
-                    <label
-                      htmlFor="stock-movements-mobile-date-to"
-                      className="space-y-1.5"
-                    >
-                      <span className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                        Data final
-                      </span>
-                      <Input
-                        id="stock-movements-mobile-date-to"
-                        type="date"
-                        value={draft.dateTo ?? ""}
-                        onChange={(event) =>
-                          onMobileDateInputChange("dateTo", event.target.value)
-                        }
-                        className="h-11 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-xs font-semibold text-neutral-300 [color-scheme:dark] focus-visible:border-blue-600 focus-visible:ring-0 hover:border-neutral-700 transition-colors"
-                      />
-                    </label>
-                  </div>
-                ) : null}
-              </div>
-
-              <div>
-                <span className="mb-3 block text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                  Ordenar por
-                </span>
-                <Select
-                  value={`${draft.sortBy}-${draft.sortOrder}`}
-                  onValueChange={(value) => {
-                    const [field, order] = value.split("-") as [
-                      SortField,
-                      SortOrder,
-                    ];
-                    onMobileFilterDraftChange("sortBy", field);
-                    onMobileFilterDraftChange("sortOrder", order);
-                  }}
-                >
-                  <SelectTrigger className="h-11 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-xs font-semibold text-neutral-300 focus:border-blue-600 focus:ring-0 hover:border-neutral-700 transition-colors">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
-                    {SORT_OPTIONS.map((option) => (
-                      <SelectItem
-                        key={option.value}
-                        value={option.value}
-                        className="text-xs font-semibold focus:bg-neutral-800 focus:text-white"
-                      >
-                        {option.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
+          Anterior
+        </Button>
+        <Button
+          variant="outline"
+          disabled={pagination.page >= pagination.totalPages - 1}
+          onClick={() => onPageChange(pagination.page + 1)}
+          className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-400 hover:bg-neutral-800 hover:text-white"
+        >
+          Próxima
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function StockMovementsMobileFiltersDrawer({
+  viewState,
+}: {
+  viewState: StockMovementsViewState;
+}) {
+  return (
+    <Drawer
+      direction="bottom"
+      open={viewState.isMobileFiltersOpen}
+      onOpenChange={(open) => {
+        if (!open) viewState.onCloseMobileFilters();
+      }}
+    >
+      <DrawerContent
+        onInteractOutside={preventDrawerDismissFromSelectPortal}
+        onPointerDownOutside={preventDrawerDismissFromSelectPortal}
+        className="max-h-[88vh] rounded-t-[4px] border-neutral-800 bg-[#0e0e0e] text-neutral-200 md:hidden"
+      >
+        <DrawerHeader className="px-5 pt-5 pb-2 text-left">
+          <DrawerTitle className="text-xl font-bold tracking-tight text-white">
+            Filtros
+          </DrawerTitle>
+          <DrawerDescription className="mt-1 text-[11px] text-neutral-500">
+            Refine a listagem de movimentações
+          </DrawerDescription>
+        </DrawerHeader>
+        <div className="overflow-y-auto px-5 pt-2 pb-2">
+          <div className="space-y-6">
+            <MobileMovementTypeFilter viewState={viewState} />
+            <MobileMovementDateFilter viewState={viewState} />
+            <MobileMovementSortFilter viewState={viewState} />
           </div>
+        </div>
+        <DrawerFooter className="flex-row gap-3 border-t border-neutral-800 px-5 pt-4 pb-6">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={viewState.onClearMobileFilters}
+            className="h-12 flex-1 rounded-[4px] border-neutral-800 bg-[#171717] text-xs font-bold tracking-widest text-neutral-400 uppercase transition-colors hover:border-neutral-700 hover:bg-neutral-800 hover:text-rose-400"
+          >
+            <Trash2 className="mr-2 size-3.5" />
+            Limpar
+          </Button>
+          <Button
+            type="button"
+            onClick={viewState.onApplyMobileFilters}
+            className="h-12 flex-[2] rounded-[4px] bg-blue-600 text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-blue-700"
+          >
+            Aplicar filtros
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+}
 
-          <DrawerFooter className="flex-row gap-3 border-t border-neutral-800 px-5 pb-6 pt-4">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={onClearMobileFilters}
-              className="h-12 flex-1 rounded-[4px] border-neutral-800 bg-[#171717] text-xs font-bold uppercase tracking-widest text-neutral-400 hover:border-neutral-700 hover:text-rose-400 hover:bg-neutral-800 transition-colors"
-            >
-              <Trash2 className="mr-2 size-3.5" />
-              Limpar
-            </Button>
-            <Button
+function MobileMovementTypeFilter({
+  viewState,
+}: {
+  viewState: StockMovementsViewState;
+}) {
+  const draft = viewState.mobileFiltersDraft;
+
+  return (
+    <div>
+      <span className="mb-3 block text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+        Tipo de movimentação
+      </span>
+      <div className="grid grid-cols-3 gap-2">
+        {TYPE_FILTER_OPTIONS.map((option) => {
+          const isSelected = draft.type === option.value;
+          return (
+            <button
+              key={option.value}
               type="button"
-              onClick={onApplyMobileFilters}
-              className="h-12 flex-[2] rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-widest text-white hover:bg-blue-700 transition-colors"
+              onClick={() => viewState.onMobileFilterDraftChange("type", option.value)}
+              className={`flex h-10 w-full items-center justify-center rounded-[4px] border text-xs font-semibold transition-colors ${
+                isSelected
+                  ? "border-blue-600 bg-blue-600/15 text-blue-400"
+                  : "border-neutral-800 bg-[#171717] text-neutral-400 hover:border-neutral-700 hover:text-neutral-300"
+              }`}
             >
-              Aplicar filtros
-            </Button>
-          </DrawerFooter>
-        </DrawerContent>
-      </Drawer>
+              {option.label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
   );
+}
 
-  const activeFilterCount = getActiveFilterCount(filters);
+function MobileMovementDateFilter({
+  viewState,
+}: {
+  viewState: StockMovementsViewState;
+}) {
+  const draft = viewState.mobileFiltersDraft;
 
   return (
-    <div className="min-h-screen bg-[#0A0A0A] pb-20 font-sans text-neutral-200">
-      <main className="mx-auto w-full max-w-7xl px-4 py-8 md:px-6 lg:px-8">
-        <div className="space-y-6">
-          <div className="flex flex-col gap-5">
-            {/* Actions Bar */}
-            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-              <div>
-                <h1 className="text-2xl font-semibold tracking-tighter text-white">
-                  Movimentações
-                </h1>
-                <p className="text-sm text-neutral-500 mt-1">
-                  Gerencie as entradas e saídas de estoque
-                </p>
-              </div>
-              <div className="hidden flex-col gap-2 md:flex md:flex-row md:items-center">
-                <CreateMovementActions />
-              </div>
-            </div>
-
-            <div className="flex flex-col gap-2 md:hidden">
-              <CreateMovementActions />
-            </div>
-
-            <div className="relative -mx-4 md:hidden">
-              <div className="overflow-x-auto px-4 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-                <div className="flex min-w-max gap-2 pr-8">
-                  <FilterToken
-                    icon={<Filter className="size-3.5" />}
-                    label="Filtros"
-                    badge={activeFilterCount || undefined}
-                    onClick={onOpenMobileFilters}
-                  />
-                  <FilterToken
-                    icon={<CalendarDays className="size-3.5" />}
-                    label={getDateSummary(
-                      filters.datePreset,
-                      filters.dateFrom,
-                      filters.dateTo,
-                    )}
-                    onClick={onOpenMobileFilters}
-                  />
-                  <FilterToken
-                    icon={<ArrowUpDown className="size-3.5" />}
-                    label={getSortLabel(filters.sortBy, filters.sortOrder)}
-                    onClick={onOpenMobileFilters}
-                  />
-                </div>
-              </div>
-              <div className="pointer-events-none absolute bottom-0 right-0 top-0 w-12 bg-gradient-to-l from-[#0A0A0A] to-transparent" />
-            </div>
-
-            {/* Desktop Filters */}
-            <div className="hidden w-full gap-3 md:flex md:h-12 md:flex-row md:items-center">
-              <div className="flex h-12 w-full items-center gap-2">
-                <Select
-                  value={filters.type || "ALL"}
-                  onValueChange={(value) =>
-                    onFilterChange("type", value as StockMovementType | "ALL")
-                  }
-                >
-                  <SelectTrigger className="h-12 w-full md:w-[200px] rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-400 focus:border-blue-600 focus:ring-0 hover:border-neutral-700 transition-colors">
-                    <div className="flex items-center gap-2">
-                      <Filter className="size-3.5 text-neutral-500" />
-                      <SelectValue placeholder="Tipo" />
-                    </div>
-                  </SelectTrigger>
-                  <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
-                    <SelectItem
-                      value="ALL"
-                      className="text-[12px] font-bold uppercase focus:bg-neutral-800"
-                    >
-                      Todos os Tipos
-                    </SelectItem>
-                    {Object.entries(MOVEMENT_TYPE_LABELS).map(
-                      ([key, label]) => (
-                        <SelectItem
-                          key={key}
-                          value={key}
-                          className="text-[12px] font-bold uppercase focus:bg-neutral-800"
-                        >
-                          {label}
-                        </SelectItem>
-                      ),
-                    )}
-                  </SelectContent>
-                </Select>
-
-                <Select
-                  value={filters.datePreset}
-                  onValueChange={(value) =>
-                    onDatePresetChange(value as DateFilterPreset)
-                  }
-                >
-                  <SelectTrigger className="h-12 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-400 transition-colors hover:border-neutral-700 focus:border-blue-600 focus:ring-0 md:w-[190px]">
-                    <div className="flex items-center gap-2">
-                      <CalendarDays className="size-3.5 text-neutral-500" />
-                      <SelectValue />
-                    </div>
-                  </SelectTrigger>
-                  <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
-                    {Object.entries(DATE_PRESET_LABELS).map(
-                      ([value, label]) => (
-                        <SelectItem
-                          key={value}
-                          value={value}
-                          className="text-[12px] font-bold uppercase focus:bg-neutral-800"
-                        >
-                          {label}
-                        </SelectItem>
-                      ),
-                    )}
-                  </SelectContent>
-                </Select>
-
-                {filters.datePreset === "CUSTOM" ? (
-                  <>
-                    <Input
-                      type="date"
-                      value={filters.dateFrom ?? ""}
-                      onChange={(event) =>
-                        onDateInputChange("dateFrom", event.target.value)
-                      }
-                      className="h-12 w-[160px] rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-300 [color-scheme:dark] focus-visible:border-blue-600 focus-visible:ring-0"
-                    />
-                    <Input
-                      type="date"
-                      value={filters.dateTo ?? ""}
-                      onChange={(event) =>
-                        onDateInputChange("dateTo", event.target.value)
-                      }
-                      className="h-12 w-[160px] rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-300 [color-scheme:dark] focus-visible:border-blue-600 focus-visible:ring-0"
-                    />
-                  </>
-                ) : null}
-
-                <Select
-                  value={`${filters.sortBy}-${filters.sortOrder}`}
-                  onValueChange={(value) => {
-                    const [field, order] = value.split("-") as [
-                      SortField,
-                      SortOrder,
-                    ];
-                    onSortChange(field, order);
-                  }}
-                >
-                  <SelectTrigger className="h-12 w-full md:w-[200px] rounded-[4px] border-neutral-800 bg-[#171717] text-[12px] font-bold uppercase tracking-widest text-neutral-400 focus:border-blue-600 focus:ring-0 hover:border-neutral-700 transition-colors">
-                    <div className="flex items-center gap-2">
-                      <ArrowUpDown className="size-3.5 text-neutral-500" />
-                      <SelectValue />
-                    </div>
-                  </SelectTrigger>
-                  <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
-                    {SORT_OPTIONS.map((option) => (
-                      <SelectItem
-                        key={option.value}
-                        value={option.value}
-                        className="text-[12px] font-bold uppercase focus:bg-neutral-800"
-                      >
-                        {option.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-          </div>
+    <div>
+      <span className="mb-3 block text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+        Período
+      </span>
+      <Select
+        value={draft.datePreset}
+        onValueChange={(value) =>
+          viewState.onMobileDatePresetChange(value as DateFilterPreset)
+        }
+      >
+        <SelectTrigger className="h-11 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-xs font-semibold text-neutral-300 transition-colors hover:border-neutral-700 focus:border-blue-600 focus:ring-0">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+          {Object.entries(DATE_PRESET_LABELS).map(([value, label]) => (
+            <SelectItem
+              key={value}
+              value={value}
+              className="text-xs font-semibold focus:bg-neutral-800 focus:text-white"
+            >
+              {label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      {draft.datePreset === "CUSTOM" ? (
+        <div className="mt-3 grid grid-cols-2 gap-3">
+          <MobileMovementDateInput
+            id="stock-movements-mobile-date-from"
+            label="Data inicial"
+            value={draft.dateFrom ?? ""}
+            onChange={(value) =>
+              viewState.onMobileDateInputChange("dateFrom", value)
+            }
+          />
+          <MobileMovementDateInput
+            id="stock-movements-mobile-date-to"
+            label="Data final"
+            value={draft.dateTo ?? ""}
+            onChange={(value) =>
+              viewState.onMobileDateInputChange("dateTo", value)
+            }
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+}
 
-          {/* Desktop Table View */}
-          <div className="hidden md:block rounded-[4px] border border-neutral-800 bg-[#171717] overflow-hidden">
-            <div className="overflow-x-auto">
-              <Table>
-                <TableHeader>
-                  <TableRow className="border-b border-neutral-800 bg-neutral-900/50 hover:bg-neutral-900/50">
-                    <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Código
-                    </TableHead>
-                    <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Data
-                    </TableHead>
-                    <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Tipo
-                    </TableHead>
-                    <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Direção
-                    </TableHead>
-                    <TableHead className="py-4 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Itens
-                    </TableHead>
-                    <TableHead className="py-4 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Ações
-                    </TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {isLoading ? (
-                    <TableRow>
-                      <TableCell
-                        colSpan={6}
-                        className="h-48 text-center text-neutral-500"
-                      >
-                        <div className="flex flex-col items-center justify-center gap-2">
-                          <div className="size-6 animate-spin rounded-full border-2 border-neutral-500 border-t-blue-500" />
-                          <span className="text-[10px] uppercase font-bold tracking-widest">
-                            Carregando movimentações…
-                          </span>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  ) : movements.length === 0 ? (
-                    <TableRow>
-                      <TableCell
-                        colSpan={6}
-                        className="h-48 text-center text-neutral-500"
-                      >
-                        <div className="flex flex-col items-center justify-center gap-2">
-                          <Layers className="size-8 text-neutral-700" />
-                          <span className="text-[10px] uppercase font-bold tracking-widest">
-                            Nenhuma movimentação encontrada
-                          </span>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  ) : (
-                    movements.map((movement) => {
-                      const dirStatus = getMovementTag(movement.type);
-                      return (
-                        <TableRow
-                          key={movement.id}
-                          className="border-b border-neutral-800 transition-colors hover:bg-neutral-800/50"
-                        >
-                          <TableCell className="py-4">
-                            <span className="font-mono text-sm font-bold text-white">
-                              {movement.code}
-                            </span>
-                          </TableCell>
-                          <TableCell className="py-4">
-                            <div className="flex items-center text-sm text-neutral-400">
-                              <Calendar className="mr-2 size-3.5" />
-                              {format(
-                                parseISO(movement.createdAt),
-                                "dd/MM/yyyy HH:mm",
-                                {
-                                  locale: ptBR,
-                                },
-                              )}
-                            </div>
-                          </TableCell>
-                          <TableCell className="py-4">
-                            <span className="text-sm font-medium text-neutral-300">
-                              {MOVEMENT_TYPE_LABELS[movement.type] ||
-                                movement.type}
-                            </span>
-                          </TableCell>
-                          <TableCell className="py-4">
-                            <span
-                              className={`inline-flex items-center rounded-[2px] border px-2 py-0.5 text-[10px] font-bold uppercase tracking-widest ${dirStatus.bg} ${dirStatus.color} ${dirStatus.border}`}
-                            >
-                              {dirStatus.icon}
-                              {dirStatus.label}
-                            </span>
-                          </TableCell>
-                          <TableCell className="py-4">
-                            <span className="text-sm font-medium text-neutral-300">
-                              {movement.items?.reduce(
-                                (acc, item) => acc + item.quantity,
-                                0,
-                              ) || 0}{" "}
-                              un. ({movement.items?.length || 0} prod.)
-                            </span>
-                          </TableCell>
-                          <TableCell className="py-4 text-right">
-                            <MovementActions movement={movement} />
-                          </TableCell>
-                        </TableRow>
-                      );
-                    })
-                  )}
-                </TableBody>
-              </Table>
-            </div>
-          </div>
+function MobileMovementDateInput({
+  id,
+  label,
+  onChange,
+  value,
+}: {
+  id: string;
+  label: string;
+  onChange: (value: string) => void;
+  value: string;
+}) {
+  return (
+    <label htmlFor={id} className="space-y-1.5">
+      <span className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+        {label}
+      </span>
+      <Input
+        id={id}
+        type="date"
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        className="h-11 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-xs font-semibold text-neutral-300 transition-colors [color-scheme:dark] hover:border-neutral-700 focus-visible:border-blue-600 focus-visible:ring-0"
+      />
+    </label>
+  );
+}
 
-          {/* Mobile Cards View */}
-          <div className="md:hidden space-y-4">
-            {isLoading ? (
-              <div className="flex flex-col items-center justify-center p-8 gap-2">
-                <div className="size-6 animate-spin rounded-full border-2 border-neutral-500 border-t-blue-500" />
-                <span className="text-[10px] text-neutral-500 uppercase font-bold tracking-widest">
-                  Carregando…
-                </span>
-              </div>
-            ) : movements.length === 0 ? (
-              <div className="p-8 text-center bg-[#171717] rounded-[4px] border border-neutral-800">
-                <span className="text-[10px] text-neutral-500 uppercase font-bold tracking-widest">
-                  Nenhuma movimentação encontrada
-                </span>
-              </div>
-            ) : (
-              movements.map((movement) => {
-                const dirStatus = getMovementTag(movement.type);
-                return (
-                  <Link
-                    href={`/stock-movements/${movement.id}`}
-                    key={movement.id}
-                    className="flex flex-col gap-4 rounded-[4px] border border-neutral-800 bg-[#171717] p-4 transition-colors hover:bg-neutral-800/50"
-                  >
-                    <div className="flex items-center justify-between">
-                      <span className="font-mono text-base font-bold text-white">
-                        {movement.code}
-                      </span>
-                      <ChevronRight className="size-4 text-neutral-500" />
-                    </div>
-
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-1.5 text-sm text-neutral-400">
-                        <span>
-                          {format(parseISO(movement.createdAt), "dd/MM/yyyy", {
-                            locale: ptBR,
-                          })}
-                        </span>
-                        <span className="text-neutral-600">&bull;</span>
-                        <span>
-                          {movement.items?.reduce(
-                            (acc, item) => acc + item.quantity,
-                            0,
-                          ) || 0}{" "}
-                          un.
-                        </span>
-                      </div>
-                      <span
-                        className={`inline-flex shrink-0 items-center rounded-[2px] border px-2 py-1 text-[10px] font-bold uppercase tracking-widest ${dirStatus.bg} ${dirStatus.color} ${dirStatus.border}`}
-                      >
-                        {dirStatus.icon}
-                        {dirStatus.label}
-                      </span>
-                    </div>
-                  </Link>
-                );
-              })
-            )}
-          </div>
+function MobileMovementSortFilter({
+  viewState,
+}: {
+  viewState: StockMovementsViewState;
+}) {
+  const draft = viewState.mobileFiltersDraft;
 
-          <div className="flex items-center justify-between pt-4">
-            <p className="text-sm text-neutral-500">
-              Página {pagination.page + 1} de{" "}
-              {Math.max(1, pagination.totalPages)}
-            </p>
-            <div className="flex gap-2">
-              <Button
-                variant="outline"
-                disabled={pagination.page === 0}
-                onClick={() => onPageChange(pagination.page - 1)}
-                className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-400 hover:bg-neutral-800 hover:text-white"
-              >
-                Anterior
-              </Button>
-              <Button
-                variant="outline"
-                disabled={pagination.page >= pagination.totalPages - 1}
-                onClick={() => onPageChange(pagination.page + 1)}
-                className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-400 hover:bg-neutral-800 hover:text-white"
-              >
-                Próxima
-              </Button>
-            </div>
-          </div>
-        </div>
-      </main>
-      {mobileFiltersPanel}
+  return (
+    <div>
+      <span className="mb-3 block text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+        Ordenar por
+      </span>
+      <Select
+        value={`${draft.sortBy}-${draft.sortOrder}`}
+        onValueChange={(value) => {
+          const [field, order] = value.split("-") as [SortField, SortOrder];
+          viewState.onMobileFilterDraftChange("sortBy", field);
+          viewState.onMobileFilterDraftChange("sortOrder", order);
+        }}
+      >
+        <SelectTrigger className="h-11 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-xs font-semibold text-neutral-300 transition-colors hover:border-neutral-700 focus:border-blue-600 focus:ring-0">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent className="rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300">
+          {SORT_OPTIONS.map((option) => (
+            <SelectItem
+              key={option.value}
+              value={option.value}
+              className="text-xs font-semibold focus:bg-neutral-800 focus:text-white"
+            >
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
     </div>
   );
-};
+}
diff --git a/app/(pages)/system/company/company-logo-upload.tsx b/app/(pages)/system/company/company-logo-upload.tsx
index d05fff0..bc3ef23 100644
--- a/app/(pages)/system/company/company-logo-upload.tsx
+++ b/app/(pages)/system/company/company-logo-upload.tsx
@@ -93,6 +93,7 @@ export const CompanyLogoUpload = ({
                 alt="Logo da empresa"
                 width={112}
                 height={112}
+                unoptimized
                 className="h-full w-full object-contain p-2"
               />
             ) : (
diff --git a/app/(pages)/system/company/company.view.tsx b/app/(pages)/system/company/company.view.tsx
index 2dce9c8..402b20b 100644
--- a/app/(pages)/system/company/company.view.tsx
+++ b/app/(pages)/system/company/company.view.tsx
@@ -36,19 +36,20 @@ const infinitePaySchema = z.object({
   docNumber: z.string().min(1, "Número do documento é obrigatório"),
 });
 
-export const CompanyView = ({
-  companyConfig,
-  infinitePayConfig,
-  isLoadingCompany,
-  isLoadingInfinitePay,
-  isUpdatingCompany,
-  isUpdatingInfinitePay,
-  isEditingInfinitePay,
-  error,
-  onUpdateCompany,
-  onUpdateInfinitePay,
-  onEditInfinitePay,
-}: CompanyViewProps) => {
+export const CompanyView = (props: CompanyViewProps) => {
+  const {
+    companyConfig,
+    infinitePayConfig,
+    isLoadingCompany,
+    isLoadingInfinitePay,
+    isUpdatingCompany,
+    isUpdatingInfinitePay,
+    isEditingInfinitePay,
+    error,
+    onUpdateCompany,
+    onUpdateInfinitePay,
+    onEditInfinitePay,
+  } = props;
   const [logoFile, setLogoFile] = useState<File | null>(null);
 
   const companyForm = useForm<z.infer<typeof companySchema>>({
@@ -160,242 +161,279 @@ export const CompanyView = ({
           </div>
 
           <div className="grid gap-6 lg:grid-cols-2">
-            {/* Company Config Card */}
-            <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
-              <CardHeader className="border-b border-neutral-800 pb-4">
-                <div className="flex items-center gap-2">
-                  <Building2 className="size-4 text-blue-500" />
-                  <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
-                    Dados da Empresa
-                  </CardTitle>
-                </div>
-              </CardHeader>
-              <CardContent className="pt-6">
-                {isLoadingCompany ? (
-                  <div className="flex items-center justify-center py-12">
-                    <Loader2 className="size-6 animate-spin text-blue-500" />
-                  </div>
-                ) : (
-                  <Form {...companyForm}>
-                    <form
-                      onSubmit={companyForm.handleSubmit(onCompanySubmit)}
-                      className="space-y-4"
-                    >
-                      <CompanyLogoUpload
-                        currentLogoUrl={companyConfig?.logoUrl}
-                        logoFile={logoFile}
-                        disabled={isUpdatingCompany}
-                        onLogoSelect={setLogoFile}
-                      />
+            <CompanyConfigCard
+              companyConfig={companyConfig}
+              companyForm={companyForm}
+              isLoadingCompany={isLoadingCompany}
+              isUpdatingCompany={isUpdatingCompany}
+              logoFile={logoFile}
+              onCompanySubmit={onCompanySubmit}
+              setLogoFile={setLogoFile}
+            />
+            <InfinitePayConfigCard
+              form={infinitePayForm}
+              infinitePayConfig={infinitePayConfig}
+              isInfinitePayReadOnly={isInfinitePayReadOnly}
+              isLoadingInfinitePay={isLoadingInfinitePay}
+              isUpdatingInfinitePay={isUpdatingInfinitePay}
+              onButtonClick={handleInfinitePayButtonClick}
+              onSubmit={onInfinitePaySubmit}
+            />
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};
 
-                      <FormField
-                        control={companyForm.control}
-                        name="businessName"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                              Nome da Empresa
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-white placeholder:text-neutral-600 focus:border-blue-600 focus:ring-0"
-                                placeholder="Minha Empresa LTDA"
-                              />
-                            </FormControl>
-                            <FormMessage className="text-xs text-rose-500" />
-                          </FormItem>
-                        )}
-                      />
+type CompanyFormValues = z.infer<typeof companySchema>;
+type InfinitePayFormValues = z.infer<typeof infinitePaySchema>;
 
-                      <FormField
-                        control={companyForm.control}
-                        name="document"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                              CNPJ/CPF
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-white placeholder:text-neutral-600 focus:border-blue-600 focus:ring-0"
-                                placeholder="00.000.000/0000-00"
-                              />
-                            </FormControl>
-                            <FormMessage className="text-xs text-rose-500" />
-                          </FormItem>
-                        )}
-                      />
+function CompanyConfigCard({
+  companyConfig,
+  companyForm,
+  isLoadingCompany,
+  isUpdatingCompany,
+  logoFile,
+  onCompanySubmit,
+  setLogoFile,
+}: {
+  companyConfig: CompanyViewProps["companyConfig"];
+  companyForm: ReturnType<typeof useForm<CompanyFormValues>>;
+  isLoadingCompany: boolean;
+  isUpdatingCompany: boolean;
+  logoFile: File | null;
+  onCompanySubmit: (data: CompanyFormValues) => void;
+  setLogoFile: (file: File | null) => void;
+}) {
+  return (
+    <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
+      <CardHeader className="border-b border-neutral-800 pb-4">
+        <div className="flex items-center gap-2">
+          <Building2 className="size-4 text-blue-500" />
+          <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
+            Dados da Empresa
+          </CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent className="pt-6">
+        {isLoadingCompany ? (
+          <CompanyCardLoader className="text-blue-500" />
+        ) : (
+          <Form {...companyForm}>
+            <form onSubmit={companyForm.handleSubmit(onCompanySubmit)} className="space-y-4">
+              <CompanyLogoUpload
+                currentLogoUrl={companyConfig?.logoUrl}
+                logoFile={logoFile}
+                disabled={isUpdatingCompany}
+                onLogoSelect={setLogoFile}
+              />
+              <CompanyTextField form={companyForm} name="businessName" label="Nome da Empresa" placeholder="Minha Empresa LTDA" />
+              <CompanyTextField form={companyForm} name="document" label="CNPJ/CPF" placeholder="00.000.000/0000-00" />
+              <CompanyTextField form={companyForm} name="email" label="Email" placeholder="contato@empresa.com" type="email" />
+              <CompanyTextField form={companyForm} name="phone" label="Telefone" placeholder="(00) 00000-0000" />
+              <Button
+                type="submit"
+                disabled={isUpdatingCompany}
+                className="h-10 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white shadow-[0_0_20px_-5px_rgba(37,99,235,0.3)] hover:bg-blue-700 disabled:opacity-50"
+              >
+                {isUpdatingCompany ? (
+                  <>
+                    <Loader2 className="mr-2 size-3.5 animate-spin" />
+                    Salvando…
+                  </>
+                ) : (
+                  "Salvar Dados da Empresa"
+                )}
+              </Button>
+            </form>
+          </Form>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
 
-                      <FormField
-                        control={companyForm.control}
-                        name="email"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                              Email
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                type="email"
-                                className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-white placeholder:text-neutral-600 focus:border-blue-600 focus:ring-0"
-                                placeholder="contato@empresa.com"
-                              />
-                            </FormControl>
-                            <FormMessage className="text-xs text-rose-500" />
-                          </FormItem>
-                        )}
-                      />
+function CompanyTextField({
+  form,
+  label,
+  name,
+  placeholder,
+  type = "text",
+}: {
+  form: ReturnType<typeof useForm<CompanyFormValues>>;
+  label: string;
+  name: keyof CompanyFormValues;
+  placeholder: string;
+  type?: string;
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            {label}
+          </FormLabel>
+          <FormControl>
+            <Input
+              {...field}
+              type={type}
+              className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-white placeholder:text-neutral-600 focus:border-blue-600 focus:ring-0"
+              placeholder={placeholder}
+            />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
 
-                      <FormField
-                        control={companyForm.control}
-                        name="phone"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                              Telefone
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-white placeholder:text-neutral-600 focus:border-blue-600 focus:ring-0"
-                                placeholder="(00) 00000-0000"
-                              />
-                            </FormControl>
-                            <FormMessage className="text-xs text-rose-500" />
-                          </FormItem>
-                        )}
-                      />
+function InfinitePayConfigCard({
+  form,
+  infinitePayConfig,
+  isInfinitePayReadOnly,
+  isLoadingInfinitePay,
+  isUpdatingInfinitePay,
+  onButtonClick,
+  onSubmit,
+}: {
+  form: ReturnType<typeof useForm<InfinitePayFormValues>>;
+  infinitePayConfig: CompanyViewProps["infinitePayConfig"];
+  isInfinitePayReadOnly: boolean;
+  isLoadingInfinitePay: boolean;
+  isUpdatingInfinitePay: boolean;
+  onButtonClick: (event: MouseEvent<HTMLButtonElement>) => void;
+  onSubmit: (data: InfinitePayFormValues) => void;
+}) {
+  return (
+    <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
+      <CardHeader className="border-b border-neutral-800 pb-4">
+        <div className="flex items-center gap-2">
+          <CreditCard className="size-4 text-emerald-500" />
+          <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
+            InfinitePay
+          </CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent className="pt-6">
+        {isLoadingInfinitePay ? (
+          <CompanyCardLoader className="text-emerald-500" />
+        ) : (
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+              <InfinitePayTextField form={form} isReadOnly={isInfinitePayReadOnly} name="handle" label="Handle" placeholder="sua-empresa" />
+              <InfinitePayTextField form={form} isReadOnly={isInfinitePayReadOnly} name="docNumber" label="Número do Documento" placeholder="00000000000000" />
+              {infinitePayConfig?.configured ? <InfinitePayConfiguredNotice /> : null}
+              <InfinitePaySubmitButton
+                isReadOnly={isInfinitePayReadOnly}
+                isUpdating={isUpdatingInfinitePay}
+                onButtonClick={onButtonClick}
+              />
+            </form>
+          </Form>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
 
-                      <Button
-                        type="submit"
-                        disabled={isUpdatingCompany}
-                        className="w-full h-10 rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 shadow-[0_0_20px_-5px_rgba(37,99,235,0.3)] disabled:opacity-50"
-                      >
-                        {isUpdatingCompany ? (
-                          <>
-                            <Loader2 className="mr-2 size-3.5 animate-spin" />
-                            Salvando…
-                          </>
-                        ) : (
-                          "Salvar Dados da Empresa"
-                        )}
-                      </Button>
-                    </form>
-                  </Form>
-                )}
-              </CardContent>
-            </Card>
+function InfinitePayTextField({
+  form,
+  isReadOnly,
+  label,
+  name,
+  placeholder,
+}: {
+  form: ReturnType<typeof useForm<InfinitePayFormValues>>;
+  isReadOnly: boolean;
+  label: string;
+  name: keyof InfinitePayFormValues;
+  placeholder: string;
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
+            {label}
+          </FormLabel>
+          <FormControl>
+            <Input
+              {...field}
+              readOnly={isReadOnly}
+              className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-white placeholder:text-neutral-600 focus:border-blue-600 focus:ring-0"
+              placeholder={placeholder}
+            />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
 
-            {/* InfinitePay Config Card */}
-            <Card className="rounded-[4px] border border-neutral-800 bg-[#171717]">
-              <CardHeader className="border-b border-neutral-800 pb-4">
-                <div className="flex items-center gap-2">
-                  <CreditCard className="size-4 text-emerald-500" />
-                  <CardTitle className="text-sm font-bold uppercase tracking-wide text-white">
-                    InfinitePay
-                  </CardTitle>
-                </div>
-              </CardHeader>
-              <CardContent className="pt-6">
-                {isLoadingInfinitePay ? (
-                  <div className="flex items-center justify-center py-12">
-                    <Loader2 className="size-6 animate-spin text-emerald-500" />
-                  </div>
-                ) : (
-                  <Form {...infinitePayForm}>
-                    <form
-                      onSubmit={infinitePayForm.handleSubmit(onInfinitePaySubmit)}
-                      className="space-y-4"
-                    >
-                      <FormField
-                        control={infinitePayForm.control}
-                        name="handle"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                              Handle
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                readOnly={isInfinitePayReadOnly}
-                                className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-white placeholder:text-neutral-600 focus:border-blue-600 focus:ring-0"
-                                placeholder="sua-empresa"
-                              />
-                            </FormControl>
-                            <FormMessage className="text-xs text-rose-500" />
-                          </FormItem>
-                        )}
-                      />
+function InfinitePayConfiguredNotice() {
+  return (
+    <div className="rounded-[4px] border border-emerald-900/30 bg-emerald-950/10 px-3 py-2">
+      <p className="text-[10px] font-bold uppercase tracking-wider text-emerald-500">
+        Configurado
+      </p>
+      <p className="mt-0.5 text-xs text-emerald-500/70">
+        Integração com InfinitePay ativa
+      </p>
+    </div>
+  );
+}
 
-                      <FormField
-                        control={infinitePayForm.control}
-                        name="docNumber"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                              Número do Documento
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                readOnly={isInfinitePayReadOnly}
-                                className="h-10 rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-white placeholder:text-neutral-600 focus:border-blue-600 focus:ring-0"
-                                placeholder="00000000000000"
-                              />
-                            </FormControl>
-                            <FormMessage className="text-xs text-rose-500" />
-                          </FormItem>
-                        )}
-                      />
+function InfinitePaySubmitButton({
+  isReadOnly,
+  isUpdating,
+  onButtonClick,
+}: {
+  isReadOnly: boolean;
+  isUpdating: boolean;
+  onButtonClick: (event: MouseEvent<HTMLButtonElement>) => void;
+}) {
+  if (isReadOnly) {
+    return (
+      <Button
+        type="button"
+        onClick={onButtonClick}
+        disabled={isUpdating}
+        className="h-10 w-full rounded-[4px] bg-emerald-600 text-xs font-bold uppercase tracking-wide text-white shadow-[0_0_20px_-5px_rgba(16,185,129,0.3)] hover:bg-emerald-700 disabled:opacity-50"
+      >
+        Editar Configuração
+      </Button>
+    );
+  }
 
-                      {infinitePayConfig?.configured && (
-                        <div className="rounded-[4px] border border-emerald-900/30 bg-emerald-950/10 px-3 py-2">
-                          <p className="text-[10px] font-bold uppercase tracking-wider text-emerald-500">
-                            Configurado
-                          </p>
-                          <p className="text-xs text-emerald-500/70 mt-0.5">
-                            Integração com InfinitePay ativa
-                          </p>
-                        </div>
-                      )}
+  return (
+    <Button
+      type="submit"
+      disabled={isUpdating}
+      className="h-10 w-full rounded-[4px] bg-emerald-600 text-xs font-bold uppercase tracking-wide text-white shadow-[0_0_20px_-5px_rgba(16,185,129,0.3)] hover:bg-emerald-700 disabled:opacity-50"
+    >
+      {isUpdating ? (
+        <>
+          <Loader2 className="mr-2 size-3.5 animate-spin" />
+          Salvando…
+        </>
+      ) : (
+        "Salvar Configuração"
+      )}
+    </Button>
+  );
+}
 
-                      {isInfinitePayReadOnly ? (
-                        <Button
-                          type="button"
-                          onClick={handleInfinitePayButtonClick}
-                          disabled={isUpdatingInfinitePay}
-                          className="w-full h-10 rounded-[4px] bg-emerald-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-emerald-700 shadow-[0_0_20px_-5px_rgba(16,185,129,0.3)] disabled:opacity-50"
-                        >
-                          Editar Configuração
-                        </Button>
-                      ) : (
-                        <Button
-                          type="submit"
-                          disabled={isUpdatingInfinitePay}
-                          className="w-full h-10 rounded-[4px] bg-emerald-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-emerald-700 shadow-[0_0_20px_-5px_rgba(16,185,129,0.3)] disabled:opacity-50"
-                        >
-                          {isUpdatingInfinitePay ? (
-                            <>
-                              <Loader2 className="mr-2 size-3.5 animate-spin" />
-                              Salvando…
-                            </>
-                          ) : (
-                            "Salvar Configuração"
-                          )}
-                        </Button>
-                      )}
-                    </form>
-                  </Form>
-                )}
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </main>
+function CompanyCardLoader({ className }: { className: string }) {
+  return (
+    <div className="flex items-center justify-center py-12">
+      <Loader2 className={`size-6 animate-spin ${className}`} />
     </div>
   );
-};
+}
diff --git a/app/(pages)/system/roles/roles.view.tsx b/app/(pages)/system/roles/roles.view.tsx
index ae655dc..838e35a 100644
--- a/app/(pages)/system/roles/roles.view.tsx
+++ b/app/(pages)/system/roles/roles.view.tsx
@@ -1,17 +1,26 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
+  AlertTriangle,
+  Eye,
+  Key,
+  Loader2,
+  Lock,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Search,
+  Shield,
+  Trash2,
+} from "lucide-react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
   DropdownMenu,
@@ -21,13 +30,8 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { ResponsiveModal } from "@/components/ui/responsive-modal";
+import { EmptyState } from "@/components/ui/empty-state";
+import { ErrorState } from "@/components/ui/error-state";
 import {
   Form,
   FormControl,
@@ -36,42 +40,39 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { PageContainer } from "@/components/ui/page-container";
+import { Input } from "@/components/ui/input";
 import { LoadingState } from "@/components/ui/loading-state";
-import { ErrorState } from "@/components/ui/error-state";
-import { EmptyState } from "@/components/ui/empty-state";
+import { PageContainer } from "@/components/ui/page-container";
+import { ResponsiveModal } from "@/components/ui/responsive-modal";
 import { SectionLabel } from "@/components/ui/section-label";
 import {
-  Shield,
-  Loader2,
-  Plus,
-  Search,
-  MoreHorizontal,
-  Eye,
-  Pencil,
-  Trash2,
-  Lock,
-  Key,
-  AlertTriangle,
-} from "lucide-react";
-import { RolesViewProps, Role } from "./roles.types";
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+import { RolePermissionsModal } from "./roles-permissions-modal.view";
+import type { Role, RolesViewProps } from "./roles.types";
 
 type RoleForm = RolesViewProps["createForm"] | RolesViewProps["editForm"];
 type RolePermission = RolesViewProps["permissions"][number];
 type GroupedRolePermissions = RolesViewProps["groupedPermissions"];
-import { RolePermissionsModal } from "./roles-permissions-modal.view";
-import { cn } from "@/lib/utils";
+type RolesViewState = RolesViewProps;
 
 const DesktopActions = ({
-  role,
-  openPermissionsModal,
-  openEditModal,
   openDeleteModal,
+  openEditModal,
+  openPermissionsModal,
+  role,
 }: {
-  role: Role;
-  openPermissionsModal: (role: Role) => void;
-  openEditModal: (role: Role) => void;
   openDeleteModal: (role: Role) => void;
+  openEditModal: (role: Role) => void;
+  openPermissionsModal: (role: Role) => void;
+  role: Role;
 }) => (
   <div className="flex justify-end gap-1">
     <Button
@@ -89,7 +90,9 @@ const DesktopActions = ({
       size="icon"
       onClick={() => openEditModal(role)}
       disabled={role.isSystemRole}
-      title={role.isSystemRole ? "Roles de sistema não podem ser editadas" : "Editar role"}
+      title={
+        role.isSystemRole ? "Roles de sistema não podem ser editadas" : "Editar role"
+      }
       className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-white disabled:opacity-30"
     >
       <Pencil className="size-4" />
@@ -99,7 +102,9 @@ const DesktopActions = ({
       size="icon"
       onClick={() => openDeleteModal(role)}
       disabled={role.isSystemRole}
-      title={role.isSystemRole ? "Roles de sistema não podem ser deletadas" : "Deletar role"}
+      title={
+        role.isSystemRole ? "Roles de sistema não podem ser deletadas" : "Deletar role"
+      }
       className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-rose-500 disabled:opacity-30"
     >
       <Trash2 className="size-4" />
@@ -108,15 +113,15 @@ const DesktopActions = ({
 );
 
 const MobileActions = ({
-  role,
-  openPermissionsModal,
-  openEditModal,
   openDeleteModal,
+  openEditModal,
+  openPermissionsModal,
+  role,
 }: {
-  role: Role;
-  openPermissionsModal: (role: Role) => void;
-  openEditModal: (role: Role) => void;
   openDeleteModal: (role: Role) => void;
+  openEditModal: (role: Role) => void;
+  openPermissionsModal: (role: Role) => void;
+  role: Role;
 }) => (
   <DropdownMenu>
     <DropdownMenuTrigger asChild>
@@ -148,7 +153,7 @@ const MobileActions = ({
         disabled={role.isSystemRole}
         className={cn(
           "cursor-pointer",
-          role.isSystemRole && "cursor-not-allowed opacity-50"
+          role.isSystemRole && "cursor-not-allowed opacity-50",
         )}
       >
         <Pencil className="mr-2 size-3.5" />
@@ -159,7 +164,7 @@ const MobileActions = ({
         disabled={role.isSystemRole}
         className={cn(
           "cursor-pointer text-rose-500 focus:bg-rose-950/20 focus:text-rose-400",
-          role.isSystemRole && "cursor-not-allowed opacity-50"
+          role.isSystemRole && "cursor-not-allowed opacity-50",
         )}
       >
         <Trash2 className="mr-2 size-3.5" />
@@ -171,14 +176,14 @@ const MobileActions = ({
 
 const PermissionSelector = ({
   form,
+  groupedPermissions,
   isLoadingPermissions,
   permissions,
-  groupedPermissions,
 }: {
   form: RoleForm;
+  groupedPermissions: GroupedRolePermissions;
   isLoadingPermissions: boolean;
   permissions: RolePermission[];
-  groupedPermissions: GroupedRolePermissions;
 }) => (
   <FormField
     control={form.control}
@@ -188,576 +193,706 @@ const PermissionSelector = ({
         <FormLabel className="text-xs font-bold uppercase tracking-wide text-neutral-400">
           Permissões
         </FormLabel>
-        {isLoadingPermissions ? (
-          <div className="flex items-center gap-2 py-2 text-xs text-neutral-500">
-            <Loader2 className="size-3 animate-spin" />
-            Carregando permissões…
-          </div>
-        ) : permissions.length === 0 ? (
-          <div className="rounded-[4px] border border-neutral-800 bg-neutral-900 p-3 text-xs text-neutral-500">
-            Nenhuma permissão disponível
-          </div>
-        ) : (
-          <Accordion type="multiple" className="w-full">
-            {Array.from(groupedPermissions.entries()).map(([resource, resourcePermissions]) => (
-              <AccordionItem
-                key={resource}
-                value={resource}
-                className="border border-neutral-800 rounded-[4px] bg-neutral-900 mb-2 last:mb-0"
-              >
-                <AccordionTrigger className="px-3 py-2 text-sm font-medium text-neutral-300 hover:text-white hover:no-underline">
-                  <div className="flex items-center gap-2">
-                    <Key className="size-3.5 text-neutral-500" />
-                    {resource}
-                    <Badge
-                      variant="outline"
-                      className="rounded-[2px] border-neutral-700 bg-neutral-800 px-1.5 py-0 text-[10px] font-bold text-neutral-500"
-                    >
-                      {resourcePermissions.length}
-                    </Badge>
-                  </div>
-                </AccordionTrigger>
-                <AccordionContent className="px-3 pb-3">
-                  <div className="space-y-2">
-                    {resourcePermissions.map((permission) => (
-                      <FormField
-                        key={permission.id}
-                        control={form.control}
-                        name="permissionIds"
-                        render={({ field }) => (
-                          <FormItem className="flex items-center gap-2">
-                            <FormControl>
-                              <Checkbox
-                                checked={field.value?.includes(permission.id)}
-                                onCheckedChange={(checked) => {
-                                  const current = field.value || [];
-                                  if (checked) {
-                                    field.onChange([...current, permission.id]);
-                                  } else {
-                                    field.onChange(
-                                      current.filter((id) => id !== permission.id)
-                                    );
-                                  }
-                                }}
-                                className="rounded-[2px] border-neutral-700 data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600"
-                              />
-                            </FormControl>
-                            <FormLabel className="text-xs font-normal text-neutral-400 cursor-pointer">
-                              <span className="text-neutral-300">{permission.actionDisplayName || permission.action}</span>
-                              <span className="text-neutral-600 ml-1">({permission.scopeDisplayName || permission.scope})</span>
-                              {permission.description && (
-                                <span className="block text-[10px] text-neutral-500">
-                                  {permission.description}
-                                </span>
-                              )}
-                            </FormLabel>
-                          </FormItem>
-                        )}
-                      />
-                    ))}
-                  </div>
-                </AccordionContent>
-              </AccordionItem>
-            ))}
-          </Accordion>
-        )}
+        <RolePermissionSelectorContent
+          form={form}
+          groupedPermissions={groupedPermissions}
+          isLoadingPermissions={isLoadingPermissions}
+          permissions={permissions}
+        />
         <FormMessage className="text-xs text-rose-500" />
       </FormItem>
     )}
   />
 );
 
-export const RolesView = ({
-  roles,
-  isLoading,
-  error,
-  searchQuery,
-  onSearchChange,
-  isCreateModalOpen,
-  openCreateModal,
-  closeCreateModal,
-  isEditModalOpen,
-  selectedRole,
-  openEditModal,
-  closeEditModal,
-  isDeleteModalOpen,
-  roleToDelete,
-  openDeleteModal,
-  closeDeleteModal,
-  isPermissionsModalOpen,
-  roleToViewPermissions,
-  openPermissionsModal,
-  closePermissionsModal,
-  confirmDelete,
-  isDeleting,
-  permissions,
-  isLoadingPermissions,
-  createForm,
-  editForm,
-  onCreateSubmit,
-  onEditSubmit,
-  isSubmitting,
-  isAdmin,
-  groupedPermissions,
-  viewedRoleGroupedPermissions,
-  isLoadingAdmin
-}: RolesViewProps) => {
-  // Desktop actions - visible buttons
+export const RolesView = (props: RolesViewProps) => {
+  const viewState: RolesViewState = props;
 
-  // Mobile actions - dropdown menu
+  if (!props.isLoadingAdmin && !props.isAdmin) {
+    return <RolesAccessDenied />;
+  }
 
+  return (
+    <>
+      <RolesPage viewState={viewState} />
+      <RolePermissionsModal
+        open={props.isPermissionsModalOpen}
+        role={props.roleToViewPermissions}
+        groupedPermissions={props.viewedRoleGroupedPermissions}
+        onClose={props.closePermissionsModal}
+      />
+      <RoleCreateModal viewState={viewState} />
+      <RoleEditModal viewState={viewState} />
+      <RoleDeleteModal viewState={viewState} />
+    </>
+  );
+};
 
-  // Access denied state
-  if (!isLoadingAdmin && !isAdmin) {
-    return (
-      <PageContainer>
-        <div className="mb-8">
-          <h1 className="text-2xl font-semibold tracking-tighter text-white">
-            Roles
-          </h1>
-          <p className="mt-1 text-sm text-neutral-500">Sistema</p>
+function RolesAccessDenied() {
+  return (
+    <PageContainer>
+      <RolesTitle />
+      <ErrorState
+        title="Acesso Negado"
+        description="Você não tem permissão para acessar esta página."
+      />
+    </PageContainer>
+  );
+}
+
+function RolesTitle() {
+  return (
+    <div>
+      <h1 className="text-2xl font-semibold tracking-tighter text-white">
+        Roles
+      </h1>
+      <p className="mt-1 text-sm text-neutral-500">Sistema</p>
+    </div>
+  );
+}
+
+function RolesPage({ viewState }: { viewState: RolesViewState }) {
+  return (
+    <PageContainer>
+      <RolesHeader viewState={viewState} />
+      <RolesSearch viewState={viewState} />
+      <SectionLabel icon={Shield} className="mb-4">
+        Lista de Roles
+      </SectionLabel>
+      <RolesContent viewState={viewState} />
+    </PageContainer>
+  );
+}
+
+function RolesHeader({ viewState }: { viewState: RolesViewState }) {
+  return (
+    <div className="mb-8 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+      <RolesTitle />
+      <div className="w-full md:w-auto">
+        <Button
+          onClick={viewState.openCreateModal}
+          className="h-10 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white shadow-[0_0_20px_-5px_rgba(37,99,235,0.3)] hover:bg-blue-700 md:w-auto"
+        >
+          <Plus className="mr-2 size-4" strokeWidth={2.5} />
+          NOVA ROLE
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function RolesSearch({ viewState }: { viewState: RolesViewState }) {
+  return (
+    <div className="mb-6 flex w-full flex-col gap-3 md:h-12 md:flex-row md:items-center">
+      <div className="relative flex h-12 min-w-[200px] flex-1 items-center">
+        <div className="absolute left-3 text-neutral-500">
+          <Search className="size-3.5" strokeWidth={2.5} />
         </div>
-        <ErrorState
-          title="Acesso Negado"
-          description="Você não tem permissão para acessar esta página."
+        <Input
+          placeholder="Pesquisar por nome ou descrição…"
+          value={viewState.searchQuery}
+          onChange={(event) => viewState.onSearchChange(event.target.value)}
+          className="w-full rounded-[4px] border-neutral-800 bg-[#171717] pl-10 text-sm text-neutral-200 placeholder:text-neutral-600 hover:border-neutral-700 focus:border-blue-600 focus:ring-0"
         />
-      </PageContainer>
+      </div>
+    </div>
+  );
+}
+
+function RolesContent({ viewState }: { viewState: RolesViewState }) {
+  const { error, isLoading, roles, searchQuery } = viewState;
+
+  if (isLoading) return <LoadingState message="Carregando roles…" />;
+
+  if (error) {
+    return (
+      <ErrorState
+        title="Falha na conexão"
+        description="Não foi possível carregar a lista de roles."
+      />
+    );
+  }
+
+  if (roles.length === 0) {
+    return (
+      <EmptyState
+        icon={Shield}
+        title={searchQuery ? "Nenhum resultado encontrado" : "Nenhuma role cadastrada"}
+        description={
+          searchQuery
+            ? "Tente ajustar seus termos de busca."
+            : "Comece adicionando roles ao sistema."
+        }
+        action={
+          searchQuery
+            ? { label: "LIMPAR BUSCA", onClick: () => viewState.onSearchChange("") }
+            : { label: "NOVA ROLE", onClick: viewState.openCreateModal }
+        }
+      />
     );
   }
 
   return (
     <>
-      <PageContainer>
-        <div className="mb-8 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-          <div>
-            <h1 className="text-2xl font-semibold tracking-tighter text-white">
-              Roles
-            </h1>
-            <p className="mt-1 text-sm text-neutral-500">Sistema</p>
-          </div>
-          <div className="w-full md:w-auto">
-            <Button
-              onClick={openCreateModal}
-              className="h-10 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 shadow-[0_0_20px_-5px_rgba(37,99,235,0.3)] md:w-auto"
-            >
-              <Plus className="mr-2 size-4" strokeWidth={2.5} />
-              NOVA ROLE
-            </Button>
-          </div>
-        </div>
+      <RolesTable viewState={viewState} />
+      <RoleMobileCards viewState={viewState} />
+    </>
+  );
+}
 
-        {/* Search */}
-        <div className="mb-6 flex flex-col gap-3 md:flex-row md:items-center md:h-12 w-full">
-          <div className="relative h-12 flex-1 min-w-[200px] flex items-center">
-            <div className="text-neutral-500 absolute left-3">
-              <Search className="size-3.5" strokeWidth={2.5} />
-            </div>
-            <Input
-              placeholder="Pesquisar por nome ou descrição…"
-              value={searchQuery}
-              onChange={(e) => onSearchChange(e.target.value)}
-              className="w-full rounded-[4px] border-neutral-800 bg-[#171717] pl-10 text-sm text-neutral-200 placeholder:text-neutral-600 focus:border-blue-600 focus:ring-0 hover:border-neutral-700"
-            />
-          </div>
-        </div>
+function RolesTable({ viewState }: { viewState: RolesViewState }) {
+  return (
+    <div className="hidden overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717] md:block">
+      <Table>
+        <TableHeader className="bg-neutral-900">
+          <TableRow className="border-b border-neutral-800 hover:bg-neutral-900">
+            <TableHead className="h-10 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Nome
+            </TableHead>
+            <TableHead className="h-10 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Descrição
+            </TableHead>
+            <TableHead className="h-10 text-center text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Permissões
+            </TableHead>
+            <TableHead className="h-10 text-center text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Tipo
+            </TableHead>
+            <TableHead className="h-10 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Ações
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {viewState.roles.map((role) => (
+            <RoleTableRow key={role.id} role={role} viewState={viewState} />
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
 
-        <SectionLabel icon={Shield} className="mb-4">
-          Lista de Roles
-        </SectionLabel>
-
-        {/* Data Display */}
-        {isLoading ? (
-          <LoadingState message="Carregando roles…" />
-        ) : error ? (
-          <ErrorState
-            title="Falha na conexão"
-            description="Não foi possível carregar a lista de roles."
-          />
-        ) : roles.length === 0 ? (
-          <EmptyState
-            icon={Shield}
-            title={searchQuery ? "Nenhum resultado encontrado" : "Nenhuma role cadastrada"}
-            description={
-              searchQuery
-                ? "Tente ajustar seus termos de busca."
-                : "Comece adicionando roles ao sistema."
-            }
-            action={
-              searchQuery
-                ? { label: "LIMPAR BUSCA", onClick: () => onSearchChange("") }
-                : { label: "NOVA ROLE", onClick: openCreateModal }
-            }
-          />
-        ) : (
-                <>
-                  <div className="hidden overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717] md:block">
-                    <Table>
-                      <TableHeader className="bg-neutral-900">
-                        <TableRow className="border-b border-neutral-800 hover:bg-neutral-900">
-                          <TableHead className="h-10 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Nome
-                          </TableHead>
-                          <TableHead className="h-10 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Descrição
-                          </TableHead>
-                          <TableHead className="h-10 text-center text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Permissões
-                          </TableHead>
-                          <TableHead className="h-10 text-center text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Tipo
-                          </TableHead>
-                          <TableHead className="h-10 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Ações
-                          </TableHead>
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody>
-                        {roles.map((role) => (
-                          <TableRow
-                            key={role.id}
-                            className="group border-b border-neutral-800/50 hover:bg-neutral-800/50"
-                          >
-                            <TableCell className="py-3">
-                              <div className="flex items-center gap-2">
-                                <Shield className={cn(
-                                  "size-4",
-                                  role.isSystemRole ? "text-blue-500" : "text-neutral-500"
-                                )} />
-                                <span className="font-medium text-white">
-                                  {role.name}
-                                </span>
-                              </div>
-                            </TableCell>
-                            <TableCell className="py-3 text-sm text-neutral-400 max-w-[300px] truncate">
-                              {role.description || "—"}
-                            </TableCell>
-                            <TableCell className="py-3 text-center">
-                              <Button
-                                variant="ghost"
-                                onClick={() => openPermissionsModal(role)}
-                                className="h-7 rounded-[4px] px-2 text-neutral-400 hover:bg-neutral-800 hover:text-white"
-                                title="Ver permissões da role"
-                              >
-                                <Key className="mr-1.5 size-3" />
-                                <span className="text-[10px] font-bold">
-                                  {role.permissions.length}
-                                </span>
-                              </Button>
-                            </TableCell>
-                            <TableCell className="py-3 text-center">
-                              {role.isSystemRole ? (
-                                <Badge
-                                  variant="outline"
-                                  className="rounded-[2px] border-blue-500/20 bg-blue-500/10 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-blue-500"
-                                >
-                                  <Lock className="size-3 mr-1" />
-                                  SISTEMA
-                                </Badge>
-                              ) : (
-                                <Badge
-                                  variant="outline"
-                                  className="rounded-[2px] border-neutral-700 bg-neutral-800 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-neutral-500"
-                                >
-                                  CUSTOM
-                                </Badge>
-                              )}
-                            </TableCell>
-                            <TableCell className="py-3 text-right">
-                              <DesktopActions role={role} openPermissionsModal={openPermissionsModal} openEditModal={openEditModal} openDeleteModal={openDeleteModal} />
-                            </TableCell>
-                          </TableRow>
-                        ))}
-                      </TableBody>
-                    </Table>
-                  </div>
-
-                  {/* Mobile Cards */}
-                  <div className="grid gap-3 md:hidden">
-                    {roles.map((role) => (
-                      <div
-                        key={role.id}
-                        className="relative flex flex-col gap-3 rounded-[4px] border border-neutral-800 bg-[#171717] p-4 hover:border-neutral-700"
-                      >
-                        <div className="flex items-start justify-between">
-                          <div className="flex-1 pr-2">
-                            <div className="flex items-center gap-2">
-                              <Shield className={cn(
-                                "size-4",
-                                role.isSystemRole ? "text-blue-500" : "text-neutral-500"
-                              )} />
-                              <h3 className="font-semibold text-white">
-                                {role.name}
-                              </h3>
-                            </div>
-                            {role.description && (
-                              <p className="mt-1 text-xs text-neutral-500 line-clamp-2">
-                                {role.description}
-                              </p>
-                            )}
-                          </div>
-                          <div className="flex items-center gap-2">
-                            {role.isSystemRole && (
-                              <Badge
-                                variant="outline"
-                                className="rounded-[2px] border-blue-500/20 bg-blue-500/10 px-1.5 py-0.5 text-[10px] font-bold text-blue-500"
-                              >
-                                <Lock className="size-3" />
-                              </Badge>
-                            )}
-                            <MobileActions role={role} openPermissionsModal={openPermissionsModal} openEditModal={openEditModal} openDeleteModal={openDeleteModal} />
-                          </div>
-                        </div>
-                        <div className="flex items-center gap-2">
-                          <Key className="size-3 text-neutral-600" />
-                          <button
-                            type="button"
-                            onClick={() => openPermissionsModal(role)}
-                            className="rounded-[4px] text-left text-xs text-neutral-500 hover:text-white"
-                          >
-                            {role.permissions.length} permissões
-                          </button>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </>
-              )}
-      </PageContainer>
+function RoleTableRow({
+  role,
+  viewState,
+}: {
+  role: Role;
+  viewState: RolesViewState;
+}) {
+  return (
+    <TableRow className="group border-b border-neutral-800/50 hover:bg-neutral-800/50">
+      <TableCell className="py-3">
+        <RoleName role={role} />
+      </TableCell>
+      <TableCell className="max-w-[300px] truncate py-3 text-sm text-neutral-400">
+        {role.description || "—"}
+      </TableCell>
+      <TableCell className="py-3 text-center">
+        <RolePermissionCountButton role={role} viewState={viewState} />
+      </TableCell>
+      <TableCell className="py-3 text-center">
+        <RoleTypeBadge role={role} />
+      </TableCell>
+      <TableCell className="py-3 text-right">
+        <DesktopActions
+          role={role}
+          openPermissionsModal={viewState.openPermissionsModal}
+          openEditModal={viewState.openEditModal}
+          openDeleteModal={viewState.openDeleteModal}
+        />
+      </TableCell>
+    </TableRow>
+  );
+}
 
-      <RolePermissionsModal
-        open={isPermissionsModalOpen}
-        role={roleToViewPermissions}
-        groupedPermissions={viewedRoleGroupedPermissions}
-        onClose={closePermissionsModal}
+function RoleName({ role }: { role: Role }) {
+  return (
+    <div className="flex items-center gap-2">
+      <Shield
+        className={cn(
+          "size-4",
+          role.isSystemRole ? "text-blue-500" : "text-neutral-500",
+        )}
       />
+      <span className="font-medium text-white">{role.name}</span>
+    </div>
+  );
+}
 
-      {/* Create Role Modal */}
-      <ResponsiveModal
-        open={isCreateModalOpen}
-        onOpenChange={(open) => {
-          if (!open) closeCreateModal();
-        }}
-        title="Nova Role"
-        description="Crie uma nova role com permissões específicas."
-        maxWidth="sm:max-w-[550px]"
-        footer={
-          <>
-            <Button
-              variant="ghost"
-              onClick={closeCreateModal}
-              className="rounded-[4px] border-neutral-700 bg-transparent text-xs uppercase hover:bg-neutral-800 hover:text-white"
-            >
-              Cancelar
-            </Button>
-            <Button
-              type="submit"
-              form="create-role-form"
-              disabled={isSubmitting}
-              className="rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
-            >
-              {isSubmitting ? (
-                <>
-                  <Loader2 className="mr-2 size-3.5 animate-spin" />
-                  Criando…
-                </>
-              ) : (
-                "Criar Role"
-              )}
-            </Button>
-          </>
-        }
+function RolePermissionCountButton({
+  role,
+  viewState,
+}: {
+  role: Role;
+  viewState: RolesViewState;
+}) {
+  return (
+    <Button
+      variant="ghost"
+      onClick={() => viewState.openPermissionsModal(role)}
+      className="h-7 rounded-[4px] px-2 text-neutral-400 hover:bg-neutral-800 hover:text-white"
+      title="Ver permissões da role"
+    >
+      <Key className="mr-1.5 size-3" />
+      <span className="text-[10px] font-bold">{role.permissions.length}</span>
+    </Button>
+  );
+}
+
+function RoleTypeBadge({ role }: { role: Role }) {
+  if (role.isSystemRole) {
+    return (
+      <Badge
+        variant="outline"
+        className="rounded-[2px] border-blue-500/20 bg-blue-500/10 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-blue-500"
       >
-        <Form {...createForm}>
-          <form
-            id="create-role-form"
-            onSubmit={createForm.handleSubmit(onCreateSubmit)}
-            className="space-y-4"
+        <Lock className="mr-1 size-3" />
+        SISTEMA
+      </Badge>
+    );
+  }
+
+  return (
+    <Badge
+      variant="outline"
+      className="rounded-[2px] border-neutral-700 bg-neutral-800 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-neutral-500"
+    >
+      CUSTOM
+    </Badge>
+  );
+}
+
+function RoleMobileCards({ viewState }: { viewState: RolesViewState }) {
+  return (
+    <div className="grid gap-3 md:hidden">
+      {viewState.roles.map((role) => (
+        <RoleMobileCard key={role.id} role={role} viewState={viewState} />
+      ))}
+    </div>
+  );
+}
+
+function RoleMobileCard({
+  role,
+  viewState,
+}: {
+  role: Role;
+  viewState: RolesViewState;
+}) {
+  return (
+    <div className="relative flex flex-col gap-3 rounded-[4px] border border-neutral-800 bg-[#171717] p-4 hover:border-neutral-700">
+      <div className="flex items-start justify-between">
+        <div className="flex-1 pr-2">
+          <RoleName role={role} />
+          {role.description && (
+            <p className="mt-1 line-clamp-2 text-xs text-neutral-500">
+              {role.description}
+            </p>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {role.isSystemRole && (
+            <Badge
+              variant="outline"
+              className="rounded-[2px] border-blue-500/20 bg-blue-500/10 px-1.5 py-0.5 text-[10px] font-bold text-blue-500"
+            >
+              <Lock className="size-3" />
+            </Badge>
+          )}
+          <MobileActions
+            role={role}
+            openPermissionsModal={viewState.openPermissionsModal}
+            openEditModal={viewState.openEditModal}
+            openDeleteModal={viewState.openDeleteModal}
+          />
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <Key className="size-3 text-neutral-600" />
+        <button
+          type="button"
+          onClick={() => viewState.openPermissionsModal(role)}
+          className="rounded-[4px] text-left text-xs text-neutral-500 hover:text-white"
+        >
+          {role.permissions.length} permissões
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function RolePermissionSelectorContent({
+  form,
+  groupedPermissions,
+  isLoadingPermissions,
+  permissions,
+}: {
+  form: RoleForm;
+  groupedPermissions: GroupedRolePermissions;
+  isLoadingPermissions: boolean;
+  permissions: RolePermission[];
+}) {
+  if (isLoadingPermissions) {
+    return (
+      <div className="flex items-center gap-2 py-2 text-xs text-neutral-500">
+        <Loader2 className="size-3 animate-spin" />
+        Carregando permissões…
+      </div>
+    );
+  }
+
+  if (permissions.length === 0) {
+    return (
+      <div className="rounded-[4px] border border-neutral-800 bg-neutral-900 p-3 text-xs text-neutral-500">
+        Nenhuma permissão disponível
+      </div>
+    );
+  }
+
+  return (
+    <Accordion type="multiple" className="w-full">
+      {Array.from(groupedPermissions.entries()).map(
+        ([resource, resourcePermissions]) => (
+          <PermissionResourceGroup
+            key={resource}
+            form={form}
+            resource={resource}
+            resourcePermissions={resourcePermissions}
+          />
+        ),
+      )}
+    </Accordion>
+  );
+}
+
+function PermissionResourceGroup({
+  form,
+  resource,
+  resourcePermissions,
+}: {
+  form: RoleForm;
+  resource: string;
+  resourcePermissions: RolePermission[];
+}) {
+  return (
+    <AccordionItem
+      value={resource}
+      className="mb-2 rounded-[4px] border border-neutral-800 bg-neutral-900 last:mb-0"
+    >
+      <AccordionTrigger className="px-3 py-2 text-sm font-medium text-neutral-300 hover:text-white hover:no-underline">
+        <div className="flex items-center gap-2">
+          <Key className="size-3.5 text-neutral-500" />
+          {resource}
+          <Badge
+            variant="outline"
+            className="rounded-[2px] border-neutral-700 bg-neutral-800 px-1.5 py-0 text-[10px] font-bold text-neutral-500"
           >
-            <FormField
-              control={createForm.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-xs font-bold uppercase tracking-wide text-neutral-400">
-                    Nome
-                  </FormLabel>
-                  <FormControl>
-                    <Input
-                      {...field}
-                      placeholder="Ex: Gerente de Estoque"
-                      className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-neutral-200 placeholder:text-neutral-600 focus:border-blue-600"
-                    />
-                  </FormControl>
-                  <FormMessage className="text-xs text-rose-500" />
-                </FormItem>
-              )}
+            {resourcePermissions.length}
+          </Badge>
+        </div>
+      </AccordionTrigger>
+      <AccordionContent className="px-3 pb-3">
+        <div className="space-y-2">
+          {resourcePermissions.map((permission) => (
+            <PermissionCheckbox
+              key={permission.id}
+              form={form}
+              permission={permission}
             />
+          ))}
+        </div>
+      </AccordionContent>
+    </AccordionItem>
+  );
+}
 
-            <FormField
-              control={createForm.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-xs font-bold uppercase tracking-wide text-neutral-400">
-                    Descrição (opcional)
-                  </FormLabel>
-                  <FormControl>
-                    <Textarea
-                      {...field}
-                      placeholder="Descreva as responsabilidades desta role…"
-                      rows={2}
-                      className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-neutral-200 placeholder:text-neutral-600 focus:border-blue-600 resize-none"
-                    />
-                  </FormControl>
-                  <FormMessage className="text-xs text-rose-500" />
-                </FormItem>
-              )}
+function PermissionCheckbox({
+  form,
+  permission,
+}: {
+  form: RoleForm;
+  permission: RolePermission;
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name="permissionIds"
+      render={({ field }) => (
+        <FormItem className="flex items-center gap-2">
+          <FormControl>
+            <Checkbox
+              checked={field.value?.includes(permission.id)}
+              onCheckedChange={(checked) => {
+                const current = field.value || [];
+                if (checked) {
+                  field.onChange([...current, permission.id]);
+                  return;
+                }
+                field.onChange(current.filter((id) => id !== permission.id));
+              }}
+              className="rounded-[2px] border-neutral-700 data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600"
             />
+          </FormControl>
+          <FormLabel className="cursor-pointer text-xs font-normal text-neutral-400">
+            <span className="text-neutral-300">
+              {permission.actionDisplayName || permission.action}
+            </span>
+            <span className="ml-1 text-neutral-600">
+              ({permission.scopeDisplayName || permission.scope})
+            </span>
+            {permission.description && (
+              <span className="block text-[10px] text-neutral-500">
+                {permission.description}
+              </span>
+            )}
+          </FormLabel>
+        </FormItem>
+      )}
+    />
+  );
+}
 
-            <div className="max-h-[250px] overflow-y-auto">
-              <PermissionSelector form={createForm} isLoadingPermissions={isLoadingPermissions} permissions={permissions} groupedPermissions={groupedPermissions} />
-            </div>
-          </form>
-        </Form>
-      </ResponsiveModal>
-
-      {/* Edit Role Modal */}
-      <ResponsiveModal
-        open={isEditModalOpen}
-        onOpenChange={(open) => {
-          if (!open) closeEditModal();
-        }}
-        title="Editar Role"
-        description={selectedRole?.name || ""}
-        maxWidth="sm:max-w-[550px]"
-        footer={
+function RoleCreateModal({ viewState }: { viewState: RolesViewState }) {
+  return (
+    <RoleFormModal
+      form={viewState.createForm}
+      formId="create-role-form"
+      title="Nova Role"
+      description="Crie uma nova role com permissões específicas."
+      isOpen={viewState.isCreateModalOpen}
+      onClose={viewState.closeCreateModal}
+      onSubmit={viewState.onCreateSubmit}
+      submitLabel="Criar Role"
+      submittingLabel="Criando…"
+      viewState={viewState}
+    />
+  );
+}
+
+function RoleEditModal({ viewState }: { viewState: RolesViewState }) {
+  return (
+    <RoleFormModal
+      form={viewState.editForm}
+      formId="edit-role-form"
+      title="Editar Role"
+      description={viewState.selectedRole?.name || ""}
+      isOpen={viewState.isEditModalOpen}
+      onClose={viewState.closeEditModal}
+      onSubmit={viewState.onEditSubmit}
+      submitLabel="Salvar Alterações"
+      submittingLabel="Salvando…"
+      viewState={viewState}
+    />
+  );
+}
+
+function RoleFormModal({
+  description,
+  form,
+  formId,
+  isOpen,
+  onClose,
+  onSubmit,
+  submitLabel,
+  submittingLabel,
+  title,
+  viewState,
+}: {
+  description: string;
+  form: RoleForm;
+  formId: string;
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: RolesViewProps["onCreateSubmit"] | RolesViewProps["onEditSubmit"];
+  submitLabel: string;
+  submittingLabel: string;
+  title: string;
+  viewState: RolesViewState;
+}) {
+  return (
+    <ResponsiveModal
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+      title={title}
+      description={description}
+      maxWidth="sm:max-w-[550px]"
+      footer={
+        <RoleFormFooter
+          formId={formId}
+          isSubmitting={viewState.isSubmitting}
+          onClose={onClose}
+          submitLabel={submitLabel}
+          submittingLabel={submittingLabel}
+        />
+      }
+    >
+      <Form {...form}>
+        <form
+          id={formId}
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-4"
+        >
+          <RoleNameField form={form} />
+          <RoleDescriptionField form={form} />
+          <div className="max-h-[250px] overflow-y-auto">
+            <PermissionSelector
+              form={form}
+              isLoadingPermissions={viewState.isLoadingPermissions}
+              permissions={viewState.permissions}
+              groupedPermissions={viewState.groupedPermissions}
+            />
+          </div>
+        </form>
+      </Form>
+    </ResponsiveModal>
+  );
+}
+
+function RoleFormFooter({
+  formId,
+  isSubmitting,
+  onClose,
+  submitLabel,
+  submittingLabel,
+}: {
+  formId: string;
+  isSubmitting: boolean;
+  onClose: () => void;
+  submitLabel: string;
+  submittingLabel: string;
+}) {
+  return (
+    <>
+      <Button
+        variant="ghost"
+        onClick={onClose}
+        className="rounded-[4px] border-neutral-700 bg-transparent text-xs uppercase hover:bg-neutral-800 hover:text-white"
+      >
+        Cancelar
+      </Button>
+      <Button
+        type="submit"
+        form={formId}
+        disabled={isSubmitting}
+        className="rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
+      >
+        {isSubmitting ? (
           <>
-            <Button
-              variant="ghost"
-              onClick={closeEditModal}
-              className="rounded-[4px] border-neutral-700 bg-transparent text-xs uppercase hover:bg-neutral-800 hover:text-white"
-            >
-              Cancelar
-            </Button>
-            <Button
-              type="submit"
-              form="edit-role-form"
-              disabled={isSubmitting}
-              className="rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
-            >
-              {isSubmitting ? (
-                <>
-                  <Loader2 className="mr-2 size-3.5 animate-spin" />
-                  Salvando…
-                </>
-              ) : (
-                "Salvar Alterações"
-              )}
-            </Button>
+            <Loader2 className="mr-2 size-3.5 animate-spin" />
+            {submittingLabel}
           </>
-        }
-      >
-        <Form {...editForm}>
-          <form
-            id="edit-role-form"
-            onSubmit={editForm.handleSubmit(onEditSubmit)}
-            className="space-y-4"
-          >
-            <FormField
-              control={editForm.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-xs font-bold uppercase tracking-wide text-neutral-400">
-                    Nome
-                  </FormLabel>
-                  <FormControl>
-                    <Input
-                      {...field}
-                      placeholder="Ex: Gerente de Estoque"
-                      className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-neutral-200 placeholder:text-neutral-600 focus:border-blue-600"
-                    />
-                  </FormControl>
-                  <FormMessage className="text-xs text-rose-500" />
-                </FormItem>
-              )}
+        ) : (
+          submitLabel
+        )}
+      </Button>
+    </>
+  );
+}
+
+function RoleNameField({ form }: { form: RoleForm }) {
+  return (
+    <FormField
+      control={form.control}
+      name="name"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-xs font-bold uppercase tracking-wide text-neutral-400">
+            Nome
+          </FormLabel>
+          <FormControl>
+            <Input
+              {...field}
+              placeholder="Ex: Gerente de Estoque"
+              className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-neutral-200 placeholder:text-neutral-600 focus:border-blue-600"
             />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
 
-            <FormField
-              control={editForm.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-xs font-bold uppercase tracking-wide text-neutral-400">
-                    Descrição (opcional)
-                  </FormLabel>
-                  <FormControl>
-                    <Textarea
-                      {...field}
-                      placeholder="Descreva as responsabilidades desta role…"
-                      rows={2}
-                      className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-neutral-200 placeholder:text-neutral-600 focus:border-blue-600 resize-none"
-                    />
-                  </FormControl>
-                  <FormMessage className="text-xs text-rose-500" />
-                </FormItem>
-              )}
+function RoleDescriptionField({ form }: { form: RoleForm }) {
+  return (
+    <FormField
+      control={form.control}
+      name="description"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-xs font-bold uppercase tracking-wide text-neutral-400">
+            Descrição (opcional)
+          </FormLabel>
+          <FormControl>
+            <Textarea
+              {...field}
+              placeholder="Descreva as responsabilidades desta role…"
+              rows={2}
+              className="resize-none rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-neutral-200 placeholder:text-neutral-600 focus:border-blue-600"
             />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
 
-            <div className="max-h-[250px] overflow-y-auto">
-              <PermissionSelector form={editForm} isLoadingPermissions={isLoadingPermissions} permissions={permissions} groupedPermissions={groupedPermissions} />
-            </div>
-          </form>
-        </Form>
-      </ResponsiveModal>
-
-      {/* Delete Confirmation Modal */}
-      <ResponsiveModal
-        open={isDeleteModalOpen}
-        onOpenChange={(open) => {
-          if (!open) closeDeleteModal();
-        }}
-        title="Deletar Role"
-        description={`Tem certeza que deseja deletar a role "${roleToDelete?.name}"?`}
-        maxWidth="sm:max-w-[400px]"
-        footer={
-          <>
-            <Button
-              variant="ghost"
-              onClick={closeDeleteModal}
-              className="rounded-[4px] border-neutral-700 bg-transparent text-xs uppercase hover:bg-neutral-800 hover:text-white"
-            >
-              Cancelar
-            </Button>
-            <Button
-              onClick={confirmDelete}
-              disabled={isDeleting}
-              className="rounded-[4px] bg-rose-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-rose-700"
-            >
-              {isDeleting ? (
-                <>
-                  <Loader2 className="mr-2 size-3.5 animate-spin" />
-                  Deletando…
-                </>
-              ) : (
-                "Deletar"
-              )}
-            </Button>
-          </>
-        }
-      >
-        <div className="space-y-4">
-          <div className="rounded-[4px] border border-rose-900/30 bg-rose-950/10 p-3 text-xs text-rose-500">
-            <div className="flex items-center gap-2 font-bold uppercase tracking-wide">
-              <AlertTriangle className="size-3.5" />
-              Atenção
-            </div>
-            <p className="mt-1 opacity-90">
-              Esta ação é irreversível. Usuários com esta role perderão as permissões associadas.
-            </p>
+function RoleDeleteModal({ viewState }: { viewState: RolesViewState }) {
+  return (
+    <ResponsiveModal
+      open={viewState.isDeleteModalOpen}
+      onOpenChange={(open) => {
+        if (!open) viewState.closeDeleteModal();
+      }}
+      title="Deletar Role"
+      description={`Tem certeza que deseja deletar a role "${viewState.roleToDelete?.name}"?`}
+      maxWidth="sm:max-w-[400px]"
+      footer={<RoleDeleteFooter viewState={viewState} />}
+    >
+      <div className="space-y-4">
+        <div className="rounded-[4px] border border-rose-900/30 bg-rose-950/10 p-3 text-xs text-rose-500">
+          <div className="flex items-center gap-2 font-bold uppercase tracking-wide">
+            <AlertTriangle className="size-3.5" />
+            Atenção
           </div>
+          <p className="mt-1 opacity-90">
+            Esta ação é irreversível. Usuários com esta role perderão as
+            permissões associadas.
+          </p>
         </div>
-      </ResponsiveModal>
+      </div>
+    </ResponsiveModal>
+  );
+}
+
+function RoleDeleteFooter({ viewState }: { viewState: RolesViewState }) {
+  return (
+    <>
+      <Button
+        variant="ghost"
+        onClick={viewState.closeDeleteModal}
+        className="rounded-[4px] border-neutral-700 bg-transparent text-xs uppercase hover:bg-neutral-800 hover:text-white"
+      >
+        Cancelar
+      </Button>
+      <Button
+        onClick={viewState.confirmDelete}
+        disabled={viewState.isDeleting}
+        className="rounded-[4px] bg-rose-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-rose-700"
+      >
+        {viewState.isDeleting ? (
+          <>
+            <Loader2 className="mr-2 size-3.5 animate-spin" />
+            Deletando…
+          </>
+        ) : (
+          "Deletar"
+        )}
+      </Button>
     </>
   );
-};
+}
diff --git a/app/(pages)/system/users/users.view.tsx b/app/(pages)/system/users/users.view.tsx
index 3d82a21..d488597 100644
--- a/app/(pages)/system/users/users.view.tsx
+++ b/app/(pages)/system/users/users.view.tsx
@@ -1,18 +1,25 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
+import { useState, type ReactNode } from "react";
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Input } from "@/components/ui/input";
+  AlertTriangle,
+  Check,
+  Clock,
+  Copy,
+  Loader2,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Search,
+  Shield,
+  UserCheck,
+  Users,
+  UserX,
+  Warehouse,
+} from "lucide-react";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Switch } from "@/components/ui/switch";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -21,7 +28,8 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { ResponsiveModal } from "@/components/ui/responsive-modal";
+import { EmptyState } from "@/components/ui/empty-state";
+import { ErrorState } from "@/components/ui/error-state";
 import {
   Form,
   FormControl,
@@ -30,44 +38,49 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { PageContainer } from "@/components/ui/page-container";
+import { Input } from "@/components/ui/input";
 import { LoadingState } from "@/components/ui/loading-state";
-import { ErrorState } from "@/components/ui/error-state";
-import { EmptyState } from "@/components/ui/empty-state";
+import { PageContainer } from "@/components/ui/page-container";
+import { ResponsiveModal } from "@/components/ui/responsive-modal";
 import { SectionLabel } from "@/components/ui/section-label";
+import { Switch } from "@/components/ui/switch";
 import {
-  Users,
-  Loader2,
-  Plus,
-  Search,
-  AlertTriangle,
-  MoreHorizontal,
-  Shield,
-  Warehouse,
-  Copy,
-  Check,
-  Clock,
-  Pencil,
-  UserX,
-  UserCheck,
-} from "lucide-react";
-import { useState } from "react";
-import { UsersViewProps, User } from "./users.types";
-
-const isCurrentUser = (user: User, currentUserId: UsersViewProps["currentUserId"]) =>
-  user.id === currentUserId;
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import { cn } from "@/lib/utils";
+import type { User, UsersViewProps } from "./users.types";
+
+interface UsersViewState extends UsersViewProps {
+  copiedPassword: boolean;
+  formatDate: (dateString: string | null) => string;
+  handleCopyPassword: () => Promise<void>;
+}
+
+type CreateUserForm = UsersViewProps["createForm"];
+type EditUserForm = UsersViewProps["editForm"];
+type UserRoleOption = UsersViewProps["roles"][number];
+type UserWarehouseOption = UsersViewProps["warehouses"][number];
+
+const isCurrentUserRecord = (
+  user: User,
+  currentUserId: UsersViewProps["currentUserId"],
+) => user.id === currentUserId;
 
 const DesktopActions = ({
-  user,
   currentUserId,
   openEditModal,
   toggleUserStatus,
+  user,
 }: {
-  user: User;
   currentUserId: UsersViewProps["currentUserId"];
   openEditModal: (user: User) => void;
   toggleUserStatus: (user: User) => void;
+  user: User;
 }) => (
   <div className="flex justify-end gap-1">
     <Button
@@ -83,36 +96,34 @@ const DesktopActions = ({
       variant="ghost"
       size="icon"
       onClick={() => toggleUserStatus(user)}
-      disabled={isCurrentUser(user, currentUserId)}
-      title={
-        isCurrentUser(user, currentUserId)
-          ? "Não é possível desativar seu próprio usuário"
-          : user.isActive
-          ? "Desativar usuário"
-          : "Ativar usuário"
-      }
+      disabled={isCurrentUserRecord(user, currentUserId)}
+      title={getUserStatusActionTitle(user, currentUserId)}
       className={cn(
         "size-8 rounded-[4px] disabled:opacity-30",
         user.isActive
           ? "text-neutral-500 hover:bg-amber-950/20 hover:text-amber-500"
-          : "text-neutral-500 hover:bg-emerald-950/20 hover:text-emerald-500"
+          : "text-neutral-500 hover:bg-emerald-950/20 hover:text-emerald-500",
       )}
     >
-      {user.isActive ? <UserX className="size-4" /> : <UserCheck className="size-4" />}
+      {user.isActive ? (
+        <UserX className="size-4" />
+      ) : (
+        <UserCheck className="size-4" />
+      )}
     </Button>
   </div>
 );
 
 const MobileActions = ({
-  user,
   currentUserId,
   openEditModal,
   toggleUserStatus,
+  user,
 }: {
-  user: User;
   currentUserId: UsersViewProps["currentUserId"];
   openEditModal: (user: User) => void;
   toggleUserStatus: (user: User) => void;
+  user: User;
 }) => (
   <DropdownMenu>
     <DropdownMenuTrigger asChild>
@@ -141,14 +152,14 @@ const MobileActions = ({
       </DropdownMenuItem>
       <DropdownMenuItem
         onClick={() => toggleUserStatus(user)}
-        disabled={isCurrentUser(user, currentUserId)}
+        disabled={isCurrentUserRecord(user, currentUserId)}
         className={cn(
           "cursor-pointer",
-          isCurrentUser(user, currentUserId)
+          isCurrentUserRecord(user, currentUserId)
             ? "cursor-not-allowed opacity-50"
             : user.isActive
-            ? "text-amber-500 focus:bg-amber-950/20 focus:text-amber-400"
-            : "text-emerald-500 focus:bg-emerald-950/20 focus:text-emerald-400"
+              ? "text-amber-500 focus:bg-amber-950/20 focus:text-amber-400"
+              : "text-emerald-500 focus:bg-emerald-950/20 focus:text-emerald-400",
         )}
       >
         {user.isActive ? (
@@ -182,7 +193,7 @@ const RoleBadges = ({ userRoles }: { userRoles: string[] }) => {
             "rounded-[2px] border px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider",
             role === "ADMIN"
               ? "border-blue-500/20 bg-blue-500/10 text-blue-500"
-              : "border-neutral-700 bg-neutral-800 text-neutral-400"
+              : "border-neutral-700 bg-neutral-800 text-neutral-400",
           )}
         >
           {role}
@@ -200,7 +211,11 @@ const RoleBadges = ({ userRoles }: { userRoles: string[] }) => {
   );
 };
 
-const WarehouseBadges = ({ userWarehouses }: { userWarehouses: string[] }) => {
+const WarehouseBadges = ({
+  userWarehouses,
+}: {
+  userWarehouses: string[];
+}) => {
   const maxVisible = 2;
   const visible = userWarehouses.slice(0, maxVisible);
   const remaining = userWarehouses.length - maxVisible;
@@ -261,714 +276,895 @@ const StatusBadge = ({ user }: { user: User }) => {
   );
 };
 
-export const UsersView = ({
-  users,
-  isLoading,
-  error,
-  searchQuery,
-  onSearchChange,
-  isCreateModalOpen,
-  openCreateModal,
-  closeCreateModal,
-  isEditModalOpen,
-  selectedUser,
-  openEditModal,
-  closeEditModal,
-  roles,
-  warehouses,
-  isLoadingRoles,
-  isLoadingWarehouses,
-  createForm,
-  editForm,
-  onCreateSubmit,
-  onEditSubmit,
-  isSubmitting,
-  temporaryPassword,
-  createdUserEmail,
-  closePasswordModal,
-  isAdmin,
-  currentUserId,
-  toggleUserStatus,
-  isLoadingAdmin,
-}: UsersViewProps) => {
+export const UsersView = (props: UsersViewProps) => {
   const [copiedPassword, setCopiedPassword] = useState(false);
 
   const handleCopyPassword = async () => {
-    if (temporaryPassword) {
-      await navigator.clipboard.writeText(temporaryPassword);
-      setCopiedPassword(true);
-      setTimeout(() => setCopiedPassword(false), 2000);
-    }
+    if (!props.temporaryPassword) return;
+    await navigator.clipboard.writeText(props.temporaryPassword);
+    setCopiedPassword(true);
+    setTimeout(() => setCopiedPassword(false), 2000);
   };
 
-  const formatDate = (dateString: string | null) => {
-    if (!dateString) return "Nunca";
-    const date = new Date(dateString);
-    return date.toLocaleDateString("pt-BR", {
-      day: "2-digit",
-      month: "2-digit",
-      year: "numeric",
-      hour: "2-digit",
-      minute: "2-digit",
-    });
+  const viewState: UsersViewState = {
+    ...props,
+    copiedPassword,
+    formatDate,
+    handleCopyPassword,
   };
 
-  const isCurrentUser = (user: User) => user.id === currentUserId;
+  if (!props.isLoadingAdmin && !props.isAdmin) {
+    return <UsersAccessDenied />;
+  }
+
+  return (
+    <>
+      <UsersPage viewState={viewState} />
+      <CreateUserModal viewState={viewState} />
+      <EditUserModal viewState={viewState} />
+      <TemporaryPasswordModal viewState={viewState} />
+    </>
+  );
+};
 
-  // Desktop actions - visible buttons
+function getUserStatusActionTitle(
+  user: User,
+  currentUserId: UsersViewProps["currentUserId"],
+) {
+  if (isCurrentUserRecord(user, currentUserId)) {
+    return "Não é possível desativar seu próprio usuário";
+  }
 
-  // Mobile actions - dropdown menu
+  return user.isActive ? "Desativar usuário" : "Ativar usuário";
+}
 
+function formatDate(dateString: string | null) {
+  if (!dateString) return "Nunca";
 
+  return new Date(dateString).toLocaleDateString("pt-BR", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
 
+function UsersAccessDenied() {
+  return (
+    <PageContainer>
+      <UsersTitle />
+      <ErrorState
+        title="Acesso Negado"
+        description="Você não tem permissão para acessar esta página."
+      />
+    </PageContainer>
+  );
+}
 
-  // Access denied state
-  if (!isLoadingAdmin && !isAdmin) {
-    return (
-      <PageContainer>
-        <div className="mb-8">
-          <h1 className="text-2xl font-semibold tracking-tighter text-white">
-            Usuários
-          </h1>
-          <p className="mt-1 text-sm text-neutral-500">Sistema</p>
+function UsersTitle() {
+  return (
+    <div>
+      <h1 className="text-2xl font-semibold tracking-tighter text-white">
+        Usuários
+      </h1>
+      <p className="mt-1 text-sm text-neutral-500">Sistema</p>
+    </div>
+  );
+}
+
+function UsersPage({ viewState }: { viewState: UsersViewState }) {
+  return (
+    <PageContainer>
+      <UsersHeader viewState={viewState} />
+      <UsersSearch viewState={viewState} />
+      <SectionLabel icon={Users} className="mb-4">
+        Lista de Usuários
+      </SectionLabel>
+      <UsersContent viewState={viewState} />
+    </PageContainer>
+  );
+}
+
+function UsersHeader({ viewState }: { viewState: UsersViewState }) {
+  return (
+    <div className="mb-8 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+      <UsersTitle />
+      <div className="w-full md:w-auto">
+        <Button
+          onClick={viewState.openCreateModal}
+          className="h-10 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white shadow-[0_0_20px_-5px_rgba(37,99,235,0.3)] hover:bg-blue-700 md:w-auto"
+        >
+          <Plus className="mr-2 size-4" strokeWidth={2.5} />
+          NOVO USUÁRIO
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function UsersSearch({ viewState }: { viewState: UsersViewState }) {
+  return (
+    <div className="mb-6 flex w-full flex-col gap-3 md:h-12 md:flex-row md:items-center">
+      <div className="relative flex h-12 min-w-[200px] flex-1 items-center">
+        <div className="absolute left-3 text-neutral-500">
+          <Search className="size-3.5" strokeWidth={2.5} />
         </div>
-        <ErrorState
-          title="Acesso Negado"
-          description="Você não tem permissão para acessar esta página."
+        <Input
+          placeholder="Pesquisar por nome ou email…"
+          value={viewState.searchQuery}
+          onChange={(event) => viewState.onSearchChange(event.target.value)}
+          className="w-full rounded-[4px] border-neutral-800 bg-[#171717] pl-10 text-sm text-neutral-200 placeholder:text-neutral-600 hover:border-neutral-700 focus:border-blue-600 focus:ring-0"
         />
-      </PageContainer>
+      </div>
+    </div>
+  );
+}
+
+function UsersContent({ viewState }: { viewState: UsersViewState }) {
+  const { error, isLoading, searchQuery, users } = viewState;
+
+  if (isLoading) return <LoadingState message="Carregando usuários…" />;
+
+  if (error) {
+    return (
+      <ErrorState
+        title="Falha na conexão"
+        description="Não foi possível carregar a lista de usuários."
+      />
+    );
+  }
+
+  if (users.length === 0) {
+    return (
+      <EmptyState
+        icon={Users}
+        title={searchQuery ? "Nenhum resultado encontrado" : "Nenhum usuário cadastrado"}
+        description={
+          searchQuery
+            ? "Tente ajustar seus termos de busca."
+            : "Comece adicionando usuários ao sistema."
+        }
+        action={
+          searchQuery
+            ? { label: "LIMPAR BUSCA", onClick: () => viewState.onSearchChange("") }
+            : { label: "NOVO USUÁRIO", onClick: viewState.openCreateModal }
+        }
+      />
     );
   }
 
   return (
     <>
-      <PageContainer>
-        <div className="mb-8 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-          <div>
-            <h1 className="text-2xl font-semibold tracking-tighter text-white">
-              Usuários
-            </h1>
-            <p className="mt-1 text-sm text-neutral-500">Sistema</p>
-          </div>
-          <div className="w-full md:w-auto">
-            <Button
-              onClick={openCreateModal}
-              className="h-10 w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700 shadow-[0_0_20px_-5px_rgba(37,99,235,0.3)] md:w-auto"
-            >
-              <Plus className="mr-2 size-4" strokeWidth={2.5} />
-              NOVO USUÁRIO
-            </Button>
-          </div>
-        </div>
+      <UsersTable viewState={viewState} />
+      <UserMobileCards viewState={viewState} />
+    </>
+  );
+}
 
-        {/* Search */}
-        <div className="mb-6 flex flex-col gap-3 md:flex-row md:items-center md:h-12 w-full">
-          <div className="relative h-12 flex-1 min-w-[200px] flex items-center">
-            <div className="text-neutral-500 absolute left-3">
-              <Search className="size-3.5" strokeWidth={2.5} />
-            </div>
-            <Input
-              placeholder="Pesquisar por nome ou email…"
-              value={searchQuery}
-              onChange={(e) => onSearchChange(e.target.value)}
-              className="w-full rounded-[4px] border-neutral-800 bg-[#171717] pl-10 text-sm text-neutral-200 placeholder:text-neutral-600 focus:border-blue-600 focus:ring-0 hover:border-neutral-700"
-            />
-          </div>
-        </div>
+function UsersTable({ viewState }: { viewState: UsersViewState }) {
+  return (
+    <div className="hidden overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717] md:block">
+      <Table>
+        <TableHeader className="bg-neutral-900">
+          <TableRow className="border-b border-neutral-800 hover:bg-neutral-900">
+            <TableHead className="h-10 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Nome / Email
+            </TableHead>
+            <TableHead className="h-10 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Roles
+            </TableHead>
+            <TableHead className="h-10 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Armazéns
+            </TableHead>
+            <TableHead className="h-10 text-center text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Status
+            </TableHead>
+            <TableHead className="h-10 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Último Login
+            </TableHead>
+            <TableHead className="h-10 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Ações
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {viewState.users.map((user) => (
+            <UserTableRow key={user.id} user={user} viewState={viewState} />
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
 
-        <SectionLabel icon={Users} className="mb-4">
-          Lista de Usuários
-        </SectionLabel>
-
-        {/* Data Display */}
-        {isLoading ? (
-          <LoadingState message="Carregando usuários…" />
-        ) : error ? (
-          <ErrorState
-            title="Falha na conexão"
-            description="Não foi possível carregar a lista de usuários."
-          />
-        ) : users.length === 0 ? (
-          <EmptyState
-            icon={Users}
-            title={searchQuery ? "Nenhum resultado encontrado" : "Nenhum usuário cadastrado"}
-            description={
-              searchQuery
-                ? "Tente ajustar seus termos de busca."
-                : "Comece adicionando usuários ao sistema."
-            }
-            action={
-              searchQuery
-                ? { label: "LIMPAR BUSCA", onClick: () => onSearchChange("") }
-                : { label: "NOVO USUÁRIO", onClick: openCreateModal }
-            }
+function UserTableRow({
+  user,
+  viewState,
+}: {
+  user: User;
+  viewState: UsersViewState;
+}) {
+  return (
+    <TableRow
+      className={cn(
+        "group border-b border-neutral-800/50 hover:bg-neutral-800/50",
+        !user.isActive && "opacity-50",
+      )}
+    >
+      <TableCell className="py-3">
+        <UserIdentity user={user} viewState={viewState} />
+      </TableCell>
+      <TableCell className="py-3">
+        <RoleBadges userRoles={user.roles} />
+      </TableCell>
+      <TableCell className="py-3">
+        <WarehouseBadges userWarehouses={user.warehouses} />
+      </TableCell>
+      <TableCell className="py-3 text-center">
+        <StatusBadge user={user} />
+      </TableCell>
+      <TableCell className="py-3">
+        <UserLastLogin user={user} viewState={viewState} />
+      </TableCell>
+      <TableCell className="py-3 text-right">
+        <DesktopActions
+          user={user}
+          currentUserId={viewState.currentUserId}
+          openEditModal={viewState.openEditModal}
+          toggleUserStatus={viewState.toggleUserStatus}
+        />
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function UserIdentity({
+  user,
+  viewState,
+}: {
+  user: User;
+  viewState: UsersViewState;
+}) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <span className="font-medium text-white">
+        {user.fullName}
+        {isCurrentUserRecord(user, viewState.currentUserId) && (
+          <span className="ml-2 text-[10px] text-blue-500">(você)</span>
+        )}
+      </span>
+      <span className="text-xs text-neutral-500">{user.email}</span>
+    </div>
+  );
+}
+
+function UserLastLogin({
+  user,
+  viewState,
+}: {
+  user: User;
+  viewState: UsersViewState;
+}) {
+  return (
+    <div className="flex items-center gap-1.5 text-xs text-neutral-500">
+      <Clock className="size-3" />
+      {viewState.formatDate(user.lastLogin)}
+    </div>
+  );
+}
+
+function UserMobileCards({ viewState }: { viewState: UsersViewState }) {
+  return (
+    <div className="grid gap-3 md:hidden">
+      {viewState.users.map((user) => (
+        <UserMobileCard key={user.id} user={user} viewState={viewState} />
+      ))}
+    </div>
+  );
+}
+
+function UserMobileCard({
+  user,
+  viewState,
+}: {
+  user: User;
+  viewState: UsersViewState;
+}) {
+  return (
+    <div
+      className={cn(
+        "relative flex flex-col gap-3 rounded-[4px] border border-neutral-800 bg-[#171717] p-4 hover:border-neutral-700",
+        !user.isActive && "opacity-50",
+      )}
+    >
+      <div className="flex items-start justify-between">
+        <UserIdentity user={user} viewState={viewState} />
+        <div className="flex items-center gap-2">
+          <StatusBadge user={user} />
+          <MobileActions
+            user={user}
+            currentUserId={viewState.currentUserId}
+            openEditModal={viewState.openEditModal}
+            toggleUserStatus={viewState.toggleUserStatus}
           />
-        ) : (
-                <>
-                  <div className="hidden overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717] md:block">
-                    <Table>
-                      <TableHeader className="bg-neutral-900">
-                        <TableRow className="border-b border-neutral-800 hover:bg-neutral-900">
-                          <TableHead className="h-10 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Nome / Email
-                          </TableHead>
-                          <TableHead className="h-10 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Roles
-                          </TableHead>
-                          <TableHead className="h-10 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Armazéns
-                          </TableHead>
-                          <TableHead className="h-10 text-center text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Status
-                          </TableHead>
-                          <TableHead className="h-10 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Último Login
-                          </TableHead>
-                          <TableHead className="h-10 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Ações
-                          </TableHead>
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody>
-                        {users.map((user) => (
-                          <TableRow
-                            key={user.id}
-                            className={cn(
-                              "group border-b border-neutral-800/50 hover:bg-neutral-800/50",
-                              !user.isActive && "opacity-50"
-                            )}
-                          >
-                            <TableCell className="py-3">
-                              <div className="flex flex-col gap-0.5">
-                                <span className="font-medium text-white">
-                                  {user.fullName}
-                                  {isCurrentUser(user) && (
-                                    <span className="ml-2 text-[10px] text-blue-500">(você)</span>
-                                  )}
-                                </span>
-                                <span className="text-xs text-neutral-500">
-                                  {user.email}
-                                </span>
-                              </div>
-                            </TableCell>
-                            <TableCell className="py-3">
-                              <RoleBadges userRoles={user.roles} />
-                            </TableCell>
-                            <TableCell className="py-3">
-                              <WarehouseBadges userWarehouses={user.warehouses} />
-                            </TableCell>
-                            <TableCell className="py-3 text-center">
-                              <StatusBadge user={user} />
-                            </TableCell>
-                            <TableCell className="py-3">
-                              <div className="flex items-center gap-1.5 text-xs text-neutral-500">
-                                <Clock className="size-3" />
-                                {formatDate(user.lastLogin)}
-                              </div>
-                            </TableCell>
-                            <TableCell className="py-3 text-right">
-                              <DesktopActions user={user} currentUserId={currentUserId} openEditModal={openEditModal} toggleUserStatus={toggleUserStatus} />
-                            </TableCell>
-                          </TableRow>
-                        ))}
-                      </TableBody>
-                    </Table>
-                  </div>
-
-                  {/* Mobile Cards */}
-                  <div className="grid gap-3 md:hidden">
-                    {users.map((user) => (
-                      <div
-                        key={user.id}
-                        className={cn(
-                          "relative flex flex-col gap-3 rounded-[4px] border border-neutral-800 bg-[#171717] p-4 hover:border-neutral-700",
-                          !user.isActive && "opacity-50"
-                        )}
-                      >
-                        <div className="flex items-start justify-between">
-                          <div className="flex-1 pr-2">
-                            <h3 className="font-semibold text-white">
-                              {user.fullName}
-                              {isCurrentUser(user) && (
-                                <span className="ml-2 text-[10px] text-blue-500">(você)</span>
-                              )}
-                            </h3>
-                            <p className="text-xs text-neutral-500">{user.email}</p>
-                          </div>
-                          <div className="flex items-center gap-2">
-                            <StatusBadge user={user} />
-                            <MobileActions user={user} currentUserId={currentUserId} openEditModal={openEditModal} toggleUserStatus={toggleUserStatus} />
-                          </div>
-                        </div>
-                        <div className="flex flex-wrap gap-2">
-                          <div className="flex items-center gap-1.5">
-                            <Shield className="size-3 text-neutral-600" />
-                            <RoleBadges userRoles={user.roles} />
-                          </div>
-                        </div>
-                        <div className="flex flex-wrap gap-2">
-                          <div className="flex items-center gap-1.5">
-                            <Warehouse className="size-3 text-neutral-600" />
-                            <WarehouseBadges userWarehouses={user.warehouses} />
-                          </div>
-                        </div>
-                        <div className="flex items-center gap-1.5 text-[10px] text-neutral-600">
-                          <Clock className="size-3" />
-                          Último login: {formatDate(user.lastLogin)}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </>
-              )}
-      </PageContainer>
-
-      {/* Create User Modal */}
-      <ResponsiveModal
-        open={isCreateModalOpen}
-        onOpenChange={(open) => {
-          if (!open) closeCreateModal();
-        }}
-        title="Novo Usuário"
-        description="Preencha os dados para criar um novo usuário."
-        maxWidth="sm:max-w-[500px]"
-        footer={
-          <>
-            <Button
-              variant="ghost"
-              onClick={closeCreateModal}
-              className="rounded-[4px] border-neutral-700 bg-transparent text-xs uppercase hover:bg-neutral-800 hover:text-white"
-            >
-              Cancelar
-            </Button>
-            <Button
-              type="submit"
-              form="create-user-form"
-              disabled={isSubmitting}
-              className="rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
-            >
-              {isSubmitting ? (
-                <>
-                  <Loader2 className="mr-2 size-3.5 animate-spin" />
-                  Criando…
-                </>
-              ) : (
-                "Criar Usuário"
-              )}
-            </Button>
-          </>
-        }
-      >
-        <Form {...createForm}>
-          <form
-            id="create-user-form"
-            onSubmit={createForm.handleSubmit(onCreateSubmit)}
-            className="space-y-4"
-          >
-            <FormField
-              control={createForm.control}
-              name="fullName"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-xs font-bold uppercase tracking-wide text-neutral-400">
-                    Nome Completo
-                  </FormLabel>
-                  <FormControl>
-                    <Input
-                      {...field}
-                      placeholder="Digite o nome completo"
-                      className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-neutral-200 placeholder:text-neutral-600 focus:border-blue-600"
-                    />
-                  </FormControl>
-                  <FormMessage className="text-xs text-rose-500" />
-                </FormItem>
-              )}
-            />
+        </div>
+      </div>
+      <UserMobileRoleLine user={user} />
+      <UserMobileWarehouseLine user={user} />
+      <div className="flex items-center gap-1.5 text-[10px] text-neutral-600">
+        <Clock className="size-3" />
+        Último login: {viewState.formatDate(user.lastLogin)}
+      </div>
+    </div>
+  );
+}
 
-            <FormField
-              control={createForm.control}
-              name="email"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-xs font-bold uppercase tracking-wide text-neutral-400">
-                    Email
-                  </FormLabel>
-                  <FormControl>
-                    <Input
-                      {...field}
-                      type="email"
-                      placeholder="usuario@empresa.com"
-                      className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-neutral-200 placeholder:text-neutral-600 focus:border-blue-600"
-                    />
-                  </FormControl>
-                  <FormMessage className="text-xs text-rose-500" />
-                </FormItem>
-              )}
-            />
+function UserMobileRoleLine({ user }: { user: User }) {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <div className="flex items-center gap-1.5">
+        <Shield className="size-3 text-neutral-600" />
+        <RoleBadges userRoles={user.roles} />
+      </div>
+    </div>
+  );
+}
 
-            <FormField
-              control={createForm.control}
-              name="roleIds"
-              render={() => (
-                <FormItem>
-                  <FormLabel className="text-xs font-bold uppercase tracking-wide text-neutral-400">
-                    Roles
-                  </FormLabel>
-                  {isLoadingRoles ? (
-                    <div className="flex items-center gap-2 py-2 text-xs text-neutral-500">
-                      <Loader2 className="size-3 animate-spin" />
-                      Carregando roles…
-                    </div>
-                  ) : (
-                    <div className="space-y-2 rounded-[4px] border border-neutral-800 bg-neutral-900 p-3">
-                      {roles.map((role) => (
-                        <FormField
-                          key={role.id}
-                          control={createForm.control}
-                          name="roleIds"
-                          render={({ field }) => (
-                            <FormItem className="flex items-center gap-2">
-                              <FormControl>
-                                <Checkbox
-                                  checked={field.value?.includes(role.id)}
-                                  onCheckedChange={(checked) => {
-                                    const current = field.value || [];
-                                    if (checked) {
-                                      field.onChange([...current, role.id]);
-                                    } else {
-                                      field.onChange(
-                                        current.filter((id) => id !== role.id)
-                                      );
-                                    }
-                                  }}
-                                  className="rounded-[2px] border-neutral-700 data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600"
-                                />
-                              </FormControl>
-                              <FormLabel className="text-sm font-normal text-neutral-300 cursor-pointer">
-                                {role.name}
-                                {role.isSystemRole && (
-                                  <span className="ml-1.5 text-[10px] text-blue-500">
-                                    (sistema)
-                                  </span>
-                                )}
-                              </FormLabel>
-                            </FormItem>
-                          )}
-                        />
-                      ))}
-                    </div>
-                  )}
-                  <FormMessage className="text-xs text-rose-500" />
-                </FormItem>
-              )}
-            />
+function UserMobileWarehouseLine({ user }: { user: User }) {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <div className="flex items-center gap-1.5">
+        <Warehouse className="size-3 text-neutral-600" />
+        <WarehouseBadges userWarehouses={user.warehouses} />
+      </div>
+    </div>
+  );
+}
 
-            <FormField
-              control={createForm.control}
-              name="warehouseIds"
-              render={() => (
-                <FormItem>
-                  <FormLabel className="text-xs font-bold uppercase tracking-wide text-neutral-400">
-                    Armazéns
-                  </FormLabel>
-                  {isLoadingWarehouses ? (
-                    <div className="flex items-center gap-2 py-2 text-xs text-neutral-500">
-                      <Loader2 className="size-3 animate-spin" />
-                      Carregando armazéns…
-                    </div>
-                  ) : (
-                    <div className="space-y-2 rounded-[4px] border border-neutral-800 bg-neutral-900 p-3 max-h-[150px] overflow-y-auto">
-                      {warehouses.map((warehouse) => (
-                        <FormField
-                          key={warehouse.id}
-                          control={createForm.control}
-                          name="warehouseIds"
-                          render={({ field }) => (
-                            <FormItem className="flex items-center gap-2">
-                              <FormControl>
-                                <Checkbox
-                                  checked={field.value?.includes(warehouse.id)}
-                                  onCheckedChange={(checked) => {
-                                    const current = field.value || [];
-                                    if (checked) {
-                                      field.onChange([...current, warehouse.id]);
-                                    } else {
-                                      field.onChange(
-                                        current.filter((id) => id !== warehouse.id)
-                                      );
-                                    }
-                                  }}
-                                  className="rounded-[2px] border-neutral-700 data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600"
-                                />
-                              </FormControl>
-                              <FormLabel className="text-sm font-normal text-neutral-300 cursor-pointer">
-                                {warehouse.name}
-                              </FormLabel>
-                            </FormItem>
-                          )}
-                        />
-                      ))}
-                    </div>
-                  )}
-                  <FormMessage className="text-xs text-rose-500" />
-                </FormItem>
-              )}
-            />
-          </form>
-        </Form>
-      </ResponsiveModal>
-
-      {/* Edit User Modal */}
-      <ResponsiveModal
-        open={isEditModalOpen}
-        onOpenChange={(open) => {
-          if (!open) closeEditModal();
-        }}
-        title="Editar Usuário"
-        description={selectedUser?.email || ""}
-        maxWidth="sm:max-w-[500px]"
-        footer={
+function CreateUserModal({ viewState }: { viewState: UsersViewState }) {
+  const { closeCreateModal, createForm, isCreateModalOpen, onCreateSubmit } =
+    viewState;
+
+  return (
+    <ResponsiveModal
+      open={isCreateModalOpen}
+      onOpenChange={(open) => {
+        if (!open) closeCreateModal();
+      }}
+      title="Novo Usuário"
+      description="Preencha os dados para criar um novo usuário."
+      maxWidth="sm:max-w-[500px]"
+      footer={
+        <UserFormFooter
+          formId="create-user-form"
+          isSubmitting={viewState.isSubmitting}
+          onClose={closeCreateModal}
+          submitLabel="Criar Usuário"
+          submittingLabel="Criando…"
+        />
+      }
+    >
+      <Form {...createForm}>
+        <form
+          id="create-user-form"
+          onSubmit={createForm.handleSubmit(onCreateSubmit)}
+          className="space-y-4"
+        >
+          <CreateUserFullNameField form={createForm} />
+          <CreateUserEmailField form={createForm} />
+          <CreateUserRolesField viewState={viewState} />
+          <CreateUserWarehousesField viewState={viewState} />
+        </form>
+      </Form>
+    </ResponsiveModal>
+  );
+}
+
+function EditUserModal({ viewState }: { viewState: UsersViewState }) {
+  const { closeEditModal, editForm, isEditModalOpen, onEditSubmit, selectedUser } =
+    viewState;
+
+  return (
+    <ResponsiveModal
+      open={isEditModalOpen}
+      onOpenChange={(open) => {
+        if (!open) closeEditModal();
+      }}
+      title="Editar Usuário"
+      description={selectedUser?.email || ""}
+      maxWidth="sm:max-w-[500px]"
+      footer={
+        <UserFormFooter
+          formId="edit-user-form"
+          isSubmitting={viewState.isSubmitting}
+          onClose={closeEditModal}
+          submitLabel="Salvar Alterações"
+          submittingLabel="Salvando…"
+        />
+      }
+    >
+      <Form {...editForm}>
+        <form
+          id="edit-user-form"
+          onSubmit={editForm.handleSubmit(onEditSubmit)}
+          className="space-y-4"
+        >
+          <EditUserFullNameField form={editForm} />
+          <EditUserActiveField viewState={viewState} />
+          <EditUserRolesField viewState={viewState} />
+          <EditUserWarehousesField viewState={viewState} />
+        </form>
+      </Form>
+    </ResponsiveModal>
+  );
+}
+
+function UserFormFooter({
+  formId,
+  isSubmitting,
+  onClose,
+  submitLabel,
+  submittingLabel,
+}: {
+  formId: string;
+  isSubmitting: boolean;
+  onClose: () => void;
+  submitLabel: string;
+  submittingLabel: string;
+}) {
+  return (
+    <>
+      <Button
+        variant="ghost"
+        onClick={onClose}
+        className="rounded-[4px] border-neutral-700 bg-transparent text-xs uppercase hover:bg-neutral-800 hover:text-white"
+      >
+        Cancelar
+      </Button>
+      <Button
+        type="submit"
+        form={formId}
+        disabled={isSubmitting}
+        className="rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
+      >
+        {isSubmitting ? (
           <>
-            <Button
-              variant="ghost"
-              onClick={closeEditModal}
-              className="rounded-[4px] border-neutral-700 bg-transparent text-xs uppercase hover:bg-neutral-800 hover:text-white"
-            >
-              Cancelar
-            </Button>
-            <Button
-              type="submit"
-              form="edit-user-form"
-              disabled={isSubmitting}
-              className="rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
-            >
-              {isSubmitting ? (
-                <>
-                  <Loader2 className="mr-2 size-3.5 animate-spin" />
-                  Salvando…
-                </>
-              ) : (
-                "Salvar Alterações"
-              )}
-            </Button>
+            <Loader2 className="mr-2 size-3.5 animate-spin" />
+            {submittingLabel}
           </>
-        }
-      >
-        <Form {...editForm}>
-          <form
-            id="edit-user-form"
-            onSubmit={editForm.handleSubmit(onEditSubmit)}
-            className="space-y-4"
-          >
-            <FormField
-              control={editForm.control}
-              name="fullName"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-xs font-bold uppercase tracking-wide text-neutral-400">
-                    Nome Completo
-                  </FormLabel>
-                  <FormControl>
-                    <Input
-                      {...field}
-                      placeholder="Digite o nome completo"
-                      className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-neutral-200 placeholder:text-neutral-600 focus:border-blue-600"
-                    />
-                  </FormControl>
-                  <FormMessage className="text-xs text-rose-500" />
-                </FormItem>
-              )}
-            />
+        ) : (
+          submitLabel
+        )}
+      </Button>
+    </>
+  );
+}
 
-            <FormField
-              control={editForm.control}
-              name="isActive"
-              render={({ field }) => (
-                <FormItem className="flex items-center justify-between rounded-[4px] border border-neutral-800 bg-neutral-900 p-3">
-                  <div>
-                    <FormLabel className="text-sm font-medium text-neutral-300">
-                      Usuário Ativo
-                    </FormLabel>
-                    <p className="text-xs text-neutral-500">
-                      Usuários inativos não podem acessar o sistema
-                    </p>
-                  </div>
-                  <FormControl>
-                    <Switch
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                      disabled={selectedUser?.id === currentUserId}
-                      className="data-[state=checked]:bg-blue-600"
-                    />
-                  </FormControl>
-                </FormItem>
-              )}
+function CreateUserFullNameField({ form }: { form: CreateUserForm }) {
+  return (
+    <FormField
+      control={form.control}
+      name="fullName"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-xs font-bold uppercase tracking-wide text-neutral-400">
+            Nome Completo
+          </FormLabel>
+          <FormControl>
+            <Input
+              {...field}
+              placeholder="Digite o nome completo"
+              className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-neutral-200 placeholder:text-neutral-600 focus:border-blue-600"
             />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
 
-            <FormField
-              control={editForm.control}
-              name="roleIds"
-              render={() => (
-                <FormItem>
-                  <FormLabel className="text-xs font-bold uppercase tracking-wide text-neutral-400">
-                    Roles
-                  </FormLabel>
-                  {isLoadingRoles ? (
-                    <div className="flex items-center gap-2 py-2 text-xs text-neutral-500">
-                      <Loader2 className="size-3 animate-spin" />
-                      Carregando roles…
-                    </div>
-                  ) : (
-                    <div className="space-y-2 rounded-[4px] border border-neutral-800 bg-neutral-900 p-3">
-                      {roles.map((role) => (
-                        <FormField
-                          key={role.id}
-                          control={editForm.control}
-                          name="roleIds"
-                          render={({ field }) => (
-                            <FormItem className="flex items-center gap-2">
-                              <FormControl>
-                                <Checkbox
-                                  checked={field.value?.includes(role.id)}
-                                  onCheckedChange={(checked) => {
-                                    const current = field.value || [];
-                                    if (checked) {
-                                      field.onChange([...current, role.id]);
-                                    } else {
-                                      field.onChange(
-                                        current.filter((id) => id !== role.id)
-                                      );
-                                    }
-                                  }}
-                                  className="rounded-[2px] border-neutral-700 data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600"
-                                />
-                              </FormControl>
-                              <FormLabel className="text-sm font-normal text-neutral-300 cursor-pointer">
-                                {role.name}
-                                {role.isSystemRole && (
-                                  <span className="ml-1.5 text-[10px] text-blue-500">
-                                    (sistema)
-                                  </span>
-                                )}
-                              </FormLabel>
-                            </FormItem>
-                          )}
-                        />
-                      ))}
-                    </div>
-                  )}
-                  <FormMessage className="text-xs text-rose-500" />
-                </FormItem>
-              )}
+function EditUserFullNameField({ form }: { form: EditUserForm }) {
+  return (
+    <FormField
+      control={form.control}
+      name="fullName"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-xs font-bold uppercase tracking-wide text-neutral-400">
+            Nome Completo
+          </FormLabel>
+          <FormControl>
+            <Input
+              {...field}
+              placeholder="Digite o nome completo"
+              className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-neutral-200 placeholder:text-neutral-600 focus:border-blue-600"
             />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
 
-            <FormField
-              control={editForm.control}
-              name="warehouseIds"
-              render={() => (
-                <FormItem>
-                  <FormLabel className="text-xs font-bold uppercase tracking-wide text-neutral-400">
-                    Armazéns
-                  </FormLabel>
-                  {isLoadingWarehouses ? (
-                    <div className="flex items-center gap-2 py-2 text-xs text-neutral-500">
-                      <Loader2 className="size-3 animate-spin" />
-                      Carregando armazéns…
-                    </div>
-                  ) : (
-                    <div className="space-y-2 rounded-[4px] border border-neutral-800 bg-neutral-900 p-3 max-h-[150px] overflow-y-auto">
-                      {warehouses.map((warehouse) => (
-                        <FormField
-                          key={warehouse.id}
-                          control={editForm.control}
-                          name="warehouseIds"
-                          render={({ field }) => (
-                            <FormItem className="flex items-center gap-2">
-                              <FormControl>
-                                <Checkbox
-                                  checked={field.value?.includes(warehouse.id)}
-                                  onCheckedChange={(checked) => {
-                                    const current = field.value || [];
-                                    if (checked) {
-                                      field.onChange([...current, warehouse.id]);
-                                    } else {
-                                      field.onChange(
-                                        current.filter((id) => id !== warehouse.id)
-                                      );
-                                    }
-                                  }}
-                                  className="rounded-[2px] border-neutral-700 data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600"
-                                />
-                              </FormControl>
-                              <FormLabel className="text-sm font-normal text-neutral-300 cursor-pointer">
-                                {warehouse.name}
-                              </FormLabel>
-                            </FormItem>
-                          )}
-                        />
-                      ))}
-                    </div>
-                  )}
-                  <FormMessage className="text-xs text-rose-500" />
-                </FormItem>
-              )}
+function CreateUserEmailField({ form }: { form: CreateUserForm }) {
+  return (
+    <FormField
+      control={form.control}
+      name="email"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-xs font-bold uppercase tracking-wide text-neutral-400">
+            Email
+          </FormLabel>
+          <FormControl>
+            <Input
+              {...field}
+              type="email"
+              placeholder="usuario@empresa.com"
+              className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm text-neutral-200 placeholder:text-neutral-600 focus:border-blue-600"
             />
-          </form>
-        </Form>
-      </ResponsiveModal>
-
-      {/* Temporary Password Modal */}
-      <ResponsiveModal
-        open={!!temporaryPassword}
-        onOpenChange={(open) => {
-          if (!open) closePasswordModal();
-        }}
-        title="Usuário Criado"
-        description={`Senha temporária para ${createdUserEmail}`}
-        maxWidth="sm:max-w-[400px]"
-        footer={
-          <Button
-            onClick={closePasswordModal}
-            className="w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
-          >
-            Feito
-          </Button>
-        }
-      >
-        <div className="space-y-4">
-          <div className="rounded-[4px] border border-amber-900/30 bg-amber-950/10 p-3 text-xs text-amber-500">
-            <div className="flex items-center gap-2 font-bold uppercase tracking-wide">
-              <AlertTriangle className="size-3.5" />
-              Atenção
-            </div>
-            <p className="mt-1 opacity-90">
-              Anote esta senha. Ela não será exibida novamente.
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function EditUserActiveField({ viewState }: { viewState: UsersViewState }) {
+  return (
+    <FormField
+      control={viewState.editForm.control}
+      name="isActive"
+      render={({ field }) => (
+        <FormItem className="flex items-center justify-between rounded-[4px] border border-neutral-800 bg-neutral-900 p-3">
+          <div>
+            <FormLabel className="text-sm font-medium text-neutral-300">
+              Usuário Ativo
+            </FormLabel>
+            <p className="text-xs text-neutral-500">
+              Usuários inativos não podem acessar o sistema
             </p>
           </div>
+          <FormControl>
+            <Switch
+              checked={field.value}
+              onCheckedChange={field.onChange}
+              disabled={viewState.selectedUser?.id === viewState.currentUserId}
+              className="data-[state=checked]:bg-blue-600"
+            />
+          </FormControl>
+        </FormItem>
+      )}
+    />
+  );
+}
 
-          <div className="flex items-center gap-2">
-            <div className="flex-1 rounded-[4px] border border-neutral-800 bg-neutral-900 px-3 py-2.5 font-mono text-lg tracking-wider text-white">
-              {temporaryPassword}
-            </div>
-            <Button
-              variant="outline"
-              size="icon"
-              onClick={handleCopyPassword}
-              className="size-10 rounded-[4px] border-neutral-700 bg-neutral-800 hover:bg-neutral-700"
-            >
-              {copiedPassword ? (
-                <Check className="size-4 text-emerald-500" />
-              ) : (
-                <Copy className="size-4 text-neutral-400" />
-              )}
-            </Button>
+function CreateUserRolesField({ viewState }: { viewState: UsersViewState }) {
+  return (
+    <FormField
+      control={viewState.createForm.control}
+      name="roleIds"
+      render={() => (
+        <UserAssignmentField label="Roles" isLoading={viewState.isLoadingRoles}>
+          <div className="space-y-2 rounded-[4px] border border-neutral-800 bg-neutral-900 p-3">
+            {viewState.roles.map((role) => (
+              <CreateUserRoleCheckbox
+                key={role.id}
+                form={viewState.createForm}
+                role={role}
+              />
+            ))}
           </div>
+        </UserAssignmentField>
+      )}
+    />
+  );
+}
+
+function EditUserRolesField({ viewState }: { viewState: UsersViewState }) {
+  return (
+    <FormField
+      control={viewState.editForm.control}
+      name="roleIds"
+      render={() => (
+        <UserAssignmentField label="Roles" isLoading={viewState.isLoadingRoles}>
+          <div className="space-y-2 rounded-[4px] border border-neutral-800 bg-neutral-900 p-3">
+            {viewState.roles.map((role) => (
+              <EditUserRoleCheckbox
+                key={role.id}
+                form={viewState.editForm}
+                role={role}
+              />
+            ))}
+          </div>
+        </UserAssignmentField>
+      )}
+    />
+  );
+}
+
+function CreateUserWarehousesField({
+  viewState,
+}: {
+  viewState: UsersViewState;
+}) {
+  return (
+    <FormField
+      control={viewState.createForm.control}
+      name="warehouseIds"
+      render={() => (
+        <UserAssignmentField
+          label="Armazéns"
+          isLoading={viewState.isLoadingWarehouses}
+        >
+          <div className="max-h-[150px] space-y-2 overflow-y-auto rounded-[4px] border border-neutral-800 bg-neutral-900 p-3">
+            {viewState.warehouses.map((warehouse) => (
+              <CreateUserWarehouseCheckbox
+                key={warehouse.id}
+                form={viewState.createForm}
+                warehouse={warehouse}
+              />
+            ))}
+          </div>
+        </UserAssignmentField>
+      )}
+    />
+  );
+}
+
+function EditUserWarehousesField({ viewState }: { viewState: UsersViewState }) {
+  return (
+    <FormField
+      control={viewState.editForm.control}
+      name="warehouseIds"
+      render={() => (
+        <UserAssignmentField
+          label="Armazéns"
+          isLoading={viewState.isLoadingWarehouses}
+        >
+          <div className="max-h-[150px] space-y-2 overflow-y-auto rounded-[4px] border border-neutral-800 bg-neutral-900 p-3">
+            {viewState.warehouses.map((warehouse) => (
+              <EditUserWarehouseCheckbox
+                key={warehouse.id}
+                form={viewState.editForm}
+                warehouse={warehouse}
+              />
+            ))}
+          </div>
+        </UserAssignmentField>
+      )}
+    />
+  );
+}
 
-          <p className="text-[10px] text-neutral-500 text-center">
-            O usuário deverá trocar esta senha no primeiro login.
+function UserAssignmentField({
+  children,
+  isLoading,
+  label,
+}: {
+  children: ReactNode;
+  isLoading: boolean;
+  label: string;
+}) {
+  return (
+    <FormItem>
+      <FormLabel className="text-xs font-bold uppercase tracking-wide text-neutral-400">
+        {label}
+      </FormLabel>
+      {isLoading ? (
+        <div className="flex items-center gap-2 py-2 text-xs text-neutral-500">
+          <Loader2 className="size-3 animate-spin" />
+          Carregando {label.toLowerCase()}…
+        </div>
+      ) : (
+        children
+      )}
+      <FormMessage className="text-xs text-rose-500" />
+    </FormItem>
+  );
+}
+
+function CreateUserRoleCheckbox({
+  form,
+  role,
+}: {
+  form: CreateUserForm;
+  role: UserRoleOption;
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name="roleIds"
+      render={({ field }) => (
+        <UserRoleCheckboxItem field={field} role={role} />
+      )}
+    />
+  );
+}
+
+function EditUserRoleCheckbox({
+  form,
+  role,
+}: {
+  form: EditUserForm;
+  role: UserRoleOption;
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name="roleIds"
+      render={({ field }) => <UserRoleCheckboxItem field={field} role={role} />}
+    />
+  );
+}
+
+function UserRoleCheckboxItem({
+  field,
+  role,
+}: {
+  field: { value?: string[]; onChange: (value: string[]) => void };
+  role: UserRoleOption;
+}) {
+  return (
+    <FormItem className="flex items-center gap-2">
+      <FormControl>
+        <Checkbox
+          checked={field.value?.includes(role.id)}
+          onCheckedChange={(checked) => {
+            const current = field.value || [];
+            if (checked) {
+              field.onChange([...current, role.id]);
+              return;
+            }
+            field.onChange(current.filter((id) => id !== role.id));
+          }}
+          className="rounded-[2px] border-neutral-700 data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600"
+        />
+      </FormControl>
+      <FormLabel className="cursor-pointer text-sm font-normal text-neutral-300">
+        {role.name}
+        {role.isSystemRole && (
+          <span className="ml-1.5 text-[10px] text-blue-500">(sistema)</span>
+        )}
+      </FormLabel>
+    </FormItem>
+  );
+}
+
+function CreateUserWarehouseCheckbox({
+  form,
+  warehouse,
+}: {
+  form: CreateUserForm;
+  warehouse: UserWarehouseOption;
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name="warehouseIds"
+      render={({ field }) => (
+        <UserWarehouseCheckboxItem field={field} warehouse={warehouse} />
+      )}
+    />
+  );
+}
+
+function EditUserWarehouseCheckbox({
+  form,
+  warehouse,
+}: {
+  form: EditUserForm;
+  warehouse: UserWarehouseOption;
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name="warehouseIds"
+      render={({ field }) => (
+        <UserWarehouseCheckboxItem field={field} warehouse={warehouse} />
+      )}
+    />
+  );
+}
+
+function UserWarehouseCheckboxItem({
+  field,
+  warehouse,
+}: {
+  field: { value?: string[]; onChange: (value: string[]) => void };
+  warehouse: UserWarehouseOption;
+}) {
+  return (
+    <FormItem className="flex items-center gap-2">
+      <FormControl>
+        <Checkbox
+          checked={field.value?.includes(warehouse.id)}
+          onCheckedChange={(checked) => {
+            const current = field.value || [];
+            if (checked) {
+              field.onChange([...current, warehouse.id]);
+              return;
+            }
+            field.onChange(current.filter((id) => id !== warehouse.id));
+          }}
+          className="rounded-[2px] border-neutral-700 data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600"
+        />
+      </FormControl>
+      <FormLabel className="cursor-pointer text-sm font-normal text-neutral-300">
+        {warehouse.name}
+      </FormLabel>
+    </FormItem>
+  );
+}
+
+function TemporaryPasswordModal({
+  viewState,
+}: {
+  viewState: UsersViewState;
+}) {
+  return (
+    <ResponsiveModal
+      open={!!viewState.temporaryPassword}
+      onOpenChange={(open) => {
+        if (!open) viewState.closePasswordModal();
+      }}
+      title="Usuário Criado"
+      description={`Senha temporária para ${viewState.createdUserEmail}`}
+      maxWidth="sm:max-w-[400px]"
+      footer={
+        <Button
+          onClick={viewState.closePasswordModal}
+          className="w-full rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
+        >
+          Feito
+        </Button>
+      }
+    >
+      <div className="space-y-4">
+        <div className="rounded-[4px] border border-amber-900/30 bg-amber-950/10 p-3 text-xs text-amber-500">
+          <div className="flex items-center gap-2 font-bold uppercase tracking-wide">
+            <AlertTriangle className="size-3.5" />
+            Atenção
+          </div>
+          <p className="mt-1 opacity-90">
+            Anote esta senha. Ela não será exibida novamente.
           </p>
         </div>
-      </ResponsiveModal>
-    </>
+        <TemporaryPasswordValue viewState={viewState} />
+        <p className="text-center text-[10px] text-neutral-500">
+          O usuário deverá trocar esta senha no primeiro login.
+        </p>
+      </div>
+    </ResponsiveModal>
   );
-};
+}
+
+function TemporaryPasswordValue({
+  viewState,
+}: {
+  viewState: UsersViewState;
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex-1 rounded-[4px] border border-neutral-800 bg-neutral-900 px-3 py-2.5 font-mono text-lg tracking-wider text-white">
+        {viewState.temporaryPassword}
+      </div>
+      <Button
+        variant="outline"
+        size="icon"
+        onClick={viewState.handleCopyPassword}
+        className="size-10 rounded-[4px] border-neutral-700 bg-neutral-800 hover:bg-neutral-700"
+      >
+        {viewState.copiedPassword ? (
+          <Check className="size-4 text-emerald-500" />
+        ) : (
+          <Copy className="size-4 text-neutral-400" />
+        )}
+      </Button>
+    </div>
+  );
+}
diff --git a/app/(pages)/transfers/[id]/transfer-detail.view.tsx b/app/(pages)/transfers/[id]/transfer-detail.view.tsx
index 682018f..f58b842 100644
--- a/app/(pages)/transfers/[id]/transfer-detail.view.tsx
+++ b/app/(pages)/transfers/[id]/transfer-detail.view.tsx
@@ -1,34 +1,45 @@
 import Link from "next/link";
+import type { ReactNode } from "react";
+import { format, parseISO } from "date-fns";
 import {
-  ArrowRight,
   Calendar,
-  FileText,
   CheckCircle,
-  XCircle,
   Edit,
-  Package,
-  Warehouse,
-  Truck,
-  MapPin,
+  FileText,
   Hash,
+  MapPin,
+  Package,
   ShieldCheck,
+  Truck,
+  Warehouse,
+  XCircle,
 } from "lucide-react";
-import { TransferDetailViewProps } from "./transfer-detail.types";
-import { TransferStatus } from "../transfers.types";
+import { PermissionGate } from "@/components/permission-gate";
 import { Button } from "@/components/ui/button";
+import { FixedBottomBar } from "@/components/ui/fixed-bottom-bar";
+import { LoadingState } from "@/components/ui/loading-state";
 import { PageContainer } from "@/components/ui/page-container";
 import { PageHeader } from "@/components/ui/page-header";
 import { SectionLabel } from "@/components/ui/section-label";
-import { LoadingState } from "@/components/ui/loading-state";
-import { FixedBottomBar } from "@/components/ui/fixed-bottom-bar";
 import { cn } from "@/lib/utils";
-import { PermissionGate } from "@/components/permission-gate";
-import { format, parseISO } from "date-fns";
+import type { TransferDetailViewProps } from "./transfer-detail.types";
+import { TransferStatus, type Transfer } from "../transfers.types";
+
+interface TransferStatusStyle {
+  dot: string;
+  bg: string;
+  text: string;
+  label: string;
+}
 
-const statusConfig: Record<
-  TransferStatus,
-  { dot: string; bg: string; text: string; label: string }
-> = {
+interface TransferDetailViewState extends TransferDetailViewProps {
+  hasActions: boolean;
+  status: TransferStatusStyle;
+  totalQuantity: number;
+  transfer: Transfer;
+}
+
+const statusConfig: Record<TransferStatus, TransferStatusStyle> = {
   [TransferStatus.DRAFT]: {
     dot: "bg-neutral-500",
     bg: "bg-neutral-500/10 border-neutral-500/30",
@@ -67,18 +78,9 @@ const statusConfig: Record<
   },
 };
 
-export const TransferDetailView: React.FC<TransferDetailViewProps> = ({
-  isLoading,
-  transfer,
-  isSource,
-  isDestination,
-  isExecuting,
-  isCancelling,
-  isValidating,
-  onExecute,
-  onCancel,
-  onStartValidation,
-}) => {
+export const TransferDetailView = (props: TransferDetailViewProps) => {
+  const { isLoading, transfer } = props;
+
   if (isLoading) {
     return (
       <PageContainer>
@@ -88,494 +90,733 @@ export const TransferDetailView: React.FC<TransferDetailViewProps> = ({
   }
 
   if (!transfer) {
-    return (
-      <PageContainer>
-        <div className="flex flex-col items-center justify-center py-32">
-          <Package
-            className="mb-4 size-10 text-neutral-600"
-            strokeWidth={2}
-          />
-          <p className="text-sm font-bold text-white">
-            Transferência não encontrada
-          </p>
-          <p className="mt-1 text-xs text-neutral-500">
-            Verifique o ID e tente novamente.
-          </p>
-        </div>
-      </PageContainer>
-    );
+    return <TransferMissingState />;
   }
 
-  const status =
-    statusConfig[transfer.status] || statusConfig[TransferStatus.DRAFT];
-  const getItemQty = (item: { quantity?: number; quantitySent?: number }) =>
-    item.quantity ?? item.quantitySent ?? 0;
   const totalQuantity = transfer.items.reduce(
-    (acc, item) => acc + getItemQty(item),
+    (acc, item) => acc + getTransferItemQty(item),
     0,
   );
-  const hasActions =
-    (isSource && transfer.status === TransferStatus.DRAFT) ||
-    (isSource && transfer.status === TransferStatus.IN_TRANSIT) ||
-    (isDestination && transfer.status === TransferStatus.IN_TRANSIT) ||
-    (isDestination && transfer.status === TransferStatus.PENDING_VALIDATION) ||
+  const viewState: TransferDetailViewState = {
+    ...props,
+    transfer,
+    status: statusConfig[transfer.status] || statusConfig[TransferStatus.DRAFT],
+    totalQuantity,
+    hasActions: shouldShowTransferActions(props, transfer),
+  };
+
+  return (
+    <PageContainer bottomPadding={viewState.hasActions ? "fixed-bar" : "default"}>
+      <TransferDetailHeader viewState={viewState} />
+      <TransferRouteCard viewState={viewState} />
+      <TransferItemsSection viewState={viewState} />
+      <TransferActionFooter viewState={viewState} />
+    </PageContainer>
+  );
+};
+
+function getTransferItemQty(item: Transfer["items"][number]) {
+  return item.quantity ?? item.quantitySent ?? 0;
+}
+
+function shouldShowTransferActions(
+  props: TransferDetailViewProps,
+  transfer: Transfer,
+) {
+  return (
+    (props.isSource && transfer.status === TransferStatus.DRAFT) ||
+    (props.isSource && transfer.status === TransferStatus.IN_TRANSIT) ||
+    (props.isDestination && transfer.status === TransferStatus.IN_TRANSIT) ||
+    (props.isDestination &&
+      transfer.status === TransferStatus.PENDING_VALIDATION) ||
     transfer.status === TransferStatus.COMPLETED ||
     transfer.status === TransferStatus.COMPLETED_WITH_DISCREPANCY ||
-    transfer.status === TransferStatus.CANCELLED;
+    transfer.status === TransferStatus.CANCELLED
+  );
+}
 
+function shouldShowValidationQuantities(status: TransferStatus) {
   return (
-    <PageContainer bottomPadding={hasActions ? "fixed-bar" : "default"}>
-      <PageHeader
-        title={transfer.code}
-        subtitle="Detalhes da Transferência"
-        actions={
-          <div className="flex items-center gap-3">
-            <span
-              className={cn(
-                "flex items-center gap-1.5 rounded-[4px] border px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest",
-                status.bg,
-                status.text,
-              )}
-            >
-              <span className={cn("size-1.5 rounded-full", status.dot)} />
-              {status.label}
-            </span>
-          </div>
-        }
-      />
-
-      {/* ── Route Card ── */}
-      <div className="mb-8 rounded-[4px] border border-neutral-800 bg-[#171717] p-5 sm:p-6">
-        {/* Route visual */}
-        <div className="flex flex-col items-stretch gap-0 sm:flex-row sm:items-center sm:gap-0">
-          {/* Origin node */}
-          <div className="flex flex-1 items-start gap-4 sm:items-center">
-            <div className="relative flex flex-col items-center">
-              <div
-                className={cn(
-                  "flex size-12 items-center justify-center rounded-[4px] border",
-                  isSource
-                    ? "border-blue-600/50 bg-blue-600/10 text-blue-400"
-                    : "border-neutral-700 bg-neutral-800 text-neutral-400",
-                )}
-              >
-                <Warehouse className="size-5" strokeWidth={2} />
-              </div>
-              {/* Vertical connector (mobile only) */}
-              <div className="mt-1 h-6 w-px bg-neutral-700 sm:hidden" />
-            </div>
-            <div className="min-w-0 flex-1">
-              <p className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                Origem
-              </p>
-              <p className="mt-0.5 truncate text-base font-bold text-white">
-                {transfer.sourceWarehouseName}
-              </p>
-              {isSource && (
-                <p className="mt-1 text-[10px] font-bold uppercase tracking-widest text-blue-500">
-                  Seu depósito
-                </p>
-              )}
-            </div>
-          </div>
+    status === TransferStatus.COMPLETED_WITH_DISCREPANCY ||
+    status === TransferStatus.PENDING_VALIDATION ||
+    status === TransferStatus.COMPLETED
+  );
+}
 
-          {/* Route connector */}
-          <div className="flex items-center justify-center py-1 sm:px-6 sm:py-0">
-            {/* Desktop: horizontal dashed line + truck */}
-            <div className="hidden items-center gap-0 sm:flex">
-              <div className="h-px w-8 border-t border-dashed border-neutral-700" />
-              <div
-                className={cn(
-                  "flex size-10 items-center justify-center rounded-full border",
-                  transfer.status === TransferStatus.IN_TRANSIT
-                    ? "border-amber-500/50 bg-amber-500/10 text-amber-400"
-                    : transfer.status === TransferStatus.COMPLETED
-                      ? "border-emerald-500/50 bg-emerald-500/10 text-emerald-400"
-                      : "border-neutral-700 bg-neutral-800/50 text-neutral-500",
-                )}
-              >
-                {transfer.status === TransferStatus.COMPLETED ? (
-                  <CheckCircle className="size-4" strokeWidth={2.5} />
-                ) : transfer.status === TransferStatus.CANCELLED ? (
-                  <XCircle className="size-4" strokeWidth={2.5} />
-                ) : (
-                  <Truck className="size-4" strokeWidth={2} />
-                )}
-              </div>
-              <div className="h-px w-8 border-t border-dashed border-neutral-700" />
-            </div>
+function TransferMissingState() {
+  return (
+    <PageContainer>
+      <div className="flex flex-col items-center justify-center py-32">
+        <Package className="mb-4 size-10 text-neutral-600" strokeWidth={2} />
+        <p className="text-sm font-bold text-white">
+          Transferência não encontrada
+        </p>
+        <p className="mt-1 text-xs text-neutral-500">
+          Verifique o ID e tente novamente.
+        </p>
+      </div>
+    </PageContainer>
+  );
+}
 
-            {/* Mobile: vertical connector with icon */}
-            <div className="flex flex-col items-center sm:hidden">
-              <div
-                className={cn(
-                  "flex size-8 items-center justify-center rounded-full border",
-                  transfer.status === TransferStatus.IN_TRANSIT
-                    ? "border-amber-500/50 bg-amber-500/10 text-amber-400"
-                    : transfer.status === TransferStatus.COMPLETED
-                      ? "border-emerald-500/50 bg-emerald-500/10 text-emerald-400"
-                      : "border-neutral-700 bg-neutral-800/50 text-neutral-500",
-                )}
-              >
-                {transfer.status === TransferStatus.COMPLETED ? (
-                  <CheckCircle className="size-3.5" strokeWidth={2.5} />
-                ) : transfer.status === TransferStatus.CANCELLED ? (
-                  <XCircle className="size-3.5" strokeWidth={2.5} />
-                ) : (
-                  <ArrowRight
-                    className="size-3.5 rotate-90"
-                    strokeWidth={2.5}
-                  />
-                )}
-              </div>
-              <div className="h-6 w-px bg-neutral-700" />
-            </div>
-          </div>
+function TransferDetailHeader({
+  viewState,
+}: {
+  viewState: TransferDetailViewState;
+}) {
+  const { status, transfer } = viewState;
 
-          {/* Destination node */}
-          <div className="flex flex-1 items-start gap-4 sm:items-center sm:justify-end">
-            <div className="order-1 min-w-0 flex-1 sm:order-none sm:text-right">
-              <p className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                Destino
-              </p>
-              <p className="mt-0.5 truncate text-base font-bold text-white">
-                {transfer.destinationWarehouseName}
-              </p>
-              {isDestination && (
-                <p className="mt-1 text-[10px] font-bold uppercase tracking-widest text-blue-500">
-                  Seu depósito
-                </p>
-              )}
-            </div>
-            <div
-              className={cn(
-                "order-0 flex size-12 items-center justify-center rounded-[4px] border sm:order-none",
-                isDestination
-                  ? "border-blue-600/50 bg-blue-600/10 text-blue-400"
-                  : "border-neutral-700 bg-neutral-800 text-neutral-400",
-              )}
-            >
-              <MapPin className="size-5" strokeWidth={2} />
-            </div>
-          </div>
+  return (
+    <PageHeader
+      title={transfer.code}
+      subtitle="Detalhes da Transferência"
+      actions={
+        <div className="flex items-center gap-3">
+          <span
+            className={cn(
+              "flex items-center gap-1.5 rounded-[4px] border px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest",
+              status.bg,
+              status.text,
+            )}
+          >
+            <span className={cn("size-1.5 rounded-[4px]", status.dot)} />
+            {status.label}
+          </span>
         </div>
+      }
+    />
+  );
+}
 
-        {/* Meta row */}
-        <div className="mt-6 flex flex-wrap items-center gap-x-6 gap-y-2 border-t border-neutral-800 pt-5">
-          <div className="flex items-center gap-2 text-xs text-neutral-500">
-            <Calendar className="size-3.5" strokeWidth={2} />
-            <span>
-              Criado em{" "}
-              <span className="font-medium text-neutral-300">
-                {format(parseISO(transfer.createdAt), "dd/MM/yyyy")}
-              </span>
-            </span>
-          </div>
-          <div className="flex items-center gap-2 text-xs text-neutral-500">
-            <Package className="size-3.5" strokeWidth={2} />
-            <span>
-              <span className="font-mono font-bold tracking-tighter text-neutral-300">
-                {transfer.items.length}
-              </span>{" "}
-              {transfer.items.length === 1 ? "item" : "itens"}
-            </span>
-          </div>
-          <div className="flex items-center gap-2 text-xs text-neutral-500">
-            <Hash className="size-3.5" strokeWidth={2} />
-            <span>
-              Total{" "}
-              <span className="font-mono font-bold tracking-tighter text-neutral-300">
-                {totalQuantity}
-              </span>{" "}
-              unidades
-            </span>
-          </div>
+function TransferRouteCard({
+  viewState,
+}: {
+  viewState: TransferDetailViewState;
+}) {
+  const { transfer } = viewState;
+
+  return (
+    <div className="mb-8 rounded-[4px] border border-neutral-800 bg-[#171717] p-5 sm:p-6">
+      <div className="flex flex-col items-stretch gap-0 sm:flex-row sm:items-center">
+        <TransferOriginNode viewState={viewState} />
+        <TransferRouteConnector transfer={transfer} />
+        <TransferDestinationNode viewState={viewState} />
+      </div>
+      <TransferRouteMeta viewState={viewState} />
+      <TransferNotes transfer={transfer} />
+    </div>
+  );
+}
+
+function TransferOriginNode({
+  viewState,
+}: {
+  viewState: TransferDetailViewState;
+}) {
+  const { isSource, transfer } = viewState;
+
+  return (
+    <div className="flex flex-1 items-start gap-4 sm:items-center">
+      <div className="relative flex flex-col items-center">
+        <div
+          className={cn(
+            "flex size-12 items-center justify-center rounded-[4px] border",
+            isSource
+              ? "border-blue-600/50 bg-blue-600/10 text-blue-400"
+              : "border-neutral-700 bg-neutral-800 text-neutral-400",
+          )}
+        >
+          <Warehouse className="size-5" strokeWidth={2} />
         </div>
+        <div className="mt-1 h-6 w-px bg-neutral-700 sm:hidden" />
+      </div>
+      <div className="min-w-0 flex-1">
+        <p className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Origem
+        </p>
+        <p className="mt-0.5 truncate text-base font-bold text-white">
+          {transfer.sourceWarehouseName}
+        </p>
+        {isSource && (
+          <p className="mt-1 text-[10px] font-bold uppercase tracking-widest text-blue-500">
+            Seu depósito
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
 
-        {/* Notes */}
-        {transfer.notes && (
-          <div className="mt-5 border-t border-neutral-800 pt-5">
-            <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-              <FileText className="size-3.5" strokeWidth={2.5} />
-              Observações
-            </div>
-            <p className="mt-2 text-sm leading-relaxed text-neutral-300">
-              {transfer.notes}
-            </p>
-          </div>
+function TransferRouteConnector({ transfer }: { transfer: Transfer }) {
+  return (
+    <div className="flex items-center justify-center py-1 sm:px-6 sm:py-0">
+      <div className="hidden items-center gap-0 sm:flex">
+        <div className="h-px w-8 border-t border-dashed border-neutral-700" />
+        <TransferRouteStatusIcon transfer={transfer} sizeClassName="size-10" />
+        <div className="h-px w-8 border-t border-dashed border-neutral-700" />
+      </div>
+      <div className="flex flex-col items-center sm:hidden">
+        <TransferRouteStatusIcon transfer={transfer} sizeClassName="size-8" />
+        <div className="h-6 w-px bg-neutral-700" />
+      </div>
+    </div>
+  );
+}
+
+function TransferRouteStatusIcon({
+  sizeClassName,
+  transfer,
+}: {
+  sizeClassName: string;
+  transfer: Transfer;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center rounded-[4px] border",
+        sizeClassName,
+        transfer.status === TransferStatus.IN_TRANSIT
+          ? "border-amber-500/50 bg-amber-500/10 text-amber-400"
+          : transfer.status === TransferStatus.COMPLETED
+            ? "border-emerald-500/50 bg-emerald-500/10 text-emerald-400"
+            : "border-neutral-700 bg-neutral-800/50 text-neutral-500",
+      )}
+    >
+      <TransferRouteStatusGlyph transfer={transfer} />
+    </div>
+  );
+}
+
+function TransferRouteStatusGlyph({ transfer }: { transfer: Transfer }) {
+  if (transfer.status === TransferStatus.COMPLETED) {
+    return <CheckCircle className="size-4" strokeWidth={2.5} />;
+  }
+
+  if (transfer.status === TransferStatus.CANCELLED) {
+    return <XCircle className="size-4" strokeWidth={2.5} />;
+  }
+
+  return <Truck className="size-4" strokeWidth={2} />;
+}
+
+function TransferDestinationNode({
+  viewState,
+}: {
+  viewState: TransferDetailViewState;
+}) {
+  const { isDestination, transfer } = viewState;
+
+  return (
+    <div className="flex flex-1 items-start gap-4 sm:items-center sm:justify-end">
+      <div className="order-1 min-w-0 flex-1 sm:order-none sm:text-right">
+        <p className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Destino
+        </p>
+        <p className="mt-0.5 truncate text-base font-bold text-white">
+          {transfer.destinationWarehouseName}
+        </p>
+        {isDestination && (
+          <p className="mt-1 text-[10px] font-bold uppercase tracking-widest text-blue-500">
+            Seu depósito
+          </p>
+        )}
+      </div>
+      <div
+        className={cn(
+          "order-0 flex size-12 items-center justify-center rounded-[4px] border sm:order-none",
+          isDestination
+            ? "border-blue-600/50 bg-blue-600/10 text-blue-400"
+            : "border-neutral-700 bg-neutral-800 text-neutral-400",
         )}
+      >
+        <MapPin className="size-5" strokeWidth={2} />
       </div>
+    </div>
+  );
+}
+
+function TransferRouteMeta({
+  viewState,
+}: {
+  viewState: TransferDetailViewState;
+}) {
+  const { totalQuantity, transfer } = viewState;
+
+  return (
+    <div className="mt-6 flex flex-wrap items-center gap-x-6 gap-y-2 border-t border-neutral-800 pt-5">
+      <TransferMetaItem icon={<Calendar className="size-3.5" strokeWidth={2} />}>
+        Criado em{" "}
+        <span className="font-medium text-neutral-300">
+          {format(parseISO(transfer.createdAt), "dd/MM/yyyy")}
+        </span>
+      </TransferMetaItem>
+      <TransferMetaItem icon={<Package className="size-3.5" strokeWidth={2} />}>
+        <span className="font-mono font-bold tracking-tighter text-neutral-300">
+          {transfer.items.length}
+        </span>{" "}
+        {transfer.items.length === 1 ? "item" : "itens"}
+      </TransferMetaItem>
+      <TransferMetaItem icon={<Hash className="size-3.5" strokeWidth={2} />}>
+        Total{" "}
+        <span className="font-mono font-bold tracking-tighter text-neutral-300">
+          {totalQuantity}
+        </span>{" "}
+        unidades
+      </TransferMetaItem>
+    </div>
+  );
+}
 
-      {/* ── Items ── */}
+function TransferMetaItem({
+  children,
+  icon,
+}: {
+  children: ReactNode;
+  icon: ReactNode;
+}) {
+  return (
+    <div className="flex items-center gap-2 text-xs text-neutral-500">
+      {icon}
+      <span>{children}</span>
+    </div>
+  );
+}
+
+function TransferNotes({ transfer }: { transfer: Transfer }) {
+  if (!transfer.notes) return null;
+
+  return (
+    <div className="mt-5 border-t border-neutral-800 pt-5">
+      <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+        <FileText className="size-3.5" strokeWidth={2.5} />
+        Observações
+      </div>
+      <p className="mt-2 text-sm leading-relaxed text-neutral-300">
+        {transfer.notes}
+      </p>
+    </div>
+  );
+}
+
+function TransferItemsSection({
+  viewState,
+}: {
+  viewState: TransferDetailViewState;
+}) {
+  return (
+    <>
       <SectionLabel icon={Package} className="mb-4">
         Itens da Transferência
       </SectionLabel>
+      <TransferItemsMobileList transfer={viewState.transfer} />
+      <TransferItemsDesktopTable viewState={viewState} />
+    </>
+  );
+}
 
-      {/* Mobile cards */}
-      <div className="flex flex-col gap-3 md:hidden">
-        {transfer.items.map((item) => (
-          <div
-            key={item.id}
-            className="rounded-[4px] border border-neutral-800 bg-[#171717] p-4"
-          >
-            <div className="flex items-start justify-between gap-3">
-              <div className="min-w-0 flex-1">
-                <p className="truncate text-sm font-bold text-white">
-                  {item.productName || "Produto Desconhecido"}
+function TransferItemsMobileList({ transfer }: { transfer: Transfer }) {
+  return (
+    <div className="flex flex-col gap-3 md:hidden">
+      {transfer.items.map((item) => (
+        <div
+          key={item.id}
+          className="rounded-[4px] border border-neutral-800 bg-[#171717] p-4"
+        >
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-sm font-bold text-white">
+                {item.productName || "Produto Desconhecido"}
+              </p>
+              {item.batchCode && (
+                <p className="mt-1 font-mono text-[10px] tracking-widest text-neutral-500">
+                  Lote: {item.batchCode}
                 </p>
-                {item.batchCode && (
-                  <p className="mt-1 font-mono text-[10px] tracking-widest text-neutral-500">
-                    Lote: {item.batchCode}
-                  </p>
-                )}
-              </div>
-              <span className="font-mono text-lg font-bold tracking-tighter text-white">
-                {getItemQty(item)}
-              </span>
+              )}
             </div>
-            {(item.quantitySent != null || item.quantityReceived != null) && (
-              <div className="mt-3 flex gap-4 border-t border-neutral-800 pt-3">
-                {item.quantitySent != null && (
-                  <div className="text-xs text-neutral-500">
-                    Enviado{" "}
-                    <span className="font-mono font-bold tracking-tighter text-neutral-300">
-                      {item.quantitySent}
-                    </span>
-                  </div>
-                )}
-                {item.quantityReceived != null && (
-                  <div className="text-xs text-neutral-500">
-                    Recebido{" "}
-                    <span className="font-mono font-bold tracking-tighter text-emerald-400">
-                      {item.quantityReceived}
-                    </span>
-                  </div>
-                )}
-              </div>
-            )}
+            <span className="font-mono text-lg font-bold tracking-tighter text-white">
+              {getTransferItemQty(item)}
+            </span>
           </div>
-        ))}
-      </div>
+          <TransferItemValidationSummary item={item} />
+        </div>
+      ))}
+    </div>
+  );
+}
 
-      {/* Desktop table */}
-      <div className="hidden md:block">
-        <div className="rounded-[4px] border border-neutral-800 bg-[#171717]">
-          <table className="w-full">
-            <thead>
-              <tr className="border-b border-neutral-800">
-                <th className="px-5 py-3 text-left text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                  Produto
-                </th>
-                <th className="px-5 py-3 text-left text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                  Lote
-                </th>
-                <th className="px-5 py-3 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                  Quantidade
-                </th>
-                {(transfer.status === TransferStatus.COMPLETED_WITH_DISCREPANCY ||
-                  transfer.status === TransferStatus.PENDING_VALIDATION ||
-                  transfer.status === TransferStatus.COMPLETED) && (
-                  <>
-                    <th className="px-5 py-3 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Enviado
-                    </th>
-                    <th className="px-5 py-3 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                      Recebido
-                    </th>
-                  </>
-                )}
-              </tr>
-            </thead>
-            <tbody>
-              {transfer.items.map((item) => (
-                <tr
-                  key={item.id}
-                  className="border-b border-neutral-800 last:border-0"
-                >
-                  <td className="px-5 py-3.5 text-sm font-medium text-white">
-                    {item.productName || "Produto Desconhecido"}
-                  </td>
-                  <td className="px-5 py-3.5 font-mono text-xs text-neutral-400">
-                    {item.batchCode || "—"}
-                  </td>
-                  <td className="px-5 py-3.5 text-right font-mono text-sm font-bold tracking-tighter text-white">
-                    {getItemQty(item)}
-                  </td>
-                  {(transfer.status === TransferStatus.COMPLETED_WITH_DISCREPANCY ||
-                    transfer.status === TransferStatus.PENDING_VALIDATION ||
-                    transfer.status === TransferStatus.COMPLETED) && (
-                    <>
-                      <td className="px-5 py-3.5 text-right font-mono text-sm tracking-tighter text-neutral-400">
-                        {item.quantitySent ?? "—"}
-                      </td>
-                      <td className="px-5 py-3.5 text-right font-mono text-sm font-bold tracking-tighter text-emerald-400">
-                        {item.quantityReceived ?? "—"}
-                      </td>
-                    </>
-                  )}
-                </tr>
-              ))}
-            </tbody>
-            <tfoot>
-              <tr className="border-t border-neutral-700">
-                <td className="px-5 py-3 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                  Total
-                </td>
-                <td />
-                <td className="px-5 py-3 text-right font-mono text-sm font-bold tracking-tighter text-white">
-                  {totalQuantity}
-                </td>
-                {(transfer.status === TransferStatus.COMPLETED_WITH_DISCREPANCY ||
-                  transfer.status === TransferStatus.PENDING_VALIDATION ||
-                  transfer.status === TransferStatus.COMPLETED) && (
-                  <>
-                    <td className="px-5 py-3 text-right font-mono text-sm tracking-tighter text-neutral-400">
-                      {transfer.items.reduce(
-                        (acc, i) => acc + (i.quantitySent ?? 0),
-                        0,
-                      ) || "—"}
-                    </td>
-                    <td className="px-5 py-3 text-right font-mono text-sm font-bold tracking-tighter text-emerald-400">
-                      {transfer.items.reduce(
-                        (acc, i) => acc + (i.quantityReceived ?? 0),
-                        0,
-                      ) || "—"}
-                    </td>
-                  </>
-                )}
-              </tr>
-            </tfoot>
-          </table>
+function TransferItemValidationSummary({
+  item,
+}: {
+  item: Transfer["items"][number];
+}) {
+  if (item.quantitySent == null && item.quantityReceived == null) return null;
+
+  return (
+    <div className="mt-3 flex gap-4 border-t border-neutral-800 pt-3">
+      {item.quantitySent != null && (
+        <div className="text-xs text-neutral-500">
+          Enviado{" "}
+          <span className="font-mono font-bold tracking-tighter text-neutral-300">
+            {item.quantitySent}
+          </span>
         </div>
+      )}
+      {item.quantityReceived != null && (
+        <div className="text-xs text-neutral-500">
+          Recebido{" "}
+          <span className="font-mono font-bold tracking-tighter text-emerald-400">
+            {item.quantityReceived}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TransferItemsDesktopTable({
+  viewState,
+}: {
+  viewState: TransferDetailViewState;
+}) {
+  const { totalQuantity, transfer } = viewState;
+  const showValidationColumns = shouldShowValidationQuantities(transfer.status);
+
+  return (
+    <div className="hidden md:block">
+      <div className="rounded-[4px] border border-neutral-800 bg-[#171717]">
+        <table className="w-full">
+          <TransferItemsTableHeader showValidationColumns={showValidationColumns} />
+          <tbody>
+            {transfer.items.map((item) => (
+              <TransferItemTableRow
+                key={item.id}
+                item={item}
+                showValidationColumns={showValidationColumns}
+              />
+            ))}
+          </tbody>
+          <TransferItemsTableFooter
+            showValidationColumns={showValidationColumns}
+            totalQuantity={totalQuantity}
+            transfer={transfer}
+          />
+        </table>
       </div>
+    </div>
+  );
+}
 
-      {/* ── Action Footer ── */}
-      {hasActions && (
-        <FixedBottomBar>
-          <div className="mx-auto flex max-w-7xl items-center justify-end gap-3">
-            {/* Source DRAFT actions */}
-            {isSource && transfer.status === TransferStatus.DRAFT && (
-              <>
-                <PermissionGate permission="transfers:update">
-                  <Link href={`/transfers/${transfer.id}/edit`}>
-                    <Button
-                      variant="ghost"
-                      className="h-10 rounded-[4px] text-xs font-bold uppercase tracking-wide text-neutral-400 hover:text-white"
-                    >
-                      <Edit className="mr-2 size-4" strokeWidth={2} />
-                      Editar
-                    </Button>
-                  </Link>
-                </PermissionGate>
-                <PermissionGate permission="transfers:delete">
-                  <Button
-                    variant="outline"
-                    onClick={onCancel}
-                    disabled={isCancelling}
-                    className="h-10 rounded-[4px] border-neutral-700 text-xs font-bold uppercase tracking-wide text-neutral-300 hover:border-rose-900 hover:bg-neutral-800 hover:text-rose-500"
-                  >
-                    {isCancelling ? "Cancelando..." : "CANCELAR"}
-                  </Button>
-                </PermissionGate>
-                <PermissionGate permission="transfers:update">
-                  <Button
-                    onClick={onExecute}
-                    disabled={isExecuting}
-                    className="h-10 rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
-                  >
-                    {isExecuting ? "Processando..." : "EXECUTAR TRANSFERÊNCIA"}
-                  </Button>
-                </PermissionGate>
-              </>
-            )}
+function TransferItemsTableHeader({
+  showValidationColumns,
+}: {
+  showValidationColumns: boolean;
+}) {
+  return (
+    <thead>
+      <tr className="border-b border-neutral-800">
+        <th className="px-5 py-3 text-left text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Produto
+        </th>
+        <th className="px-5 py-3 text-left text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Lote
+        </th>
+        <th className="px-5 py-3 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Quantidade
+        </th>
+        {showValidationColumns && (
+          <>
+            <th className="px-5 py-3 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Enviado
+            </th>
+            <th className="px-5 py-3 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+              Recebido
+            </th>
+          </>
+        )}
+      </tr>
+    </thead>
+  );
+}
 
-            {/* Source IN_TRANSIT actions */}
-            {isSource && transfer.status === TransferStatus.IN_TRANSIT && (
-              <PermissionGate permission="transfers:delete">
-                <Button
-                  variant="outline"
-                  onClick={onCancel}
-                  disabled={isCancelling}
-                  className="h-10 rounded-[4px] border-neutral-700 text-xs font-bold uppercase tracking-wide text-neutral-300 hover:border-rose-900 hover:bg-neutral-800 hover:text-rose-500"
-                >
-                  {isCancelling ? "Cancelando..." : "CANCELAR TRANSFERÊNCIA"}
-                </Button>
-              </PermissionGate>
-            )}
+function TransferItemTableRow({
+  item,
+  showValidationColumns,
+}: {
+  item: Transfer["items"][number];
+  showValidationColumns: boolean;
+}) {
+  return (
+    <tr className="border-b border-neutral-800 last:border-0">
+      <td className="px-5 py-3.5 text-sm font-medium text-white">
+        {item.productName || "Produto Desconhecido"}
+      </td>
+      <td className="px-5 py-3.5 font-mono text-xs text-neutral-400">
+        {item.batchCode || "—"}
+      </td>
+      <td className="px-5 py-3.5 text-right font-mono text-sm font-bold tracking-tighter text-white">
+        {getTransferItemQty(item)}
+      </td>
+      {showValidationColumns && (
+        <>
+          <td className="px-5 py-3.5 text-right font-mono text-sm tracking-tighter text-neutral-400">
+            {item.quantitySent ?? "—"}
+          </td>
+          <td className="px-5 py-3.5 text-right font-mono text-sm font-bold tracking-tighter text-emerald-400">
+            {item.quantityReceived ?? "—"}
+          </td>
+        </>
+      )}
+    </tr>
+  );
+}
 
-            {/* Destination IN_TRANSIT actions */}
-            {isDestination && transfer.status === TransferStatus.IN_TRANSIT && (
-              <PermissionGate permission="transfers:update">
-                <Button
-                  onClick={onStartValidation}
-                  disabled={isValidating}
-                  className="h-10 rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
-                >
-                  <ShieldCheck className="mr-2 size-4" strokeWidth={2} />
-                  {isValidating ? "Iniciando..." : "INICIAR VALIDAÇÃO"}
-                </Button>
-              </PermissionGate>
-            )}
+function TransferItemsTableFooter({
+  showValidationColumns,
+  totalQuantity,
+  transfer,
+}: {
+  showValidationColumns: boolean;
+  totalQuantity: number;
+  transfer: Transfer;
+}) {
+  return (
+    <tfoot>
+      <tr className="border-t border-neutral-700">
+        <td className="px-5 py-3 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Total
+        </td>
+        <td />
+        <td className="px-5 py-3 text-right font-mono text-sm font-bold tracking-tighter text-white">
+          {totalQuantity}
+        </td>
+        {showValidationColumns && (
+          <>
+            <td className="px-5 py-3 text-right font-mono text-sm tracking-tighter text-neutral-400">
+              {sumSentQuantity(transfer) || "—"}
+            </td>
+            <td className="px-5 py-3 text-right font-mono text-sm font-bold tracking-tighter text-emerald-400">
+              {sumReceivedQuantity(transfer) || "—"}
+            </td>
+          </>
+        )}
+      </tr>
+    </tfoot>
+  );
+}
 
-            {/* Destination PENDING_VALIDATION */}
-            {isDestination &&
-              transfer.status === TransferStatus.PENDING_VALIDATION && (
-                <PermissionGate permission="transfers:update">
-                  <Link href={`/transfers/${transfer.id}/validate`}>
-                    <Button className="h-10 rounded-[4px] bg-amber-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-amber-700">
-                      <ShieldCheck className="mr-2 size-4" strokeWidth={2} />
-                      CONTINUAR VALIDAÇÃO
-                    </Button>
-                  </Link>
-                </PermissionGate>
-              )}
+function sumSentQuantity(transfer: Transfer) {
+  return transfer.items.reduce((acc, item) => acc + (item.quantitySent ?? 0), 0);
+}
 
-            {/* Completed */}
-            {transfer.status === TransferStatus.COMPLETED && (
-              <>
-                <div className="flex items-center gap-2 px-4 text-sm font-medium text-emerald-500">
-                  <CheckCircle className="size-5" strokeWidth={2} />
-                  Transferência Concluída
-                </div>
-                {isDestination && (
-                  <Button
-                    variant="outline"
-                    className="h-10 rounded-[4px] border-neutral-700 text-xs font-bold uppercase tracking-wide text-neutral-300 hover:text-white"
-                  >
-                    VER RELATÓRIO
-                  </Button>
-                )}
-              </>
-            )}
+function sumReceivedQuantity(transfer: Transfer) {
+  return transfer.items.reduce(
+    (acc, item) => acc + (item.quantityReceived ?? 0),
+    0,
+  );
+}
 
-            {/* Completed with Discrepancy */}
-            {transfer.status === TransferStatus.COMPLETED_WITH_DISCREPANCY && (
-              <>
-                <div className="flex items-center gap-2 px-4 text-sm font-medium text-amber-500">
-                  <CheckCircle className="size-5" strokeWidth={2} />
-                  Concluída com Divergência
-                </div>
-                {isDestination && (
-                  <Button
-                    variant="outline"
-                    className="h-10 rounded-[4px] border-neutral-700 text-xs font-bold uppercase tracking-wide text-neutral-300 hover:text-white"
-                  >
-                    VER RELATÓRIO
-                  </Button>
-                )}
-              </>
-            )}
+function TransferActionFooter({
+  viewState,
+}: {
+  viewState: TransferDetailViewState;
+}) {
+  if (!viewState.hasActions) return null;
 
-            {/* Cancelled */}
-            {transfer.status === TransferStatus.CANCELLED && (
-              <div className="flex items-center gap-2 px-4 text-sm font-medium text-rose-500">
-                <XCircle className="size-5" strokeWidth={2} />
-                Transferência Cancelada
-              </div>
-            )}
-          </div>
-        </FixedBottomBar>
-      )}
-    </PageContainer>
+  return (
+    <FixedBottomBar>
+      <div className="mx-auto flex max-w-7xl items-center justify-end gap-3">
+        <TransferDraftActions viewState={viewState} />
+        <TransferInTransitSourceAction viewState={viewState} />
+        <TransferInTransitDestinationAction viewState={viewState} />
+        <TransferPendingValidationAction viewState={viewState} />
+        <TransferCompletedAction viewState={viewState} />
+        <TransferCompletedDiscrepancyAction viewState={viewState} />
+        <TransferCancelledAction transfer={viewState.transfer} />
+      </div>
+    </FixedBottomBar>
   );
-};
+}
+
+function TransferDraftActions({
+  viewState,
+}: {
+  viewState: TransferDetailViewState;
+}) {
+  const { isCancelling, isExecuting, isSource, onCancel, onExecute, transfer } =
+    viewState;
+
+  if (!isSource || transfer.status !== TransferStatus.DRAFT) return null;
+
+  return (
+    <>
+      <PermissionGate permission="transfers:update">
+        <Link href={`/transfers/${transfer.id}/edit`}>
+          <Button
+            variant="ghost"
+            className="h-10 rounded-[4px] text-xs font-bold uppercase tracking-wide text-neutral-400 hover:text-white"
+          >
+            <Edit className="mr-2 size-4" strokeWidth={2} />
+            Editar
+          </Button>
+        </Link>
+      </PermissionGate>
+      <PermissionGate permission="transfers:delete">
+        <Button
+          variant="outline"
+          onClick={onCancel}
+          disabled={isCancelling}
+          className="h-10 rounded-[4px] border-neutral-700 text-xs font-bold uppercase tracking-wide text-neutral-300 hover:border-rose-900 hover:bg-neutral-800 hover:text-rose-500"
+        >
+          {isCancelling ? "Cancelando..." : "CANCELAR"}
+        </Button>
+      </PermissionGate>
+      <PermissionGate permission="transfers:update">
+        <Button
+          onClick={onExecute}
+          disabled={isExecuting}
+          className="h-10 rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
+        >
+          {isExecuting ? "Processando..." : "EXECUTAR TRANSFERÊNCIA"}
+        </Button>
+      </PermissionGate>
+    </>
+  );
+}
+
+function TransferInTransitSourceAction({
+  viewState,
+}: {
+  viewState: TransferDetailViewState;
+}) {
+  const { isCancelling, isSource, onCancel, transfer } = viewState;
+
+  if (!isSource || transfer.status !== TransferStatus.IN_TRANSIT) return null;
+
+  return (
+    <PermissionGate permission="transfers:delete">
+      <Button
+        variant="outline"
+        onClick={onCancel}
+        disabled={isCancelling}
+        className="h-10 rounded-[4px] border-neutral-700 text-xs font-bold uppercase tracking-wide text-neutral-300 hover:border-rose-900 hover:bg-neutral-800 hover:text-rose-500"
+      >
+        {isCancelling ? "Cancelando..." : "CANCELAR TRANSFERÊNCIA"}
+      </Button>
+    </PermissionGate>
+  );
+}
+
+function TransferInTransitDestinationAction({
+  viewState,
+}: {
+  viewState: TransferDetailViewState;
+}) {
+  const { isDestination, isValidating, onStartValidation, transfer } = viewState;
+
+  if (!isDestination || transfer.status !== TransferStatus.IN_TRANSIT) {
+    return null;
+  }
+
+  return (
+    <PermissionGate permission="transfers:update">
+      <Button
+        onClick={onStartValidation}
+        disabled={isValidating}
+        className="h-10 rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
+      >
+        <ShieldCheck className="mr-2 size-4" strokeWidth={2} />
+        {isValidating ? "Iniciando..." : "INICIAR VALIDAÇÃO"}
+      </Button>
+    </PermissionGate>
+  );
+}
+
+function TransferPendingValidationAction({
+  viewState,
+}: {
+  viewState: TransferDetailViewState;
+}) {
+  const { isDestination, transfer } = viewState;
+
+  if (
+    !isDestination ||
+    transfer.status !== TransferStatus.PENDING_VALIDATION
+  ) {
+    return null;
+  }
+
+  return (
+    <PermissionGate permission="transfers:update">
+      <Link href={`/transfers/${transfer.id}/validate`}>
+        <Button className="h-10 rounded-[4px] bg-amber-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-amber-700">
+          <ShieldCheck className="mr-2 size-4" strokeWidth={2} />
+          CONTINUAR VALIDAÇÃO
+        </Button>
+      </Link>
+    </PermissionGate>
+  );
+}
+
+function TransferCompletedAction({
+  viewState,
+}: {
+  viewState: TransferDetailViewState;
+}) {
+  const { isDestination, transfer } = viewState;
+
+  if (transfer.status !== TransferStatus.COMPLETED) return null;
+
+  return (
+    <>
+      <div className="flex items-center gap-2 px-4 text-sm font-medium text-emerald-500">
+        <CheckCircle className="size-5" strokeWidth={2} />
+        Transferência Concluída
+      </div>
+      {isDestination && <TransferReportButton />}
+    </>
+  );
+}
+
+function TransferCompletedDiscrepancyAction({
+  viewState,
+}: {
+  viewState: TransferDetailViewState;
+}) {
+  const { isDestination, transfer } = viewState;
+
+  if (transfer.status !== TransferStatus.COMPLETED_WITH_DISCREPANCY) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className="flex items-center gap-2 px-4 text-sm font-medium text-amber-500">
+        <CheckCircle className="size-5" strokeWidth={2} />
+        Concluída com Divergência
+      </div>
+      {isDestination && <TransferReportButton />}
+    </>
+  );
+}
+
+function TransferReportButton() {
+  return (
+    <Button
+      variant="outline"
+      className="h-10 rounded-[4px] border-neutral-700 text-xs font-bold uppercase tracking-wide text-neutral-300 hover:text-white"
+    >
+      VER RELATÓRIO
+    </Button>
+  );
+}
+
+function TransferCancelledAction({ transfer }: { transfer: Transfer }) {
+  if (transfer.status !== TransferStatus.CANCELLED) return null;
+
+  return (
+    <div className="flex items-center gap-2 px-4 text-sm font-medium text-rose-500">
+      <XCircle className="size-5" strokeWidth={2} />
+      Transferência Cancelada
+    </div>
+  );
+}
diff --git a/app/(pages)/transfers/[id]/validate/validate-transfer.view.tsx b/app/(pages)/transfers/[id]/validate/validate-transfer.view.tsx
index 3d94cc9..75872ea 100644
--- a/app/(pages)/transfers/[id]/validate/validate-transfer.view.tsx
+++ b/app/(pages)/transfers/[id]/validate/validate-transfer.view.tsx
@@ -1,607 +1,769 @@
 "use client";
 
-import { useState } from "react";
 import {
-  Check,
-  AlertTriangle,
-  ScanLine,
-  Package,
+  useState,
+  type Dispatch,
+  type FormEvent,
+  type ReactNode,
+  type SetStateAction,
+} from "react";
+import { Scanner, type IDetectedBarcode } from "@yudiel/react-qr-scanner";
+import {
   AlertCircle,
+  AlertTriangle,
   Camera,
-  Truck,
-  Target,
-  Zap,
-  X,
+  Check,
   CheckCircle2,
   ChevronRight,
+  Package,
+  ScanLine,
+  Target,
+  Truck,
+  X,
+  Zap,
 } from "lucide-react";
-import { Scanner, IDetectedBarcode } from "@yudiel/react-qr-scanner";
 import { Button } from "@/components/ui/button";
+import { FixedBottomBar } from "@/components/ui/fixed-bottom-bar";
 import { Input } from "@/components/ui/input";
 import { PageContainer } from "@/components/ui/page-container";
 import { PageHeader } from "@/components/ui/page-header";
-import { FixedBottomBar } from "@/components/ui/fixed-bottom-bar";
 import { ResponsiveModal } from "@/components/ui/responsive-modal";
 import { SectionLabel } from "@/components/ui/section-label";
-import { ValidateTransferViewProps } from "./validate-transfer.types";
 import { cn } from "@/lib/utils";
+import type {
+  ExpectedItem,
+  ScanResultItem,
+  ValidateTransferViewProps,
+} from "./validate-transfer.types";
+
+interface ValidateTransferViewState extends ValidateTransferViewProps {
+  circumference: number;
+  completedItems: number;
+  handleCameraScan: (detectedCodes: IDetectedBarcode[]) => void;
+  handleSubmit: (event: FormEvent) => void;
+  radius: number;
+  setShowScanner: Dispatch<SetStateAction<boolean>>;
+  showScanner: boolean;
+  strokeDashoffset: number;
+  totalExpected: number;
+  totalItems: number;
+  totalScanned: number;
+  transfer: NonNullable<ValidateTransferViewProps["transfer"]>;
+}
 
-export function ValidateTransferView({
-  isLoading,
-  isProcessing,
-  transfer,
-  expectedItems,
-  progress,
-  lastScanResult,
-  barcode,
-  onBarcodeChange,
-  onScan,
-  inputRef,
-  onFinish,
-  showFinishModal,
-  setShowFinishModal,
-  discrepancies,
-  onConfirmFinish,
-  isFinishing,
-}: ValidateTransferViewProps) {
+export function ValidateTransferView(props: ValidateTransferViewProps) {
   const [showScanner, setShowScanner] = useState(false);
 
-  if (isLoading || !transfer) {
-    return (
-      <PageContainer>
-        <div className="flex h-[60vh] flex-col items-center justify-center gap-4">
-          <div className="relative size-16">
-            <div className="absolute inset-0 animate-ping rounded-full border-2 border-blue-600/30" />
-            <div className="absolute inset-2 animate-pulse rounded-full border-2 border-blue-600/50" />
-            <div className="absolute inset-4 rounded-full bg-blue-600/20" />
-            <Truck className="absolute inset-0 m-auto size-6 text-blue-500" />
-          </div>
-          <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">
-            Carregando validação…
-          </p>
-        </div>
-      </PageContainer>
-    );
+  if (props.isLoading || !props.transfer) {
+    return <ValidateTransferLoading />;
   }
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    onScan();
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    props.onScan();
   };
-
   const handleCameraScan = (detectedCodes: IDetectedBarcode[]) => {
-    if (detectedCodes && detectedCodes.length > 0) {
-      const code = detectedCodes[0].rawValue;
-      onBarcodeChange(code);
-      setShowScanner(false);
-      // Trigger scan after a brief delay to allow state update
-      setTimeout(() => {
-        onScan();
-      }, 100);
-    }
+    if (!detectedCodes || detectedCodes.length === 0) return;
+    props.onBarcodeChange(detectedCodes[0].rawValue);
+    setShowScanner(false);
+    setTimeout(() => props.onScan(), 100);
   };
-
-  const completedItems = expectedItems.filter(
-    (i) => i.scannedQuantity >= i.expectedQuantity
+  const completedItems = props.expectedItems.filter(
+    (item) => item.scannedQuantity >= item.expectedQuantity,
   ).length;
-  const totalItems = expectedItems.length;
-  const totalExpected = expectedItems.reduce(
-    (acc, i) => acc + i.expectedQuantity,
-    0
+  const totalExpected = props.expectedItems.reduce(
+    (acc, item) => acc + item.expectedQuantity,
+    0,
   );
-  const totalScanned = expectedItems.reduce(
-    (acc, i) => acc + i.scannedQuantity,
-    0
+  const totalScanned = props.expectedItems.reduce(
+    (acc, item) => acc + item.scannedQuantity,
+    0,
   );
-
-  // Calculate arc for circular progress
   const radius = 54;
   const circumference = 2 * Math.PI * radius;
-  const strokeDashoffset = circumference - (progress / 100) * circumference;
+  const viewState: ValidateTransferViewState = {
+    ...props,
+    circumference,
+    completedItems,
+    handleCameraScan,
+    handleSubmit,
+    radius,
+    setShowScanner,
+    showScanner,
+    strokeDashoffset: circumference - (props.progress / 100) * circumference,
+    totalExpected,
+    totalItems: props.expectedItems.length,
+    totalScanned,
+    transfer: props.transfer,
+  };
 
   return (
     <PageContainer bottomPadding="fixed-bar">
-      <PageHeader
-        title={`Validação ${transfer.code}`}
-        subtitle={`${transfer.sourceWarehouseName} → ${transfer.destinationWarehouseName}`}
-      />
+      <ValidateTransferHeader viewState={viewState} />
+      <ValidationProgressPanel viewState={viewState} />
+      <ValidationScannerPanel viewState={viewState} />
+      <LastScanResultPanel result={props.lastScanResult} />
+      <ExpectedItemsPanel viewState={viewState} />
+      <CameraScannerModal viewState={viewState} />
+      <ValidationBottomBar viewState={viewState} />
+      <FinishConfirmationModal viewState={viewState} />
+    </PageContainer>
+  );
+}
 
-      {/* ── Mission Control Header ── */}
-      <div className="mb-6 rounded-[4px] border border-neutral-800 bg-[#171717] p-5">
-        <div className="flex flex-col items-center gap-6 md:flex-row md:justify-between">
-          {/* Circular Progress */}
-          <div className="relative flex items-center justify-center">
-            <svg className="size-32 -rotate-90" viewBox="0 0 120 120">
-              {/* Background circle */}
-              <circle
-                cx="60"
-                cy="60"
-                r={radius}
-                stroke="#262626"
-                strokeWidth="8"
-                fill="none"
-              />
-              {/* Progress circle */}
-              <circle
-                cx="60"
-                cy="60"
-                r={radius}
-                stroke={progress === 100 ? "#059669" : "#2563EB"}
-                strokeWidth="8"
-                fill="none"
-                strokeLinecap="round"
-                strokeDasharray={circumference}
-                strokeDashoffset={strokeDashoffset}
-                className="transition-all duration-500"
-              />
-            </svg>
-            <div className="absolute flex flex-col items-center">
-              <span className="font-mono text-3xl font-bold tracking-tighter text-white">
-                {Math.round(progress)}%
-              </span>
-              <span className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                Validado
-              </span>
-            </div>
-          </div>
-
-          {/* Stats Grid */}
-          <div className="grid flex-1 grid-cols-3 gap-4 md:max-w-md">
-            <div className="rounded-[4px] border border-neutral-800 bg-neutral-900/50 p-4 text-center">
-              <div className="mb-1 flex items-center justify-center gap-1">
-                <Target className="size-4 text-blue-500" strokeWidth={2} />
-              </div>
-              <p className="font-mono text-2xl font-bold tracking-tighter text-white">
-                {totalExpected}
-              </p>
-              <p className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                Esperado
-              </p>
-            </div>
-            <div className="rounded-[4px] border border-neutral-800 bg-neutral-900/50 p-4 text-center">
-              <div className="mb-1 flex items-center justify-center gap-1">
-                <Zap className="size-4 text-amber-500" strokeWidth={2} />
-              </div>
-              <p className="font-mono text-2xl font-bold tracking-tighter text-white">
-                {totalScanned}
-              </p>
-              <p className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                Escaneado
-              </p>
-            </div>
-            <div className="rounded-[4px] border border-neutral-800 bg-neutral-900/50 p-4 text-center">
-              <div className="mb-1 flex items-center justify-center gap-1">
-                <CheckCircle2
-                  className="size-4 text-emerald-500"
-                  strokeWidth={2}
-                />
-              </div>
-              <p className="font-mono text-2xl font-bold tracking-tighter text-white">
-                {completedItems}/{totalItems}
-              </p>
-              <p className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                Itens OK
-              </p>
-            </div>
-          </div>
+function ValidateTransferLoading() {
+  return (
+    <PageContainer>
+      <div className="flex h-[60vh] flex-col items-center justify-center gap-4">
+        <div className="relative size-16">
+          <div className="absolute inset-0 animate-ping rounded-full border-2 border-blue-600/30" />
+          <div className="absolute inset-2 animate-pulse rounded-full border-2 border-blue-600/50" />
+          <div className="absolute inset-4 rounded-full bg-blue-600/20" />
+          <Truck className="absolute inset-0 m-auto size-6 text-blue-500" />
         </div>
+        <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+          Carregando validação…
+        </p>
       </div>
+    </PageContainer>
+  );
+}
 
-      {/* ── Scanner Input Section ── */}
-      <div className="mb-6 rounded-[4px] border-l-4 border-l-blue-600 border border-neutral-800 bg-[#171717] p-5">
-        <div className="mb-4 flex items-center gap-3">
-          <div className="flex size-10 items-center justify-center rounded-[4px] border border-blue-600/50 bg-blue-600/10">
-            <ScanLine className="size-5 text-blue-400" strokeWidth={2} />
-          </div>
-          <div>
-            <p className="text-sm font-bold text-white">Scanner de Validação</p>
-            <p className="text-xs text-neutral-500">
-              Escaneie o código de barras do produto
-            </p>
-          </div>
-        </div>
+function ValidateTransferHeader({
+  viewState,
+}: {
+  viewState: ValidateTransferViewState;
+}) {
+  const { transfer } = viewState;
+
+  return (
+    <PageHeader
+      title={`Validação ${transfer.code}`}
+      subtitle={`${transfer.sourceWarehouseName} → ${transfer.destinationWarehouseName}`}
+    />
+  );
+}
+
+function ValidationProgressPanel({
+  viewState,
+}: {
+  viewState: ValidateTransferViewState;
+}) {
+  return (
+    <div className="mb-6 rounded-[4px] border border-neutral-800 bg-[#171717] p-5">
+      <div className="flex flex-col items-center gap-6 md:flex-row md:justify-between">
+        <ValidationProgressRing viewState={viewState} />
+        <ValidationStatsGrid viewState={viewState} />
+      </div>
+    </div>
+  );
+}
 
-        <form onSubmit={handleSubmit} className="flex gap-3">
-          <div className="relative min-w-0 flex-1">
-            <Input
-              ref={inputRef}
-              value={barcode}
-              onChange={(e) => onBarcodeChange(e.target.value)}
-              placeholder="Digite ou escaneie o código…"
-              className="h-12 w-full rounded-[4px] border-2 border-neutral-800 bg-neutral-900 pl-4 pr-12 font-mono text-sm text-white placeholder:text-neutral-600 focus:border-blue-600"
-              autoComplete="off"
-              disabled={isProcessing}
-            />
-            {/* Camera Button inside input */}
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              onClick={() => setShowScanner(true)}
-              className="absolute right-2 top-1/2 size-8 -translate-y-1/2 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-blue-400"
-            >
-              <Camera className="size-5" strokeWidth={2} />
-            </Button>
-          </div>
+function ValidationProgressRing({
+  viewState,
+}: {
+  viewState: ValidateTransferViewState;
+}) {
+  return (
+    <div className="relative flex items-center justify-center">
+      <svg className="size-32 -rotate-90" viewBox="0 0 120 120">
+        <circle
+          cx="60"
+          cy="60"
+          r={viewState.radius}
+          stroke="#262626"
+          strokeWidth="8"
+          fill="none"
+        />
+        <circle
+          cx="60"
+          cy="60"
+          r={viewState.radius}
+          stroke={viewState.progress === 100 ? "#059669" : "#2563EB"}
+          strokeWidth="8"
+          fill="none"
+          strokeLinecap="round"
+          strokeDasharray={viewState.circumference}
+          strokeDashoffset={viewState.strokeDashoffset}
+          className="transition-all duration-500"
+        />
+      </svg>
+      <div className="absolute flex flex-col items-center">
+        <span className="font-mono text-3xl font-bold tracking-tighter text-white">
+          {Math.round(viewState.progress)}%
+        </span>
+        <span className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Validado
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function ValidationStatsGrid({
+  viewState,
+}: {
+  viewState: ValidateTransferViewState;
+}) {
+  return (
+    <div className="grid flex-1 grid-cols-3 gap-4 md:max-w-md">
+      <ValidationStatCard
+        icon={<Target className="size-4 text-blue-500" strokeWidth={2} />}
+        value={String(viewState.totalExpected)}
+        label="Esperado"
+      />
+      <ValidationStatCard
+        icon={<Zap className="size-4 text-amber-500" strokeWidth={2} />}
+        value={String(viewState.totalScanned)}
+        label="Escaneado"
+      />
+      <ValidationStatCard
+        icon={<CheckCircle2 className="size-4 text-emerald-500" strokeWidth={2} />}
+        value={`${viewState.completedItems}/${viewState.totalItems}`}
+        label="Itens OK"
+      />
+    </div>
+  );
+}
+
+function ValidationStatCard({
+  icon,
+  label,
+  value,
+}: {
+  icon: ReactNode;
+  label: string;
+  value: string;
+}) {
+  return (
+    <div className="rounded-[4px] border border-neutral-800 bg-neutral-900/50 p-4 text-center">
+      <div className="mb-1 flex items-center justify-center gap-1">{icon}</div>
+      <p className="font-mono text-2xl font-bold tracking-tighter text-white">
+        {value}
+      </p>
+      <p className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+        {label}
+      </p>
+    </div>
+  );
+}
+
+function ValidationScannerPanel({
+  viewState,
+}: {
+  viewState: ValidateTransferViewState;
+}) {
+  return (
+    <div className="mb-6 rounded-[4px] border border-l-4 border-neutral-800 border-l-blue-600 bg-[#171717] p-5">
+      <div className="mb-4 flex items-center gap-3">
+        <div className="flex size-10 items-center justify-center rounded-[4px] border border-blue-600/50 bg-blue-600/10">
+          <ScanLine className="size-5 text-blue-400" strokeWidth={2} />
+        </div>
+        <div>
+          <p className="text-sm font-bold text-white">Scanner de Validação</p>
+          <p className="text-xs text-neutral-500">
+            Escaneie o código de barras do produto
+          </p>
+        </div>
+      </div>
+      <form onSubmit={viewState.handleSubmit} className="flex gap-3">
+        <div className="relative min-w-0 flex-1">
+          <Input
+            ref={viewState.inputRef}
+            value={viewState.barcode}
+            onChange={(event) => viewState.onBarcodeChange(event.target.value)}
+            placeholder="Digite ou escaneie o código…"
+            className="h-12 w-full rounded-[4px] border-2 border-neutral-800 bg-neutral-900 pr-12 pl-4 font-mono text-sm text-white placeholder:text-neutral-600 focus:border-blue-600"
+            autoComplete="off"
+            disabled={viewState.isProcessing}
+          />
           <Button
-            type="submit"
-            disabled={!barcode.trim() || isProcessing}
-            className="h-12 rounded-[4px] bg-blue-600 px-6 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={() => viewState.setShowScanner(true)}
+            className="absolute top-1/2 right-2 size-8 -translate-y-1/2 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-blue-400"
           >
-            {isProcessing ? (
-              <div className="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-            ) : (
-              "VALIDAR"
-            )}
+            <Camera className="size-5" strokeWidth={2} />
           </Button>
-        </form>
+        </div>
+        <Button
+          type="submit"
+          disabled={!viewState.barcode.trim() || viewState.isProcessing}
+          className="h-12 rounded-[4px] bg-blue-600 px-6 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
+        >
+          {viewState.isProcessing ? (
+            <div className="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+          ) : (
+            "VALIDAR"
+          )}
+        </Button>
+      </form>
+    </div>
+  );
+}
+
+function LastScanResultPanel({ result }: { result: ScanResultItem | null }) {
+  if (!result) return null;
+
+  return (
+    <div
+      className={cn(
+        "mb-6 rounded-[4px] border border-l-4 border-neutral-800 bg-[#171717] p-4",
+        result.valid ? "border-l-emerald-600" : "border-l-rose-600",
+      )}
+    >
+      <div className="flex items-start gap-4">
+        <LastScanResultIcon result={result} />
+        <LastScanResultBody result={result} />
       </div>
+    </div>
+  );
+}
 
-      {/* ── Last Scan Result ── */}
-      {lastScanResult && (
-        <div
+function LastScanResultIcon({ result }: { result: ScanResultItem }) {
+  return (
+    <div
+      className={cn(
+        "flex size-12 flex-shrink-0 items-center justify-center rounded-[4px]",
+        result.valid
+          ? "border border-emerald-600/50 bg-emerald-600/10"
+          : "border border-rose-600/50 bg-rose-600/10",
+      )}
+    >
+      {result.valid ? (
+        <Check className="size-6 text-emerald-500" strokeWidth={2.5} />
+      ) : (
+        <X className="size-6 text-rose-500" strokeWidth={2.5} />
+      )}
+    </div>
+  );
+}
+
+function LastScanResultBody({ result }: { result: ScanResultItem }) {
+  return (
+    <div className="min-w-0 flex-1">
+      <div className="mb-1 flex items-center gap-2">
+        <span
           className={cn(
-            "mb-6 rounded-[4px] border-l-4 border border-neutral-800 bg-[#171717] p-4",
-            lastScanResult.valid ? "border-l-emerald-600" : "border-l-rose-600"
+            "text-xs font-bold uppercase tracking-wide",
+            result.valid ? "text-emerald-500" : "text-rose-500",
           )}
         >
-          <div className="flex items-start gap-4">
-            <div
-              className={cn(
-                "flex size-12 flex-shrink-0 items-center justify-center rounded-[4px]",
-                lastScanResult.valid
-                  ? "border border-emerald-600/50 bg-emerald-600/10"
-                  : "border border-rose-600/50 bg-rose-600/10"
-              )}
-            >
-              {lastScanResult.valid ? (
-                <Check
-                  className="size-6 text-emerald-500"
-                  strokeWidth={2.5}
-                />
-              ) : (
-                <X className="size-6 text-rose-500" strokeWidth={2.5} />
-              )}
-            </div>
-            <div className="min-w-0 flex-1">
-              <div className="mb-1 flex items-center gap-2">
-                <span
-                  className={cn(
-                    "text-xs font-bold uppercase tracking-wide",
-                    lastScanResult.valid ? "text-emerald-500" : "text-rose-500"
-                  )}
-                >
-                  {lastScanResult.valid ? "VALIDADO" : "ERRO"}
-                </span>
-              </div>
-              <p className="truncate text-sm font-bold text-white">
-                {lastScanResult.productName}
-              </p>
-              <p className="mt-1 font-mono text-xs text-neutral-500">
-                {lastScanResult.productBarcode}
-              </p>
-              {lastScanResult.valid && (
-                <div className="mt-2 inline-flex items-center gap-2 rounded-[4px] bg-neutral-900/50 px-3 py-1.5">
-                  <span className="text-xs text-neutral-500">Contagem:</span>
-                  <span className="font-mono text-sm font-bold tracking-tighter text-white">
-                    {lastScanResult.quantityReceived} /{" "}
-                    {lastScanResult.quantitySent}
-                  </span>
-                </div>
-              )}
-              {!lastScanResult.valid && lastScanResult.message && (
-                <p className="mt-2 text-xs font-medium text-rose-400">
-                  {lastScanResult.message}
-                </p>
-              )}
-            </div>
-          </div>
+          {result.valid ? "VALIDADO" : "ERRO"}
+        </span>
+      </div>
+      <p className="truncate text-sm font-bold text-white">
+        {result.productName}
+      </p>
+      <p className="mt-1 font-mono text-xs text-neutral-500">
+        {result.productBarcode}
+      </p>
+      {result.valid && (
+        <div className="mt-2 inline-flex items-center gap-2 rounded-[4px] bg-neutral-900/50 px-3 py-1.5">
+          <span className="text-xs text-neutral-500">Contagem:</span>
+          <span className="font-mono text-sm font-bold tracking-tighter text-white">
+            {result.quantityReceived} / {result.quantitySent}
+          </span>
         </div>
       )}
+      {!result.valid && result.message && (
+        <p className="mt-2 text-xs font-medium text-rose-400">
+          {result.message}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function ExpectedItemsPanel({
+  viewState,
+}: {
+  viewState: ValidateTransferViewState;
+}) {
+  return (
+    <div>
+      <SectionLabel icon={Package} className="mb-4">
+        Itens da Transferência ({viewState.completedItems}/{viewState.totalItems})
+      </SectionLabel>
+      <div className="space-y-3">
+        {viewState.expectedItems.map((item) => (
+          <ExpectedItemRow key={item.id} item={item} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ExpectedItemRow({ item }: { item: ExpectedItem }) {
+  const isComplete = item.scannedQuantity >= item.expectedQuantity;
+  const isOverage = item.scannedQuantity > item.expectedQuantity;
+  const progressPercent = Math.min(
+    100,
+    (item.scannedQuantity / item.expectedQuantity) * 100,
+  );
+
+  return (
+    <div
+      className={cn(
+        "relative overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717]",
+        isComplete && "opacity-60",
+      )}
+    >
+      <div
+        className={cn(
+          "absolute inset-y-0 left-0 transition-all duration-500",
+          isComplete
+            ? "bg-emerald-600/10"
+            : isOverage
+              ? "bg-rose-600/10"
+              : "bg-blue-600/5",
+        )}
+        style={{ width: `${progressPercent}%` }}
+      />
+      <div className="relative flex items-center justify-between p-4">
+        <ExpectedItemIdentity
+          isComplete={isComplete}
+          isOverage={isOverage}
+          item={item}
+        />
+        <ExpectedItemQuantity
+          isComplete={isComplete}
+          isOverage={isOverage}
+          item={item}
+        />
+      </div>
+    </div>
+  );
+}
 
-      {/* ── Expected Items List ── */}
-      <div>
-        <SectionLabel icon={Package} className="mb-4">
-          Itens da Transferência ({completedItems}/{totalItems})
-        </SectionLabel>
-
-        <div className="space-y-3">
-          {expectedItems.map((item) => {
-            const isComplete = item.scannedQuantity >= item.expectedQuantity;
-            const isOverage = item.scannedQuantity > item.expectedQuantity;
-            const progressPercent = Math.min(
-              100,
-              (item.scannedQuantity / item.expectedQuantity) * 100
-            );
-
-            return (
-              <div
-                key={item.id}
-                className={cn(
-                  "relative overflow-hidden rounded-[4px] border border-neutral-800 bg-[#171717]",
-                  isComplete && "opacity-60"
-                )}
-              >
-                {/* Progress bar background */}
-                <div
-                  className={cn(
-                    "absolute inset-y-0 left-0 transition-all duration-500",
-                    isComplete
-                      ? "bg-emerald-600/10"
-                      : isOverage
-                        ? "bg-rose-600/10"
-                        : "bg-blue-600/5"
-                  )}
-                  style={{ width: `${progressPercent}%` }}
-                />
-
-                <div className="relative flex items-center justify-between p-4">
-                  <div className="flex items-center gap-4">
-                    <div
-                      className={cn(
-                        "flex size-10 flex-shrink-0 items-center justify-center rounded-[4px]",
-                        isComplete
-                          ? "border border-emerald-600/50 bg-emerald-600/10 text-emerald-500"
-                          : isOverage
-                            ? "border border-rose-600/50 bg-rose-600/10 text-rose-500"
-                            : "border border-neutral-700 bg-neutral-800 text-neutral-400"
-                      )}
-                    >
-                      {isComplete ? (
-                        <Check className="size-5" strokeWidth={2.5} />
-                      ) : isOverage ? (
-                        <AlertTriangle className="size-5" strokeWidth={2} />
-                      ) : (
-                        <Package className="size-5" strokeWidth={2} />
-                      )}
-                    </div>
-                    <div className="min-w-0">
-                      <p
-                        className={cn(
-                          "truncate text-sm font-medium",
-                          isComplete
-                            ? "text-neutral-500 line-through"
-                            : "text-white"
-                        )}
-                      >
-                        {item.productName}
-                      </p>
-                      <p className="mt-0.5 font-mono text-xs text-neutral-500">
-                        {item.batchCode}
-                      </p>
-                    </div>
-                  </div>
-
-                  <div className="flex items-center gap-3">
-                    <div
-                      className={cn(
-                        "rounded-[4px] px-3 py-1.5 font-mono text-sm font-bold tracking-tighter",
-                        isComplete
-                          ? "bg-emerald-600/10 text-emerald-500"
-                          : isOverage
-                            ? "bg-rose-600/10 text-rose-500"
-                            : "bg-neutral-800 text-neutral-200"
-                      )}
-                    >
-                      {item.scannedQuantity} / {item.expectedQuantity}
-                    </div>
-                    <ChevronRight className="size-4 text-neutral-600" />
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
+function ExpectedItemIdentity({
+  isComplete,
+  isOverage,
+  item,
+}: {
+  isComplete: boolean;
+  isOverage: boolean;
+  item: ExpectedItem;
+}) {
+  return (
+    <div className="flex items-center gap-4">
+      <div
+        className={cn(
+          "flex size-10 flex-shrink-0 items-center justify-center rounded-[4px]",
+          isComplete
+            ? "border border-emerald-600/50 bg-emerald-600/10 text-emerald-500"
+            : isOverage
+              ? "border border-rose-600/50 bg-rose-600/10 text-rose-500"
+              : "border border-neutral-700 bg-neutral-800 text-neutral-400",
+        )}
+      >
+        {isComplete ? (
+          <Check className="size-5" strokeWidth={2.5} />
+        ) : isOverage ? (
+          <AlertTriangle className="size-5" strokeWidth={2} />
+        ) : (
+          <Package className="size-5" strokeWidth={2} />
+        )}
+      </div>
+      <div className="min-w-0">
+        <p
+          className={cn(
+            "truncate text-sm font-medium",
+            isComplete ? "text-neutral-500 line-through" : "text-white",
+          )}
+        >
+          {item.productName}
+        </p>
+        <p className="mt-0.5 font-mono text-xs text-neutral-500">
+          {item.batchCode}
+        </p>
       </div>
+    </div>
+  );
+}
 
-      {/* ── Camera Scanner Modal ── */}
-      <ResponsiveModal
-        open={showScanner}
-        onOpenChange={setShowScanner}
-        title="Scanner de Câmera"
-        description="Posicione o código de barras dentro da área de leitura"
-        footer={
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => setShowScanner(false)}
-            className="w-full rounded-[4px] border-neutral-800 text-xs font-bold uppercase tracking-wide md:w-auto"
-          >
-            Cancelar
-          </Button>
-        }
+function ExpectedItemQuantity({
+  isComplete,
+  isOverage,
+  item,
+}: {
+  isComplete: boolean;
+  isOverage: boolean;
+  item: ExpectedItem;
+}) {
+  return (
+    <div className="flex items-center gap-3">
+      <div
+        className={cn(
+          "rounded-[4px] px-3 py-1.5 font-mono text-sm font-bold tracking-tighter",
+          isComplete
+            ? "bg-emerald-600/10 text-emerald-500"
+            : isOverage
+              ? "bg-rose-600/10 text-rose-500"
+              : "bg-neutral-800 text-neutral-200",
+        )}
       >
-        <div className="relative overflow-hidden rounded-[4px] border border-neutral-800 bg-[#0A0A0A]">
-          <Scanner
-            onScan={handleCameraScan}
-            onError={(error) => console.error("Camera error:", error)}
-            formats={[
-              "qr_code",
-              "ean_13",
-              "ean_8",
-              "code_128",
-              "code_39",
-              "upc_a",
-              "upc_e",
-            ]}
-            styles={{
-              container: {
-                width: "100%",
-                height: "280px",
-              },
-              video: {
-                objectFit: "cover",
-              },
-            }}
-            components={{
-              onOff: false,
-              torch: false,
-              zoom: false,
-              finder: true,
-            }}
-          />
+        {item.scannedQuantity} / {item.expectedQuantity}
+      </div>
+      <ChevronRight className="size-4 text-neutral-600" />
+    </div>
+  );
+}
 
-          {/* Scan line animation */}
-          <div className="pointer-events-none absolute inset-x-8 top-1/2 h-0.5 -translate-y-1/2 animate-pulse bg-blue-500 shadow-[0_0_15px_rgba(37,99,235,0.8)]" />
-
-          {/* Corner markers */}
-          <div className="pointer-events-none absolute inset-0">
-            <div className="absolute left-6 top-6 size-8 border-l-2 border-t-2 border-blue-500" />
-            <div className="absolute right-6 top-6 size-8 border-r-2 border-t-2 border-blue-500" />
-            <div className="absolute bottom-6 left-6 size-8 border-b-2 border-l-2 border-blue-500" />
-            <div className="absolute bottom-6 right-6 size-8 border-b-2 border-r-2 border-blue-500" />
-          </div>
-
-          {/* Instructions overlay */}
-          <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 to-transparent p-4">
-            <div className="flex items-center justify-center gap-2 text-center">
-              <ScanLine className="size-4 text-blue-400" />
-              <span className="text-xs font-bold uppercase tracking-wide text-blue-400">
-                Leitura Automática Ativa
-              </span>
-            </div>
-          </div>
+function CameraScannerModal({
+  viewState,
+}: {
+  viewState: ValidateTransferViewState;
+}) {
+  return (
+    <ResponsiveModal
+      open={viewState.showScanner}
+      onOpenChange={viewState.setShowScanner}
+      title="Scanner de Câmera"
+      description="Posicione o código de barras dentro da área de leitura"
+      footer={
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => viewState.setShowScanner(false)}
+          className="w-full rounded-[4px] border-neutral-800 text-xs font-bold uppercase tracking-wide md:w-auto"
+        >
+          Cancelar
+        </Button>
+      }
+    >
+      <div className="relative overflow-hidden rounded-[4px] border border-neutral-800 bg-[#0A0A0A]">
+        <Scanner
+          onScan={viewState.handleCameraScan}
+          onError={(error) => console.error("Camera error:", error)}
+          formats={[
+            "qr_code",
+            "ean_13",
+            "ean_8",
+            "code_128",
+            "code_39",
+            "upc_a",
+            "upc_e",
+          ]}
+          styles={{
+            container: { width: "100%", height: "280px" },
+            video: { objectFit: "cover" },
+          }}
+          components={{
+            onOff: false,
+            torch: false,
+            zoom: false,
+            finder: true,
+          }}
+        />
+        <CameraScannerOverlay />
+      </div>
+    </ResponsiveModal>
+  );
+}
+
+function CameraScannerOverlay() {
+  return (
+    <>
+      <div className="pointer-events-none absolute inset-x-8 top-1/2 h-0.5 -translate-y-1/2 animate-pulse bg-blue-500 shadow-[0_0_15px_rgba(37,99,235,0.8)]" />
+      <div className="pointer-events-none absolute inset-0">
+        <div className="absolute top-6 left-6 size-8 border-t-2 border-l-2 border-blue-500" />
+        <div className="absolute top-6 right-6 size-8 border-t-2 border-r-2 border-blue-500" />
+        <div className="absolute bottom-6 left-6 size-8 border-b-2 border-l-2 border-blue-500" />
+        <div className="absolute right-6 bottom-6 size-8 border-r-2 border-b-2 border-blue-500" />
+      </div>
+      <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 to-transparent p-4">
+        <div className="flex items-center justify-center gap-2 text-center">
+          <ScanLine className="size-4 text-blue-400" />
+          <span className="text-xs font-bold uppercase tracking-wide text-blue-400">
+            Leitura Automática Ativa
+          </span>
         </div>
-      </ResponsiveModal>
-
-      {/* ── Fixed Bottom Bar ── */}
-      <FixedBottomBar>
-        <div className="mx-auto flex max-w-7xl items-center justify-between gap-4">
-          <div className="hidden items-center gap-4 text-xs text-neutral-500 sm:flex">
-            <span>
-              <span className="font-mono font-bold tracking-tighter text-neutral-300">
-                {totalScanned}
-              </span>{" "}
-              de{" "}
-              <span className="font-mono font-bold tracking-tighter text-neutral-300">
-                {totalExpected}
-              </span>{" "}
-              unidades
-            </span>
-          </div>
-          <Button
-            onClick={onFinish}
-            disabled={
-              isFinishing || expectedItems.every((i) => i.scannedQuantity === 0)
-            }
-            className="h-11 flex-1 rounded-[4px] bg-emerald-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-emerald-700 sm:flex-none sm:px-8"
-          >
-            <CheckCircle2 className="mr-2 size-4" strokeWidth={2} />
-            Finalizar Validação
-          </Button>
+      </div>
+    </>
+  );
+}
+
+function ValidationBottomBar({
+  viewState,
+}: {
+  viewState: ValidateTransferViewState;
+}) {
+  const hasNoScans = viewState.expectedItems.every(
+    (item) => item.scannedQuantity === 0,
+  );
+
+  return (
+    <FixedBottomBar>
+      <div className="mx-auto flex max-w-7xl items-center justify-between gap-4">
+        <div className="hidden items-center gap-4 text-xs text-neutral-500 sm:flex">
+          <span>
+            <span className="font-mono font-bold tracking-tighter text-neutral-300">
+              {viewState.totalScanned}
+            </span>{" "}
+            de{" "}
+            <span className="font-mono font-bold tracking-tighter text-neutral-300">
+              {viewState.totalExpected}
+            </span>{" "}
+            unidades
+          </span>
+        </div>
+        <Button
+          onClick={viewState.onFinish}
+          disabled={viewState.isFinishing || hasNoScans}
+          className="h-11 flex-1 rounded-[4px] bg-emerald-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-emerald-700 sm:flex-none sm:px-8"
+        >
+          <CheckCircle2 className="mr-2 size-4" strokeWidth={2} />
+          Finalizar Validação
+        </Button>
+      </div>
+    </FixedBottomBar>
+  );
+}
+
+function FinishConfirmationModal({
+  viewState,
+}: {
+  viewState: ValidateTransferViewState;
+}) {
+  return (
+    <ResponsiveModal
+      open={viewState.showFinishModal}
+      onOpenChange={viewState.setShowFinishModal}
+      title="Confirmar Validação"
+      description="Revise o relatório antes de finalizar"
+      maxWidth="sm:max-w-[500px]"
+      footer={<FinishConfirmationFooter viewState={viewState} />}
+    >
+      <div className="space-y-4 py-2">
+        <FinishDiscrepancySummary viewState={viewState} />
+        <div className="rounded-[4px] border border-neutral-800 bg-neutral-900/50 p-4">
+          <p className="text-xs text-neutral-500">
+            <strong className="text-neutral-400">Atenção:</strong> Ao
+            confirmar, o estoque será atualizado conforme as quantidades
+            recebidas. Itens faltantes não serão adicionados ao inventário.
+          </p>
         </div>
-      </FixedBottomBar>
-
-      {/* ── Confirmation Modal ── */}
-      <ResponsiveModal
-        open={showFinishModal}
-        onOpenChange={setShowFinishModal}
-        title="Confirmar Validação"
-        description="Revise o relatório antes de finalizar"
-        maxWidth="sm:max-w-[500px]"
-        footer={
-          <div className="flex w-full flex-col gap-2 sm:flex-row sm:justify-end">
-            <Button
-              variant="outline"
-              onClick={() => setShowFinishModal(false)}
-              className="rounded-[4px] border-neutral-700 text-neutral-300 hover:bg-neutral-800 hover:text-white"
-            >
-              Voltar
-            </Button>
-            <Button
-              onClick={onConfirmFinish}
-              disabled={isFinishing}
-              className="rounded-[4px] bg-emerald-600 font-bold text-white hover:bg-emerald-700"
-            >
-              {isFinishing ? "Processando…" : "Confirmar e Finalizar"}
-            </Button>
-          </div>
-        }
+      </div>
+    </ResponsiveModal>
+  );
+}
+
+function FinishConfirmationFooter({
+  viewState,
+}: {
+  viewState: ValidateTransferViewState;
+}) {
+  return (
+    <div className="flex w-full flex-col gap-2 sm:flex-row sm:justify-end">
+      <Button
+        variant="outline"
+        onClick={() => viewState.setShowFinishModal(false)}
+        className="rounded-[4px] border-neutral-700 text-neutral-300 hover:bg-neutral-800 hover:text-white"
       >
-        <div className="space-y-4 py-2">
-          {discrepancies.length === 0 ? (
-            <div className="flex items-center gap-4 rounded-[4px] border border-emerald-600/30 bg-emerald-600/10 p-4">
-              <div className="flex size-12 flex-shrink-0 items-center justify-center rounded-full bg-emerald-600/20">
-                <CheckCircle2
-                  className="size-6 text-emerald-500"
-                  strokeWidth={2}
-                />
-              </div>
-              <div>
-                <p className="text-sm font-bold text-emerald-400">
-                  Validação Perfeita
-                </p>
-                <p className="text-xs text-emerald-500/80">
-                  Todas as quantidades conferem com o esperado.
-                </p>
-              </div>
-            </div>
-          ) : (
-            <div className="space-y-3">
-              <div className="flex items-center gap-2 text-amber-500">
-                <AlertCircle className="size-4" strokeWidth={2} />
-                <span className="text-xs font-bold uppercase tracking-wide">
-                  {discrepancies.length} Discrepância
-                  {discrepancies.length > 1 ? "s" : ""} Encontrada
-                  {discrepancies.length > 1 ? "s" : ""}
-                </span>
-              </div>
-              {discrepancies.map((disc) => (
-                <div
-                  key={`${disc.productName}-${disc.discrepancyType}`}
-                  className={cn(
-                    "rounded-[4px] border p-4",
-                    disc.discrepancyType === "OVERAGE"
-                      ? "border-rose-600/30 bg-rose-600/10"
-                      : "border-amber-600/30 bg-amber-600/10"
-                  )}
-                >
-                  <div className="mb-2 flex items-center justify-between">
-                    <span className="text-sm font-bold text-white">
-                      {disc.productName}
-                    </span>
-                    <span
-                      className={cn(
-                        "rounded-[4px] px-2 py-0.5 text-[10px] font-bold uppercase",
-                        disc.discrepancyType === "OVERAGE"
-                          ? "bg-rose-600/20 text-rose-400"
-                          : "bg-amber-600/20 text-amber-400"
-                      )}
-                    >
-                      {disc.discrepancyType === "OVERAGE" ? "Excesso" : "Falta"}
-                    </span>
-                  </div>
-                  <div className="flex items-center justify-between text-xs">
-                    <div className="flex gap-4 text-neutral-400">
-                      <span>Esperado: {disc.quantitySent}</span>
-                      <span>Recebido: {disc.quantityReceived}</span>
-                    </div>
-                    <span
-                      className={cn(
-                        "font-mono font-bold",
-                        disc.discrepancyType === "OVERAGE"
-                          ? "text-rose-400"
-                          : "text-amber-400"
-                      )}
-                    >
-                      {disc.difference > 0 ? "+" : ""}
-                      {disc.difference}
-                    </span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
+        Voltar
+      </Button>
+      <Button
+        onClick={viewState.onConfirmFinish}
+        disabled={viewState.isFinishing}
+        className="rounded-[4px] bg-emerald-600 font-bold text-white hover:bg-emerald-700"
+      >
+        {viewState.isFinishing ? "Processando…" : "Confirmar e Finalizar"}
+      </Button>
+    </div>
+  );
+}
 
-          <div className="rounded-[4px] border border-neutral-800 bg-neutral-900/50 p-4">
-            <p className="text-xs text-neutral-500">
-              <strong className="text-neutral-400">Atenção:</strong> Ao
-              confirmar, o estoque será atualizado conforme as quantidades
-              recebidas. Itens faltantes não serão adicionados ao inventário.
-            </p>
-          </div>
+function FinishDiscrepancySummary({
+  viewState,
+}: {
+  viewState: ValidateTransferViewState;
+}) {
+  if (viewState.discrepancies.length === 0) {
+    return (
+      <div className="flex items-center gap-4 rounded-[4px] border border-emerald-600/30 bg-emerald-600/10 p-4">
+        <div className="flex size-12 flex-shrink-0 items-center justify-center rounded-[4px] bg-emerald-600/20">
+          <CheckCircle2 className="size-6 text-emerald-500" strokeWidth={2} />
         </div>
-      </ResponsiveModal>
-    </PageContainer>
+        <div>
+          <p className="text-sm font-bold text-emerald-400">
+            Validação Perfeita
+          </p>
+          <p className="text-xs text-emerald-500/80">
+            Todas as quantidades conferem com o esperado.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2 text-amber-500">
+        <AlertCircle className="size-4" strokeWidth={2} />
+        <span className="text-xs font-bold uppercase tracking-wide">
+          {viewState.discrepancies.length} Discrepância
+          {viewState.discrepancies.length > 1 ? "s" : ""} Encontrada
+          {viewState.discrepancies.length > 1 ? "s" : ""}
+        </span>
+      </div>
+      {viewState.discrepancies.map((discrepancy) => (
+        <DiscrepancyCard
+          key={`${discrepancy.productName}-${discrepancy.discrepancyType}`}
+          discrepancy={discrepancy}
+        />
+      ))}
+    </div>
+  );
+}
+
+function DiscrepancyCard({
+  discrepancy,
+}: {
+  discrepancy: ValidateTransferViewProps["discrepancies"][number];
+}) {
+  return (
+    <div
+      className={cn(
+        "rounded-[4px] border p-4",
+        discrepancy.discrepancyType === "OVERAGE"
+          ? "border-rose-600/30 bg-rose-600/10"
+          : "border-amber-600/30 bg-amber-600/10",
+      )}
+    >
+      <div className="mb-2 flex items-center justify-between">
+        <span className="text-sm font-bold text-white">
+          {discrepancy.productName}
+        </span>
+        <span
+          className={cn(
+            "rounded-[4px] px-2 py-0.5 text-[10px] font-bold uppercase",
+            discrepancy.discrepancyType === "OVERAGE"
+              ? "bg-rose-600/20 text-rose-400"
+              : "bg-amber-600/20 text-amber-400",
+          )}
+        >
+          {discrepancy.discrepancyType === "OVERAGE" ? "Excesso" : "Falta"}
+        </span>
+      </div>
+      <div className="flex items-center justify-between text-xs">
+        <div className="flex gap-4 text-neutral-400">
+          <span>Esperado: {discrepancy.quantitySent}</span>
+          <span>Recebido: {discrepancy.quantityReceived}</span>
+        </div>
+        <span
+          className={cn(
+            "font-mono font-bold",
+            discrepancy.discrepancyType === "OVERAGE"
+              ? "text-rose-400"
+              : "text-amber-400",
+          )}
+        >
+          {discrepancy.difference > 0 ? "+" : ""}
+          {discrepancy.difference}
+        </span>
+      </div>
+    </div>
   );
 }
diff --git a/app/(pages)/transfers/new/new-transfer.view.tsx b/app/(pages)/transfers/new/new-transfer.view.tsx
index 2cd938b..9760711 100644
--- a/app/(pages)/transfers/new/new-transfer.view.tsx
+++ b/app/(pages)/transfers/new/new-transfer.view.tsx
@@ -1,17 +1,19 @@
 import {
-  Plus,
-  Trash2,
-  ArrowRight,
-  Package,
   AlertCircle,
-  Warehouse,
-  MapPin,
+  ArrowRight,
   FileText,
-  Save,
   Hash,
+  MapPin,
+  Package,
+  Plus,
+  Save,
+  Trash2,
+  Warehouse,
 } from "lucide-react";
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
+import { useState, type Dispatch, type SetStateAction } from "react";
+import { PermissionGate } from "@/components/permission-gate";
+import { EmptyState } from "@/components/ui/empty-state";
+import { FixedBottomBar } from "@/components/ui/fixed-bottom-bar";
 import {
   Form,
   FormControl,
@@ -19,6 +21,12 @@ import {
   FormItem,
   FormMessage,
 } from "@/components/ui/form";
+import { FormSection } from "@/components/ui/form-section";
+import { NumberInput } from "@/components/ui/number-input";
+import { PageContainer } from "@/components/ui/page-container";
+import { PageHeader } from "@/components/ui/page-header";
+import { ResponsiveModal } from "@/components/ui/responsive-modal";
+import { SectionLabel } from "@/components/ui/section-label";
 import {
   Select,
   SelectContent,
@@ -26,465 +34,632 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { NumberInput } from "@/components/ui/number-input";
+import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
-import { PageContainer } from "@/components/ui/page-container";
-import { PageHeader } from "@/components/ui/page-header";
-import { FormSection } from "@/components/ui/form-section";
-import { FixedBottomBar } from "@/components/ui/fixed-bottom-bar";
-import { EmptyState } from "@/components/ui/empty-state";
-import { SectionLabel } from "@/components/ui/section-label";
-import { ResponsiveModal } from "@/components/ui/responsive-modal";
-import { NewTransferViewProps } from "./new-transfer.types";
-import { PermissionGate } from "@/components/permission-gate";
+import type { NewTransferViewProps } from "./new-transfer.types";
 
-export function NewTransferView({
-  form,
-  onSubmit,
-  warehouses,
-  products,
-  batches,
-  isLoading,
-  isSubmitting,
-  selectedProductId,
-  selectedBatchId,
-  itemQuantity,
-  addItemError,
-  onProductChange,
-  onBatchChange,
-  onQuantityChange,
-  onAddItem,
-  onRemoveItem,
-  items,
-}: NewTransferViewProps) {
+interface NewTransferViewState extends NewTransferViewProps {
+  isNotesOpen: boolean;
+  notesValue?: string | null;
+  setIsNotesOpen: Dispatch<SetStateAction<boolean>>;
+  totalQuantity: number;
+}
+
+export function NewTransferView(props: NewTransferViewProps) {
   const [isNotesOpen, setIsNotesOpen] = useState(false);
-  const totalQuantity = items.reduce((acc, item) => acc + item.quantity, 0);
-  const notesValue = form.watch("notes");
+  const totalQuantity = props.items.reduce(
+    (acc, item) => acc + item.quantity,
+    0,
+  );
+  const notesValue = props.form.watch("notes");
+  const viewState: NewTransferViewState = {
+    ...props,
+    isNotesOpen,
+    notesValue,
+    setIsNotesOpen,
+    totalQuantity,
+  };
 
   return (
     <PageContainer bottomPadding="fixed-bar">
       <PageHeader title="Nova Transferência" subtitle="Criar Transferência" />
+      <Form {...props.form}>
+        <form
+          onSubmit={props.form.handleSubmit(props.onSubmit)}
+          className="space-y-6"
+        >
+          <TransferRouteCard viewState={viewState} />
+          <TransferNotesModal viewState={viewState} />
+          <TransferItemBuilder viewState={viewState} />
+          <TransferItemsList viewState={viewState} />
+          <TransferSubmitBar viewState={viewState} />
+        </form>
+      </Form>
+    </PageContainer>
+  );
+}
 
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-          {/* ── Route Card ── */}
-          <div className="rounded-[4px] border border-neutral-800 bg-[#171717] p-5">
-            <div className="mb-5 flex items-center justify-between border-b border-neutral-800 pb-4">
-              <div className="flex items-center gap-3">
-                <ArrowRight className="size-5 text-blue-400" strokeWidth={2} />
-                <div>
-                  <p className="text-sm font-bold text-white">Rota</p>
-                  <p className="text-xs text-neutral-500">
-                    Origem e destino da transferência
-                  </p>
-                </div>
-              </div>
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                onClick={() => setIsNotesOpen(true)}
-                className={`h-8 gap-2 rounded-[4px] border text-[10px] font-bold uppercase tracking-wide ${
-                  notesValue
-                    ? "border-blue-900/30 bg-blue-600/10 text-blue-400 hover:bg-blue-600/20 hover:text-blue-300"
-                    : "border-neutral-800 text-neutral-500 hover:bg-neutral-800 hover:text-neutral-300"
-                }`}
-              >
-                <FileText className="size-3.5" />
-                {notesValue ? "Editar Obs." : "Observações"}
-              </Button>
-            </div>
+function TransferRouteCard({
+  viewState,
+}: {
+  viewState: NewTransferViewState;
+}) {
+  return (
+    <div className="rounded-[4px] border border-neutral-800 bg-[#171717] p-5">
+      <TransferRouteHeader viewState={viewState} />
+      <TransferOriginNode />
+      <TransferRouteConnector />
+      <TransferDestinationField viewState={viewState} />
+    </div>
+  );
+}
 
-            {/* Origin */}
-            <div className="flex items-center gap-3">
-              <div className="flex size-10 flex-shrink-0 items-center justify-center rounded-[4px] border border-blue-600/50 bg-blue-600/10 text-blue-400">
-                <Warehouse className="size-4" strokeWidth={2} />
-              </div>
-              <div className="min-w-0 flex-1">
-                <p className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                  Origem
-                </p>
-                <p className="text-sm font-bold text-white">
-                  Seu depósito atual
-                </p>
-              </div>
-            </div>
+function TransferRouteHeader({
+  viewState,
+}: {
+  viewState: NewTransferViewState;
+}) {
+  const { notesValue, setIsNotesOpen } = viewState;
 
-            {/* Connector */}
-            <div className="ml-5 flex flex-col items-center py-2">
-              <div className="h-5 w-px border-l border-dashed border-neutral-700" />
-              <div className="flex size-6 items-center justify-center rounded-full border border-neutral-700 bg-neutral-800/50">
-                <ArrowRight
-                  className="size-3 rotate-90 text-neutral-500"
-                  strokeWidth={2.5}
-                />
-              </div>
-              <div className="h-5 w-px border-l border-dashed border-neutral-700" />
-            </div>
+  return (
+    <div className="mb-5 flex items-center justify-between border-b border-neutral-800 pb-4">
+      <div className="flex items-center gap-3">
+        <ArrowRight className="size-5 text-blue-400" strokeWidth={2} />
+        <div>
+          <p className="text-sm font-bold text-white">Rota</p>
+          <p className="text-xs text-neutral-500">
+            Origem e destino da transferência
+          </p>
+        </div>
+      </div>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        onClick={() => setIsNotesOpen(true)}
+        className={`h-8 gap-2 rounded-[4px] border text-[10px] font-bold uppercase tracking-wide ${
+          notesValue
+            ? "border-blue-900/30 bg-blue-600/10 text-blue-400 hover:bg-blue-600/20 hover:text-blue-300"
+            : "border-neutral-800 text-neutral-500 hover:bg-neutral-800 hover:text-neutral-300"
+        }`}
+      >
+        <FileText className="size-3.5" />
+        {notesValue ? "Editar Obs." : "Observações"}
+      </Button>
+    </div>
+  );
+}
 
-            {/* Destination */}
-            <div>
-              <p className="mb-2 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                Destino
-              </p>
-              <div className="flex items-center gap-3">
-                <div className="flex size-10 flex-shrink-0 items-center justify-center rounded-[4px] border border-neutral-700 bg-neutral-800 text-neutral-400">
-                  <MapPin className="size-4" strokeWidth={2} />
-                </div>
-                <div className="min-w-0 flex-1">
-                  <FormField
-                    control={form.control}
-                    name="destinationWarehouseId"
-                    render={({ field }) => (
-                      <FormItem>
-                        <Select
-                          onValueChange={field.onChange}
-                          defaultValue={field.value}
-                        >
-                          <FormControl>
-                            <SelectTrigger className="h-10 w-full rounded-[4px] border-2 border-neutral-800 bg-neutral-900 text-sm text-white focus:border-blue-600">
-                              <SelectValue placeholder="Selecione o destino..." />
-                            </SelectTrigger>
-                          </FormControl>
-                          <SelectContent className="rounded-[4px] border-neutral-800 bg-neutral-900">
-                            {warehouses.map((w) => (
-                              <SelectItem key={w.id} value={w.id}>
-                                {w.name}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                        <FormMessage className="text-xs text-rose-500" />
-                      </FormItem>
-                    )}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
+function TransferOriginNode() {
+  return (
+    <div className="flex items-center gap-3">
+      <div className="flex size-10 flex-shrink-0 items-center justify-center rounded-[4px] border border-blue-600/50 bg-blue-600/10 text-blue-400">
+        <Warehouse className="size-4" strokeWidth={2} />
+      </div>
+      <div className="min-w-0 flex-1">
+        <p className="text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+          Origem
+        </p>
+        <p className="text-sm font-bold text-white">Seu depósito atual</p>
+      </div>
+    </div>
+  );
+}
 
-          {/* ── Notes Modal ── */}
-          <ResponsiveModal
-            open={isNotesOpen}
-            onOpenChange={setIsNotesOpen}
-            title="Observações"
-            description="Adicione informações adicionais, instruções ou motivos para esta transferência."
-            footer={
-              <Button
-                type="button"
-                onClick={() => setIsNotesOpen(false)}
-                className="w-full rounded-[4px] bg-neutral-800 font-bold uppercase tracking-wide text-white hover:bg-neutral-700 md:w-auto"
-              >
-                Confirmar
-              </Button>
-            }
-          >
-            <div className="pb-4 pt-2">
-              <FormField
-                control={form.control}
-                name="notes"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormControl>
-                      <Textarea
-                        placeholder="Digite suas observações aqui..."
-                        className="min-h-[150px] w-full rounded-[4px] border-2 border-neutral-800 bg-neutral-900 text-sm text-white focus:border-blue-600"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage className="text-xs text-rose-500" />
-                  </FormItem>
-                )}
-              />
-            </div>
-          </ResponsiveModal>
-
-          {/* ── Item Builder ── */}
-          <FormSection
-            icon={Package}
-            iconColor="text-emerald-400"
-            title="Adicionar Item"
-            description="Selecione produto, lote e quantidade"
-          >
-            <div className="space-y-4">
-              <div className="flex flex-col gap-4 md:flex-row">
-                <div className="min-w-0 flex-1 space-y-2">
-                  <label
-                    htmlFor="transfer-product-select"
-                    className="text-xs font-bold text-neutral-400"
-                  >
-                    PRODUTO
-                  </label>
-                  <Select
-                    value={selectedProductId}
-                    onValueChange={onProductChange}
-                  >
-                    <SelectTrigger
-                      id="transfer-product-select"
-                      className="h-10 w-full rounded-[4px] border-2 border-neutral-800 bg-neutral-900 text-sm text-white focus:border-blue-600"
-                    >
-                      <SelectValue placeholder="Selecione um produto..." />
-                    </SelectTrigger>
-                    <SelectContent className="rounded-[4px] border-neutral-800 bg-neutral-900">
-                      {products.map((p) => (
-                        <SelectItem key={p.id} value={p.id}>
-                          {p.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                <div className="min-w-0 flex-1 space-y-2">
-                  <label
-                    htmlFor="transfer-batch-select"
-                    className="text-xs font-bold text-neutral-400"
-                  >
-                    LOTE (DISPONÍVEL)
-                  </label>
-                  <Select
-                    value={selectedBatchId}
-                    onValueChange={onBatchChange}
-                    disabled={!selectedProductId}
-                  >
-                    <SelectTrigger
-                      id="transfer-batch-select"
-                      className="h-10 w-full rounded-[4px] border-2 border-neutral-800 bg-neutral-900 text-sm text-white focus:border-blue-600 disabled:opacity-40"
-                    >
-                      <SelectValue placeholder="Selecione o lote" />
+function TransferRouteConnector() {
+  return (
+    <div className="ml-5 flex flex-col items-center py-2">
+      <div className="h-5 w-px border-l border-dashed border-neutral-700" />
+      <div className="flex size-6 items-center justify-center rounded-[4px] border border-neutral-700 bg-neutral-800/50">
+        <ArrowRight
+          className="size-3 rotate-90 text-neutral-500"
+          strokeWidth={2.5}
+        />
+      </div>
+      <div className="h-5 w-px border-l border-dashed border-neutral-700" />
+    </div>
+  );
+}
+
+function TransferDestinationField({
+  viewState,
+}: {
+  viewState: NewTransferViewState;
+}) {
+  const { form, warehouses } = viewState;
+
+  return (
+    <div>
+      <p className="mb-2 text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+        Destino
+      </p>
+      <div className="flex items-center gap-3">
+        <div className="flex size-10 flex-shrink-0 items-center justify-center rounded-[4px] border border-neutral-700 bg-neutral-800 text-neutral-400">
+          <MapPin className="size-4" strokeWidth={2} />
+        </div>
+        <div className="min-w-0 flex-1">
+          <FormField
+            control={form.control}
+            name="destinationWarehouseId"
+            render={({ field }) => (
+              <FormItem>
+                <Select onValueChange={field.onChange} defaultValue={field.value}>
+                  <FormControl>
+                    <SelectTrigger className="h-10 w-full rounded-[4px] border-2 border-neutral-800 bg-neutral-900 text-sm text-white focus:border-blue-600">
+                      <SelectValue placeholder="Selecione o destino..." />
                     </SelectTrigger>
-                    <SelectContent className="rounded-[4px] border-neutral-800 bg-neutral-900">
-                      {batches.map((b) => (
-                        <SelectItem key={b.id} value={b.id}>
-                          <span className="font-mono text-xs tracking-tighter">
-                            {b.code}
-                          </span>
-                          <span className="ml-2 text-neutral-500">
-                            ({b.quantity} un.)
-                          </span>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <label
-                  htmlFor="transfer-item-quantity"
-                  className="text-xs font-bold text-neutral-400"
-                >
-                  QUANTIDADE
-                </label>
-                <div className="flex items-center gap-3">
-                  <NumberInput
-                    id="transfer-item-quantity"
-                    value={itemQuantity ? Number(itemQuantity) : undefined}
-                    onValueChange={(val) =>
-                      onQuantityChange(val !== undefined ? String(val) : "")
-                    }
-                    className="h-10 w-full rounded-[4px] border-2 border-neutral-800 bg-neutral-900 font-mono text-sm tracking-tighter text-white focus:border-blue-600"
-                    placeholder="0"
-                  />
-                  <Button
-                    type="button"
-                    onClick={onAddItem}
-                    className="h-10 flex-shrink-0 rounded-[4px] bg-emerald-600 px-5 text-xs font-bold uppercase tracking-wide text-white hover:bg-emerald-700"
-                  >
-                    <Plus className="mr-2 size-4" strokeWidth={2.5} />
-                    Adicionar
-                  </Button>
-                </div>
-              </div>
-
-              {addItemError && (
-                <div className="flex items-center gap-2 rounded-[4px] border border-rose-900/30 bg-rose-950/10 px-4 py-3">
-                  <AlertCircle
-                    className="size-4 flex-shrink-0 text-rose-500"
-                    strokeWidth={2}
-                  />
-                  <p className="text-xs font-medium text-rose-400">
-                    {addItemError}
-                  </p>
-                </div>
-              )}
-            </div>
-          </FormSection>
-
-          {/* ── Items List ── */}
-          <div>
-            <SectionLabel icon={Hash} className="mb-4">
-              Itens na Transferência ({items.length})
-            </SectionLabel>
-
-            {items.length === 0 ? (
-              <EmptyState
-                icon={Package}
-                title="Nenhum item adicionado"
-                description="Selecione um produto e lote acima para adicionar itens à transferência."
-              />
-            ) : (
-              <>
-                {/* Mobile cards */}
-                <div className="flex flex-col gap-3 md:hidden">
-                  {items.map((item, index) => (
-                    <div
-                      key={item.id}
-                      className="flex items-center gap-3 rounded-[4px] border border-neutral-800 bg-[#171717] p-4"
-                    >
-                      <div className="min-w-0 flex-1">
-                        <p className="truncate text-sm font-bold text-white">
-                          {item.productName || "Produto"}
-                        </p>
-                        <div className="mt-1 flex items-center gap-3 text-xs text-neutral-500">
-                          <span>
-                            Lote:{" "}
-                            <span className="font-mono text-neutral-400">
-                              {item.batchCode}
-                            </span>
-                          </span>
-                          <span>
-                            Qtd:{" "}
-                            <span className="font-mono font-bold tracking-tighter text-white">
-                              {item.quantity}
-                            </span>
-                          </span>
-                        </div>
-                      </div>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        onClick={() => onRemoveItem(index)}
-                        className="size-9 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-rose-500"
-                      >
-                        <Trash2 className="size-4" strokeWidth={2} />
-                      </Button>
-                    </div>
-                  ))}
-                </div>
-
-                {/* Desktop table */}
-                <div className="hidden md:block">
-                  <div className="rounded-[4px] border border-neutral-800 bg-[#171717]">
-                    <table className="w-full">
-                      <thead>
-                        <tr className="border-b border-neutral-800">
-                          <th className="px-5 py-3 text-left text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Produto
-                          </th>
-                          <th className="px-5 py-3 text-left text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Lote
-                          </th>
-                          <th className="px-5 py-3 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
-                            Quantidade
-                          </th>
-                          <th className="w-12 p-3" />
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {items.map((item, index) => (
-                          <tr
-                            key={item.id}
-                            className="border-b border-neutral-800 last:border-0"
-                          >
-                            <td className="px-5 py-3.5 text-sm font-medium text-white">
-                              {item.productName || "Produto"}
-                            </td>
-                            <td className="px-5 py-3.5 font-mono text-xs text-neutral-400">
-                              {item.batchCode || "—"}
-                            </td>
-                            <td className="px-5 py-3.5 text-right font-mono text-sm font-bold tracking-tighter text-white">
-                              {item.quantity}
-                            </td>
-                            <td className="p-3.5">
-                              <Button
-                                type="button"
-                                variant="ghost"
-                                size="icon"
-                                onClick={() => onRemoveItem(index)}
-                                className="size-8 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-rose-500"
-                              >
-                                <Trash2
-                                  className="size-3.5"
-                                  strokeWidth={2}
-                                />
-                              </Button>
-                            </td>
-                          </tr>
-                        ))}
-                      </tbody>
-                      <tfoot>
-                        <tr className="border-t border-neutral-700">
-                          <td
-                            colSpan={2}
-                            className="px-5 py-3 text-[10px] font-bold uppercase tracking-widest text-neutral-500"
-                          >
-                            Total
-                          </td>
-                          <td className="px-5 py-3 text-right font-mono text-sm font-bold tracking-tighter text-white">
-                            {totalQuantity}
-                          </td>
-                          <td />
-                        </tr>
-                      </tfoot>
-                    </table>
-                  </div>
-                </div>
-              </>
+                  </FormControl>
+                  <SelectContent className="rounded-[4px] border-neutral-800 bg-neutral-900">
+                    {warehouses.map((warehouse) => (
+                      <SelectItem key={warehouse.id} value={warehouse.id}>
+                        {warehouse.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage className="text-xs text-rose-500" />
+              </FormItem>
             )}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
 
-            {form.formState.errors.items && (
-              <p className="mt-2 text-xs font-medium text-rose-500">
-                {form.formState.errors.items.message}
-              </p>
-            )}
-          </div>
+function TransferNotesModal({
+  viewState,
+}: {
+  viewState: NewTransferViewState;
+}) {
+  const { form, isNotesOpen, setIsNotesOpen } = viewState;
+
+  return (
+    <ResponsiveModal
+      open={isNotesOpen}
+      onOpenChange={setIsNotesOpen}
+      title="Observações"
+      description="Adicione informações adicionais, instruções ou motivos para esta transferência."
+      footer={
+        <Button
+          type="button"
+          onClick={() => setIsNotesOpen(false)}
+          className="w-full rounded-[4px] bg-neutral-800 font-bold uppercase tracking-wide text-white hover:bg-neutral-700 md:w-auto"
+        >
+          Confirmar
+        </Button>
+      }
+    >
+      <div className="pt-2 pb-4">
+        <FormField
+          control={form.control}
+          name="notes"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Textarea
+                  placeholder="Digite suas observações aqui..."
+                  className="min-h-[150px] w-full rounded-[4px] border-2 border-neutral-800 bg-neutral-900 text-sm text-white focus:border-blue-600"
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage className="text-xs text-rose-500" />
+            </FormItem>
+          )}
+        />
+      </div>
+    </ResponsiveModal>
+  );
+}
+
+function TransferItemBuilder({
+  viewState,
+}: {
+  viewState: NewTransferViewState;
+}) {
+  return (
+    <FormSection
+      icon={Package}
+      iconColor="text-emerald-400"
+      title="Adicionar Item"
+      description="Selecione produto, lote e quantidade"
+    >
+      <div className="space-y-4">
+        <TransferProductBatchSelectors viewState={viewState} />
+        <TransferQuantityInput viewState={viewState} />
+        <TransferAddItemError addItemError={viewState.addItemError} />
+      </div>
+    </FormSection>
+  );
+}
+
+function TransferProductBatchSelectors({
+  viewState,
+}: {
+  viewState: NewTransferViewState;
+}) {
+  return (
+    <div className="flex flex-col gap-4 md:flex-row">
+      <TransferProductSelect viewState={viewState} />
+      <TransferBatchSelect viewState={viewState} />
+    </div>
+  );
+}
+
+function TransferProductSelect({
+  viewState,
+}: {
+  viewState: NewTransferViewState;
+}) {
+  const { onProductChange, products, selectedProductId } = viewState;
+
+  return (
+    <div className="min-w-0 flex-1 space-y-2">
+      <label
+        htmlFor="transfer-product-select"
+        className="text-xs font-bold text-neutral-400"
+      >
+        PRODUTO
+      </label>
+      <Select value={selectedProductId} onValueChange={onProductChange}>
+        <SelectTrigger
+          id="transfer-product-select"
+          className="h-10 w-full rounded-[4px] border-2 border-neutral-800 bg-neutral-900 text-sm text-white focus:border-blue-600"
+        >
+          <SelectValue placeholder="Selecione um produto..." />
+        </SelectTrigger>
+        <SelectContent className="rounded-[4px] border-neutral-800 bg-neutral-900">
+          {products.map((product) => (
+            <SelectItem key={product.id} value={product.id}>
+              {product.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
+
+function TransferBatchSelect({
+  viewState,
+}: {
+  viewState: NewTransferViewState;
+}) {
+  const { batches, onBatchChange, selectedBatchId, selectedProductId } =
+    viewState;
+
+  return (
+    <div className="min-w-0 flex-1 space-y-2">
+      <label
+        htmlFor="transfer-batch-select"
+        className="text-xs font-bold text-neutral-400"
+      >
+        LOTE (DISPONÍVEL)
+      </label>
+      <Select
+        value={selectedBatchId}
+        onValueChange={onBatchChange}
+        disabled={!selectedProductId}
+      >
+        <SelectTrigger
+          id="transfer-batch-select"
+          className="h-10 w-full rounded-[4px] border-2 border-neutral-800 bg-neutral-900 text-sm text-white focus:border-blue-600 disabled:opacity-40"
+        >
+          <SelectValue placeholder="Selecione o lote" />
+        </SelectTrigger>
+        <SelectContent className="rounded-[4px] border-neutral-800 bg-neutral-900">
+          {batches.map((batch) => (
+            <SelectItem key={batch.id} value={batch.id}>
+              <span className="font-mono text-xs tracking-tighter">
+                {batch.code}
+              </span>
+              <span className="ml-2 text-neutral-500">
+                ({batch.quantity} un.)
+              </span>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
+
+function TransferQuantityInput({
+  viewState,
+}: {
+  viewState: NewTransferViewState;
+}) {
+  const { itemQuantity, onAddItem, onQuantityChange } = viewState;
+
+  return (
+    <div className="space-y-2">
+      <label
+        htmlFor="transfer-item-quantity"
+        className="text-xs font-bold text-neutral-400"
+      >
+        QUANTIDADE
+      </label>
+      <div className="flex items-center gap-3">
+        <NumberInput
+          id="transfer-item-quantity"
+          value={itemQuantity ? Number(itemQuantity) : undefined}
+          onValueChange={(value) =>
+            onQuantityChange(value !== undefined ? String(value) : "")
+          }
+          className="h-10 w-full rounded-[4px] border-2 border-neutral-800 bg-neutral-900 font-mono text-sm tracking-tighter text-white focus:border-blue-600"
+          placeholder="0"
+        />
+        <Button
+          type="button"
+          onClick={onAddItem}
+          className="h-10 flex-shrink-0 rounded-[4px] bg-emerald-600 px-5 text-xs font-bold uppercase tracking-wide text-white hover:bg-emerald-700"
+        >
+          <Plus className="mr-2 size-4" strokeWidth={2.5} />
+          Adicionar
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function TransferAddItemError({
+  addItemError,
+}: {
+  addItemError: string | null;
+}) {
+  if (!addItemError) return null;
+
+  return (
+    <div className="flex items-center gap-2 rounded-[4px] border border-rose-900/30 bg-rose-950/10 px-4 py-3">
+      <AlertCircle className="size-4 flex-shrink-0 text-rose-500" strokeWidth={2} />
+      <p className="text-xs font-medium text-rose-400">{addItemError}</p>
+    </div>
+  );
+}
+
+function TransferItemsList({
+  viewState,
+}: {
+  viewState: NewTransferViewState;
+}) {
+  const { form, items } = viewState;
 
-          {/* ── Fixed Bottom Bar ── */}
-          <FixedBottomBar>
-            <div className="mx-auto flex max-w-7xl items-center justify-between gap-3">
-              <div className="hidden items-center gap-4 text-xs text-neutral-500 sm:flex">
-                <span>
-                  <span className="font-mono font-bold tracking-tighter text-neutral-300">
-                    {items.length}
-                  </span>{" "}
-                  {items.length === 1 ? "item" : "itens"}
+  return (
+    <div>
+      <SectionLabel icon={Hash} className="mb-4">
+        Itens na Transferência ({items.length})
+      </SectionLabel>
+      {items.length === 0 ? (
+        <EmptyState
+          icon={Package}
+          title="Nenhum item adicionado"
+          description="Selecione um produto e lote acima para adicionar itens à transferência."
+        />
+      ) : (
+        <>
+          <TransferItemsMobileList viewState={viewState} />
+          <TransferItemsDesktopTable viewState={viewState} />
+        </>
+      )}
+      {form.formState.errors.items && (
+        <p className="mt-2 text-xs font-medium text-rose-500">
+          {form.formState.errors.items.message}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function TransferItemsMobileList({
+  viewState,
+}: {
+  viewState: NewTransferViewState;
+}) {
+  return (
+    <div className="flex flex-col gap-3 md:hidden">
+      {viewState.items.map((item, index) => (
+        <div
+          key={item.id}
+          className="flex items-center gap-3 rounded-[4px] border border-neutral-800 bg-[#171717] p-4"
+        >
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-bold text-white">
+              {item.productName || "Produto"}
+            </p>
+            <div className="mt-1 flex items-center gap-3 text-xs text-neutral-500">
+              <span>
+                Lote:{" "}
+                <span className="font-mono text-neutral-400">
+                  {item.batchCode}
                 </span>
-                {items.length > 0 && (
-                  <span>
-                    Total:{" "}
-                    <span className="font-mono font-bold tracking-tighter text-neutral-300">
-                      {totalQuantity}
-                    </span>{" "}
-                    un.
-                  </span>
-                )}
-              </div>
-              <div className="flex items-center gap-3">
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => window.history.back()}
-                  className="h-10 rounded-[4px] border-neutral-800 text-xs font-bold uppercase tracking-wide"
-                >
-                  CANCELAR
-                </Button>
-                <PermissionGate permission="transfers:create">
-                  <Button
-                    type="submit"
-                    disabled={isSubmitting || isLoading}
-                    className="h-10 rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
-                  >
-                    <Save className="mr-2 size-4" strokeWidth={2} />
-                    {isSubmitting ? "CRIANDO..." : "CRIAR TRANSFERÊNCIA"}
-                  </Button>
-                </PermissionGate>
-              </div>
+              </span>
+              <span>
+                Qtd:{" "}
+                <span className="font-mono font-bold tracking-tighter text-white">
+                  {item.quantity}
+                </span>
+              </span>
             </div>
-          </FixedBottomBar>
-        </form>
-      </Form>
-    </PageContainer>
+          </div>
+          <TransferRemoveItemButton
+            index={index}
+            onRemoveItem={viewState.onRemoveItem}
+            sizeClassName="size-9"
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function TransferItemsDesktopTable({
+  viewState,
+}: {
+  viewState: NewTransferViewState;
+}) {
+  const { items, totalQuantity } = viewState;
+
+  return (
+    <div className="hidden md:block">
+      <div className="rounded-[4px] border border-neutral-800 bg-[#171717]">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b border-neutral-800">
+              <th className="px-5 py-3 text-left text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+                Produto
+              </th>
+              <th className="px-5 py-3 text-left text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+                Lote
+              </th>
+              <th className="px-5 py-3 text-right text-[10px] font-bold uppercase tracking-widest text-neutral-500">
+                Quantidade
+              </th>
+              <th className="w-12 p-3" />
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((item, index) => (
+              <TransferItemsDesktopRow
+                key={item.id}
+                index={index}
+                item={item}
+                onRemoveItem={viewState.onRemoveItem}
+              />
+            ))}
+          </tbody>
+          <tfoot>
+            <tr className="border-t border-neutral-700">
+              <td
+                colSpan={2}
+                className="px-5 py-3 text-[10px] font-bold uppercase tracking-widest text-neutral-500"
+              >
+                Total
+              </td>
+              <td className="px-5 py-3 text-right font-mono text-sm font-bold tracking-tighter text-white">
+                {totalQuantity}
+              </td>
+              <td />
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function TransferItemsDesktopRow({
+  index,
+  item,
+  onRemoveItem,
+}: {
+  index: number;
+  item: NewTransferViewProps["items"][number];
+  onRemoveItem: (index: number) => void;
+}) {
+  return (
+    <tr className="border-b border-neutral-800 last:border-0">
+      <td className="px-5 py-3.5 text-sm font-medium text-white">
+        {item.productName || "Produto"}
+      </td>
+      <td className="px-5 py-3.5 font-mono text-xs text-neutral-400">
+        {item.batchCode || "—"}
+      </td>
+      <td className="px-5 py-3.5 text-right font-mono text-sm font-bold tracking-tighter text-white">
+        {item.quantity}
+      </td>
+      <td className="p-3.5">
+        <TransferRemoveItemButton
+          index={index}
+          onRemoveItem={onRemoveItem}
+          sizeClassName="size-8"
+        />
+      </td>
+    </tr>
+  );
+}
+
+function TransferRemoveItemButton({
+  index,
+  onRemoveItem,
+  sizeClassName,
+}: {
+  index: number;
+  onRemoveItem: (index: number) => void;
+  sizeClassName: string;
+}) {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      onClick={() => onRemoveItem(index)}
+      className={`${sizeClassName} rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-rose-500`}
+    >
+      <Trash2 className="size-4" strokeWidth={2} />
+    </Button>
+  );
+}
+
+function TransferSubmitBar({
+  viewState,
+}: {
+  viewState: NewTransferViewState;
+}) {
+  const { isLoading, isSubmitting, items, totalQuantity } = viewState;
+
+  return (
+    <FixedBottomBar>
+      <div className="mx-auto flex max-w-7xl items-center justify-between gap-3">
+        <TransferSummary items={items} totalQuantity={totalQuantity} />
+        <div className="flex items-center gap-3">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => window.history.back()}
+            className="h-10 rounded-[4px] border-neutral-800 text-xs font-bold uppercase tracking-wide"
+          >
+            CANCELAR
+          </Button>
+          <PermissionGate permission="transfers:create">
+            <Button
+              type="submit"
+              disabled={isSubmitting || isLoading}
+              className="h-10 rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
+            >
+              <Save className="mr-2 size-4" strokeWidth={2} />
+              {isSubmitting ? "CRIANDO..." : "CRIAR TRANSFERÊNCIA"}
+            </Button>
+          </PermissionGate>
+        </div>
+      </div>
+    </FixedBottomBar>
+  );
+}
+
+function TransferSummary({
+  items,
+  totalQuantity,
+}: {
+  items: NewTransferViewProps["items"];
+  totalQuantity: number;
+}) {
+  return (
+    <div className="hidden items-center gap-4 text-xs text-neutral-500 sm:flex">
+      <span>
+        <span className="font-mono font-bold tracking-tighter text-neutral-300">
+          {items.length}
+        </span>{" "}
+        {items.length === 1 ? "item" : "itens"}
+      </span>
+      {items.length > 0 && (
+        <span>
+          Total:{" "}
+          <span className="font-mono font-bold tracking-tighter text-neutral-300">
+            {totalQuantity}
+          </span>{" "}
+          un.
+        </span>
+      )}
+    </div>
   );
 }
diff --git a/app/api/product-prompt-assets/image/route.ts b/app/api/product-prompt-assets/image/route.ts
new file mode 100644
index 0000000..3f75794
--- /dev/null
+++ b/app/api/product-prompt-assets/image/route.ts
@@ -0,0 +1,68 @@
+import { NextResponse, type NextRequest } from "next/server";
+
+const PRODUCT_PROMPT_ASSET_PATH_PREFIXES = ["/products/", "/company-logos/"];
+
+export async function GET(request: NextRequest): Promise<Response> {
+  const assetUrl = parseProductPromptAssetUrl(request);
+  if (!assetUrl) {
+    return createProductPromptAssetErrorResponse(
+      "URL inválida. Esperado arquivo de imagem público do R2.",
+      400
+    );
+  }
+  return fetchProductPromptAsset(assetUrl);
+}
+
+function parseProductPromptAssetUrl(request: NextRequest): URL | null {
+  const assetUrl = request.nextUrl.searchParams.get("url");
+  if (!assetUrl) return null;
+  try {
+    const parsedUrl = new URL(assetUrl);
+    return isAllowedProductPromptAssetUrl(parsedUrl) ? parsedUrl : null;
+  } catch {
+    return null;
+  }
+}
+
+function isAllowedProductPromptAssetUrl(assetUrl: URL): boolean {
+  return (
+    assetUrl.protocol === "https:" &&
+    assetUrl.hostname.endsWith(".r2.dev") &&
+    PRODUCT_PROMPT_ASSET_PATH_PREFIXES.some((prefix) =>
+      assetUrl.pathname.startsWith(prefix)
+    )
+  );
+}
+
+async function fetchProductPromptAsset(assetUrl: URL): Promise<Response> {
+  try {
+    const response = await fetch(assetUrl, { cache: "no-store" });
+    if (!response.ok) return createProductPromptAssetErrorResponse("Imagem indisponível.", 502);
+    return createProductPromptAssetResponse(response);
+  } catch {
+    return createProductPromptAssetErrorResponse("Falha ao buscar imagem.", 502);
+  }
+}
+
+async function createProductPromptAssetResponse(
+  response: Response
+): Promise<Response> {
+  const contentType = response.headers.get("content-type") ?? "";
+  if (!contentType.startsWith("image/")) {
+    return createProductPromptAssetErrorResponse("Arquivo remoto não é imagem.", 415);
+  }
+  const imageBuffer = await response.arrayBuffer();
+  return new NextResponse(imageBuffer, {
+    headers: {
+      "Cache-Control": "private, max-age=60",
+      "Content-Type": contentType,
+    },
+  });
+}
+
+function createProductPromptAssetErrorResponse(
+  message: string,
+  status: number
+): Response {
+  return NextResponse.json({ message }, { status });
+}
diff --git a/app/change-password/change-password.model.ts b/app/change-password/change-password.model.ts
index 889316a..1af59e8 100644
--- a/app/change-password/change-password.model.ts
+++ b/app/change-password/change-password.model.ts
@@ -13,7 +13,8 @@ import { mutate } from "swr";
 
 export const useChangePasswordModel = () => {
   const router = useRouter();
-  const [isLoading, setIsLoading] = useState(false);
+  const [isSubmittingPasswordChange, setIsSubmittingPasswordChange] =
+    useState(false);
 
   const form = useForm<ChangePasswordFormData>({
     resolver: zodResolver(changePasswordSchema),
@@ -25,7 +26,7 @@ export const useChangePasswordModel = () => {
   });
 
   const onSubmit = async (data: ChangePasswordFormData) => {
-    setIsLoading(true);
+    setIsSubmittingPasswordChange(true);
     try {
       await api
         .post("auth/change-password", {
@@ -51,13 +52,13 @@ export const useChangePasswordModel = () => {
         toast.error("Não foi possível alterar a senha. Tente novamente.");
       }
     } finally {
-      setIsLoading(false);
+      setIsSubmittingPasswordChange(false);
     }
   };
 
   return {
     form,
     onSubmit,
-    isLoading,
+    isLoading: isSubmittingPasswordChange,
   };
 };
diff --git a/app/layout.tsx b/app/layout.tsx
index 1cae9e7..b099c13 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import Script from "next/script";
 import "./globals.css";
 import { WarehouseProvider } from "@/lib/contexts/warehouse-context";
 import { AuthProvider } from "@/lib/contexts/auth-context";
@@ -33,6 +34,16 @@ type AppleStartupScreen = {
 };
 
 const SPLASH_SCREEN_BASE_PATH = "/splash_screens";
+const CLARITY_PROJECT_ID = "wumq9sa7e2";
+const SHOULD_LOAD_CLARITY = process.env.NODE_ENV === "production";
+
+const clarityScript = `
+  (function(c,l,a,r,i,t,y){
+    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+  })(window, document, "clarity", "script", "${CLARITY_PROJECT_ID}");
+`;
 
 const appleStartupScreens: AppleStartupScreen[] = [
   { fileName: "10.2__iPad_landscape.png", width: 2160, height: 1620, pixelRatio: 2, orientation: "landscape" },
@@ -171,6 +182,13 @@ export default function RootLayout({
           </WarehouseProvider>
         </AuthProvider>
         <Toaster />
+        {SHOULD_LOAD_CLARITY && (
+          <Script
+            id="microsoft-clarity"
+            strategy="afterInteractive"
+            dangerouslySetInnerHTML={{ __html: clarityScript }}
+          />
+        )}
       </body>
     </html>
   );
diff --git a/app/login/login.model.ts b/app/login/login.model.ts
index dc25b07..77a97da 100644
--- a/app/login/login.model.ts
+++ b/app/login/login.model.ts
@@ -15,7 +15,7 @@ const WAREHOUSE_STORAGE_KEY = "selected-warehouse-id";
 export const useLoginModel = () => {
   const router = useRouter();
   const { setUser } = useAuth();
-  const [isLoading, setIsLoading] = useState(false);
+  const [isSubmittingLogin, setIsSubmittingLogin] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [requiresCaptcha, setRequiresCaptcha] = useState(false);
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
@@ -56,7 +56,7 @@ export const useLoginModel = () => {
       return;
     }
 
-    setIsLoading(true);
+    setIsSubmittingLogin(true);
     try {
       const payload = requiresCaptcha ? { ...data, captchaToken } : data;
 
@@ -111,14 +111,14 @@ export const useLoginModel = () => {
 
       resetCaptcha();
     } finally {
-      setIsLoading(false);
+      setIsSubmittingLogin(false);
     }
   };
 
   return {
     form,
     onSubmit,
-    isLoading,
+    isLoading: isSubmittingLogin,
     errorMessage,
     requiresCaptcha,
     isPasswordVisible,
diff --git a/app/register/register.model.ts b/app/register/register.model.ts
index 31ec576..0606c31 100644
--- a/app/register/register.model.ts
+++ b/app/register/register.model.ts
@@ -12,7 +12,8 @@ import { HTTPError } from "ky";
 export const useRegisterModel = () => {
   const router = useRouter();
   const { setUser } = useAuth();
-  const [isLoading, setIsLoading] = useState(false);
+  const [isSubmittingRegistration, setIsSubmittingRegistration] =
+    useState(false);
 
   const form = useForm<RegisterFormData>({
     resolver: zodResolver(registerSchema),
@@ -25,7 +26,7 @@ export const useRegisterModel = () => {
   });
 
   const onSubmit = async (data: RegisterFormData) => {
-    setIsLoading(true);
+    setIsSubmittingRegistration(true);
     try {
       const payload = {
         companyName: data.companyName,
@@ -58,13 +59,13 @@ export const useRegisterModel = () => {
         toast.error("Falha no cadastro. Tente novamente.");
       }
     } finally {
-      setIsLoading(false);
+      setIsSubmittingRegistration(false);
     }
   };
 
   return {
     form,
     onSubmit,
-    isLoading,
+    isLoading: isSubmittingRegistration,
   };
 };
diff --git a/app/warehouses/warehouses.view.tsx b/app/warehouses/warehouses.view.tsx
index 3ea005f..1443c58 100644
--- a/app/warehouses/warehouses.view.tsx
+++ b/app/warehouses/warehouses.view.tsx
@@ -1,44 +1,48 @@
 "use client";
 
+import {
+  AlertTriangle,
+  Building,
+  Building2,
+  CheckCircle2,
+  Edit,
+  Loader2,
+  MapPin,
+  MoreVertical,
+  Plus,
+  Search,
+  Trash2,
+} from "lucide-react";
+import type { UseFormReturn } from "react-hook-form";
+import { PermissionGate } from "@/components/permission-gate";
 import { Button } from "@/components/ui/button";
-import { ResponsiveModal } from "@/components/ui/responsive-modal";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-  FormDescription,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { ResponsiveModal } from "@/components/ui/responsive-modal";
 import { Switch } from "@/components/ui/switch";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Plus,
-  Search,
-  Edit,
-  Trash2,
-  Building2,
-  Loader2,
-  MoreVertical,
-  MapPin,
-  AlertTriangle,
-  Building,
-  CheckCircle2,
-} from "lucide-react";
-import { UseFormReturn } from "react-hook-form";
-import { WarehouseFormData } from "./warehouses.schema";
-import { Warehouse, SortConfig, StatusFilter } from "./warehouses.types";
-import type { WarehouseStockSummary } from "./warehouses.types";
-import { WarehouseStockInfo } from "./warehouse-stock-info";
 import { cn } from "@/lib/utils";
-import { PermissionGate } from "@/components/permission-gate";
+import type { WarehouseFormData } from "./warehouses.schema";
+import type {
+  SortConfig,
+  StatusFilter,
+  Warehouse,
+  WarehouseStockSummary,
+} from "./warehouses.types";
+import { WarehouseStockInfo } from "./warehouse-stock-info";
 
 interface WarehousesViewProps {
   warehouses: Warehouse[];
@@ -68,542 +72,743 @@ interface WarehousesViewProps {
   isStockSummaryLoading: boolean;
 }
 
-export const WarehousesView = ({
-  warehouses,
-  isLoading,
-  error,
-  searchQuery,
-  setSearchQuery,
-  statusFilter,
-  setStatusFilter,
-  isModalOpen,
-  selectedWarehouse,
-  openCreateModal,
-  openEditModal,
-  closeModal,
-  form,
-  onSubmit,
-  warehouseToDelete,
-  openDeleteDialog,
-  closeDeleteDialog,
-  confirmDelete,
-  isDeleting,
-  onSelectWarehouse,
-  selectedWarehouseId,
-  stockSummariesByWarehouseId,
-  isStockSummaryLoading,
-}: WarehousesViewProps) => {
-  const isSubmitting = form.formState.isSubmitting;
+interface WarehousesViewState extends WarehousesViewProps {
+  isSubmitting: boolean;
+}
+
+const WAREHOUSE_STATUS_FILTERS: StatusFilter[] = ["all", "active", "inactive"];
+
+export const WarehousesView = (props: WarehousesViewProps) => {
+  const viewState: WarehousesViewState = {
+    ...props,
+    isSubmitting: props.form.formState.isSubmitting,
+  };
 
   return (
     <div className="min-h-screen bg-[#0A0A0A] pb-20 font-sans text-neutral-200">
-      {/* Sticky Header with Controls */}
-      <header className="sticky top-0 z-30 border-b border-neutral-800 bg-[#0A0A0A]/95 backdrop-blur supports-[backdrop-filter]:bg-[#0A0A0A]/60">
-        <div className="mx-auto w-full max-w-7xl px-4 py-4 md:px-6 lg:px-8">
-          <div className="flex flex-col gap-4">
-            {/* Top Row: Title & Action */}
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-3">
-                <div className="flex size-9 items-center justify-center rounded-[4px] bg-blue-600">
-                  <Building2 className="size-4.5 text-white" />
-                </div>
-                <div>
-                  <h1 className="text-base font-semibold tracking-tight text-white uppercase">
-                    Armazéns
-                  </h1>
-                  <p className="text-[10px] text-neutral-500 uppercase tracking-wide">
-                    Gerencie seus centros de distribuição
-                  </p>
-                </div>
-              </div>
-
-              <PermissionGate permission="warehouses:create">
-                <Button
-                  onClick={openCreateModal}
-                  className="hidden md:flex h-9 rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
-                >
-                  <Plus className="mr-2 size-4" />
-                  Novo Armazém
-                </Button>
-              </PermissionGate>
-            </div>
+      <WarehousesHeader viewState={viewState} />
+      <WarehousesMain viewState={viewState} />
+      <WarehouseMobileCreateAction openCreateModal={props.openCreateModal} />
+      <WarehouseFormModal viewState={viewState} />
+      <WarehouseDeleteDialog viewState={viewState} />
+    </div>
+  );
+};
 
-            {/* Bottom Row: Search & Filters */}
-            <div className="flex flex-col md:flex-row gap-3 items-center">
-              <div className="relative flex-1 w-full md:max-w-md">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-3.5 text-neutral-500" />
-                <Input
-                  placeholder="Buscar por nome, código ou cidade…"
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pl-9 h-9 w-full rounded-[4px] border-neutral-800 bg-[#171717] text-sm text-neutral-200 placeholder:text-neutral-600 focus:border-blue-600 focus:ring-0"
-                />
-              </div>
-
-              <div className="flex gap-2 w-full md:w-auto overflow-x-auto pb-1 md:pb-0">
-                {(["all", "active", "inactive"] as const).map((status) => (
-                  <Button
-                    key={status}
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => setStatusFilter(status)}
-                    className={cn(
-                      "h-8 rounded-[4px] px-3 text-xs font-bold uppercase tracking-wide border",
-                      statusFilter === status
-                        ? "bg-blue-600 border-blue-600 text-white hover:bg-blue-700"
-                        : "border-neutral-800 bg-[#171717] text-neutral-400 hover:text-white hover:border-neutral-600",
-                    )}
-                  >
-                    {status === "all"
-                      ? "Todos"
-                      : status === "active"
-                        ? "Ativos"
-                        : "Inativos"}
-                  </Button>
-                ))}
-              </div>
-            </div>
-          </div>
+function WarehousesHeader({
+  viewState,
+}: {
+  viewState: WarehousesViewState;
+}) {
+  return (
+    <header className="sticky top-0 z-30 border-b border-neutral-800 bg-[#0A0A0A]/95 backdrop-blur supports-[backdrop-filter]:bg-[#0A0A0A]/60">
+      <div className="mx-auto w-full max-w-7xl px-4 py-4 md:px-6 lg:px-8">
+        <div className="flex flex-col gap-4">
+          <WarehouseHeaderTitle openCreateModal={viewState.openCreateModal} />
+          <WarehouseHeaderFilters viewState={viewState} />
         </div>
-      </header>
-
-      <main className="mx-auto w-full max-w-7xl p-4 md:px-6 lg:px-8 mt-4">
-        <div className="flex flex-col gap-6">
-          {/* Content Area */}
-          <div className="min-h-[400px]">
-            {/* Loading State */}
-            {isLoading && (
-              <div className="flex h-64 w-full flex-col items-center justify-center gap-4 rounded-[4px] border border-neutral-800 bg-[#171717]/50">
-                <Loader2 className="size-8 animate-spin text-blue-600" />
-                <span className="text-xs uppercase tracking-wide text-neutral-500">
-                  Carregando armazéns…
-                </span>
-              </div>
-            )}
+      </div>
+    </header>
+  );
+}
 
-            {/* Error State */}
-            {error && (
-              <div className="flex h-64 w-full flex-col items-center justify-center gap-4 rounded-[4px] border border-rose-900/30 bg-rose-950/10">
-                <AlertTriangle className="size-8 text-rose-500" />
-                <div className="text-center">
-                  <h3 className="text-sm font-semibold uppercase text-rose-500">
-                    Erro de Carregamento
-                  </h3>
-                  <p className="text-xs text-rose-500/70">
-                    Não foi possível acessar a lista de armazéns
-                  </p>
-                </div>
-              </div>
-            )}
+function WarehouseHeaderTitle({
+  openCreateModal,
+}: {
+  openCreateModal: () => void;
+}) {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        <div className="flex size-9 items-center justify-center rounded-[4px] bg-blue-600">
+          <Building2 className="size-4 text-white" />
+        </div>
+        <div>
+          <h1 className="text-base font-semibold tracking-tight text-white uppercase">
+            Armazéns
+          </h1>
+          <p className="text-[10px] tracking-wide text-neutral-500 uppercase">
+            Gerencie seus centros de distribuição
+          </p>
+        </div>
+      </div>
+      <PermissionGate permission="warehouses:create">
+        <Button
+          onClick={openCreateModal}
+          className="hidden h-9 rounded-[4px] bg-blue-600 text-xs font-bold tracking-wide text-white uppercase hover:bg-blue-700 md:flex"
+        >
+          <Plus className="mr-2 size-4" />
+          Novo Armazém
+        </Button>
+      </PermissionGate>
+    </div>
+  );
+}
 
-            {/* Empty State */}
-            {!isLoading && !error && warehouses.length === 0 && (
-              <div className="flex h-96 w-full flex-col items-center justify-center gap-6 rounded-[4px] border border-dashed border-neutral-800 bg-[#171717]/30">
-                <div className="flex size-20 items-center justify-center rounded-[4px] bg-neutral-900 border border-neutral-800">
-                  <Building className="size-8 text-neutral-600" />
-                </div>
-                <div className="text-center">
-                  <h3 className="text-sm font-semibold uppercase tracking-wide text-neutral-300">
-                    {searchQuery || statusFilter !== "all"
-                      ? "Nenhum resultado"
-                      : "Nenhum armazém"}
-                  </h3>
-                  <p className="mt-1 max-w-xs text-xs text-neutral-500">
-                    {searchQuery || statusFilter !== "all"
-                      ? "Tente ajustar seus termos de busca."
-                      : "Comece cadastrando seu primeiro armazém."}
-                  </p>
-                </div>
-                {!searchQuery && statusFilter === "all" && (
-                  <PermissionGate permission="warehouses:create">
-                    <Button
-                      onClick={openCreateModal}
-                      className="rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
-                    >
-                      <Plus className="mr-2 size-3.5" />
-                      Criar Primeiro Armazém
-                    </Button>
-                  </PermissionGate>
-                )}
-              </div>
-            )}
+function WarehouseHeaderFilters({
+  viewState,
+}: {
+  viewState: WarehousesViewState;
+}) {
+  return (
+    <div className="flex flex-col items-center gap-3 md:flex-row">
+      <div className="relative w-full flex-1 md:max-w-md">
+        <Search className="absolute top-1/2 left-3 size-3.5 -translate-y-1/2 text-neutral-500" />
+        <Input
+          placeholder="Buscar por nome, código ou cidade…"
+          value={viewState.searchQuery}
+          onChange={(event) => viewState.setSearchQuery(event.target.value)}
+          className="h-9 w-full rounded-[4px] border-neutral-800 bg-[#171717] pl-9 text-sm text-neutral-200 placeholder:text-neutral-600 focus:border-blue-600 focus:ring-0"
+        />
+      </div>
+      <div className="flex w-full gap-2 overflow-x-auto pb-1 md:w-auto md:pb-0">
+        {WAREHOUSE_STATUS_FILTERS.map((status) => (
+          <WarehouseStatusButton
+            key={status}
+            activeStatus={viewState.statusFilter}
+            setStatusFilter={viewState.setStatusFilter}
+            status={status}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
 
-            {/* Cards Grid */}
-            {!isLoading && !error && warehouses.length > 0 && (
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                {warehouses.map((warehouse) => {
-                  const isSelected = selectedWarehouseId === warehouse.id;
-
-                  return (
-                    <div
-                      key={warehouse.id}
-                      role="button"
-                      tabIndex={0}
-                      onClick={() => onSelectWarehouse(warehouse.id)}
-                      onKeyDown={(event) => {
-                        if (event.key !== "Enter" && event.key !== " ") return;
-                        event.preventDefault();
-                        onSelectWarehouse(warehouse.id);
-                      }}
-                      className={cn(
-                        "group relative flex flex-col rounded-[4px] border bg-[#171717] cursor-pointer overflow-hidden",
-                        isSelected
-                          ? "border-blue-600 ring-1 ring-blue-600"
-                          : warehouse.isActive
-                            ? "border-neutral-800 hover:border-neutral-700"
-                            : "border-neutral-800/50 opacity-75 hover:opacity-100",
-                      )}
-                    >
-                      {/* Card Header */}
-                      <div className="flex items-start justify-between p-4 pb-3">
-                        <div className="flex items-start gap-3 min-w-0 flex-1">
-                          {/* Icon */}
-                          <div
-                            className={cn(
-                              "flex size-11 shrink-0 items-center justify-center rounded-[4px] border",
-                              warehouse.isActive
-                                ? "bg-blue-600/10 border-blue-600/30"
-                                : "bg-neutral-800/50 border-neutral-700",
-                            )}
-                          >
-                            <Building2
-                              className={cn(
-                                "size-5",
-                                warehouse.isActive
-                                  ? "text-blue-500"
-                                  : "text-neutral-500",
-                              )}
-                            />
-                          </div>
-
-                          {/* Info */}
-                          <div className="min-w-0 flex-1">
-                            <div className="flex items-center gap-2 mb-1">
-                              <span
-                                className={cn(
-                                  "text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded-[2px] border",
-                                  warehouse.isActive
-                                    ? "bg-blue-500/10 text-blue-400 border-blue-500/20"
-                                    : "bg-neutral-800 text-neutral-500 border-neutral-700",
-                                )}
-                              >
-                                {warehouse.code}
-                              </span>
-                              {isSelected && (
-                                <CheckCircle2 className="size-3.5 text-blue-500" />
-                              )}
-                            </div>
-                            <h3 className="text-sm font-semibold text-white truncate leading-tight">
-                              {warehouse.name}
-                            </h3>
-                            <div className="flex items-center gap-1.5 mt-1.5">
-                              <MapPin className="size-3 text-neutral-600 shrink-0" />
-                              <span className="text-[11px] text-neutral-400 truncate">
-                                {warehouse.address
-                                  ? `${warehouse.address}, ${warehouse.city} - ${warehouse.state}`
-                                  : `${warehouse.city} - ${warehouse.state}`}
-                              </span>
-                            </div>
-                          </div>
-                        </div>
-
-                        {/* Actions Menu */}
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="size-7 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-white shrink-0"
-                              onClick={(e) => e.stopPropagation()}
-                            >
-                              <MoreVertical className="size-4" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent
-                            align="end"
-                            className="w-40 rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300"
-                          >
-                            <PermissionGate permission="warehouses:update">
-                              <DropdownMenuItem
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  openEditModal(warehouse);
-                                }}
-                                className="text-xs focus:bg-neutral-800 focus:text-white cursor-pointer"
-                              >
-                                <Edit className="mr-2 size-3.5" />
-                                Editar
-                              </DropdownMenuItem>
-                            </PermissionGate>
-                            <PermissionGate permission="warehouses:delete">
-                              <DropdownMenuItem
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  openDeleteDialog(warehouse);
-                                }}
-                                className="text-xs text-rose-500 focus:bg-rose-950/20 focus:text-rose-400 cursor-pointer"
-                              >
-                                <Trash2 className="mr-2 size-3.5" />
-                                Excluir
-                              </DropdownMenuItem>
-                            </PermissionGate>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </div>
-
-                      {/* Status Badge */}
-                      <div className="px-4 pb-3">
-                        <span
-                          className={cn(
-                            "inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-[2px] border",
-                            warehouse.isActive
-                              ? "bg-emerald-500/10 text-emerald-400 border-emerald-500/20"
-                              : "bg-neutral-800 text-neutral-500 border-neutral-700",
-                          )}
-                        >
-                          <span
-                            className={cn(
-                              "size-1.5 rounded-full",
-                              warehouse.isActive
-                                ? "bg-emerald-500"
-                                : "bg-neutral-600",
-                            )}
-                          />
-                          {warehouse.isActive ? "Operacional" : "Inativo"}
-                        </span>
-                      </div>
-
-                      {/* Stock Info Footer */}
-                      <div className="mt-auto border-t border-neutral-800 bg-[#0f0f0f]">
-                        <WarehouseStockInfo
-                          summary={stockSummariesByWarehouseId[warehouse.id]}
-                          isLoading={isStockSummaryLoading}
-                        />
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-          </div>
+function WarehouseStatusButton({
+  activeStatus,
+  setStatusFilter,
+  status,
+}: {
+  activeStatus: StatusFilter;
+  setStatusFilter: (status: StatusFilter) => void;
+  status: StatusFilter;
+}) {
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={() => setStatusFilter(status)}
+      className={cn(
+        "h-8 rounded-[4px] border px-3 text-xs font-bold tracking-wide uppercase",
+        activeStatus === status
+          ? "border-blue-600 bg-blue-600 text-white hover:bg-blue-700"
+          : "border-neutral-800 bg-[#171717] text-neutral-400 hover:border-neutral-600 hover:text-white",
+      )}
+    >
+      {status === "all" ? "Todos" : status === "active" ? "Ativos" : "Inativos"}
+    </Button>
+  );
+}
+
+function WarehousesMain({ viewState }: { viewState: WarehousesViewState }) {
+  const { error, isLoading, warehouses } = viewState;
+
+  return (
+    <main className="mx-auto mt-4 w-full max-w-7xl p-4 md:px-6 lg:px-8">
+      <div className="flex flex-col gap-6">
+        <div className="min-h-[400px]">
+          {isLoading && <WarehousesLoadingState />}
+          {error && <WarehousesErrorState />}
+          {!isLoading && !error && warehouses.length === 0 && (
+            <WarehousesEmptyState viewState={viewState} />
+          )}
+          {!isLoading && !error && warehouses.length > 0 && (
+            <WarehouseCardsGrid viewState={viewState} />
+          )}
         </div>
-      </main>
+      </div>
+    </main>
+  );
+}
 
-      {/* Floating Action Button - Mobile */}
-      <PermissionGate permission="warehouses:create">
+function WarehousesLoadingState() {
+  return (
+    <div className="flex h-64 w-full flex-col items-center justify-center gap-4 rounded-[4px] border border-neutral-800 bg-[#171717]/50">
+      <Loader2 className="size-8 animate-spin text-blue-600" />
+      <span className="text-xs tracking-wide text-neutral-500 uppercase">
+        Carregando armazéns…
+      </span>
+    </div>
+  );
+}
+
+function WarehousesErrorState() {
+  return (
+    <div className="flex h-64 w-full flex-col items-center justify-center gap-4 rounded-[4px] border border-rose-900/30 bg-rose-950/10">
+      <AlertTriangle className="size-8 text-rose-500" />
+      <div className="text-center">
+        <h3 className="text-sm font-semibold text-rose-500 uppercase">
+          Erro de Carregamento
+        </h3>
+        <p className="text-xs text-rose-500/70">
+          Não foi possível acessar a lista de armazéns
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function WarehousesEmptyState({
+  viewState,
+}: {
+  viewState: WarehousesViewState;
+}) {
+  const isFiltered = Boolean(viewState.searchQuery) || viewState.statusFilter !== "all";
+
+  return (
+    <div className="flex h-96 w-full flex-col items-center justify-center gap-6 rounded-[4px] border border-dashed border-neutral-800 bg-[#171717]/30">
+      <div className="flex size-20 items-center justify-center rounded-[4px] border border-neutral-800 bg-neutral-900">
+        <Building className="size-8 text-neutral-600" />
+      </div>
+      <div className="text-center">
+        <h3 className="text-sm font-semibold tracking-wide text-neutral-300 uppercase">
+          {isFiltered ? "Nenhum resultado" : "Nenhum armazém"}
+        </h3>
+        <p className="mt-1 max-w-xs text-xs text-neutral-500">
+          {isFiltered
+            ? "Tente ajustar seus termos de busca."
+            : "Comece cadastrando seu primeiro armazém."}
+        </p>
+      </div>
+      {!isFiltered && (
+        <PermissionGate permission="warehouses:create">
+          <Button
+            onClick={viewState.openCreateModal}
+            className="rounded-[4px] bg-blue-600 text-xs font-bold tracking-wide text-white uppercase hover:bg-blue-700"
+          >
+            <Plus className="mr-2 size-3.5" />
+            Criar Primeiro Armazém
+          </Button>
+        </PermissionGate>
+      )}
+    </div>
+  );
+}
+
+function WarehouseCardsGrid({
+  viewState,
+}: {
+  viewState: WarehousesViewState;
+}) {
+  return (
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {viewState.warehouses.map((warehouse) => (
+        <WarehouseCard
+          key={warehouse.id}
+          warehouse={warehouse}
+          viewState={viewState}
+        />
+      ))}
+    </div>
+  );
+}
+
+function WarehouseCard({
+  warehouse,
+  viewState,
+}: {
+  warehouse: Warehouse;
+  viewState: WarehousesViewState;
+}) {
+  const isSelected = viewState.selectedWarehouseId === warehouse.id;
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={() => viewState.onSelectWarehouse(warehouse.id)}
+      onKeyDown={(event) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        viewState.onSelectWarehouse(warehouse.id);
+      }}
+      className={cn(
+        "group relative flex cursor-pointer flex-col overflow-hidden rounded-[4px] border bg-[#171717]",
+        isSelected
+          ? "border-blue-600 ring-1 ring-blue-600"
+          : warehouse.isActive
+            ? "border-neutral-800 hover:border-neutral-700"
+            : "border-neutral-800/50 opacity-75 hover:opacity-100",
+      )}
+    >
+      <WarehouseCardHeader
+        isSelected={isSelected}
+        warehouse={warehouse}
+        viewState={viewState}
+      />
+      <WarehouseStatusBadge warehouse={warehouse} />
+      <div className="mt-auto border-t border-neutral-800 bg-[#0f0f0f]">
+        <WarehouseStockInfo
+          summary={viewState.stockSummariesByWarehouseId[warehouse.id]}
+          isLoading={viewState.isStockSummaryLoading}
+        />
+      </div>
+    </div>
+  );
+}
+
+function WarehouseCardHeader({
+  isSelected,
+  warehouse,
+  viewState,
+}: {
+  isSelected: boolean;
+  warehouse: Warehouse;
+  viewState: WarehousesViewState;
+}) {
+  return (
+    <div className="flex items-start justify-between p-4 pb-3">
+      <div className="flex min-w-0 flex-1 items-start gap-3">
+        <WarehouseCardIcon warehouse={warehouse} />
+        <WarehouseCardInfo isSelected={isSelected} warehouse={warehouse} />
+      </div>
+      <WarehouseActionsMenu warehouse={warehouse} viewState={viewState} />
+    </div>
+  );
+}
+
+function WarehouseCardIcon({ warehouse }: { warehouse: Warehouse }) {
+  return (
+    <div
+      className={cn(
+        "flex size-11 shrink-0 items-center justify-center rounded-[4px] border",
+        warehouse.isActive
+          ? "border-blue-600/30 bg-blue-600/10"
+          : "border-neutral-700 bg-neutral-800/50",
+      )}
+    >
+      <Building2
+        className={cn(
+          "size-5",
+          warehouse.isActive ? "text-blue-500" : "text-neutral-500",
+        )}
+      />
+    </div>
+  );
+}
+
+function WarehouseCardInfo({
+  isSelected,
+  warehouse,
+}: {
+  isSelected: boolean;
+  warehouse: Warehouse;
+}) {
+  return (
+    <div className="min-w-0 flex-1">
+      <div className="mb-1 flex items-center gap-2">
+        <span
+          className={cn(
+            "rounded-[2px] border px-1.5 py-0.5 text-[10px] font-bold tracking-wider uppercase",
+            warehouse.isActive
+              ? "border-blue-500/20 bg-blue-500/10 text-blue-400"
+              : "border-neutral-700 bg-neutral-800 text-neutral-500",
+          )}
+        >
+          {warehouse.code}
+        </span>
+        {isSelected && <CheckCircle2 className="size-3.5 text-blue-500" />}
+      </div>
+      <h3 className="truncate text-sm leading-tight font-semibold text-white">
+        {warehouse.name}
+      </h3>
+      <div className="mt-1.5 flex items-center gap-1.5">
+        <MapPin className="size-3 shrink-0 text-neutral-600" />
+        <span className="truncate text-[11px] text-neutral-400">
+          {formatWarehouseAddress(warehouse)}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function formatWarehouseAddress(warehouse: Warehouse) {
+  if (warehouse.address) {
+    return `${warehouse.address}, ${warehouse.city} - ${warehouse.state}`;
+  }
+
+  return `${warehouse.city} - ${warehouse.state}`;
+}
+
+function WarehouseActionsMenu({
+  warehouse,
+  viewState,
+}: {
+  warehouse: Warehouse;
+  viewState: WarehousesViewState;
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
         <Button
-          onClick={openCreateModal}
-          className="fixed bottom-6 right-6 size-14 rounded-[4px] bg-blue-600 text-white shadow-lg hover:bg-blue-700 md:hidden z-40"
+          variant="ghost"
           size="icon"
+          className="size-7 shrink-0 rounded-[4px] text-neutral-500 hover:bg-neutral-800 hover:text-white"
+          onClick={(event) => event.stopPropagation()}
         >
-          <Plus className="size-7" />
+          <MoreVertical className="size-4" />
         </Button>
-      </PermissionGate>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        className="w-40 rounded-[4px] border-neutral-800 bg-[#171717] text-neutral-300"
+      >
+        <PermissionGate permission="warehouses:update">
+          <DropdownMenuItem
+            onClick={(event) => {
+              event.stopPropagation();
+              viewState.openEditModal(warehouse);
+            }}
+            className="cursor-pointer text-xs focus:bg-neutral-800 focus:text-white"
+          >
+            <Edit className="mr-2 size-3.5" />
+            Editar
+          </DropdownMenuItem>
+        </PermissionGate>
+        <PermissionGate permission="warehouses:delete">
+          <DropdownMenuItem
+            onClick={(event) => {
+              event.stopPropagation();
+              viewState.openDeleteDialog(warehouse);
+            }}
+            className="cursor-pointer text-xs text-rose-500 focus:bg-rose-950/20 focus:text-rose-400"
+          >
+            <Trash2 className="mr-2 size-3.5" />
+            Excluir
+          </DropdownMenuItem>
+        </PermissionGate>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function WarehouseStatusBadge({ warehouse }: { warehouse: Warehouse }) {
+  return (
+    <div className="px-4 pb-3">
+      <span
+        className={cn(
+          "inline-flex items-center gap-1 rounded-[2px] border px-2 py-0.5 text-[10px] font-bold tracking-wider uppercase",
+          warehouse.isActive
+            ? "border-emerald-500/20 bg-emerald-500/10 text-emerald-400"
+            : "border-neutral-700 bg-neutral-800 text-neutral-500",
+        )}
+      >
+        <span
+          className={cn(
+            "size-1.5 rounded-[4px]",
+            warehouse.isActive ? "bg-emerald-500" : "bg-neutral-600",
+          )}
+        />
+        {warehouse.isActive ? "Operacional" : "Inativo"}
+      </span>
+    </div>
+  );
+}
+
+function WarehouseMobileCreateAction({
+  openCreateModal,
+}: {
+  openCreateModal: () => void;
+}) {
+  return (
+    <PermissionGate permission="warehouses:create">
+      <Button
+        onClick={openCreateModal}
+        className="fixed right-6 bottom-6 z-40 size-14 rounded-[4px] bg-blue-600 text-white shadow-lg hover:bg-blue-700 md:hidden"
+        size="icon"
+      >
+        <Plus className="size-7" />
+      </Button>
+    </PermissionGate>
+  );
+}
+
+function WarehouseFormModal({
+  viewState,
+}: {
+  viewState: WarehousesViewState;
+}) {
+  const { closeModal, form, isModalOpen, onSubmit, selectedWarehouse } =
+    viewState;
+
+  return (
+    <ResponsiveModal
+      open={isModalOpen}
+      onOpenChange={closeModal}
+      title={selectedWarehouse ? "Editar Armazém" : "Novo Armazém"}
+      description={
+        selectedWarehouse
+          ? "Atualize as informações do armazém"
+          : "Preencha os dados para cadastrar um novo local"
+      }
+      footer={<WarehouseFormFooter viewState={viewState} />}
+    >
+      <Form {...form}>
+        <form
+          id="warehouse-form"
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-5 py-2"
+        >
+          <WarehouseNameField form={form} />
+          <WarehouseLocationFields form={form} />
+          <WarehouseStatusField form={form} />
+        </form>
+      </Form>
+    </ResponsiveModal>
+  );
+}
 
-      {/* Create/Edit Modal */}
-      <ResponsiveModal
-        open={isModalOpen}
-        onOpenChange={closeModal}
-        title={selectedWarehouse ? "Editar Armazém" : "Novo Armazém"}
-        description={
-          selectedWarehouse
-            ? "Atualize as informações do armazém"
-            : "Preencha os dados para cadastrar um novo local"
-        }
-        footer={
+function WarehouseFormFooter({
+  viewState,
+}: {
+  viewState: WarehousesViewState;
+}) {
+  return (
+    <>
+      <Button
+        type="button"
+        variant="outline"
+        onClick={viewState.closeModal}
+        className="rounded-[4px] border-neutral-700 bg-transparent text-xs uppercase hover:bg-neutral-800 hover:text-white"
+      >
+        Cancelar
+      </Button>
+      <Button
+        type="submit"
+        form="warehouse-form"
+        disabled={viewState.isSubmitting}
+        className="rounded-[4px] bg-blue-600 text-xs font-bold tracking-wide text-white uppercase hover:bg-blue-700"
+      >
+        {viewState.isSubmitting ? (
           <>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={closeModal}
-              className="rounded-[4px] border-neutral-700 bg-transparent text-xs uppercase hover:bg-neutral-800 hover:text-white"
-            >
-              Cancelar
-            </Button>
-            <Button
-              type="submit"
-              form="warehouse-form"
-              disabled={isSubmitting}
-              className="rounded-[4px] bg-blue-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-blue-700"
-            >
-              {isSubmitting ? (
-                <>
-                  <Loader2 className="mr-2 size-3.5 animate-spin" />
-                  Salvando…
-                </>
-              ) : (
-                "Salvar Dados"
-              )}
-            </Button>
+            <Loader2 className="mr-2 size-3.5 animate-spin" />
+            Salvando…
           </>
-        }
-      >
-        <Form {...form}>
-          <form
-            id="warehouse-form"
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-5 py-2"
-          >
-            {/* Identification */}
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                    Nome do Armazém <span className="text-rose-500">*</span>
-                  </FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="EX: CENTRAL DE DISTRIBUIÇÃO"
-                      className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage className="text-xs text-rose-500" />
-                </FormItem>
-              )}
+        ) : (
+          "Salvar Dados"
+        )}
+      </Button>
+    </>
+  );
+}
+
+function WarehouseNameField({
+  form,
+}: {
+  form: UseFormReturn<WarehouseFormData>;
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name="name"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold tracking-wider text-neutral-400 uppercase">
+            Nome do Armazém <span className="text-rose-500">*</span>
+          </FormLabel>
+          <FormControl>
+            <Input
+              placeholder="EX: CENTRAL DE DISTRIBUIÇÃO"
+              className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+              {...field}
             />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
 
-            {/* Location */}
-            <div className="space-y-4 pt-2 border-t border-neutral-800">
-              <h4 className="text-xs font-semibold uppercase tracking-wide text-white mb-2">
-                Localização
-              </h4>
-
-              <FormField
-                control={form.control}
-                name="address"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                      Endereço Completo
-                    </FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder="Rua, Número, Bairro"
-                        className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage className="text-xs text-rose-500" />
-                  </FormItem>
-                )}
-              />
+function WarehouseLocationFields({
+  form,
+}: {
+  form: UseFormReturn<WarehouseFormData>;
+}) {
+  return (
+    <div className="space-y-4 border-t border-neutral-800 pt-2">
+      <h4 className="mb-2 text-xs font-semibold tracking-wide text-white uppercase">
+        Localização
+      </h4>
+      <WarehouseAddressField form={form} />
+      <div className="grid gap-4 sm:grid-cols-2">
+        <WarehouseCityField form={form} />
+        <WarehouseStateField form={form} />
+      </div>
+    </div>
+  );
+}
 
-              <div className="grid gap-4 sm:grid-cols-2">
-                <FormField
-                  control={form.control}
-                  name="city"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                        Cidade <span className="text-rose-500">*</span>
-                      </FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder="Ex: São Paulo"
-                          className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage className="text-xs text-rose-500" />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="state"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className="text-[10px] font-bold uppercase tracking-wider text-neutral-400">
-                        Estado (UF) <span className="text-rose-500">*</span>
-                      </FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder="Ex: SP"
-                          maxLength={2}
-                          className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0 uppercase"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage className="text-xs text-rose-500" />
-                    </FormItem>
-                  )}
-                />
-              </div>
-            </div>
+function WarehouseAddressField({
+  form,
+}: {
+  form: UseFormReturn<WarehouseFormData>;
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name="address"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold tracking-wider text-neutral-400 uppercase">
+            Endereço Completo
+          </FormLabel>
+          <FormControl>
+            <Input
+              placeholder="Rua, Número, Bairro"
+              className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+              {...field}
+            />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
 
-            {/* Status */}
-            <div className="pt-2 border-t border-neutral-800">
-              <FormField
-                control={form.control}
-                name="isActive"
-                render={({ field }) => (
-                  <FormItem className="flex flex-row items-center justify-between rounded-[4px] border border-neutral-800 bg-neutral-900 p-3">
-                    <div className="space-y-0.5">
-                      <FormLabel className="text-sm font-bold text-white">
-                        Status Operacional
-                      </FormLabel>
-                      <FormDescription className="text-xs text-neutral-500">
-                        Armazéns inativos não permitem movimentações
-                      </FormDescription>
-                    </div>
-                    <FormControl>
-                      <Switch
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                        className="data-[state=checked]:bg-blue-600"
-                      />
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
+function WarehouseCityField({
+  form,
+}: {
+  form: UseFormReturn<WarehouseFormData>;
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name="city"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold tracking-wider text-neutral-400 uppercase">
+            Cidade <span className="text-rose-500">*</span>
+          </FormLabel>
+          <FormControl>
+            <Input
+              placeholder="Ex: São Paulo"
+              className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm focus:border-blue-600 focus:ring-0"
+              {...field}
+            />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function WarehouseStateField({
+  form,
+}: {
+  form: UseFormReturn<WarehouseFormData>;
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name="state"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="text-[10px] font-bold tracking-wider text-neutral-400 uppercase">
+            Estado (UF) <span className="text-rose-500">*</span>
+          </FormLabel>
+          <FormControl>
+            <Input
+              placeholder="Ex: SP"
+              maxLength={2}
+              className="rounded-[4px] border-neutral-800 bg-neutral-900 text-sm uppercase focus:border-blue-600 focus:ring-0"
+              {...field}
+            />
+          </FormControl>
+          <FormMessage className="text-xs text-rose-500" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+function WarehouseStatusField({
+  form,
+}: {
+  form: UseFormReturn<WarehouseFormData>;
+}) {
+  return (
+    <div className="border-t border-neutral-800 pt-2">
+      <FormField
+        control={form.control}
+        name="isActive"
+        render={({ field }) => (
+          <FormItem className="flex flex-row items-center justify-between rounded-[4px] border border-neutral-800 bg-neutral-900 p-3">
+            <div className="space-y-0.5">
+              <FormLabel className="text-sm font-bold text-white">
+                Status Operacional
+              </FormLabel>
+              <FormDescription className="text-xs text-neutral-500">
+                Armazéns inativos não permitem movimentações
+              </FormDescription>
             </div>
-          </form>
-        </Form>
-      </ResponsiveModal>
-
-      {/* Delete Confirmation Dialog */}
-      <ResponsiveModal
-        open={!!warehouseToDelete}
-        onOpenChange={closeDeleteDialog}
-        title="Confirmar Exclusão"
-        description={`Tem certeza que deseja deletar o armazém ${warehouseToDelete?.name}?`}
-        maxWidth="sm:max-w-[400px]"
-        footer={
-          <>
-            <Button
-              variant="ghost"
-              onClick={closeDeleteDialog}
-              className="rounded-[4px] border-neutral-700 bg-transparent text-xs uppercase hover:bg-neutral-800 hover:text-white"
-            >
-              Cancelar
-            </Button>
-            <Button
-              onClick={confirmDelete}
-              disabled={isDeleting}
-              className="rounded-[4px] bg-rose-600 text-xs font-bold uppercase tracking-wide text-white hover:bg-rose-700"
-            >
-              {isDeleting ? (
-                <>
-                  <Loader2 className="mr-2 size-3.5 animate-spin" />
-                  Deletando…
-                </>
-              ) : (
-                "Confirmar Exclusão"
-              )}
-            </Button>
-          </>
-        }
-      >
-        <div className="py-2">
-          <p className="text-xs text-neutral-500">
-            Esta ação é irreversível e pode afetar históricos de movimentação.
-          </p>
-        </div>
-      </ResponsiveModal>
+            <FormControl>
+              <Switch
+                checked={field.value}
+                onCheckedChange={field.onChange}
+                className="data-[state=checked]:bg-blue-600"
+              />
+            </FormControl>
+          </FormItem>
+        )}
+      />
     </div>
   );
-};
+}
+
+function WarehouseDeleteDialog({
+  viewState,
+}: {
+  viewState: WarehousesViewState;
+}) {
+  const {
+    closeDeleteDialog,
+    confirmDelete,
+    isDeleting,
+    warehouseToDelete,
+  } = viewState;
+
+  return (
+    <ResponsiveModal
+      open={!!warehouseToDelete}
+      onOpenChange={closeDeleteDialog}
+      title="Confirmar Exclusão"
+      description={`Tem certeza que deseja deletar o armazém ${warehouseToDelete?.name}?`}
+      maxWidth="sm:max-w-[400px]"
+      footer={
+        <>
+          <Button
+            variant="ghost"
+            onClick={closeDeleteDialog}
+            className="rounded-[4px] border-neutral-700 bg-transparent text-xs uppercase hover:bg-neutral-800 hover:text-white"
+          >
+            Cancelar
+          </Button>
+          <Button
+            onClick={confirmDelete}
+            disabled={isDeleting}
+            className="rounded-[4px] bg-rose-600 text-xs font-bold tracking-wide text-white uppercase hover:bg-rose-700"
+          >
+            {isDeleting ? (
+              <>
+                <Loader2 className="mr-2 size-3.5 animate-spin" />
+                Deletando…
+              </>
+            ) : (
+              "Confirmar Exclusão"
+            )}
+          </Button>
+        </>
+      }
+    >
+      <div className="py-2">
+        <p className="text-xs text-neutral-500">
+          Esta ação é irreversível e pode afetar históricos de movimentação.
+        </p>
+      </div>
+    </ResponsiveModal>
+  );
+}
diff --git a/components/product/image-dropzone.tsx b/components/product/image-dropzone.tsx
index e82a717..630b90f 100644
--- a/components/product/image-dropzone.tsx
+++ b/components/product/image-dropzone.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Image from "next/image";
-import { useCallback, useState, useEffect } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { Upload, X, Image as ImageIcon, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { compressImage } from "@/lib/image-compressor";
@@ -12,329 +12,383 @@ interface ImageDropzoneProps {
   disabled?: boolean;
   currentImageUrl?: string;
   onRemoveImage?: () => void;
+  onProcessingChange?: (isProcessing: boolean) => void;
   className?: string;
   text?: string;
 }
 
+interface ImageActionProps {
+  disabled: boolean;
+  onRemove: () => void;
+  onReplace: () => void;
+}
+
+interface EmptyImageDropzoneProps {
+  disabled: boolean;
+  isDragging: boolean;
+  text?: string;
+  onDragOver: (event: React.DragEvent) => void;
+  onDragLeave: (event: React.DragEvent) => void;
+  onDrop: (event: React.DragEvent) => void;
+  onFileInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const ACCEPTED_IMAGE_TYPES = "image/png,image/jpeg,image/jpg,image/webp";
+const VALID_IMAGE_TYPES = ["image/png", "image/jpeg", "image/jpg", "image/webp"];
+const MAX_IMAGE_SIZE_BYTES = 5 * 1024 * 1024;
+
+const useObjectUrl = (file: File | null): string | null => {
+  const objectUrl = useMemo(() => {
+    return file ? URL.createObjectURL(file) : null;
+  }, [file]);
+
+  useEffect(() => {
+    return () => {
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [objectUrl]);
+
+  return objectUrl;
+};
+
+const validateImageFile = (file: File): boolean => {
+  if (!VALID_IMAGE_TYPES.includes(file.type)) {
+    alert("Formato inválido. Use PNG, JPG, JPEG ou WEBP");
+    return false;
+  }
+
+  if (file.size > MAX_IMAGE_SIZE_BYTES) {
+    alert("Imagem muito grande. Tamanho máximo: 5MB");
+    return false;
+  }
+
+  return true;
+};
+
+const ImagePreviewFrame = ({
+  src,
+  alt,
+}: {
+  src: string;
+  alt: string;
+}) => (
+  <div className="relative aspect-video w-full overflow-hidden rounded-sm border border-border/40 bg-background/30">
+    <Image
+      src={src}
+      alt={alt}
+      fill
+      sizes="100vw"
+      unoptimized
+      className="object-contain"
+    />
+  </div>
+);
+
+const RemoveImageButton = ({
+  disabled,
+  onRemove,
+}: Pick<ImageActionProps, "disabled" | "onRemove">) => (
+  <Button
+    type="button"
+    variant="outline"
+    size="sm"
+    onClick={onRemove}
+    disabled={disabled}
+    className="h-8 rounded-sm border-border/40 hover:bg-muted"
+  >
+    <X className="mr-1 size-3" />
+    Remover
+  </Button>
+);
+
+const SelectedImagePanel = ({
+  previewUrl,
+  value,
+  disabled,
+  onRemove,
+}: {
+  previewUrl: string;
+  value: File;
+  disabled: boolean;
+  onRemove: () => void;
+}) => (
+  <ImagePanel>
+    <ImagePreviewFrame src={previewUrl} alt="Preview" />
+    <div className="mt-3 flex items-center justify-between">
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-xs font-semibold uppercase tracking-wide text-foreground/80">
+          {value.name || "Imagem selecionada"}
+        </p>
+        <p className="text-[11px] text-muted-foreground/70">
+          {(value.size / 1024).toFixed(0)} KB
+        </p>
+      </div>
+      <RemoveImageButton disabled={disabled} onRemove={onRemove} />
+    </div>
+  </ImagePanel>
+);
+
+const CurrentImagePanel = ({
+  currentImageUrl,
+  disabled,
+  onRemove,
+  onReplace,
+}: {
+  currentImageUrl: string;
+} & ImageActionProps) => (
+  <ImagePanel>
+    <ImagePreviewFrame src={currentImageUrl} alt="Imagem atual" />
+    <div className="mt-3 flex items-center justify-between gap-2">
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-xs font-semibold uppercase tracking-wide text-foreground/80">
+          Imagem atual do produto
+        </p>
+        <p className="text-[11px] text-muted-foreground/70">
+          Gerenciado pelo sistema
+        </p>
+      </div>
+      <div className="flex gap-2">
+        <ReplaceImageButton disabled={disabled} onReplace={onReplace} />
+        <RemoveImageButton disabled={disabled} onRemove={onRemove} />
+      </div>
+    </div>
+  </ImagePanel>
+);
+
+const ReplaceImageButton = ({
+  disabled,
+  onReplace,
+}: Pick<ImageActionProps, "disabled" | "onReplace">) => (
+  <Button
+    type="button"
+    variant="outline"
+    size="sm"
+    onClick={onReplace}
+    disabled={disabled}
+    className="h-8 rounded-sm border-border/40 hover:bg-muted"
+  >
+    Trocar
+  </Button>
+);
+
+const RemovedImagePanel = ({
+  disabled,
+  onReplace,
+}: Pick<ImageActionProps, "disabled" | "onReplace">) => (
+  <div className="relative rounded-sm border border-red-900/30 bg-red-950/10 p-4">
+    <div className="relative flex aspect-video w-full items-center justify-center overflow-hidden rounded-sm border border-red-900/20 bg-red-950/5">
+      <div className="flex flex-col items-center gap-2 text-center">
+        <X className="size-8 text-red-700/70" />
+        <p className="text-xs font-semibold uppercase tracking-wide text-red-700/80">
+          Imagem será removida ao salvar
+        </p>
+      </div>
+    </div>
+    <div className="mt-3 flex items-center justify-end">
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={onReplace}
+        disabled={disabled}
+        className="h-8 rounded-sm border-border/40 hover:bg-muted"
+      >
+        Adicionar nova imagem
+      </Button>
+    </div>
+  </div>
+);
+
+const CompressingImagePanel = () => (
+  <div className="relative rounded-sm border-2 border-dashed border-blue-600/40 bg-blue-950/10 p-8">
+    <div className="flex flex-col items-center justify-center gap-3 text-center">
+      <div className="flex size-12 items-center justify-center rounded-sm border border-blue-600/30 bg-blue-600/10">
+        <Loader2 className="size-6 animate-spin text-blue-500" />
+      </div>
+      <div>
+        <p className="text-xs font-semibold uppercase tracking-wide text-blue-500">
+          Comprimindo imagem…
+        </p>
+        <p className="mt-1 text-[11px] text-muted-foreground/70">
+          Otimizando para upload
+        </p>
+      </div>
+    </div>
+  </div>
+);
+
+const EmptyImageDropzone = ({
+  disabled,
+  isDragging,
+  text,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  onFileInput,
+}: EmptyImageDropzoneProps) => (
+  <div
+    onDragOver={onDragOver}
+    onDragLeave={onDragLeave}
+    onDrop={onDrop}
+    className={`relative rounded-sm border-2 border-dashed p-8 ${
+      isDragging
+        ? "border-foreground/40 bg-muted/20"
+        : "border-border/40 bg-card/80"
+    } ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`}
+  >
+    <input
+      type="file"
+      accept={ACCEPTED_IMAGE_TYPES}
+      onChange={onFileInput}
+      disabled={disabled}
+      className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+    />
+    <div className="flex flex-col items-center justify-center gap-3 text-center">
+      <div className="flex size-12 items-center justify-center rounded-sm border border-border/30 bg-foreground/5">
+        {isDragging ? (
+          <Upload className="size-6 text-foreground/70" />
+        ) : (
+          <ImageIcon className="size-6 text-foreground/70" />
+        )}
+      </div>
+      <div>
+        <p className="text-xs font-semibold uppercase tracking-wide text-foreground/80">
+          {isDragging ? "Solte a imagem aqui" : text || "Arraste uma imagem ou clique"}
+        </p>
+        <p className="mt-1 text-[11px] text-muted-foreground/70">
+          PNG, JPG, JPEG ou WEBP • Máx 5MB
+        </p>
+      </div>
+    </div>
+  </div>
+);
+
+const ImagePanel = ({ children }: { children: React.ReactNode }) => (
+  <div className="relative rounded-sm border border-border/50 bg-card/80 p-4">
+    {children}
+  </div>
+);
+
 export const ImageDropzone = ({
   onImageSelect,
   value,
   disabled = false,
   currentImageUrl,
   onRemoveImage,
+  onProcessingChange,
   className,
-  text
+  text,
 }: ImageDropzoneProps) => {
   const [isDragging, setIsDragging] = useState(false);
-  const [preview, setPreview] = useState<string | null>(null);
   const [showRemovalIndicator, setShowRemovalIndicator] = useState(false);
   const [isCompressing, setIsCompressing] = useState(false);
+  const previewUrl = useObjectUrl(value);
+  const rootClassName = className ? `w-full ${className}` : "w-full";
 
-  // Sync preview with value prop changes (e.g. from AI Fill)
-  useEffect(() => {
-    if (value) {
-      // If we have a value but no preview, or if the value object reference changed
-      // (assuming external updates pass a new File object)
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setPreview(reader.result as string);
-      };
-      reader.readAsDataURL(value);
-    } else {
-      setPreview(null);
-    }
-  }, [value]);
-
-  const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    if (!disabled) {
-      setIsDragging(true);
-    }
+  const handleDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
+    if (!disabled) setIsDragging(true);
   }, [disabled]);
 
-  const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
+  const handleDragLeave = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
     setIsDragging(false);
   }, []);
 
-  const validateFile = (file: File): boolean => {
-    const validTypes = ["image/png", "image/jpeg", "image/jpg", "image/webp"];
-    const maxSize = 5 * 1024 * 1024; // 5MB
-
-    if (!validTypes.includes(file.type)) {
-      alert("Formato inválido. Use PNG, JPG, JPEG ou WEBP");
-      return false;
-    }
-
-    if (file.size > maxSize) {
-      alert("Imagem muito grande. Tamanho máximo: 5MB");
-      return false;
-    }
-
-    return true;
-  };
-
-  const handleFile = useCallback(async (file: File) => {
-    if (!validateFile(file)) {
-      return;
-    }
-
+  const handleFile = useCallback(async (file: File): Promise<boolean> => {
+    if (!validateImageFile(file)) return false;
     setIsCompressing(true);
+    onProcessingChange?.(true);
     try {
-      // Compress image before passing to parent
-      const compressedFile = await compressImage(file, 0.7);
-      onImageSelect(compressedFile);
-
-      // Create preview from compressed file
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setPreview(reader.result as string);
-      };
-      reader.readAsDataURL(compressedFile);
+      onImageSelect(await compressImage(file, 0.7));
+      return true;
     } catch (error) {
       console.error("Error compressing image:", error);
-      // Fallback to original file if compression fails
       onImageSelect(file);
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setPreview(reader.result as string);
-      };
-      reader.readAsDataURL(file);
+      return true;
     } finally {
       setIsCompressing(false);
+      onProcessingChange?.(false);
     }
-  }, [onImageSelect]);
+  }, [onImageSelect, onProcessingChange]);
 
-  const handleDrop = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
+  const handleDrop = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
     setIsDragging(false);
-
     if (disabled) return;
-
-    const files = e.dataTransfer.files;
-    if (files && files.length > 0) {
-      handleFile(files[0]);
-    }
+    const [file] = Array.from(event.dataTransfer.files);
+    if (file) void handleFile(file);
   }, [disabled, handleFile]);
 
-  const handleFileInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files;
-    if (files && files.length > 0) {
-      handleFile(files[0]);
-    }
+  const handleFileInput = useCallback((
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const [file] = Array.from(event.target.files ?? []);
+    if (file) void handleFile(file);
   }, [handleFile]);
 
   const handleRemove = useCallback(() => {
     onImageSelect(null);
-    setPreview(null);
-    if (onRemoveImage) {
-      onRemoveImage();
-      setShowRemovalIndicator(true);
-    }
+    if (!onRemoveImage) return;
+    onRemoveImage();
+    setShowRemovalIndicator(true);
   }, [onImageSelect, onRemoveImage]);
 
+  const handleReplacementFile = useCallback(async (
+    file: File | undefined,
+    input: HTMLInputElement,
+  ): Promise<void> => {
+    try {
+      if (!file) return;
+      const didSelectReplacement = await handleFile(file);
+      if (didSelectReplacement) setShowRemovalIndicator(false);
+    } finally {
+      input.remove();
+    }
+  }, [handleFile]);
+
   const handleReplace = useCallback(() => {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = 'image/png,image/jpeg,image/jpg,image/webp';
-    input.onchange = (e) => {
-      const files = (e.target as HTMLInputElement).files;
-      if (files && files.length > 0) {
-        handleFile(files[0]);
-        setShowRemovalIndicator(false);
-      }
-      input.remove(); // Cleanup the input element
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ACCEPTED_IMAGE_TYPES;
+    input.onchange = (event) => {
+      const [file] = Array.from((event.target as HTMLInputElement).files ?? []);
+      void handleReplacementFile(file, input);
     };
     input.click();
-  }, [handleFile]);
-
-  const rootClassName = className ? `w-full ${className}` : "w-full";
-
-  // State 1: New image selected (preview exists)
-  if (preview && value) {
-    return (
-      <div className={rootClassName}>
-        <div className="relative rounded-sm border border-border/50 bg-card/80 p-4">
-          <div className="relative aspect-video w-full overflow-hidden rounded-sm border border-border/40 bg-background/30">
-            <Image
-              src={preview}
-              alt="Preview"
-              fill
-              sizes="100vw"
-              unoptimized
-              className="object-contain"
-            />
-          </div>
-          <div className="mt-3 flex items-center justify-between">
-            <div className="flex-1 min-w-0">
-              <p className="text-xs font-semibold uppercase tracking-wide text-foreground/80 truncate">
-                {value?.name || "Imagem selecionada"}
-              </p>
-              <p className="text-[11px] text-muted-foreground/70">
-                {value ? `${(value.size / 1024).toFixed(0)} KB` : ""}
-              </p>
-            </div>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={handleRemove}
-              disabled={disabled}
-              className="h-8 rounded-sm border-border/40 hover:bg-muted"
-            >
-              <X className="size-3 mr-1" />
-              Remover
-            </Button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // State 2: Current image exists (edit mode, no new image)
-  if (currentImageUrl && !showRemovalIndicator) {
-    return (
-      <div className={rootClassName}>
-        <div className="relative rounded-sm border border-border/50 bg-card/80 p-4">
-          <div className="relative aspect-video w-full overflow-hidden rounded-sm border border-border/40 bg-background/30">
-            <Image
-              src={currentImageUrl}
-              alt="Imagem atual"
-              fill
-              sizes="100vw"
-              unoptimized
-              className="object-contain"
-            />
-          </div>
-          <div className="mt-3 flex items-center justify-between gap-2">
-            <div className="flex-1 min-w-0">
-              <p className="text-xs font-semibold uppercase tracking-wide text-foreground/80 truncate">
-                Imagem atual do produto
-              </p>
-              <p className="text-[11px] text-muted-foreground/70">
-                Gerenciado pelo sistema
-              </p>
-            </div>
-            <div className="flex gap-2">
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                onClick={handleReplace}
-                disabled={disabled}
-                className="h-8 rounded-sm border-border/40 hover:bg-muted"
-              >
-                Trocar
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                onClick={handleRemove}
-                disabled={disabled}
-                className="h-8 rounded-sm border-border/40 hover:bg-muted"
-              >
-                <X className="size-3 mr-1" />
-                Remover
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // State 3: Image was removed (edit mode, removal indicated)
-  if (showRemovalIndicator) {
-    return (
-      <div className={rootClassName}>
-        <div className="relative rounded-sm border border-red-900/30 bg-red-950/10 p-4">
-          <div className="relative aspect-video w-full overflow-hidden rounded-sm border border-red-900/20 bg-red-950/5 flex items-center justify-center">
-            <div className="flex flex-col items-center gap-2 text-center">
-              <X className="size-8 text-red-700/70" />
-              <p className="text-xs font-semibold uppercase tracking-wide text-red-700/80">
-                Imagem será removida ao salvar
-              </p>
-            </div>
-          </div>
-          <div className="mt-3 flex items-center justify-end">
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={handleReplace}
-              disabled={disabled}
-              className="h-8 rounded-sm border-border/40 hover:bg-muted"
-            >
-              Adicionar nova imagem
-            </Button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // State 4: Compressing image
-  if (isCompressing) {
-    return (
-      <div className={rootClassName}>
-        <div className="relative rounded-sm border-2 border-dashed p-8 border-blue-600/40 bg-blue-950/10">
-          <div className="flex flex-col items-center justify-center gap-3 text-center">
-            <div className="flex size-12 items-center justify-center rounded-sm bg-blue-600/10 border border-blue-600/30">
-              <Loader2 className="size-6 text-blue-500 animate-spin" />
-            </div>
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-wide text-blue-500">
-                Comprimindo imagem…
-              </p>
-              <p className="text-[11px] text-muted-foreground/70 mt-1">
-                Otimizando para upload
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
+  }, [handleReplacementFile]);
 
-  // State 5: No image (create mode or empty)
   return (
     <div className={rootClassName}>
-      <div
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
-        className={`relative rounded-sm border-2 border-dashed p-8 ${
-          isDragging
-            ? "border-foreground/40 bg-muted/20"
-            : "border-border/40 bg-card/80"
-        } ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`}
-      >
-        <input
-          type="file"
-          accept="image/png,image/jpeg,image/jpg,image/webp"
-          onChange={handleFileInput}
+      {isCompressing ? (
+        <CompressingImagePanel />
+      ) : previewUrl && value ? (
+        <SelectedImagePanel
+          previewUrl={previewUrl}
+          value={value}
           disabled={disabled}
-          className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+          onRemove={handleRemove}
         />
-        <div className="flex flex-col items-center justify-center gap-3 text-center">
-          <div className="flex size-12 items-center justify-center rounded-sm bg-foreground/5 border border-border/30">
-            {isDragging ? (
-              <Upload className="size-6 text-foreground/70" />
-            ) : (
-              <ImageIcon className="size-6 text-foreground/70" />
-            )}
-          </div>
-          <div>
-            <p className="text-xs font-semibold uppercase tracking-wide text-foreground/80">
-              {isDragging ? "Solte a imagem aqui" : (text || "Arraste uma imagem ou clique")}
-            </p>
-            <p className="text-[11px] text-muted-foreground/70 mt-1">
-              PNG, JPG, JPEG ou WEBP • Máx 5MB
-            </p>
-          </div>
-        </div>
-      </div>
+      ) : currentImageUrl && !showRemovalIndicator ? (
+        <CurrentImagePanel
+          currentImageUrl={currentImageUrl}
+          disabled={disabled}
+          onRemove={handleRemove}
+          onReplace={handleReplace}
+        />
+      ) : showRemovalIndicator ? (
+        <RemovedImagePanel disabled={disabled} onReplace={handleReplace} />
+      ) : (
+        <EmptyImageDropzone
+          disabled={disabled}
+          isDragging={isDragging}
+          text={text}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          onFileInput={handleFileInput}
+        />
+      )}
     </div>
   );
 };
diff --git a/components/ui/chart.tsx b/components/ui/chart.tsx
index 5d6d9b4..c95491e 100644
--- a/components/ui/chart.tsx
+++ b/components/ui/chart.tsx
@@ -1,10 +1,43 @@
 "use client"
 
+import dynamic from "next/dynamic"
 import * as React from "react"
-import * as RechartsPrimitive from "recharts"
 
 import { cn } from "@/lib/utils"
 
+type RechartsModule = typeof import("recharts")
+type ResponsiveContainerProps = React.ComponentProps<
+  RechartsModule["ResponsiveContainer"]
+>
+type RechartsTooltipProps = React.ComponentProps<RechartsModule["Tooltip"]>
+
+const loadResponsiveContainer = async (): Promise<
+  React.ComponentType<ResponsiveContainerProps>
+> => {
+  const rechartsModule = await import("recharts")
+  return rechartsModule.ResponsiveContainer as unknown as React.ComponentType<
+    ResponsiveContainerProps
+  >
+}
+
+const loadChartTooltip = async (): Promise<
+  React.ComponentType<RechartsTooltipProps>
+> => {
+  const rechartsModule = await import("recharts")
+  return rechartsModule.Tooltip as unknown as React.ComponentType<
+    RechartsTooltipProps
+  >
+}
+
+const ResponsiveContainer = dynamic<ResponsiveContainerProps>(
+  loadResponsiveContainer,
+  { ssr: false }
+)
+const ChartTooltip = dynamic<RechartsTooltipProps>(
+  loadChartTooltip,
+  { ssr: false }
+)
+
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const
 
@@ -42,9 +75,7 @@ function ChartContainer({
   ...props
 }: React.ComponentProps<"div"> & {
   config: ChartConfig
-  children: React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"]
+  children: ResponsiveContainerProps["children"]
 }) {
   const uniqueId = React.useId()
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
@@ -61,9 +92,9 @@ function ChartContainer({
         {...props}
       >
         <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
+        <ResponsiveContainer>
           {children}
-        </RechartsPrimitive.ResponsiveContainer>
+        </ResponsiveContainer>
       </div>
     </ChartContext.Provider>
   )
@@ -116,10 +147,8 @@ ${colorConfig
   return null
 }
 
-const ChartTooltip = RechartsPrimitive.Tooltip
-
 type ChartTooltipContentProps =
-  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  RechartsTooltipProps &
     React.ComponentProps<"div"> & {
       hideLabel?: boolean
       hideIndicator?: boolean
diff --git a/docs/endpoints/stock-movements.md b/docs/endpoints/stock-movements.md
index d1de482..77e37e2 100644
--- a/docs/endpoints/stock-movements.md
+++ b/docs/endpoints/stock-movements.md
@@ -29,7 +29,7 @@ Autenticacao: obrigatoria (JWT em cookie `accessToken` ou header `Authorization`
 ## Authorization Matrix
 
 - `POST /api/stock-movements` (application/json): `stock_movements:create`
-- `POST /api/stock-movements` (multipart/form-data): `stock_movements:create`
+- `POST /api/uploads/product-images/temp` (multipart/form-data): `stock_movements:create`
 - `GET /api/stock-movements`: `stock_movements:read`
 - `GET /api/stock-movements/{id}`: `stock_movements:read`
 - `GET /api/stock-movements/warehouse-summary`: `stock_movements:read`
@@ -68,6 +68,7 @@ Request:
         "isEnabled": true
       },
       "quantity": 10,
+      "imageUploadId": "990e8400-e29b-41d4-a716-446655440000",
       "costPrice": 1050,
       "sellingPrice": 2000
     },
@@ -95,21 +96,36 @@ Regras:
 - Se a quantidade total disponivel no warehouse for insuficiente, retorna `400` com mensagem de estoque insuficiente.
 - Para movimentos `IN` com `productId`, se qualquer data/preco de lote for informado, o sistema cria um novo batch com esses dados; se nenhum dado for informado, adiciona a quantidade ao primeiro batch existente do produto ou cria o primeiro batch se ainda nao houver lote.
 - Se passado um `newProduct`, o sistema antes ira cadastrar tal produto no BD para em seguida criar o seu batch com as premissas deste estoque de entrada.
+- `imageUploadId` e opcional e so pode ser usado junto com `newProduct`. Ele deve vir do endpoint de upload temporario e substitui o envio multipart da movimentacao.
 - O `warehouseId` e determinado automaticamente pelo warehouse do usuario logado.
 - Um codigo unico e gerado automaticamente (ex: `MOV-2026-0001`).
 
 ---
 
-### POST /api/stock-movements (multipart/form-data)
+### POST /api/uploads/product-images/temp (multipart/form-data)
 
-Cria uma movimentacao de estoque semelhante ao endpoint json, porem com suporte a envio de imagens do novo produto gerado inline, utilizando content-type `multipart/form-data`.
+Faz upload temporario de uma imagem de produto inline antes do POST JSON da movimentacao.
 
 Parts:
 
-- `movement` (Obrigatorio): Parte contendo o JSON com o body equivalente a `CreateStockMovementRequest`. Content-Type dessa part deve ser `application/json`.
-- `inlineProductImages` (Opcional): Lista de arquivos de imagem (`MultipartFile`). Permite anexar a imagem do novo produto listado em `movement.items.newProduct`. Apos cadastrar o produto (que ira ser associado a essa mov), o sistema fara upload desta imagem associando-a ao novo produto. O suporte aceita o envio de varias fotos num unico vetor de dados, caso aja varios novos produtos com imagens enviadas na mesma transacao, preenchendo da forma programada.
+- `image` (Obrigatorio): arquivo `image/png`, `image/jpeg`, `image/jpg` ou `image/webp`.
 
-Response (`201 Created`): Retorna as mesmas informacoes geradas do modo padrao da aplicacao json.
+Response (`201 Created`):
+
+```json
+{
+  "success": true,
+  "message": "Temporary product image uploaded successfully",
+  "data": {
+    "uploadId": "990e8400-e29b-41d4-a716-446655440000",
+    "fileName": "produto.webp",
+    "contentType": "image/webp",
+    "sizeBytes": 105000
+  }
+}
+```
+
+O `uploadId` deve ser enviado no item `newProduct` da movimentacao. Uploads temporarios expiram e sao limpos automaticamente se nao forem consumidos.
 
 Response (`201 Created`) comum:
 
diff --git a/lib/contexts/warehouse-context.tsx b/lib/contexts/warehouse-context.tsx
index 15847bf..60bf4fa 100644
--- a/lib/contexts/warehouse-context.tsx
+++ b/lib/contexts/warehouse-context.tsx
@@ -1,6 +1,13 @@
 "use client";
 
-import { createContext, use, useEffect, useState, ReactNode } from "react";
+import {
+  createContext,
+  use,
+  useEffect,
+  useState,
+  useSyncExternalStore,
+  ReactNode,
+} from "react";
 import { useRouter } from "next/navigation";
 
 interface WarehouseContextValue {
@@ -12,13 +19,25 @@ const WarehouseContext = createContext<WarehouseContextValue | undefined>(undefi
 
 const WAREHOUSE_STORAGE_KEY = "selected-warehouse-id";
 
+const subscribeToClientHydration = (onStoreChange: () => void): (() => void) => {
+  onStoreChange();
+  return () => undefined;
+};
+
+const getClientSnapshot = (): boolean => true;
+
+const getServerSnapshot = (): boolean => false;
+
 export const WarehouseProvider = ({ children }: { children: ReactNode }) => {
   const [selectedWarehouseId, setSelectedWarehouseIdState] = useState<string | null>(null);
-  const [isClient, setIsClient] = useState(false);
+  const isClient = useSyncExternalStore(
+    subscribeToClientHydration,
+    getClientSnapshot,
+    getServerSnapshot,
+  );
   const { push } = useRouter();
 
   useEffect(() => {
-    setIsClient(true);
     const stored = localStorage.getItem(WAREHOUSE_STORAGE_KEY);
     if (stored) {
       setSelectedWarehouseIdState(stored);
diff --git a/react-doctor.report.json b/react-doctor.report.json
new file mode 100644
index 0000000..479e2cb
--- /dev/null
+++ b/react-doctor.report.json
@@ -0,0 +1,41 @@
+{
+  "schemaVersion": 1,
+  "version": "0.1.6",
+  "ok": true,
+  "directory": "/home/lexmarcos/projects/stockshift/StockShift",
+  "mode": "full",
+  "diff": null,
+  "projects": [
+    {
+      "directory": "/home/lexmarcos/projects/stockshift/StockShift",
+      "project": {
+        "rootDirectory": "/home/lexmarcos/projects/stockshift/StockShift",
+        "projectName": "stockshift",
+        "reactVersion": "19.1.0",
+        "framework": "nextjs",
+        "hasTypeScript": true,
+        "hasReactCompiler": false,
+        "hasTanStackQuery": false,
+        "sourceFileCount": 336
+      },
+      "diagnostics": [],
+      "score": {
+        "score": 100,
+        "label": "Great"
+      },
+      "skippedChecks": [],
+      "elapsedMilliseconds": 1107.6800939999998
+    }
+  ],
+  "diagnostics": [],
+  "summary": {
+    "errorCount": 0,
+    "warningCount": 0,
+    "affectedFileCount": 0,
+    "totalDiagnosticCount": 0,
+    "score": 100,
+    "scoreLabel": "Great"
+  },
+  "elapsedMilliseconds": 1116.830071,
+  "error": null
+}