Projeto guiado: dashboard com tabela, filtro e upload

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  const token = request.cookies.get("session")?.value;
  if (!token) {
    return NextResponse.redirect(new URL("/login", request.url));
  }
  return NextResponse.next();
}

export const config = {
  matcher: ["/dashboard/:path*"],
};

type Props = { searchParams: Promise<{ page?: string; q?: string }> };

async function getPedidos(page: number, termo: string) {
  const res = await fetch(
    `https://api.exemplo.com/pedidos?page=${page}&pageSize=20&q=${termo}`,
    { cache: "no-store" }
  );
  return res.json() as Promise<{ itens: Pedido[]; total: number }>;
}

export default async function PedidosPage({ searchParams }: Props) {
  const { page = "1", q = "" } = await searchParams;
  const { itens, total } = await getPedidos(Number(page), q);

  return (
    <div className="max-w-3xl mx-auto p-6">
      <h1 className="text-2xl font-bold mb-4">Pedidos</h1>
      <FiltroPedidos termoInicial={q} />

      <table className="w-full mt-4 border-collapse">
        <tbody>
          {itens.map((pedido) => (
            <tr key={pedido.id} className="border-b">
              <td className="py-2">{pedido.cliente}</td>
              <td className="py-2 text-right">R$ {pedido.total.toFixed(2)}</td>
            </tr>
          ))}
        </tbody>
      </table>

      <p className="text-sm text-slate-500 mt-2">
        Página {page} — {total} pedidos no total
      </p>
    </div>
  );
}

"use client";

import { useEffect, useState } from "react";
import { useRouter, usePathname, useSearchParams } from "next/navigation";

function useDebouncedValue<T>(valor: T, delay: number) {
  const [debounced, setDebounced] = useState(valor);
  useEffect(() => {
    const timeout = setTimeout(() => setDebounced(valor), delay);
    return () => clearTimeout(timeout);
  }, [valor, delay]);
  return debounced;
}

export function FiltroPedidos({ termoInicial }: { termoInicial: string }) {
  const [termo, setTermo] = useState(termoInicial);
  const termoDebounced = useDebouncedValue(termo, 300);
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    const params = new URLSearchParams(searchParams);
    if (termoDebounced) params.set("q", termoDebounced);
    else params.delete("q");
    router.push(`${pathname}?${params.toString()}`);
  }, [termoDebounced, pathname, router, searchParams]);

  return (
    <input
      value={termo}
      onChange={(e) => setTermo(e.target.value)}
      placeholder="Buscar por cliente..."
      className="border rounded-lg px-3 py-2 w-full"
    />
  );
}

"use server";

import { revalidatePath } from "next/cache";

export async function enviarComprovante(formData: FormData) {
  const arquivo = formData.get("arquivo") as File;
  const pedidoId = formData.get("pedidoId") as string;

  if (!arquivo || arquivo.size === 0) throw new Error("Selecione um arquivo");

  await salvarComprovante(pedidoId, arquivo);
  revalidatePath("/dashboard/pedidos"); // tabela reflete o novo status no próximo carregamento
}

import { enviarComprovante } from "./actions";

export function UploadComprovanteForm({ pedidoId }: { pedidoId: string }) {
  return (
    <form action={enviarComprovante} className="flex items-center gap-2">
      <input type="hidden" name="pedidoId" value={pedidoId} />
      <input type="file" name="arquivo" accept="image/*,application/pdf" />
      <button type="submit" className="bg-blue-600 text-white px-3 py-1.5 rounded-lg text-sm">
        Enviar comprovante
      </button>
    </form>
  );
}