modified: src/App.jsx

modified: src/components/AppShell.jsx modified: src/config/api.js modified: src/config/permissions.js modified: src/data/mockData.js modified: src/hooks/useAgenda.js modified: src/hooks/useAuth.js modified: src/mappers/appointmentMapper.js modified: src/pages/AgendaPage.jsx modified: src/pages/AuthPages.jsx modified: src/pages/HomePage.jsx modified: src/pages/MedicalRecordsPage.jsx modified: src/pages/MessagesPage.jsx modified: src/pages/NotFoundPage.jsx modified: src/pages/PatientsPage.jsx modified: src/pages/ReportsPage.jsx modified: src/pages/TeamPage.jsx modified: src/pages/UsersPage.jsx modified: src/pages/VisitsPage.jsx modified: src/repositories/authRepository.js new file: src/repositories/availabilityRepository.js modified: src/repositories/communicationRepository.js modified: src/repositories/patientRepository.js modified: src/repositories/professionalRepository.js modified: src/repositories/profileRepository.js modified: src/repositories/reportRepository.js modified: src/repositories/repositoryUtils.js modified: src/repositories/settingsRepository.js modified: src/repositories/userRepository.js modified: src/repositories/visitRepository.js
2026-05-06 01:09:36 -03:00
parent bb5200664a
commit 666b3b5c0e
30 changed files with 1038 additions and 376 deletions
--- a/src/pages/TeamPage.jsx
+++ b/src/pages/TeamPage.jsx
@@ -1,25 +1,66 @@
-import { useState, useEffect } from 'react'
+import { useEffect, useMemo, useState } from 'react'
+
 import { FeatureBadge, FeatureCallout } from '../components/FeatureState.jsx'
 import { featurePanelClass } from '../components/featureStateStyles.js'
+import { availabilityRepository } from '../repositories/availabilityRepository.js'
 import { professionalRepository } from '../repositories/professionalRepository.js'

 const cardClass = 'rounded-2xl border border-[#404040] bg-[#262626] shadow-sm'
+const weekdays = [
+  { label: 'Seg', value: 1 },
+  { label: 'Ter', value: 2 },
+  { label: 'Qua', value: 3 },
+  { label: 'Qui', value: 4 },
+  { label: 'Sex', value: 5 },
+]

 export function TeamPage({ navigate }) {
  const [professionals, setProfessionals] = useState([])
-  const { slots, weekdays } = professionalRepository.getCoverageMap()
+  const [availability, setAvailability] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')

  useEffect(() => {
-    professionalRepository.getAll().then(setProfessionals).catch(console.error)
+    let active = true
+
+    async function loadTeam() {
+      try {
+        setError('')
+        const [professionalsData, availabilityData] = await Promise.all([
+          professionalRepository.getAll(),
+          availabilityRepository.getAll({ active: true }),
+        ])
+
+        if (!active) return
+
+        setProfessionals(professionalsData)
+        setAvailability(availabilityData)
+      } catch (loadError) {
+        if (!active) return
+        setError(loadError.message || 'Erro ao carregar profissionais e disponibilidade.')
+      } finally {
+        if (active) setLoading(false)
+      }
+    }
+
+    loadTeam()
+
+    return () => {
+      active = false
+    }
  }, [])

+  const availabilityByDoctor = useMemo(() => groupAvailabilityByDoctor(availability), [availability])
+
  return (
    <div className="mx-auto max-w-7xl space-y-6">
-      <FeatureCallout
-        description="A listagem de profissionais usa API, mas o mapa de cobertura e parte da disponibilidade ainda são simulados."
-        status="partial"
-        title="Tela híbrida: parte real, parte mockada"
-      />
+      {error ? (
+        <FeatureCallout
+          description={error}
+          status="wip"
+          title="Não foi possível carregar disponibilidade"
+        />
+      ) : null}

      <header className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
        <div>
@@ -35,7 +76,11 @@ export function TeamPage({ navigate }) {
        </button>
      </header>

-      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4" aria-label="Equipe médica">
+      {loading ? (
+        <p className="py-10 text-center text-sm text-[#a3a3a3]">Carregando profissionais...</p>
+      ) : null}
+
+      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4" aria-label="Equipe medica">
        {professionals.map((professional) => (
          <article className={`${cardClass} ${featurePanelClass('live')} p-5`} key={professional.id}>
            <div className="flex items-start justify-between gap-3">
@@ -51,22 +96,22 @@ export function TeamPage({ navigate }) {

            <dl className="mt-5 grid gap-3 text-sm">
              <Info label="Agenda" value={professional.schedule} />
-              <Info label="Próximo horário" value={professional.nextSlot} />
+              <Info label="Proximo horario" value={professional.nextSlot} />
              <Info label="Pacientes ativos" value={professional.patients} />
            </dl>
          </article>
        ))}
      </section>

-      <section className={`${cardClass} ${featurePanelClass('mock')} p-5`}>
+      <section className={`${cardClass} ${featurePanelClass('live')} p-5`}>
        <div className="flex flex-wrap items-center justify-between gap-3">
          <div>
            <div className="flex flex-wrap items-center gap-2">
              <h2 className="text-xl font-bold text-[#f5f5f5]">Mapa de cobertura</h2>
-              <FeatureBadge status="mock" />
+              <FeatureBadge status="live" />
            </div>
            <p className="mt-1 text-sm text-[#a3a3a3]">
-              Matriz simples para preparar o fluxo de agenda, plantão e disponibilidade.
+              Disponibilidades ativas cadastradas em /rest/v1/doctor_availability.
            </p>
          </div>
          <button
@@ -80,18 +125,18 @@ export function TeamPage({ navigate }) {

        <div className="mt-5 overflow-x-auto rounded-sm border border-[#404040]">
          <div className="grid min-w-[720px] grid-cols-[1.2fr_repeat(5,1fr)] bg-[#171717] text-xs font-bold uppercase tracking-[0.16em] text-[#a3a3a3]">
-            {['Profissional', ...weekdays].map((label) => (
+            {['Profissional', ...weekdays.map((weekday) => weekday.label)].map((label) => (
              <div className="border-b border-[#404040] px-4 py-3" key={label}>
                {label}
              </div>
            ))}
          </div>
-          {professionals.map((professional, rowIndex) => (
+          {professionals.map((professional) => (
            <div className="grid min-w-[720px] grid-cols-[1.2fr_repeat(5,1fr)] text-sm" key={professional.id}>
              <div className="border-b border-[#404040] px-4 py-3 font-semibold text-[#f5f5f5]">{professional.name}</div>
-              {slots.map((slot, index) => (
-                <div className="border-b border-[#404040] px-4 py-3 text-[#b8b8b8]" key={`${professional.id}-${slot}`}>
-                  {shiftSlot(slot, rowIndex + index)}
+              {weekdays.map((weekday) => (
+                <div className="border-b border-[#404040] px-4 py-3 text-[#b8b8b8]" key={`${professional.id}-${weekday.value}`}>
+                  {formatCoverage(availabilityByDoctor.get(String(professional.id))?.[weekday.value])}
                </div>
              ))}
            </div>
@@ -123,7 +168,7 @@ function StatusPill({ status }) {
 }

 function initials(name) {
-  return name
+  return String(name || '')
    .replace(/^(Dr\.|Dra\.|Nutri\.|Enf\.)\s+/i, '')
    .split(' ')
    .slice(0, 2)
@@ -132,10 +177,28 @@ function initials(name) {
    .toUpperCase()
 }

-function shiftSlot(slot, index) {
-  if (index % 4 === 0) {
-    return 'Bloqueado'
+function groupAvailabilityByDoctor(items) {
+  const grouped = new Map()
+
+  for (const item of items) {
+    const doctorId = String(item.doctorId)
+    const current = grouped.get(doctorId) || {}
+    current[item.weekday] = [...(current[item.weekday] || []), item]
+    grouped.set(doctorId, current)
  }

-  return slot
+  return grouped
+}
+
+function formatCoverage(items = []) {
+  const activeItems = items.filter((item) => item.active !== false)
+  if (!activeItems.length) return 'Sem regra'
+
+  return activeItems
+    .map((item) => `${formatTime(item.startTime)}-${formatTime(item.endTime)}`)
+    .join(', ')
+}
+
+function formatTime(value) {
+  return String(value || '').slice(0, 5)
 }