Seazn/profit-planet-frontend
2
2
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: enhance contract template display with user type and improved status badges

Browse Source
This commit is contained in:
seaznCode 2026-01-14 22:16:23 +01:00
parent 35b0abd005
commit 5920104756
1 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/admin/contract-management/components/contractTemplateList.tsx
View File

@ -13,11 +13,16 @@ type ContractTemplate = {
name: string;
type?: string;
contract_type?: string | null;
user_type?: string | null;
version: number;
status: 'draft' | 'published' | 'archived' | string;
updatedAt?: string;
};
function Pill({ children, className }: { children: React.ReactNode; className: string }) {
return <span className={`px-2 py-0.5 rounded text-xs font-semibold border ${className}`}>{children}</span>;
}
function StatusBadge({ status }: { status: string }) {
const map: Record<string, string> = {
draft: 'bg-gray-100 text-gray-800 border border-gray-300',
@ -57,6 +62,7 @@ export default function ContractTemplateList({ refreshKey = 0, onEdit }: Props)
name: x.name ?? 'Untitled',
type: x.type,
contract_type: x.contract_type ?? x.contractType ?? null,
user_type: x.user_type ?? x.userType ?? null,
version: Number(x.version ?? 1),
status: (x.state === 'active') ? 'published' : 'draft',
updatedAt: x.updatedAt ?? x.modifiedAt ?? x.updated_at,
@ -94,7 +100,9 @@ export default function ContractTemplateList({ refreshKey = 0, onEdit }: Props)
try {
const updated = await updateTemplateState(id, target as 'active' | 'inactive');
// Update clicked item immediately, then refresh list to reflect any auto-deactivations.
setItems((prev) => prev.map((i) => i.id === id ? { ...i, status: updated.state === 'active' ? 'published' : 'draft' } : i));
await load();
} catch {}
};
@ -138,10 +146,20 @@ export default function ContractTemplateList({ refreshKey = 0, onEdit }: Props)
<div className="flex items-center gap-2">
<p className="font-semibold text-lg text-gray-900 truncate">{c.name}</p>
<StatusBadge status={c.status} />
{c.type === 'contract' && c.contract_type && (
<span className="px-2 py-0.5 rounded text-xs font-semibold bg-indigo-50 text-indigo-800 border border-indigo-200">
{c.type && (
<Pill className="bg-slate-50 text-slate-800 border-slate-200">
{c.type === 'contract' ? 'Contract' : c.type === 'bill' ? 'Bill' : 'Other'}
</Pill>
)}
{c.type === 'contract' && (
<Pill className="bg-indigo-50 text-indigo-800 border-indigo-200">
{c.contract_type === 'gdpr' ? 'GDPR' : 'Contract'}
</span>
</Pill>
)}
{c.user_type && (
<Pill className="bg-emerald-50 text-emerald-800 border-emerald-200">
{c.user_type === 'personal' ? 'Personal' : c.user_type === 'company' ? 'Company' : 'Both'}
</Pill>
)}
</div>
<p className="text-xs text-gray-500">Version {c.version}{c.updatedAt ? ` • Updated ${new Date(c.updatedAt).toLocaleString()}` : ''}</p>