126 lines
6.0 KiB
TypeScript
126 lines
6.0 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import CardBox from '../CardBox';
|
|
import dataFormatter from '../../helpers/dataFormatter';
|
|
import ListActionsPopover from "../ListActionsPopover";
|
|
import { useAppSelector } from "../../stores/hooks";
|
|
import { Pagination } from "../Pagination";
|
|
import LoadingSpinner from "../LoadingSpinner";
|
|
import { hasPermission } from "../../helpers/userPermissions";
|
|
|
|
type Props = {
|
|
checklist_items: any[];
|
|
loading: boolean;
|
|
onDelete: (id: string) => void;
|
|
currentPage: number;
|
|
numPages: number;
|
|
onPageChange: (page: number) => void;
|
|
};
|
|
|
|
const formatChecklist = (checklist: any) => {
|
|
const value = dataFormatter.human_review_checklistsOneListFormatter(checklist);
|
|
|
|
if (!value) {
|
|
return 'Checklist not linked';
|
|
}
|
|
|
|
return value;
|
|
};
|
|
|
|
const ListChecklist_items = ({ checklist_items, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
|
|
const currentUser = useAppSelector((state) => state.auth.currentUser);
|
|
const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_CHECKLIST_ITEMS');
|
|
|
|
return (
|
|
<>
|
|
<div className='grid grid-cols-[repeat(auto-fit,minmax(340px,1fr))] gap-4 p-4'>
|
|
{loading && (
|
|
<div className='col-span-full rounded-xl border border-[#DDD5C7] bg-white p-10'>
|
|
<LoadingSpinner />
|
|
</div>
|
|
)}
|
|
|
|
{!loading && checklist_items.map((item) => (
|
|
<CardBox
|
|
key={item.id}
|
|
hasComponentLayout
|
|
className='overflow-hidden border border-[#DDD5C7] bg-white shadow-sm shadow-[#83755E]/10 transition hover:border-[#D8B75E]/70 hover:shadow-md'
|
|
>
|
|
<div className='flex items-start justify-between gap-4 border-b border-[#E5E0D6] bg-[#FBF8F1] p-5'>
|
|
<div className='flex min-w-0 gap-4'>
|
|
<div className='flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-[#0E1A2B] text-sm font-semibold text-[#D8B75E]'>
|
|
#{item.item_order || '-'}
|
|
</div>
|
|
<div className='min-w-0'>
|
|
<p className='text-xs font-semibold uppercase tracking-[0.14em] text-[#8B7A61]'>
|
|
Review item
|
|
</p>
|
|
<Link
|
|
href={`/checklist_items/checklist_items-view/?id=${item.id}`}
|
|
className='mt-2 block text-lg font-semibold leading-6 text-[#0E1A2B] hover:text-[#7A5B13]'
|
|
>
|
|
{item.item_text || 'Untitled review item'}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<ListActionsPopover
|
|
onDelete={onDelete}
|
|
itemId={item.id}
|
|
pathEdit={`/checklist_items/checklist_items-edit/?id=${item.id}`}
|
|
pathView={`/checklist_items/checklist_items-view/?id=${item.id}`}
|
|
hasUpdatePermission={hasUpdatePermission}
|
|
/>
|
|
</div>
|
|
|
|
<div className='space-y-4 p-5'>
|
|
<div className='flex flex-wrap gap-2'>
|
|
<span className='rounded-full border border-[#D8D0C2] bg-[#F6F3EC] px-3 py-1 text-xs font-semibold text-[#7A5B13]'>
|
|
Order {item.item_order || 'not set'}
|
|
</span>
|
|
<span
|
|
className={
|
|
item.is_required
|
|
? 'rounded-full border border-red-200 bg-red-50 px-3 py-1 text-xs font-semibold text-red-700'
|
|
: 'rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold text-slate-600'
|
|
}
|
|
>
|
|
{item.is_required ? 'Required' : 'Optional'}
|
|
</span>
|
|
</div>
|
|
|
|
<div className='rounded-lg border border-[#E5E0D6] bg-[#FBF8F1] p-4'>
|
|
<p className='text-xs font-semibold uppercase tracking-[0.14em] text-[#8B7A61]'>
|
|
Linked checklist
|
|
</p>
|
|
<p className='mt-2 text-sm font-semibold leading-6 text-[#0E1A2B]'>
|
|
{formatChecklist(item.checklist)}
|
|
</p>
|
|
</div>
|
|
|
|
<p className='text-sm leading-6 text-[#5B6472]'>
|
|
This step becomes part of the human oversight record before AI-assisted work is relied on or sent outside the legal team.
|
|
</p>
|
|
</div>
|
|
</CardBox>
|
|
))}
|
|
|
|
{!loading && checklist_items.length === 0 && (
|
|
<div className='col-span-full flex h-40 items-center justify-center rounded-xl border border-dashed border-[#D8D0C2] bg-white'>
|
|
<p className='text-sm text-[#5B6472]'>No checklist items to display</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className='my-6 flex items-center justify-center'>
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
numPages={numPages}
|
|
setCurrentPage={onPageChange}
|
|
/>
|
|
</div>
|
|
</>
|
|
)
|
|
};
|
|
|
|
export default ListChecklist_items
|