StsDanilo/riseup-squad21
1
0
Fork 0
forked from RiseUP/riseup-squad21
Code Pull Requests Activity

Responsividade

Browse Source
This commit is contained in:
GagoDuBroca 2025-09-24 22:56:56 -03:00
parent 10663c4528
commit ffacc44979
3 changed files with 80 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
app/secretary/pacientes/page.tsx
View File

@ -112,35 +112,63 @@ export default function PacientesPage() {
return ( return (
<SecretaryLayout> <SecretaryLayout>
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center justify-between"> <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div> <div>
<h1 className="text-2xl font-bold text-gray-900">Pacientes</h1> <h1 className="text-xl md:text-2xl font-bold text-gray-900">Pacientes</h1>
<p className="text-gray-600">Gerencie as informações de seus pacientes</p> <p className="text-gray-600 text-sm md:text-base">Gerencie as informações de seus pacientes</p>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<Link href="/secretary/pacientes/novo"> <Link href="/secretary/pacientes/novo">
<Button className="bg-blue-600 hover:bg-blue-700"> <Button className="bg-blue-600 hover:bg-blue-700 w-full md:w-auto">
<Plus className="w-4 h-4 mr-2" /> <Plus className="w-4 h-4 mr-2" />
Adicionar Adicionar
</Button> </Button>
</Link> </Link>
</div> </div>
</div> </div>
<div className="flex items-center gap-4 bg-white p-4 rounded-lg border border-gray-200"> <div className="flex flex-col md:flex-row flex-wrap gap-4 bg-white p-4 rounded-lg border border-gray-200">
<div className="flex items-center gap-2"> {/* Convênio */}
<span className="text-sm font-medium text-gray-700">Convênio</span> <div className="flex items-center gap-2 w-full md:w-auto">
<Select value={convenioFilter} onValueChange={setConvenioFilter}> <span className="text-sm font-medium text-gray-700">Convênio</span>
<SelectTrigger className="w-40"> <Select value={convenioFilter} onValueChange={setConvenioFilter}>
<SelectValue placeholder="Selecione o Convênio" /> <SelectTrigger className="w-full md:w-40">
</SelectTrigger> <SelectValue placeholder="Selecione o Convênio" />
<SelectContent> </SelectTrigger>
<SelectItem value="all">Todos</SelectItem> <SelectContent>
<SelectItem value="Particular">Particular</SelectItem> <SelectItem value="all">Todos</SelectItem>
<SelectItem value="SUS">SUS</SelectItem> <SelectItem value="Particular">Particular</SelectItem>
<SelectItem value="Unimed">Unimed</SelectItem> <SelectItem value="SUS">SUS</SelectItem>
</SelectContent> <SelectItem value="Unimed">Unimed</SelectItem>
</Select> </SelectContent>
</Select>
</div>
<div className="flex items-center gap-2 w-full md:w-auto">
<span className="text-sm font-medium text-gray-700">VIP</span>
<Select value={vipFilter} onValueChange={setVipFilter}>
<SelectTrigger className="w-full md:w-32">
<SelectValue placeholder="Selecione" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">Todos</SelectItem>
<SelectItem value="vip">VIP</SelectItem>
<SelectItem value="regular">Regular</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex items-center gap-2 w-full md:w-auto">
<span className="text-sm font-medium text-gray-700">Aniversariantes</span>
<Select>
<SelectTrigger className="w-full md:w-32">
<SelectValue placeholder="Selecione" />
</SelectTrigger>
<SelectContent>
<SelectItem value="today">Hoje</SelectItem>
<SelectItem value="week">Esta semana</SelectItem>
<SelectItem value="month">Este mês</SelectItem>
</SelectContent>
</Select>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@ -171,27 +199,28 @@ export default function PacientesPage() {
</Select> </Select>
</div> </div>
<Button variant="outline" className="ml-auto bg-transparent"> <Button variant="outline" className="ml-auto bg-transparent w-full md:w-auto">
<Filter className="w-4 h-4 mr-2" /> <Filter className="w-4 h-4 mr-2" />
Filtro avançado Filtro avançado
</Button> </Button>
</div> </div>
<div className="bg-white rounded-lg border border-gray-200"> <div className="bg-white rounded-lg border border-gray-200">
<div className="overflow-x-auto"> <div className="overflow-x-auto">
{error ? ( {error ? (
<div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div> <div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
) : ( ) : (
<table className="w-full"> <table className="w-full min-w-[600px]">
<thead className="bg-gray-50 border-b border-gray-200"> <thead className="bg-gray-50 border-b border-gray-200">
<tr> <tr>
<th className="text-left p-4 font-medium text-gray-700">Nome</th> <th className="text-left p-2 md:p-4 font-medium text-gray-700">Nome</th>
<th className="text-left p-4 font-medium text-gray-700">Telefone</th> <th className="text-left p-2 md:p-4 font-medium text-gray-700">Telefone</th>
<th className="text-left p-4 font-medium text-gray-700">Cidade</th> <th className="text-left p-2 md:p-4 font-medium text-gray-700">Cidade</th>
<th className="text-left p-4 font-medium text-gray-700">Estado</th> <th className="text-left p-2 md:p-4 font-medium text-gray-700">Estado</th>
<th className="text-left p-4 font-medium text-gray-700">Último atendimento</th> <th className="text-left p-2 md:p-4 font-medium text-gray-700">Último atendimento</th>
<th className="text-left p-4 font-medium text-gray-700">Próximo atendimento</th> <th className="text-left p-2 md:p-4 font-medium text-gray-700">Próximo atendimento</th>
<th className="text-left p-4 font-medium text-gray-700">Ações</th> <th className="text-left p-2 md:p-4 font-medium text-gray-700">Ações</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

12
package-lock.json generated
View File

@ -62,13 +62,13 @@
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4.1.9", "@tailwindcss/postcss": "^4.1.9",
"@types/node": "^22", "@types/node": "^22.18.6",
"@types/react": "^18", "@types/react": "^18.3.24",
"@types/react-dom": "^18", "@types/react-dom": "^18",
"postcss": "^8.5", "postcss": "^8.5",
"tailwindcss": "^4.1.9", "tailwindcss": "^4.1.9",
"tw-animate-css": "1.3.3", "tw-animate-css": "1.3.3",
"typescript": "^5" "typescript": "^5.9.2"
} }
}, },
"node_modules/@alloc/quick-lru": { "node_modules/@alloc/quick-lru": {
@ -2031,9 +2031,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "22.18.5", "version": "22.18.6",
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.18.5.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-22.18.6.tgz",
"integrity": "sha512-g9BpPfJvxYBXUWI9bV37j6d6LTMNQ88hPwdWWUeYZnMhlo66FIg9gCc1/DZb15QylJSKwOZjwrckvOTWpOiChg==", "integrity": "sha512-r8uszLPpeIWbNKtvWRt/DbVi5zbqZyj1PTmhRMqBMvDnaz1QpmSKujUtJLrqGZeoM8v72MfYggDceY4K1itzWQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {

8
package.json
View File

@ -63,12 +63,12 @@
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4.1.9", "@tailwindcss/postcss": "^4.1.9",
"@types/node": "^22", "@types/node": "^22.18.6",
"@types/react": "^18", "@types/react": "^18.3.24",
"@types/react-dom": "^18", "@types/react-dom": "^18",
"postcss": "^8.5", "postcss": "^8.5",
"tailwindcss": "^4.1.9", "tailwindcss": "^4.1.9",
"tw-animate-css": "1.3.3", "tw-animate-css": "1.3.3",
"typescript": "^5" "typescript": "^5.9.2"
} }
} }