RiseUP/riseup-squad21
5
0
Fork 2
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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

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

@ -112,14 +112,14 @@ 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>
@ -127,11 +127,12 @@ export default function PacientesPage() {
</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 */}
<div className="flex items-center gap-2 w-full md:w-auto">
<span className="text-sm font-medium text-gray-700">Convênio</span> <span className="text-sm font-medium text-gray-700">Convênio</span>
<Select value={convenioFilter} onValueChange={setConvenioFilter}> <Select value={convenioFilter} onValueChange={setConvenioFilter}>
<SelectTrigger className="w-40"> <SelectTrigger className="w-full md:w-40">
<SelectValue placeholder="Selecione o Convênio" /> <SelectValue placeholder="Selecione o Convênio" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -143,6 +144,33 @@ export default function PacientesPage() {
</Select> </Select>
</div> </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 className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-sm font-medium text-gray-700">VIP</span> <span className="text-sm font-medium text-gray-700">VIP</span>
<Select value={vipFilter} onValueChange={setVipFilter}> <Select value={vipFilter} onValueChange={setVipFilter}>
@ -171,10 +199,11 @@ 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">
@ -182,16 +211,16 @@ export default function PacientesPage() {
{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": {

6
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"
} }
} }