92 lines
4.0 KiB
TypeScript
92 lines
4.0 KiB
TypeScript
import { PaginatedDocs } from 'payload'
|
|
import { Author, Book, HoldRequest, Repository } from '@/payload-types'
|
|
import { Button } from '../ui/button'
|
|
import Image from 'next/image'
|
|
|
|
type Props = {
|
|
repos: PaginatedDocs<Repository> | null
|
|
}
|
|
const HoldRequestNotifications = (props: Props) => {
|
|
const { repos } = props
|
|
|
|
const totalHoldNotifications = repos?.docs.flatMap((r) => r.holdRequests?.docs).length || 0
|
|
|
|
const holdRequestsByRepoElements = repos?.docs.map((r) => {
|
|
return (
|
|
<ul role="list" className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{r.holdRequests?.docs?.map((h) => {
|
|
const hold = h as HoldRequest
|
|
const book = hold.book as Book
|
|
const authors = book.authors as Author[]
|
|
return (
|
|
<li key={hold.id} className="col-span-1 rounded-lg shadow-sm border border-accent">
|
|
<div className="flex w-full items-center justify-between space-x-6 p-6">
|
|
<div className="flex-1 truncate">
|
|
<div className="flex items-center space-x-3">
|
|
<h3 className="truncate text-sm font-medium text-foreground">{book.title}</h3>
|
|
</div>
|
|
<p className="mt-1 truncate text-sm text-gray-500">
|
|
{authors.map((a) => a.lf).join(' | ')}
|
|
</p>
|
|
{hold.isHolding ? (
|
|
<span>
|
|
<span className="mr-0.5 text-xs">Hold Until</span>
|
|
<time className="inline-flex shrink-0 items-center rounded-full bg-background/20 px-1.5 py-0.5 text-xs font-medium text-emerald-600 ring-1 ring-emerald-600/20 ring-inset">
|
|
{hold.holdingUntilDate}
|
|
</time>
|
|
</span>
|
|
) : (
|
|
<span>
|
|
<span className="mr-0.5 text-xs">Requested </span>
|
|
{!!hold.dateRequested && (
|
|
<time className="inline-flex shrink-0 items-center rounded-full bg-background/20 px-1.5 py-0.5 text-xs font-medium text-amber-500 ring-1 ring-amber-600/20 ring-inset">
|
|
{new Date(hold.dateRequested).toLocaleDateString()}
|
|
</time>
|
|
)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<img
|
|
alt=""
|
|
className="h-16 shrink-0 rounded bg-gray-300"
|
|
src={
|
|
book.isbn
|
|
? `https://covers.openlibrary.org/b/isbn/${book.isbn}-M.jpg`
|
|
: '/images/book-48.svg'
|
|
}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div className="flex gap-3 justify-around">
|
|
<Button className="inline-flex flex-1 items-center justify-center gap-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-foreground bg-foreground/5 hover:bg-red-400/10 cursor-pointer hover:scale-105">
|
|
<Image width={24} height={24} src="/images/reject.svg" alt="approve hold" />
|
|
<span>Decline</span>
|
|
</Button>
|
|
<Button className="inline-flex flex-1 items-center justify-center gap-3 rounded-br-lg border border-transparent py-4 text-sm font-semibold text-foreground bg-emerald-400/30 hover:bg-emerald-300/60 cursor-pointer hover:scale-105">
|
|
<Image width={24} height={24} src="/images/approve.svg" alt="approve hold" />
|
|
<span>Approve</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
)
|
|
})
|
|
|
|
return (
|
|
<section className="py-6">
|
|
<div className="mb-4 flex justify-between items-end">
|
|
<h3 className="px-4 text-lg font-semibold">Inbound Hold Requests</h3>
|
|
{!!totalHoldNotifications && (
|
|
<span className="font-bold">{totalHoldNotifications} Unaddressed</span>
|
|
)}
|
|
</div>
|
|
{holdRequestsByRepoElements}
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default HoldRequestNotifications
|