saveinmed/marketplace-front/src/pages/Profile.tsx

57 lines
2.1 KiB
TypeScript

import { useState } from 'react'
import { Shell } from '../layouts/Shell'
interface DocumentUpload {
name: string
status: 'validado' | 'pendente'
lastUpdate: string
}
export function ProfilePage() {
const [docs, setDocs] = useState<DocumentUpload[]>([
{ name: 'Alvará Sanitário', status: 'validado', lastUpdate: '2024-06-10' },
{ name: 'CRF Responsável Técnico', status: 'pendente', lastUpdate: '2024-05-02' }
])
const updateStatus = (name: string, status: DocumentUpload['status']) => {
setDocs((prev) => prev.map((doc) => (doc.name === name ? { ...doc, status } : doc)))
}
return (
<Shell>
<div className="space-y-4 rounded-lg bg-white p-6 shadow-sm">
<div className="flex items-center justify-between">
<div>
<h1 className="text-xl font-semibold text-medicalBlue">Perfil da Empresa</h1>
<p className="text-sm text-gray-600">Envie e acompanhe documentos regulatórios da farmácia.</p>
</div>
</div>
<div className="space-y-3">
{docs.map((doc) => (
<div key={doc.name} className="flex items-center justify-between rounded bg-gray-50 px-4 py-3">
<div>
<p className="font-semibold text-gray-800">{doc.name}</p>
<p className="text-xs text-gray-500">Última atualização: {doc.lastUpdate}</p>
</div>
<div className="flex items-center gap-3">
<span
className={`rounded-full px-3 py-1 text-xs font-semibold ${
doc.status === 'validado' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'
}`}
>
{doc.status.toUpperCase()}
</span>
<button
className="rounded bg-healthGreen px-3 py-1 text-xs font-semibold text-white"
onClick={() => updateStatus(doc.name, doc.status === 'validado' ? 'pendente' : 'validado')}
>
Alternar status
</button>
</div>
</div>
))}
</div>
</div>
</Shell>
)
}