RiseUP/riseup_squad_03
3
5
Fork 2
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: destaca dados mockados e WIP no app

Browse Source
This commit is contained in:
EdilbertoC
2026-04-28 10:34:05 -03:00
parent 7199c107f2
commit 767f226952
14 changed files with 209 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/AgendaPage.jsx
View File

@@ -1,6 +1,8 @@
import { useEffect, useMemo, useState } from 'react'
import { appointmentRepository } from '../repositories/appointmentRepository.js'
import { FeatureBadge, FeatureCallout } from '../components/FeatureState.jsx'
import { featurePanelClass } from '../components/featureStateStyles.js'
import { patientRepository } from '../repositories/patientRepository.js'
import { professionalRepository } from '../repositories/professionalRepository.js'
@@ -88,6 +90,12 @@ useEffect(() => {
return (
<div className="mx-auto flex max-w-[1180px] flex-col gap-8 text-[#e5e5e5]">
<FeatureCallout
description="Listagem e criação de agendamentos usam API. Linha do tempo, resumo preditivo e calendário semanal ainda são visuais simulados."
status="partial"
title="Agenda com partes reais e partes mockadas"
/>
<section className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div>
<h1 className="text-[32px] font-bold leading-8 tracking-[-0.02em] text-[#e5e5e5]">
@@ -116,7 +124,7 @@ useEffect(() => {
</div>
</section>
<section className="grid gap-4 lg:grid-cols-5">
<section className={`grid gap-4 lg:grid-cols-5 ${featurePanelClass('mock')}`}>
{weekDays.map((day) => (
<button
className={`rounded-2xl border p-4 text-left transition ${
@@ -137,10 +145,13 @@ useEffect(() => {
</section>
<section className="grid gap-6 xl:grid-cols-[1.45fr_0.85fr]">
<div className="rounded-2xl border border-[#404040] bg-[#262626] p-5 shadow-[0_1px_3px_rgba(0,0,0,0.2)]">
<div className={`rounded-2xl border bg-[#262626] p-5 shadow-[0_1px_3px_rgba(0,0,0,0.2)] ${featurePanelClass('live')}`}>
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
<div>
<h2 className="text-base font-bold leading-6 text-[#e5e5e5]">Terça, 07 abril</h2>
<div className="flex flex-wrap items-center gap-2">
<h2 className="text-base font-bold leading-6 text-[#e5e5e5]">Terça, 07 abril</h2>
<FeatureBadge status="live" />
</div>
<p className="mt-1 text-sm leading-5 text-[#a3a3a3]">
Visualização: {activeView.toLowerCase()} | {visibleAppointments.length} registros no filtro
</p>
@@ -202,8 +213,11 @@ useEffect(() => {
</div>
<div className="grid gap-6">
<div className="rounded-2xl border border-[#404040] bg-[#262626] p-5">
<h2 className="text-base font-bold text-[#e5e5e5]">Linha do tempo</h2>
<div className={`rounded-2xl border bg-[#262626] p-5 ${featurePanelClass('mock')}`}>
<div className="flex flex-wrap items-center gap-2">
<h2 className="text-base font-bold text-[#e5e5e5]">Linha do tempo</h2>
<FeatureBadge status="mock" />
</div>
<div className="mt-5 grid gap-1">
{timeline.map((item) => (
<button
@@ -223,8 +237,11 @@ useEffect(() => {
</div>
</div>
<div className="rounded-2xl border border-[#404040] bg-[#262626] p-5">
<h2 className="text-base font-bold text-[#e5e5e5]">Resumo preditivo</h2>
<div className={`rounded-2xl border bg-[#262626] p-5 ${featurePanelClass('mock')}`}>
<div className="flex flex-wrap items-center gap-2">
<h2 className="text-base font-bold text-[#e5e5e5]">Resumo preditivo</h2>
<FeatureBadge status="mock" />
</div>
<div className="mt-5 grid gap-3">
{queue.map((item) => (
<div className="flex items-center justify-between rounded-md bg-[#2a2a2a] px-4 py-3" key={item.label}>