feat: destaca dados mockados e WIP no app

src/pages/ReportsPage.jsx

@@ -1,5 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 
+import { FeatureBadge, FeatureCallout } from '../components/FeatureState.jsx'
+import { featurePanelClass } from '../components/featureStateStyles.js'
 import { reportRepository } from '../repositories/reportRepository.js'
 import { patientRepository } from '../repositories/patientRepository.js'
 
@@ -186,18 +188,25 @@ export function ReportsPage() {
 
   return (
     <div className="mx-auto max-w-7xl space-y-6 text-[#e5e5e5]">
+      <FeatureCallout
+        description="Listagem e salvar laudo usam API. Templates, protocolo de entrega e parte do fluxo editorial ainda são locais."
+        status="partial"
+        title="Laudos com integração parcial"
+      />
+
       <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
         <div>
           <h1 className="text-2xl font-bold tracking-tight text-[#e5e5e5]">Gestão de Laudos</h1>
         </div>
         <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
           <button
-            className="inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-[#404040] bg-[#262626] px-4 text-sm font-medium text-[#e5e5e5] transition hover:bg-[#2a2a2a]"
+            className={`inline-flex h-10 items-center justify-center gap-2 rounded-lg border px-4 text-sm font-medium text-[#e5e5e5] transition hover:bg-[#2a2a2a] ${featurePanelClass('mock')}`}
             onClick={() => setTemplatesOpen(true)}
             type="button"
           >
             <ReportIcon className="size-4 text-[#3b82f6]" name="template" />
             Templates
+            <FeatureBadge status="mock" />
           </button>
           <button
             className="inline-flex h-10 items-center justify-center gap-2 rounded-lg bg-[#3b82f6] px-4 text-sm font-medium text-white transition hover:bg-[#2563eb]"
@@ -219,7 +228,7 @@ export function ReportsPage() {
         ))}
       </section>
 
-      <section className={`${cardClass} p-6`}>
+      <section className={`${cardClass} ${featurePanelClass('live')} p-6`}>
         <div className="mb-6 flex flex-col gap-4 md:flex-row">
           <div className="relative flex-1">
             <ReportIcon className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[#a3a3a3]" name="search" />