Feature/patients pending #54

carolinesv-dev · 2025-10-22T19:52:49Z

Tipo

Bug fix: correção de um problema
New feature (ready): adição de nova funcionalidade pronta para publicação
New feature (incomplete): adição de nova funcionalidade, porém incompleta
Refactor: refatoração de código
Chore: alteração de documentação, pacotes ou testes, sem afetar o usuário final
Release: nova versão da aplicação - somente para produção
Other: especifique caso nenhuma opção acima se adeque

Descrição

Forneça detalhes sobre esta Pull Request aqui. A descrição deve conter o contexto geral da alteração, seu objetivo e o que foi feito. Escreva de forma simples e direta, facilitando a compreensão de quem irá ler e revisar.

Screenshots / Imagens / Videos

Adicione imagens, vídeos ou outro conteúdo multimídia aqui.

Tarefas ou Issue

id-da-tarefa-ou-issue

Checklist

Eu revisei meu código
As alterações passam pelos testes e lint locais
Eu comentei em partes de maior complexidade para melhorar a compreensão (se aplicável)
Eu criei testes para minha correção ou funcionalidade (se aplicável):
- Testes unitários
- Testes de integração

Instruções para teste

Insira instruções para testes aqui, se necessário.

Dependências

Indique se possui alguma dependência, como incluir nova variável de ambiente, aprovação de outra PR, conclusão ou criação de endpoint, configuração do servidor, etc.

Exemplo:

Necessário incluir a variável de ambiente: NOME_DA_ENV=
PR Pendente: pr-pendente
Depende do endpoint: api/exemplo

…into staging

netlify · 2025-10-22T19:52:54Z

✅ Deploy Preview for abnmo ready!

Name	Link
🔨 Latest commit	`afc2e65`
🔍 Latest deploy log	https://app.netlify.com/projects/abnmo/deploys/6903b6edb45b11000849b093
😎 Deploy Preview	https://deploy-preview-54--abnmo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

gabrielmlemes · 2025-10-26T22:33:37Z

src/app/paciente/documentos/pendentes/page.tsx

 export default function Page() {
-  return <div>Pendentes</div>
+  return (
+    <div className='min-h-screen bg-[var(--color-background)] p-8'>


Quando precisar usar as cores do nosso design system, pode passar direto. Ex: bg-background

gabrielmlemes · 2025-10-26T22:34:28Z

src/app/paciente/documentos/pendentes/page.tsx

+  return (
+    <div className='min-h-screen bg-[var(--color-background)] p-8'>
+      <div className='mb-8'>
+        <h1 className='text-2xl font-bold text-[var(--color-foreground)]'>


Aqui também. Ex: text-foreground.

gabrielmlemes · 2025-10-26T22:35:16Z

src/app/paciente/documentos/pendentes/page.tsx

+        <h1 className='text-2xl font-bold text-[var(--color-foreground)]'>
+          Documentos Pendentes
+        </h1>
+        <p className='mt-2 text-[var(--color-foreground-soft)]'>


O mesmo aqui. Ex: text-foreground-soft.

gabrielmlemes · 2025-10-26T22:40:43Z

src/app/paciente/documentos/pendentes/page.tsx

@@ -1,9 +1,42 @@
-import type { Metadata } from 'next'
+'use client'


Acho que não precisamos do 'use client' aqui.
Como esse arquivo é uma página (Page.tsx), o ideal é que ele seja um Server Component, já que mais pra frente vamos buscar dados diretamente do servidor.
Assim, aproveitamos melhor os recursos de performance e renderização.

gabrielmlemes · 2025-10-26T22:53:02Z

src/components/PatientRequirementCard/PatientRequirementCard.tsx

+  imageUrl: string
+}
+
+export const PatientRequirementCard: React.FC<PatientRequirementCardProps> = ({


Aqui podemos ajustar dois pontos para seguir o padrão do projeto:

Evitar o uso de React.FC, já que o TypeScript já infere o tipo de retorno automaticamente.

Utilizar Named Function (export function PatientRequirementCard(...)) em vez de export const ... = () => {}, para manter consistência e melhor legibilidade.

Ficaria algo assim 👇

export function PatientRequirementCard({ title, createdAt, status, imageUrl, }: PatientRequirementCardProps) { // ... }

gabrielmlemes · 2025-10-26T22:56:37Z

src/components/PatientRequirementCard/PatientRequirementCard.tsx

+}) => {
+  const statusColors: Record<string, { bg: string; text: string }> = {
+    Pendente: {
+      bg: 'bg-[var(--color-warning)]/10',


Quando precisar usar as cores do nosso design system, pode passar direto. Ex: bg-warning/10

gabrielmlemes · 2025-10-26T22:58:45Z

src/components/PatientRequirementCard/PatientRequirementCard.tsx

+
+  return (
+    <div className='rounded-2xl bg-[var(--color-card)] p-4 shadow transition-all hover:shadow-md'>
+      <img


Podemos utilizar o componente <Image /> do Next.js aqui — ele otimiza automaticamente o carregamento e a performance das imagens.

gabrielmlemes · 2025-10-27T13:40:53Z

src/components/new-service/new-service-modal.tsx

+
+  return (
+    <>
+      <button


Aqui podemos utilizar o componente <Button />, que já possui classes e estilos pré-definidos.
Caso seja necessário ajustar a aparência, podemos usar a prop variant para aplicar variações visuais conforme o padrão do projeto.

gabrielmlemes · 2025-10-27T13:50:12Z

src/components/new-service/new-service-modal.tsx

+      {isOpen && (
+        <div className='fixed inset-0 z-50 flex items-center justify-center'>
+          <div
+            className='bg-opacity-30 fixed inset-0 bg-black'


Devemos priorizar as cores definidas no nosso design system, evitando cores arbitrárias como bg-black.
Isso garante consistência visual e facilita futuras manutenções de tema.

gabrielmlemes · 2025-10-27T14:06:43Z

src/components/new-service/new-service-modal.tsx

+              <div>
+                <label className='text-foreground mb-1 block text-sm font-medium'>
+                  Nome do paciente *
+                </label>
+                <input
+                  type='text'
+                  value={patientName}
+                  onChange={(e) => setPatientName(e.target.value)}
+                  className='border-border focus:ring-primary w-full rounded-lg border p-2 text-sm focus:ring-2 focus:outline-none'
+                  required
+                />
+              </div>


Devemos priorizar o uso dos componentes pré-definidos do nosso design system, como <Label /> e <Input />.
Isso ajuda a manter a consistência visual e reduz duplicação de estilos no projeto.

gabrielmlemes · 2025-10-27T14:09:33Z

src/components/new-service/new-service-modal.tsx

+              <div className='mt-4 flex justify-end gap-2'>
+                <button
+                  type='button'
+                  onClick={closeModal}
+                  className='border-border rounded-lg border px-4 py-2 text-sm transition hover:bg-gray-100'
+                >
+                  Cancelar
+                </button>
+                <button
+                  type='submit'
+                  className='bg-primary text-primary-foreground hover:bg-primary-soft rounded-lg px-4 py-2 font-medium transition'
+                >
+                  Cadastrar
+                </button>
+              </div>


Aqui também podemos utilizar o componente <Button/>.

gabrielmlemes · 2025-10-27T18:45:08Z

@carolinesv-dev
Fiz alguns comentários relacionados à estilização, seguindo o padrão do nosso design system.

Sobre o componente NewServiceModal, dá uma olhadinha no PatientsInactivateModal (src/components/patients/inactivate-modal.tsx).
Lá tem um bom exemplo de como podemos utilizar o modal com o Dialog, de forma padronizada.

carolinesv-dev added 3 commits September 17, 2025 20:54

feat: new-service-modal

3d3f60c

Merge branch 'staging' of https://github.com/ipecode-br/abnmo-frontend …

ff3fcfa

…into staging

feat: patients pending correct

3074c42

julianosill requested review from daniel-barbosaa and gabrielmlemes October 23, 2025 13:44

gabrielmlemes reviewed Oct 26, 2025

View reviewed changes

gabrielmlemes self-requested a review October 26, 2025 23:04

gabrielmlemes reviewed Oct 27, 2025

View reviewed changes

feat: changes

afc2e65

		@@ -1,9 +1,42 @@
		import type { Metadata } from 'next'
		'use client'

Feature/patients pending #54

Are you sure you want to change the base?

Feature/patients pending #54

Uh oh!

Conversation

carolinesv-dev commented Oct 22, 2025

Tipo

Descrição

Screenshots / Imagens / Videos

Tarefas ou Issue

Checklist

Instruções para teste

Dependências

Uh oh!

netlify bot commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for abnmo ready!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gabrielmlemes commented Oct 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify bot commented Oct 22, 2025 •

edited

Loading