From 09cc6dae3056794bb86267cb0be93e36588d1dc9 Mon Sep 17 00:00:00 2001
From: niklhut <49069026+niklhut@users.noreply.github.com>
Date: Tue, 19 May 2026 23:22:56 -0400
Subject: [PATCH 1/8] Refine lending navigation and loan history views

---
 app/components/AppHeader.vue                  |  26 +-
 app/components/BookCard.vue                   |  19 +
 app/components/BookLendingModal.vue           | 209 ++++++++
 app/pages/(auth)/login.vue                    |   2 +-
 app/pages/(auth)/register.vue                 |  12 +-
 app/pages/i/[token].vue                       | 203 ++++++++
 app/pages/library/[id].vue                    | 138 +++++-
 app/pages/library/borrowed.vue                |   7 +
 app/pages/library/index.vue                   |  15 +
 app/pages/library/loans.vue                   | 467 ++++++++++++++++++
 server/api/books/[id]/index.delete.ts         |   5 +-
 server/api/books/[id]/loans/index.post.ts     |  18 +
 server/api/borrowed/index.get.ts              |   7 +
 server/api/invite/[token]/accept.post.ts      |  13 +
 server/api/invite/[token]/cover.get.ts        |  31 ++
 server/api/invite/[token]/index.get.ts        |  19 +
 server/api/loans/[id]/cancel.post.ts          |  13 +
 server/api/loans/[id]/return.post.ts          |  13 +
 server/api/loans/index.get.ts                 |   7 +
 .../sqlite/0010_lending_history.sql           |  84 ++++
 .../db/migrations/sqlite/meta/_journal.json   |   7 +
 server/db/schema/domain.ts                    |  33 +-
 server/repositories/book.repository.ts        | 116 ++++-
 server/repositories/lending.repository.ts     | 404 +++++++++++++++
 server/services/book.service.ts               |  21 +-
 server/services/lending.service.ts            | 129 +++++
 server/utils/effect.ts                        |  20 +-
 shared/types/book.ts                          |  51 ++
 shared/utils/schemas.ts                       |  42 ++
 test/unit/server/api/_helpers/api-route.ts    |  33 +-
 .../api/books/[id]/index.delete.test.ts       |  14 +-
 .../api/books/[id]/loans/index.post.test.ts   |  64 +++
 .../api/invite/[token]/accept.post.test.ts    |  43 ++
 .../api/invite/[token]/index.get.test.ts      |  44 ++
 34 files changed, 2277 insertions(+), 52 deletions(-)
 create mode 100644 app/components/BookLendingModal.vue
 create mode 100644 app/pages/i/[token].vue
 create mode 100644 app/pages/library/borrowed.vue
 create mode 100644 app/pages/library/loans.vue
 create mode 100644 server/api/books/[id]/loans/index.post.ts
 create mode 100644 server/api/borrowed/index.get.ts
 create mode 100644 server/api/invite/[token]/accept.post.ts
 create mode 100644 server/api/invite/[token]/cover.get.ts
 create mode 100644 server/api/invite/[token]/index.get.ts
 create mode 100644 server/api/loans/[id]/cancel.post.ts
 create mode 100644 server/api/loans/[id]/return.post.ts
 create mode 100644 server/api/loans/index.get.ts
 create mode 100644 server/db/migrations/sqlite/0010_lending_history.sql
 create mode 100644 server/repositories/lending.repository.ts
 create mode 100644 server/services/lending.service.ts
 create mode 100644 test/unit/server/api/books/[id]/loans/index.post.test.ts
 create mode 100644 test/unit/server/api/invite/[token]/accept.post.test.ts
 create mode 100644 test/unit/server/api/invite/[token]/index.get.test.ts

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 6bae473..fa936f6 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -23,13 +23,25 @@ const logoTo = computed(() => user.value ? '/library' : '/login')
 // Navigation links - only show Sign Out when logged in
 const links = computed<NavigationMenuItem[]>(() => {
   if (user.value) {
-    return [{
-      label: 'Sign Out',
-      icon: 'i-lucide-log-out',
-      color: 'neutral' as const,
-      variant: 'ghost' as const,
-      onClick: handleSignOut
-    }]
+    return [
+      {
+        label: 'Library',
+        icon: 'i-lucide-library',
+        to: '/library'
+      },
+      {
+        label: 'Loans',
+        icon: 'i-lucide-handshake',
+        to: '/library/loans'
+      },
+      {
+        label: 'Sign Out',
+        icon: 'i-lucide-log-out',
+        color: 'neutral' as const,
+        variant: 'ghost' as const,
+        onClick: handleSignOut
+      }
+    ]
   }
   return []
 })
diff --git a/app/components/BookCard.vue b/app/components/BookCard.vue
index 64559e6..f83c78c 100644
--- a/app/components/BookCard.vue
+++ b/app/components/BookCard.vue
@@ -7,6 +7,7 @@ interface Props {
   isbn?: string | null
   coverPath?: string | null
   addedAt?: string | Date
+  activeLoan?: ActiveLoanSummary | null
   selected?: boolean
   selectable?: boolean
 }
@@ -69,6 +70,15 @@ function handleClick(e: MouseEvent) {
               class="text-4xl text-muted"
             />
           </div>
+          <UBadge
+            v-if="activeLoan"
+            color="warning"
+            variant="solid"
+            size="sm"
+            class="absolute top-2 left-2"
+          >
+            Lent out
+          </UBadge>
         </div>
       </template>
 
@@ -111,6 +121,15 @@ function handleClick(e: MouseEvent) {
             name="i-lucide-book"
             class="text-4xl text-muted"
           />
+          <UBadge
+            v-if="activeLoan"
+            color="warning"
+            variant="solid"
+            size="sm"
+            class="absolute top-2 left-2"
+          >
+            Lent out
+          </UBadge>
 
           <!-- Selection indicator -->
           <div class="absolute top-2 right-2">
diff --git a/app/components/BookLendingModal.vue b/app/components/BookLendingModal.vue
new file mode 100644
index 0000000..baeabb9
--- /dev/null
+++ b/app/components/BookLendingModal.vue
@@ -0,0 +1,209 @@
+<script setup lang="ts">
+interface Props {
+  open: boolean
+  userBookId: string
+  saving?: boolean
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:open': [open: boolean]
+  'saved': [loan: OwnerLoan]
+}>()
+
+const toast = useToast()
+
+const borrowerDisplayName = ref('')
+const borrowerEmail = ref('')
+const dueAt = ref('')
+const isSaving = ref(false)
+const inviteUrl = ref('')
+const copiedAutomatically = ref(false)
+
+const tomorrowDate = computed(() => {
+  const date = new Date()
+  date.setDate(date.getDate() + 1)
+  return date.toISOString().slice(0, 10)
+})
+
+const modalOpen = computed({
+  get: () => props.open,
+  set: value => emit('update:open', value)
+})
+
+const isSaved = computed(() => Boolean(inviteUrl.value))
+const canSave = computed(() => borrowerDisplayName.value.trim().length > 0 && !isSaving.value && !isSaved.value)
+
+watch(
+  () => props.open,
+  (open) => {
+    if (!open) return
+    borrowerDisplayName.value = ''
+    borrowerEmail.value = ''
+    dueAt.value = ''
+    inviteUrl.value = ''
+    copiedAutomatically.value = false
+  }
+)
+
+async function lendBook() {
+  if (!canSave.value) return
+
+  isSaving.value = true
+  try {
+    const result = await $fetch<{ loan: OwnerLoan, inviteUrl: string }>(`/api/books/${props.userBookId}/loans`, {
+      method: 'POST',
+      body: {
+        borrowerDisplayName: borrowerDisplayName.value,
+        borrowerEmail: borrowerEmail.value || null,
+        dueAt: dueAt.value || null
+      }
+    })
+
+    inviteUrl.value = `${window.location.origin}${result.inviteUrl}`
+    copiedAutomatically.value = await copyInvite({ showToast: false })
+    emit('saved', { ...result.loan, inviteUrl: result.inviteUrl })
+    toast.add({
+      title: 'Book marked as lent out',
+      description: copiedAutomatically.value
+        ? 'The share link was copied to your clipboard.'
+        : 'The share link is ready below.',
+      color: 'success'
+    })
+  } catch (err: unknown) {
+    const message = (err as { data?: { message?: string } })?.data?.message
+      ?? (err instanceof Error ? err.message : 'Unable to lend this book')
+    toast.add({
+      title: 'Could not lend book',
+      description: message,
+      color: 'error'
+    })
+  } finally {
+    isSaving.value = false
+  }
+}
+
+async function copyInvite(options: { showToast?: boolean } = {}) {
+  if (!inviteUrl.value) return false
+
+  try {
+    await navigator.clipboard.writeText(inviteUrl.value)
+    if (options.showToast !== false) {
+      toast.add({
+        title: 'Invite link copied',
+        color: 'success'
+      })
+    }
+    return true
+  } catch {
+    if (options.showToast !== false) {
+      toast.add({
+        title: 'Could not copy link',
+        description: 'The share link is ready below.',
+        color: 'warning'
+      })
+    }
+    return false
+  }
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="modalOpen"
+    title="Record a book loan"
+    description="Save who has this book."
+    :ui="{ content: 'sm:max-w-xl', footer: 'justify-end gap-2' }"
+  >
+    <template #body>
+      <div class="space-y-4">
+        <UAlert
+          v-if="!isSaved"
+          color="neutral"
+          variant="subtle"
+          icon="i-lucide-link"
+          title="A share link will be created"
+          description="Email is optional. After you save, Libroo copies a private link you can send however you like."
+        />
+
+        <UFormField
+          label="Borrower name"
+          required
+        >
+          <UInput
+            v-model="borrowerDisplayName"
+            placeholder="Who has the book?"
+            icon="i-lucide-user"
+            class="w-full"
+            :disabled="isSaved"
+          />
+        </UFormField>
+
+        <UFormField
+          label="Email (optional)"
+          help="Only for your private reference."
+        >
+          <UInput
+            v-model="borrowerEmail"
+            type="email"
+            placeholder="Optional"
+            icon="i-lucide-mail"
+            class="w-full"
+            :disabled="isSaved"
+          />
+        </UFormField>
+
+        <UFormField label="Due date">
+          <UInput
+            v-model="dueAt"
+            type="date"
+            icon="i-lucide-calendar"
+            :min="tomorrowDate"
+            class="w-full"
+            :disabled="isSaved"
+          />
+        </UFormField>
+
+        <UAlert
+          v-if="inviteUrl"
+          color="neutral"
+          variant="subtle"
+          icon="i-lucide-link"
+          title="Share link copied"
+          :description="copiedAutomatically ? 'Send the copied link so they can add this book to borrowed books.' : 'They can use this link to add the book to borrowed books.'"
+        >
+          <template #actions>
+            <UButton
+              color="neutral"
+              variant="outline"
+              icon="i-lucide-copy"
+              @click="copyInvite()"
+            >
+              Copy link
+            </UButton>
+          </template>
+        </UAlert>
+      </div>
+    </template>
+
+    <template #footer>
+      <UButton
+        color="neutral"
+        variant="soft"
+        @click="modalOpen = false"
+      >
+        Close
+      </UButton>
+      <UButton
+        v-if="!isSaved"
+        icon="i-lucide-handshake"
+        :loading="isSaving"
+        :disabled="!canSave"
+        @click="lendBook"
+      >
+        Save loan
+      </UButton>
+    </template>
+  </UModal>
+</template>
diff --git a/app/pages/(auth)/login.vue b/app/pages/(auth)/login.vue
index a31110b..d84865e 100644
--- a/app/pages/(auth)/login.vue
+++ b/app/pages/(auth)/login.vue
@@ -113,7 +113,7 @@ async function onSubmit(payload: FormSubmitEvent<Schema>) {
         <template #description>
           Don't have an account?
           <ULink
-            to="/register"
+            :to="{ path: '/register', query: route.query.redirect ? { redirect: route.query.redirect } : undefined }"
             class="text-primary font-medium"
           >
             Sign up
diff --git a/app/pages/(auth)/register.vue b/app/pages/(auth)/register.vue
index c857b07..83f7f1f 100644
--- a/app/pages/(auth)/register.vue
+++ b/app/pages/(auth)/register.vue
@@ -15,6 +15,14 @@ const toast = useToast()
 const isLoading = ref(false)
 const error = ref('')
 
+const redirectPath = computed(() => {
+  const redirect = route.query.redirect
+  if (typeof redirect === 'string' && /^\/(?!\/)/.test(redirect)) {
+    return redirect
+  }
+  return '/library'
+})
+
 // Redirect if already logged in (but not if we just signed out - race condition with stale state)
 const isFromSignout = computed(() => route.query.signout === 'true')
 
@@ -23,7 +31,7 @@ watch(user, (newUser) => {
   if (isFromSignout.value) return
 
   if (newUser) {
-    navigateTo('/library')
+    navigateTo(redirectPath.value)
   }
 }, { immediate: true })
 
@@ -126,7 +134,7 @@ async function onSubmit(payload: FormSubmitEvent<Schema>) {
         <template #description>
           Already have an account?
           <ULink
-            to="/login"
+            :to="{ path: '/login', query: route.query.redirect ? { redirect: route.query.redirect } : undefined }"
             class="text-primary font-medium"
           >
             Sign in
diff --git a/app/pages/i/[token].vue b/app/pages/i/[token].vue
new file mode 100644
index 0000000..4494d43
--- /dev/null
+++ b/app/pages/i/[token].vue
@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import type { BorrowedBook, InvitePreview } from '~~/shared/types/book'
+
+definePageMeta({
+  auth: false
+})
+
+const route = useRoute()
+const toast = useToast()
+const authStore = useAuthStore()
+const { user } = storeToRefs(authStore)
+
+const token = route.params.token as string
+const isAccepting = ref(false)
+
+const { data: invite, status } = await useFetch<InvitePreview | null>(`/api/invite/${token}`, {
+  default: () => null
+})
+
+const coverUrl = computed(() => invite.value?.coverPath ? `/api/invite/${token}/cover` : null)
+const redirectPath = computed(() => `/i/${token}`)
+const isSignedIn = computed(() => Boolean(user.value))
+
+function formatDate(value: Date | string | null): string | null {
+  if (!value) return null
+  const date = value instanceof Date ? value : new Date(value)
+  if (Number.isNaN(date.getTime())) return null
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  })
+}
+
+async function acceptBook() {
+  if (!isSignedIn.value || !invite.value?.canAccept || isAccepting.value) return
+
+  isAccepting.value = true
+  try {
+    await $fetch<BorrowedBook>(`/api/invite/${token}/accept`, {
+      method: 'POST',
+      credentials: 'same-origin'
+    })
+    toast.add({
+      title: 'Added to borrowed books',
+      color: 'success'
+    })
+    isAccepting.value = false
+    await navigateTo({ path: '/library/loans', query: { view: 'borrowed' } })
+  } catch (err: unknown) {
+    const message = (err as { data?: { message?: string } })?.data?.message
+      ?? (err instanceof Error ? err.message : 'This invitation is no longer available')
+    toast.add({
+      title: 'Could not add book',
+      description: message,
+      color: 'error'
+    })
+  } finally {
+    isAccepting.value = false
+  }
+}
+</script>
+
+<template>
+  <UContainer class="py-10 max-w-3xl">
+    <div
+      v-if="status === 'pending'"
+      class="flex justify-center py-12"
+    >
+      <UIcon
+        name="i-lucide-loader-2"
+        class="animate-spin text-4xl text-muted"
+      />
+    </div>
+
+    <UCard
+      v-else-if="!invite"
+      class="text-center py-12"
+    >
+      <UIcon
+        name="i-lucide-link-2-off"
+        class="text-6xl text-muted mx-auto mb-4"
+      />
+      <h1 class="text-2xl font-bold mb-2">
+        Invitation unavailable
+      </h1>
+      <p class="text-muted">
+        This invite may have already been used or canceled.
+      </p>
+    </UCard>
+
+    <div
+      v-else
+      class="grid gap-8 md:grid-cols-[220px_1fr] md:items-start"
+    >
+      <div class="mx-auto w-44 md:w-full">
+        <div class="rounded-lg overflow-hidden shadow-lg">
+          <NuxtImg
+            v-if="coverUrl"
+            :src="coverUrl"
+            :alt="invite.title"
+            class="w-full object-cover"
+          />
+          <div
+            v-else
+            class="aspect-[2/3] bg-muted flex items-center justify-center"
+          >
+            <UIcon
+              name="i-lucide-book"
+              class="text-6xl text-muted"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="space-y-5 text-center md:text-left">
+        <UBadge
+          color="primary"
+          variant="subtle"
+          size="lg"
+        >
+          This book was lent to you
+        </UBadge>
+        <div>
+          <h1 class="text-3xl font-bold tracking-tight">
+            {{ invite.title }}
+          </h1>
+          <p class="mt-2 text-lg text-muted">
+            {{ invite.author }}
+          </p>
+          <p class="mt-4 text-muted">
+            {{ invite.ownerName }} shared this book with you.
+          </p>
+          <p
+            v-if="invite.dueAt"
+            class="mt-2 text-sm text-muted"
+          >
+            Due {{ formatDate(invite.dueAt) }}
+          </p>
+        </div>
+
+        <UAlert
+          v-if="invite.isOwnInvite"
+          color="neutral"
+          variant="subtle"
+          icon="i-lucide-info"
+          title="This is your invite"
+          description="You created this lending invite, so it cannot be added to your borrowed books."
+        />
+
+        <UAlert
+          v-else-if="!invite.canAccept"
+          color="warning"
+          variant="subtle"
+          icon="i-lucide-circle-alert"
+          title="This invite is no longer available"
+          description="It may have already been accepted, returned, or canceled."
+        />
+
+        <div class="flex flex-col sm:flex-row gap-3 justify-center md:justify-start">
+          <template v-if="invite.canAccept && isSignedIn">
+            <UButton
+              size="lg"
+              icon="i-lucide-book-plus"
+              :loading="isAccepting"
+              :disabled="isAccepting"
+              @click="acceptBook"
+            >
+              Add to borrowed books
+            </UButton>
+          </template>
+          <template v-else-if="invite.canAccept">
+            <UButton
+              size="lg"
+              icon="i-lucide-log-in"
+              :to="{ path: '/login', query: { redirect: redirectPath } }"
+            >
+              Sign in
+            </UButton>
+            <UButton
+              size="lg"
+              color="neutral"
+              variant="outline"
+              icon="i-lucide-user-plus"
+              :to="{ path: '/register', query: { redirect: redirectPath } }"
+            >
+              Create account
+            </UButton>
+          </template>
+          <UButton
+            v-else
+            color="neutral"
+            variant="outline"
+            icon="i-lucide-library"
+            to="/library"
+          >
+            Go to library
+          </UButton>
+        </div>
+      </div>
+    </div>
+  </UContainer>
+</template>
diff --git a/app/pages/library/[id].vue b/app/pages/library/[id].vue
index 021eb5a..aaff2ff 100644
--- a/app/pages/library/[id].vue
+++ b/app/pages/library/[id].vue
@@ -8,7 +8,10 @@ const userBookId = route.params.id as string
 const isDeleting = ref(false)
 const isTagModalOpen = ref(false)
 const isReadingModalOpen = ref(false)
+const isLendingModalOpen = ref(false)
+const isLoanRemovalDialogOpen = ref(false)
 const isSavingReadingProgress = ref(false)
+const isReturningLoan = ref(false)
 
 // Fetch book details
 const { data: book, status, refresh } = await useFetch<BookDetails>(`/api/books/${userBookId}`, {
@@ -53,12 +56,13 @@ const formattedAddedAt = computed(() => formatDate(book.value?.addedAt ?? null))
 const formattedPublishDate = computed(() => formatDate(book.value?.publishDate ?? null))
 
 // Remove book
-async function removeBook() {
+async function removeBook(confirmActiveLoan = false) {
   isDeleting.value = true
 
   try {
     await $fetch(`/api/books/${userBookId}`, {
-      method: 'DELETE'
+      method: 'DELETE',
+      query: confirmActiveLoan ? { confirmActiveLoan: 'true' } : undefined
     })
 
     removeBooks([userBookId])
@@ -74,6 +78,14 @@ async function removeBook() {
   } catch (err: unknown) {
     const message = (err as { data?: { message?: string } })?.data?.message
       ?? (err instanceof Error ? err.message : 'An error occurred')
+    const statusCode = (err as { statusCode?: number, data?: { statusCode?: number } })?.statusCode
+      ?? (err as { data?: { statusCode?: number } })?.data?.statusCode
+
+    if (statusCode === 409 && book.value?.activeLoan && !confirmActiveLoan) {
+      isLoanRemovalDialogOpen.value = true
+      return
+    }
+
     toast.add({
       title: 'Failed to remove book',
       description: message,
@@ -84,6 +96,38 @@ async function removeBook() {
   }
 }
 
+async function onLoanSaved() {
+  await refresh()
+  markNeedsSync(getLoadedPages())
+}
+
+async function returnActiveLoan() {
+  if (!book.value?.activeLoan || isReturningLoan.value) return
+
+  isReturningLoan.value = true
+  try {
+    await $fetch(`/api/loans/${book.value.activeLoan.id}/return`, {
+      method: 'POST'
+    })
+    await refresh()
+    markNeedsSync(getLoadedPages())
+    toast.add({
+      title: 'Book marked as returned',
+      color: 'success'
+    })
+  } catch (err: unknown) {
+    const message = (err as { data?: { message?: string } })?.data?.message
+      ?? (err instanceof Error ? err.message : 'Unable to mark returned')
+    toast.add({
+      title: 'Could not update lending status',
+      description: message,
+      color: 'error'
+    })
+  } finally {
+    isReturningLoan.value = false
+  }
+}
+
 function openTagModal() {
   isTagModalOpen.value = true
 }
@@ -395,6 +439,51 @@ async function saveReadingProgress(progress: {
             @edit="isReadingModalOpen = true"
           />
 
+          <div
+            v-if="book.activeLoan"
+            class="space-y-2"
+          >
+            <div class="flex items-center justify-between gap-3">
+              <div class="min-w-0">
+                <div class="flex flex-wrap items-center gap-2">
+                  <h2 class="text-lg font-semibold">
+                    Loan
+                  </h2>
+                  <UBadge
+                    color="warning"
+                    variant="subtle"
+                  >
+                    Lent out
+                  </UBadge>
+                </div>
+                <p class="text-sm text-muted">
+                  {{ book.activeLoan.acceptedByName || book.activeLoan.borrowerDisplayName }} has this book
+                  <template v-if="book.activeLoan.acceptedByName && book.activeLoan.acceptedByName !== book.activeLoan.borrowerDisplayName">
+                    · entered as {{ book.activeLoan.borrowerDisplayName }}
+                  </template>
+                  · Lent {{ formatDate(book.activeLoan.loanedAt) }}
+                </p>
+                <p
+                  v-if="book.activeLoan.dueAt"
+                  class="text-sm text-muted"
+                >
+                  Due {{ formatDate(book.activeLoan.dueAt) }}
+                </p>
+              </div>
+              <UButton
+                color="neutral"
+                variant="outline"
+                size="sm"
+                icon="i-lucide-undo-2"
+                :loading="isReturningLoan"
+                :disabled="isReturningLoan"
+                @click="returnActiveLoan"
+              >
+                Mark returned
+              </UButton>
+            </div>
+          </div>
+
           <!-- Your Note -->
           <BookNote
             :note="book.note"
@@ -445,6 +534,15 @@ async function saveReadingProgress(progress: {
           <!-- Actions -->
           <USeparator />
           <div class="flex flex-wrap gap-3">
+            <UButton
+              v-if="!book.activeLoan"
+              color="neutral"
+              variant="outline"
+              icon="i-lucide-handshake"
+              @click="isLendingModalOpen = true"
+            >
+              Record loan
+            </UButton>
             <UButton
               v-if="book.openLibraryKey"
               color="neutral"
@@ -467,9 +565,9 @@ async function saveReadingProgress(progress: {
             </UButton>
             <DeleteConfirmDialog
               title="Remove this book from your library?"
-              description="This will permanently delete the book from your library. You can add it again later if needed."
+              description="This will remove the book from your library. Lending history is kept when it exists."
               confirm-label="Remove from Library"
-              @confirm="removeBook"
+              @confirm="removeBook(false)"
             >
               <template #trigger="{ open }">
                 <UButton
@@ -505,6 +603,38 @@ async function saveReadingProgress(progress: {
         :saving="isSavingReadingProgress"
         @save:progress="saveReadingProgress"
       />
+
+      <BookLendingModal
+        v-if="book"
+        v-model:open="isLendingModalOpen"
+        :user-book-id="userBookId"
+        @saved="onLoanSaved"
+      />
+
+      <UModal
+        v-model:open="isLoanRemovalDialogOpen"
+        title="Remove a lent-out book?"
+        description="This book will leave your library, but the active lending record and borrower history will remain."
+        :ui="{ footer: 'justify-end gap-3' }"
+      >
+        <template #footer>
+          <UButton
+            color="neutral"
+            variant="soft"
+            @click="isLoanRemovalDialogOpen = false"
+          >
+            Cancel
+          </UButton>
+          <UButton
+            color="error"
+            icon="i-lucide-trash-2"
+            :loading="isDeleting"
+            @click="removeBook(true)"
+          >
+            Remove from Library
+          </UButton>
+        </template>
+      </UModal>
     </UPageBody>
   </UContainer>
 </template>
diff --git a/app/pages/library/borrowed.vue b/app/pages/library/borrowed.vue
new file mode 100644
index 0000000..593da6b
--- /dev/null
+++ b/app/pages/library/borrowed.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+await navigateTo('/library/loans', { replace: true })
+</script>
+
+<template>
+  <div />
+</template>
diff --git a/app/pages/library/index.vue b/app/pages/library/index.vue
index 170a718..6e3eec2 100644
--- a/app/pages/library/index.vue
+++ b/app/pages/library/index.vue
@@ -281,6 +281,20 @@ async function deleteSelected() {
 
     <!-- Page Body -->
     <UPageBody>
+      <div
+        v-if="allBooks.length > 0"
+        class="mb-6 flex justify-end"
+      >
+        <UButton
+          to="/library/loans"
+          color="neutral"
+          variant="outline"
+          icon="i-lucide-handshake"
+        >
+          Loans
+        </UButton>
+      </div>
+
       <!-- Selection toolbar -->
       <div
         v-if="isSelectMode && hasBooks"
@@ -367,6 +381,7 @@ async function deleteSelected() {
             :isbn="book.isbn"
             :cover-path="book.coverPath"
             :added-at="book.addedAt"
+            :active-loan="book.activeLoan"
             :selectable="isSelectMode"
             :selected="selectedBooks.has(book.id)"
             @select="toggleBookSelection"
diff --git a/app/pages/library/loans.vue b/app/pages/library/loans.vue
new file mode 100644
index 0000000..048caf4
--- /dev/null
+++ b/app/pages/library/loans.vue
@@ -0,0 +1,467 @@
+<script setup lang="ts">
+import type { BorrowedBook, OwnerLoan } from '~~/shared/types/book'
+
+type LoansView = 'loaned' | 'borrowed'
+
+const toast = useToast()
+const route = useRoute()
+const router = useRouter()
+const initialView = route.query.view === 'borrowed' ? 'borrowed' : 'loaned'
+const view = ref<LoansView>(initialView)
+const returningLoanId = ref<string | null>(null)
+
+watch(
+  () => route.query.view,
+  (queryView) => {
+    const nextView = queryView === 'borrowed' ? 'borrowed' : 'loaned'
+    if (view.value !== nextView) {
+      view.value = nextView
+    }
+  }
+)
+
+async function setView(nextView: LoansView) {
+  if (view.value === nextView) return
+  view.value = nextView
+  await router.replace({
+    query: {
+      ...route.query,
+      view: nextView
+    }
+  })
+}
+
+const { data: ownerLoans, status: ownerStatus, refresh: refreshOwnerLoans } = await useFetch<OwnerLoan[]>('/api/loans', {
+  headers: useRequestHeaders(['cookie']),
+  default: () => []
+})
+
+const { data: borrowedBooks, status: borrowedStatus } = await useFetch<BorrowedBook[]>('/api/borrowed', {
+  headers: useRequestHeaders(['cookie']),
+  default: () => []
+})
+
+const activeOwnerLoans = computed(() => ownerLoans.value.filter(loan => loan.status === 'active'))
+const ownerLoanHistory = computed(() => ownerLoans.value.filter(loan => loan.status !== 'active'))
+const activeBorrowedBooks = computed(() => borrowedBooks.value.filter(book => book.status === 'active'))
+const borrowedHistory = computed(() => borrowedBooks.value.filter(book => book.status !== 'active'))
+const isPending = computed(() => view.value === 'loaned' ? ownerStatus.value === 'pending' : borrowedStatus.value === 'pending')
+
+function loanCoverPath(item: OwnerLoan | BorrowedBook): string | null {
+  return 'book' in item ? item.book.coverPath : item.coverPath
+}
+
+function loanTitle(item: OwnerLoan | BorrowedBook): string {
+  return 'book' in item ? item.book.title : item.title
+}
+
+function loanAuthor(item: OwnerLoan | BorrowedBook): string {
+  return 'book' in item ? item.book.author : item.author
+}
+
+function coverUrl(item: OwnerLoan | BorrowedBook) {
+  const coverPath = loanCoverPath(item)
+  return coverPath ? `/api/blob/${coverPath}` : null
+}
+
+function formatDate(value: Date | string | null): string | null {
+  if (!value) return null
+  const date = value instanceof Date ? value : new Date(value)
+  if (Number.isNaN(date.getTime())) return null
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  })
+}
+
+function borrowerLabel(loan: OwnerLoan) {
+  if (!loan.acceptedByName || loan.acceptedByName === loan.borrowerDisplayName) {
+    return loan.borrowerDisplayName
+  }
+  return `${loan.acceptedByName} · entered as ${loan.borrowerDisplayName}`
+}
+
+async function returnLoan(loan: OwnerLoan) {
+  if (returningLoanId.value) return
+
+  returningLoanId.value = loan.id
+  try {
+    await $fetch(`/api/loans/${loan.id}/return`, {
+      method: 'POST'
+    })
+    await refreshOwnerLoans()
+    toast.add({
+      title: 'Book marked as returned',
+      color: 'success'
+    })
+  } catch (err: unknown) {
+    const message = (err as { data?: { message?: string } })?.data?.message
+      ?? (err instanceof Error ? err.message : 'Unable to mark returned')
+    toast.add({
+      title: 'Could not update loan',
+      description: message,
+      color: 'error'
+    })
+  } finally {
+    returningLoanId.value = null
+  }
+}
+</script>
+
+<template>
+  <UContainer>
+    <UPageHeader
+      title="Loans"
+      description="Track books you loaned out and books lent to you."
+    >
+      <template #links>
+        <UButton
+          color="neutral"
+          variant="outline"
+          icon="i-lucide-library"
+          to="/library"
+        >
+          My Library
+        </UButton>
+      </template>
+    </UPageHeader>
+
+    <UPageBody>
+      <div class="mb-6">
+        <UFieldGroup>
+          <UButton
+            :color="view === 'loaned' ? 'primary' : 'neutral'"
+            :variant="view === 'loaned' ? 'solid' : 'outline'"
+            icon="i-lucide-handshake"
+            @click="setView('loaned')"
+          >
+            Loaned out
+          </UButton>
+          <UButton
+            :color="view === 'borrowed' ? 'primary' : 'neutral'"
+            :variant="view === 'borrowed' ? 'solid' : 'outline'"
+            icon="i-lucide-book-user"
+            @click="setView('borrowed')"
+          >
+            Lent to you
+          </UButton>
+        </UFieldGroup>
+      </div>
+
+      <div
+        v-if="isPending"
+        class="flex justify-center py-12"
+      >
+        <UIcon
+          name="i-lucide-loader-2"
+          class="animate-spin text-4xl text-muted"
+        />
+      </div>
+
+      <template v-else-if="view === 'loaned'">
+        <UCard
+          v-if="ownerLoans.length === 0"
+          class="text-center py-12"
+        >
+          <UIcon
+            name="i-lucide-handshake"
+            class="text-6xl text-muted mx-auto mb-4"
+          />
+          <h2 class="text-xl font-semibold mb-2">
+            No loans yet
+          </h2>
+          <p class="text-muted">
+            Books you record as loaned out will appear here.
+          </p>
+        </UCard>
+
+        <div
+          v-else
+          class="space-y-8"
+        >
+          <section>
+            <h2 class="text-lg font-semibold mb-3">
+              Current
+            </h2>
+            <div
+              v-if="activeOwnerLoans.length > 0"
+              class="grid gap-4 md:grid-cols-2"
+            >
+              <UCard
+                v-for="loan in activeOwnerLoans"
+                :key="loan.id"
+                variant="subtle"
+              >
+                <div class="flex gap-4">
+                  <NuxtImg
+                    v-if="coverUrl(loan)"
+                    :src="coverUrl(loan)!"
+                    :alt="loanTitle(loan)"
+                    class="h-28 w-19 object-cover rounded"
+                  />
+                  <div
+                    v-else
+                    class="h-28 w-19 rounded bg-muted flex items-center justify-center"
+                  >
+                    <UIcon
+                      name="i-lucide-book"
+                      class="text-3xl text-muted"
+                    />
+                  </div>
+                  <div class="min-w-0 flex-1">
+                    <UBadge
+                      color="warning"
+                      variant="subtle"
+                      class="mb-2"
+                    >
+                      Lent out
+                    </UBadge>
+                    <h3 class="font-semibold line-clamp-2">
+                      {{ loanTitle(loan) }}
+                    </h3>
+                    <p class="text-sm text-muted line-clamp-1">
+                      {{ loanAuthor(loan) }}
+                    </p>
+                    <p class="mt-2 text-sm text-muted">
+                      {{ borrowerLabel(loan) }} · Lent {{ formatDate(loan.loanedAt) }}
+                    </p>
+                    <p
+                      v-if="loan.dueAt"
+                      class="text-sm text-muted"
+                    >
+                      Due {{ formatDate(loan.dueAt) }}
+                    </p>
+                    <UButton
+                      class="mt-3"
+                      color="neutral"
+                      variant="outline"
+                      size="sm"
+                      icon="i-lucide-undo-2"
+                      :loading="returningLoanId === loan.id"
+                      :disabled="Boolean(returningLoanId)"
+                      @click="returnLoan(loan)"
+                    >
+                      Mark returned
+                    </UButton>
+                  </div>
+                </div>
+              </UCard>
+            </div>
+            <p
+              v-else
+              class="text-sm text-muted"
+            >
+              No books are currently loaned out.
+            </p>
+          </section>
+
+          <section>
+            <h2 class="text-lg font-semibold mb-3">
+              History
+            </h2>
+            <div
+              v-if="ownerLoanHistory.length > 0"
+              class="space-y-3"
+            >
+              <UCard
+                v-for="loan in ownerLoanHistory"
+                :key="loan.id"
+                variant="subtle"
+              >
+                <div class="flex items-center justify-between gap-4">
+                  <div class="flex min-w-0 items-center gap-3">
+                    <NuxtImg
+                      v-if="coverUrl(loan)"
+                      :src="coverUrl(loan)!"
+                      :alt="loanTitle(loan)"
+                      class="h-18 w-12 shrink-0 rounded object-cover"
+                    />
+                    <div
+                      v-else
+                      class="h-18 w-12 shrink-0 rounded bg-muted flex items-center justify-center"
+                    >
+                      <UIcon
+                        name="i-lucide-book"
+                        class="text-xl text-muted"
+                      />
+                    </div>
+                    <div class="min-w-0">
+                      <h3 class="font-semibold truncate">
+                        {{ loanTitle(loan) }}
+                      </h3>
+                      <p class="text-sm text-muted truncate">
+                        {{ loanAuthor(loan) }} · {{ borrowerLabel(loan) }}
+                      </p>
+                      <p class="text-sm text-muted">
+                        {{ loan.status === 'returned' ? `Returned ${formatDate(loan.returnedAt)}` : 'Canceled' }}
+                      </p>
+                    </div>
+                  </div>
+                  <UBadge
+                    :color="loan.status === 'returned' ? 'neutral' : 'warning'"
+                    variant="subtle"
+                  >
+                    {{ loan.status === 'returned' ? 'Returned' : 'Canceled' }}
+                  </UBadge>
+                </div>
+              </UCard>
+            </div>
+            <p
+              v-else
+              class="text-sm text-muted"
+            >
+              Returned books will stay here.
+            </p>
+          </section>
+        </div>
+      </template>
+
+      <template v-else>
+        <UCard
+          v-if="borrowedBooks.length === 0"
+          class="text-center py-12"
+        >
+          <UIcon
+            name="i-lucide-book-user"
+            class="text-6xl text-muted mx-auto mb-4"
+          />
+          <h2 class="text-xl font-semibold mb-2">
+            No borrowed books yet
+          </h2>
+          <p class="text-muted">
+            Accepted books will appear here.
+          </p>
+        </UCard>
+
+        <div
+          v-else
+          class="space-y-8"
+        >
+          <section>
+            <h2 class="text-lg font-semibold mb-3">
+              Current
+            </h2>
+            <div
+              v-if="activeBorrowedBooks.length > 0"
+              class="grid gap-4 md:grid-cols-2"
+            >
+              <UCard
+                v-for="book in activeBorrowedBooks"
+                :key="book.id"
+                variant="subtle"
+              >
+                <div class="flex gap-4">
+                  <NuxtImg
+                    v-if="coverUrl(book)"
+                    :src="coverUrl(book)!"
+                    :alt="loanTitle(book)"
+                    class="h-28 w-19 object-cover rounded"
+                  />
+                  <div
+                    v-else
+                    class="h-28 w-19 rounded bg-muted flex items-center justify-center"
+                  >
+                    <UIcon
+                      name="i-lucide-book"
+                      class="text-3xl text-muted"
+                    />
+                  </div>
+                  <div class="min-w-0 flex-1">
+                    <UBadge
+                      color="success"
+                      variant="subtle"
+                      class="mb-2"
+                    >
+                      With you
+                    </UBadge>
+                    <h3 class="font-semibold line-clamp-2">
+                      {{ loanTitle(book) }}
+                    </h3>
+                    <p class="text-sm text-muted line-clamp-1">
+                      {{ loanAuthor(book) }}
+                    </p>
+                    <p class="mt-2 text-sm text-muted">
+                      Lent by {{ book.ownerName }} · {{ formatDate(book.loanedAt) }}
+                    </p>
+                    <p
+                      v-if="book.dueAt"
+                      class="text-sm text-muted"
+                    >
+                      Due {{ formatDate(book.dueAt) }}
+                    </p>
+                  </div>
+                </div>
+              </UCard>
+            </div>
+            <p
+              v-else
+              class="text-sm text-muted"
+            >
+              Nothing currently with you.
+            </p>
+          </section>
+
+          <section>
+            <h2 class="text-lg font-semibold mb-3">
+              History
+            </h2>
+            <div
+              v-if="borrowedHistory.length > 0"
+              class="space-y-3"
+            >
+              <UCard
+                v-for="book in borrowedHistory"
+                :key="book.id"
+                variant="subtle"
+              >
+                <div class="flex items-center justify-between gap-4">
+                  <div class="flex min-w-0 items-center gap-3">
+                    <NuxtImg
+                      v-if="coverUrl(book)"
+                      :src="coverUrl(book)!"
+                      :alt="loanTitle(book)"
+                      class="h-18 w-12 shrink-0 rounded object-cover"
+                    />
+                    <div
+                      v-else
+                      class="h-18 w-12 shrink-0 rounded bg-muted flex items-center justify-center"
+                    >
+                      <UIcon
+                        name="i-lucide-book"
+                        class="text-xl text-muted"
+                      />
+                    </div>
+                    <div class="min-w-0">
+                      <h3 class="font-semibold truncate">
+                        {{ loanTitle(book) }}
+                      </h3>
+                      <p class="text-sm text-muted truncate">
+                        {{ loanAuthor(book) }} · Lent by {{ book.ownerName }}
+                      </p>
+                      <p class="text-sm text-muted">
+                        {{ book.status === 'returned' ? `Returned ${formatDate(book.returnedAt)}` : 'No longer active' }}
+                      </p>
+                    </div>
+                  </div>
+                  <UBadge
+                    :color="book.status === 'returned' ? 'neutral' : 'warning'"
+                    variant="subtle"
+                  >
+                    {{ book.status === 'returned' ? 'Returned' : 'Closed' }}
+                  </UBadge>
+                </div>
+              </UCard>
+            </div>
+            <p
+              v-else
+              class="text-sm text-muted"
+            >
+              Returned books will stay here.
+            </p>
+          </section>
+        </div>
+      </template>
+    </UPageBody>
+  </UContainer>
+</template>
diff --git a/server/api/books/[id]/index.delete.ts b/server/api/books/[id]/index.delete.ts
index 7162a6b..5fedca5 100644
--- a/server/api/books/[id]/index.delete.ts
+++ b/server/api/books/[id]/index.delete.ts
@@ -14,8 +14,11 @@ export default effectHandler((event, user) =>
       )
     }
 
+    const query = getQuery(event)
+    const confirmActiveLoan = query.confirmActiveLoan === 'true'
+
     // Remove book from user's library via BookService
-    yield* removeBookFromLibrary(userBookId, user.id)
+    yield* removeBookFromLibrary(userBookId, user.id, { confirmActiveLoan })
 
     return { success: true }
   })
diff --git a/server/api/books/[id]/loans/index.post.ts b/server/api/books/[id]/loans/index.post.ts
new file mode 100644
index 0000000..bf91604
--- /dev/null
+++ b/server/api/books/[id]/loans/index.post.ts
@@ -0,0 +1,18 @@
+import { Effect } from 'effect'
+
+export default effectHandler((event, user) =>
+  Effect.gen(function* () {
+    const userBookId = getRouterParam(event, 'id')
+
+    if (!userBookId) {
+      return yield* Effect.fail(createError({ statusCode: 400, message: 'Book ID is required' }))
+    }
+
+    const body = yield* Effect.tryPromise({
+      try: () => readValidatedBody(event, createLoanSchema.parse),
+      catch: e => createError({ statusCode: 400, message: 'Validation Error', data: e })
+    })
+
+    return yield* createLoanForBook(userBookId, user.id, body)
+  })
+)
diff --git a/server/api/borrowed/index.get.ts b/server/api/borrowed/index.get.ts
new file mode 100644
index 0000000..a27e452
--- /dev/null
+++ b/server/api/borrowed/index.get.ts
@@ -0,0 +1,7 @@
+import { Effect } from 'effect'
+
+export default effectHandler((event, user) =>
+  Effect.gen(function* () {
+    return yield* listBooksLentToUser(user.id)
+  })
+)
diff --git a/server/api/invite/[token]/accept.post.ts b/server/api/invite/[token]/accept.post.ts
new file mode 100644
index 0000000..c763600
--- /dev/null
+++ b/server/api/invite/[token]/accept.post.ts
@@ -0,0 +1,13 @@
+import { Effect } from 'effect'
+
+export default effectHandler((event, user) =>
+  Effect.gen(function* () {
+    const token = getRouterParam(event, 'token')
+
+    if (!token) {
+      return yield* Effect.fail(createError({ statusCode: 400, message: 'Invitation token is required' }))
+    }
+
+    return yield* acceptBookInvite(token, user.id)
+  })
+)
diff --git a/server/api/invite/[token]/cover.get.ts b/server/api/invite/[token]/cover.get.ts
new file mode 100644
index 0000000..fbbb244
--- /dev/null
+++ b/server/api/invite/[token]/cover.get.ts
@@ -0,0 +1,31 @@
+import { Effect } from 'effect'
+import { runEffect } from '../../../utils/effect'
+
+export default defineEventHandler(async (event) => {
+  const token = getRouterParam(event, 'token')
+
+  if (!token) {
+    throw createError({ statusCode: 400, message: 'Invitation token is required' })
+  }
+
+  return runEffect(
+    Effect.gen(function* () {
+      const preview = yield* getInvitePreview(token)
+
+      if (!preview.coverPath) {
+        return yield* Effect.fail(createError({ statusCode: 404, message: 'Cover not found' }))
+      }
+
+      const blobData = yield* getBlob(preview.coverPath)
+
+      if (!blobData) {
+        return yield* Effect.fail(createError({ statusCode: 404, message: 'Cover not found' }))
+      }
+
+      setHeader(event, 'Content-Type', blobData.type || 'application/octet-stream')
+      setHeader(event, 'Cache-Control', 'private, max-age=3600')
+
+      return blobData
+    })
+  )
+})
diff --git a/server/api/invite/[token]/index.get.ts b/server/api/invite/[token]/index.get.ts
new file mode 100644
index 0000000..517b030
--- /dev/null
+++ b/server/api/invite/[token]/index.get.ts
@@ -0,0 +1,19 @@
+import { Effect } from 'effect'
+import { runEffect } from '../../../utils/effect'
+import { auth } from '../../../utils/auth'
+
+export default defineEventHandler(async (event) => {
+  const token = getRouterParam(event, 'token')
+
+  if (!token) {
+    throw createError({ statusCode: 400, message: 'Invitation token is required' })
+  }
+
+  const session = await Promise.resolve(auth.api.getSession({ headers: event.headers })).catch(() => null)
+
+  return runEffect(
+    Effect.gen(function* () {
+      return yield* getInvitePreview(token, session?.user.id ?? null)
+    })
+  )
+})
diff --git a/server/api/loans/[id]/cancel.post.ts b/server/api/loans/[id]/cancel.post.ts
new file mode 100644
index 0000000..31f7c8e
--- /dev/null
+++ b/server/api/loans/[id]/cancel.post.ts
@@ -0,0 +1,13 @@
+import { Effect } from 'effect'
+
+export default effectHandler((event, user) =>
+  Effect.gen(function* () {
+    const loanId = getRouterParam(event, 'id')
+
+    if (!loanId) {
+      return yield* Effect.fail(createError({ statusCode: 400, message: 'Loan ID is required' }))
+    }
+
+    return yield* cancelLoanForOwner(loanId, user.id)
+  })
+)
diff --git a/server/api/loans/[id]/return.post.ts b/server/api/loans/[id]/return.post.ts
new file mode 100644
index 0000000..9807115
--- /dev/null
+++ b/server/api/loans/[id]/return.post.ts
@@ -0,0 +1,13 @@
+import { Effect } from 'effect'
+
+export default effectHandler((event, user) =>
+  Effect.gen(function* () {
+    const loanId = getRouterParam(event, 'id')
+
+    if (!loanId) {
+      return yield* Effect.fail(createError({ statusCode: 400, message: 'Loan ID is required' }))
+    }
+
+    return yield* returnLoanForOwner(loanId, user.id)
+  })
+)
diff --git a/server/api/loans/index.get.ts b/server/api/loans/index.get.ts
new file mode 100644
index 0000000..2a90155
--- /dev/null
+++ b/server/api/loans/index.get.ts
@@ -0,0 +1,7 @@
+import { Effect } from 'effect'
+
+export default effectHandler((event, user) =>
+  Effect.gen(function* () {
+    return yield* listLoansForOwner(user.id)
+  })
+)
diff --git a/server/db/migrations/sqlite/0010_lending_history.sql b/server/db/migrations/sqlite/0010_lending_history.sql
new file mode 100644
index 0000000..7281afd
--- /dev/null
+++ b/server/db/migrations/sqlite/0010_lending_history.sql
@@ -0,0 +1,84 @@
+ALTER TABLE `user_books` ADD `removed_at` integer;
+--> statement-breakpoint
+PRAGMA foreign_keys=OFF;
+--> statement-breakpoint
+CREATE TABLE `__new_loans` (
+  `id` text PRIMARY KEY NOT NULL,
+  `owner_user_id` text NOT NULL,
+  `user_book_id` text NOT NULL,
+  `borrower_user_id` text,
+  `borrower_display_name` text NOT NULL,
+  `borrower_email` text,
+  `status` text DEFAULT 'active' NOT NULL,
+  `loaned_at` integer NOT NULL,
+  `due_at` integer,
+  `returned_at` integer,
+  `canceled_at` integer,
+  `owner_note` text,
+  `snapshot_book_title` text NOT NULL,
+  `snapshot_book_author` text NOT NULL,
+  `snapshot_cover_path` text,
+  `snapshot_owner_name` text NOT NULL,
+  `accept_token_hash` text,
+  `accepted_at` integer,
+  `created_at` integer NOT NULL,
+  `updated_at` integer NOT NULL,
+  FOREIGN KEY (`owner_user_id`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade,
+  FOREIGN KEY (`user_book_id`) REFERENCES `user_books`(`id`) ON UPDATE no action ON DELETE cascade,
+  FOREIGN KEY (`borrower_user_id`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE set null,
+  CONSTRAINT `loans_status_check` CHECK(`status` IN ('active', 'returned', 'canceled'))
+);
+--> statement-breakpoint
+INSERT INTO `__new_loans` (
+  `id`,
+  `owner_user_id`,
+  `user_book_id`,
+  `borrower_display_name`,
+  `status`,
+  `loaned_at`,
+  `returned_at`,
+  `snapshot_book_title`,
+  `snapshot_book_author`,
+  `snapshot_cover_path`,
+  `snapshot_owner_name`,
+  `created_at`,
+  `updated_at`
+)
+SELECT
+  `loans`.`id`,
+  `user_books`.`user_id`,
+  `loans`.`user_book_id`,
+  `loans`.`borrower_name`,
+  CASE WHEN `loans`.`date_returned` IS NULL THEN 'active' ELSE 'returned' END,
+  `loans`.`date_loaned`,
+  `loans`.`date_returned`,
+  `books`.`title`,
+  COALESCE((
+    SELECT group_concat(`authors`.`name`, ', ')
+    FROM `book_authors`
+    INNER JOIN `authors` ON `book_authors`.`author_id` = `authors`.`id`
+    WHERE `book_authors`.`book_id` = `books`.`id`
+    ORDER BY `book_authors`.`sort_order`, `authors`.`name`
+  ), 'Unknown Author'),
+  `books`.`cover_path`,
+  `user`.`name`,
+  `loans`.`created_at`,
+  `loans`.`created_at`
+FROM `loans`
+INNER JOIN `user_books` ON `loans`.`user_book_id` = `user_books`.`id`
+INNER JOIN `books` ON `user_books`.`book_id` = `books`.`id`
+INNER JOIN `user` ON `user_books`.`user_id` = `user`.`id`;
+--> statement-breakpoint
+DROP TABLE `loans`;
+--> statement-breakpoint
+ALTER TABLE `__new_loans` RENAME TO `loans`;
+--> statement-breakpoint
+PRAGMA foreign_keys=ON;
+--> statement-breakpoint
+CREATE INDEX `loans_owner_user_id_idx` ON `loans` (`owner_user_id`);
+--> statement-breakpoint
+CREATE INDEX `loans_user_book_id_idx` ON `loans` (`user_book_id`);
+--> statement-breakpoint
+CREATE INDEX `loans_borrower_user_id_idx` ON `loans` (`borrower_user_id`);
+--> statement-breakpoint
+CREATE INDEX `loans_accept_token_hash_idx` ON `loans` (`accept_token_hash`);
diff --git a/server/db/migrations/sqlite/meta/_journal.json b/server/db/migrations/sqlite/meta/_journal.json
index 6e3bfb1..5f35f54 100644
--- a/server/db/migrations/sqlite/meta/_journal.json
+++ b/server/db/migrations/sqlite/meta/_journal.json
@@ -71,6 +71,13 @@
       "when": 1778763600000,
       "tag": "0009_add_reading_progress",
       "breakpoints": true
+    },
+    {
+      "idx": 10,
+      "version": "6",
+      "when": 1779144600000,
+      "tag": "0010_lending_history",
+      "breakpoints": true
     }
   ]
 }
diff --git a/server/db/schema/domain.ts b/server/db/schema/domain.ts
index 6ff36df..94768fd 100644
--- a/server/db/schema/domain.ts
+++ b/server/db/schema/domain.ts
@@ -60,7 +60,8 @@ export const userBooks = sqliteTable('user_books', {
   progressPercent: integer('progress_percent'),
   startedAt: integer('started_at', { mode: 'timestamp' }),
   finishedAt: integer('finished_at', { mode: 'timestamp' }),
-  addedAt: integer('added_at', { mode: 'timestamp' }).notNull()
+  addedAt: integer('added_at', { mode: 'timestamp' }).notNull(),
+  removedAt: integer('removed_at', { mode: 'timestamp' })
 }, table => [
   check('user_books_rating_check', sql`${table.rating} IS NULL OR ${table.rating} BETWEEN 1 AND 5`),
   check('user_books_reading_status_check', sql`${table.readingStatus} IN ('unread', 'reading', 'read')`),
@@ -108,9 +109,29 @@ export const userBookTags = sqliteTable('user_book_tags', {
 // Loans track when a user's book is lent out
 export const loans = sqliteTable('loans', {
   id: text('id').primaryKey(),
+  ownerUserId: text('owner_user_id').notNull().references(() => user.id, { onDelete: 'cascade' }),
   userBookId: text('user_book_id').notNull().references(() => userBooks.id, { onDelete: 'cascade' }),
-  borrowerName: text('borrower_name').notNull(),
-  dateLoaned: integer('date_loaned', { mode: 'timestamp' }).notNull(),
-  dateReturned: integer('date_returned', { mode: 'timestamp' }),
-  createdAt: integer('created_at', { mode: 'timestamp' }).notNull()
-})
+  borrowerUserId: text('borrower_user_id').references(() => user.id, { onDelete: 'set null' }),
+  borrowerDisplayName: text('borrower_display_name').notNull(),
+  borrowerEmail: text('borrower_email'),
+  status: text('status', { enum: ['active', 'returned', 'canceled'] }).notNull().default('active'),
+  loanedAt: integer('loaned_at', { mode: 'timestamp' }).notNull(),
+  dueAt: integer('due_at', { mode: 'timestamp' }),
+  returnedAt: integer('returned_at', { mode: 'timestamp' }),
+  canceledAt: integer('canceled_at', { mode: 'timestamp' }),
+  ownerNote: text('owner_note'),
+  snapshotBookTitle: text('snapshot_book_title').notNull(),
+  snapshotBookAuthor: text('snapshot_book_author').notNull(),
+  snapshotCoverPath: text('snapshot_cover_path'),
+  snapshotOwnerName: text('snapshot_owner_name').notNull(),
+  acceptTokenHash: text('accept_token_hash'),
+  acceptedAt: integer('accepted_at', { mode: 'timestamp' }),
+  createdAt: integer('created_at', { mode: 'timestamp' }).notNull(),
+  updatedAt: integer('updated_at', { mode: 'timestamp' }).notNull()
+}, table => [
+  check('loans_status_check', sql`${table.status} IN ('active', 'returned', 'canceled')`),
+  index('loans_owner_user_id_idx').on(table.ownerUserId),
+  index('loans_user_book_id_idx').on(table.userBookId),
+  index('loans_borrower_user_id_idx').on(table.borrowerUserId),
+  index('loans_accept_token_hash_idx').on(table.acceptTokenHash)
+])
diff --git a/server/repositories/book.repository.ts b/server/repositories/book.repository.ts
index ac96a23..2e2e31b 100644
--- a/server/repositories/book.repository.ts
+++ b/server/repositories/book.repository.ts
@@ -1,7 +1,7 @@
 import { Context, Effect, Layer, Data } from 'effect'
 import type { HttpClient } from '@effect/platform'
-import { eq, and, count, desc, asc, inArray, or, sql, notInArray, exists } from 'drizzle-orm'
-import { books, authors, bookAuthors, userBooks, tags, bookSystemTags, userBookTags } from 'hub:db:schema'
+import { eq, and, count, desc, asc, inArray, or, sql, notInArray, exists, isNull } from 'drizzle-orm'
+import { books, authors, bookAuthors, userBooks, tags, bookSystemTags, userBookTags, loans, user } from 'hub:db:schema'
 import { normalizeTagInput, normalizeSuggestedTags } from '../../shared/utils/tag-ingestion'
 
 // Error types
@@ -27,6 +27,11 @@ export class InvalidTagError extends Data.TaggedError('InvalidTagError')<{
   message: string
 }> { }
 
+export class ActiveLoanRemovalError extends Data.TaggedError('ActiveLoanRemovalError')<{
+  userBookId: string
+  borrowerDisplayName: string
+}> { }
+
 // Output types
 export interface Book {
   id: string
@@ -50,6 +55,7 @@ export interface UserBook {
   book: Book
   tags: string[]
   addedAt: Date
+  activeLoan: ActiveLoanSummary | null
 }
 
 export interface BookTagRecord {
@@ -102,8 +108,9 @@ export interface BookRepositoryInterface {
 
   removeFromLibrary: (
     userBookId: string,
-    userId: string
-  ) => Effect.Effect<void, BookNotFoundError | DatabaseError, DbService>
+    userId: string,
+    options?: { confirmActiveLoan?: boolean }
+  ) => Effect.Effect<void, BookNotFoundError | ActiveLoanRemovalError | DatabaseError, DbService>
 
   findByIsbn: (
     isbn: string
@@ -472,7 +479,7 @@ export const BookRepositoryLive = Layer.effect(
               bookId: userBooks.bookId
             })
             .from(userBooks)
-            .where(and(eq(userBooks.id, userBookId), eq(userBooks.userId, userId)))
+            .where(and(eq(userBooks.id, userBookId), eq(userBooks.userId, userId), isNull(userBooks.removedAt)))
             .limit(1),
           catch: error => new DatabaseError({
             message: `Failed to validate user book ownership: ${error}`,
@@ -488,6 +495,40 @@ export const BookRepositoryLive = Layer.effect(
         return owned as OwnedUserBookRef
       })
 
+    const hydrateActiveLoansByUserBookIds = (userBookIds: string[]) =>
+      Effect.gen(function* () {
+        if (userBookIds.length === 0) return new Map<string, ActiveLoanSummary>()
+
+        const rows = yield* Effect.tryPromise({
+          try: () => dbService.db
+            .select({
+              userBookId: loans.userBookId,
+              id: loans.id,
+              borrowerDisplayName: loans.borrowerDisplayName,
+              acceptedByName: user.name,
+              loanedAt: loans.loanedAt,
+              dueAt: loans.dueAt,
+              acceptedAt: loans.acceptedAt
+            })
+            .from(loans)
+            .leftJoin(user, eq(loans.borrowerUserId, user.id))
+            .where(and(inArray(loans.userBookId, userBookIds), eq(loans.status, 'active'))),
+          catch: error => new DatabaseError({
+            message: `Failed to load active loans: ${error}`,
+            operation: 'hydrateActiveLoansByUserBookIds'
+          })
+        })
+
+        return new Map(rows.map(row => [row.userBookId, {
+          id: row.id,
+          borrowerDisplayName: row.borrowerDisplayName,
+          acceptedByName: row.acceptedByName ?? null,
+          loanedAt: row.loanedAt,
+          dueAt: row.dueAt ?? null,
+          acceptedAt: row.acceptedAt ?? null
+        }]))
+      })
+
     return {
       addBookByISBN: (userId, isbn) =>
         Effect.gen(function* () {
@@ -498,7 +539,7 @@ export const BookRepositoryLive = Layer.effect(
                 .select()
                 .from(userBooks)
                 .innerJoin(books, eq(userBooks.bookId, books.id))
-                .where(and(eq(userBooks.userId, userId), eq(books.isbn, isbn)))
+                .where(and(eq(userBooks.userId, userId), eq(books.isbn, isbn), isNull(userBooks.removedAt)))
                 .limit(1),
             catch: error => new DatabaseError({
               message: `Failed to check existing ownership: ${error}`,
@@ -592,7 +633,8 @@ export const BookRepositoryLive = Layer.effect(
             bookId: book.id,
             book: hydratedBook,
             tags: [],
-            addedAt
+            addedAt,
+            activeLoan: null
           }
         }),
 
@@ -633,8 +675,8 @@ export const BookRepositoryLive = Layer.effect(
             : undefined
 
           const whereClause = hasSearch
-            ? and(eq(userBooks.userId, userId), searchCondition)
-            : eq(userBooks.userId, userId)
+            ? and(eq(userBooks.userId, userId), isNull(userBooks.removedAt), searchCondition)
+            : and(eq(userBooks.userId, userId), isNull(userBooks.removedAt))
 
           // Get total count
           const countResult = yield* Effect.tryPromise({
@@ -674,13 +716,15 @@ export const BookRepositoryLive = Layer.effect(
           const bookIds = result.map(row => row.books.id)
           const userTagsByUserBook = yield* hydrateUserTagsByUserBookIds(userBookIds)
           const authorsByBook = yield* hydrateAuthorsForBookIds(bookIds)
+          const activeLoansByUserBook = yield* hydrateActiveLoansByUserBookIds(userBookIds)
 
           const items = result.map(row => ({
             id: row.user_books.id,
             bookId: row.books.id,
             book: toBookModel(row.books, authorsByBook.get(row.books.id) || []),
             tags: userTagsByUserBook.get(row.user_books.id) || [],
-            addedAt: row.user_books.addedAt
+            addedAt: row.user_books.addedAt,
+            activeLoan: activeLoansByUserBook.get(row.user_books.id) ?? null
           }))
 
           return {
@@ -716,7 +760,7 @@ export const BookRepositoryLive = Layer.effect(
 
           const { page, pageSize } = pagination
           const offset = (page - 1) * pageSize
-          const whereClause = and(eq(userBooks.userId, userId), eq(bookAuthors.authorId, authorId))
+          const whereClause = and(eq(userBooks.userId, userId), isNull(userBooks.removedAt), eq(bookAuthors.authorId, authorId))
 
           const countResult = yield* Effect.tryPromise({
             try: () =>
@@ -756,13 +800,15 @@ export const BookRepositoryLive = Layer.effect(
           const bookIds = result.map(row => row.books.id)
           const userTagsByUserBook = yield* hydrateUserTagsByUserBookIds(userBookIds)
           const authorsByBook = yield* hydrateAuthorsForBookIds(bookIds)
+          const activeLoansByUserBook = yield* hydrateActiveLoansByUserBookIds(userBookIds)
 
           const items = result.map(row => ({
             id: row.user_books.id,
             bookId: row.books.id,
             book: toBookModel(row.books, authorsByBook.get(row.books.id) || []),
             tags: userTagsByUserBook.get(row.user_books.id) || [],
-            addedAt: row.user_books.addedAt
+            addedAt: row.user_books.addedAt,
+            activeLoan: activeLoansByUserBook.get(row.user_books.id) ?? null
           }))
 
           return {
@@ -810,7 +856,7 @@ export const BookRepositoryLive = Layer.effect(
                 .select({ id: userBooks.id })
                 .from(userBooks)
                 .innerJoin(books, eq(userBooks.bookId, books.id))
-                .where(and(eq(userBooks.userId, userId), eq(books.isbn, isbn)))
+                .where(and(eq(userBooks.userId, userId), eq(books.isbn, isbn), isNull(userBooks.removedAt)))
                 .limit(1),
             catch: error => new DatabaseError({
               message: `Failed to check user library ownership: ${error}`,
@@ -821,13 +867,37 @@ export const BookRepositoryLive = Layer.effect(
           return Boolean(result[0])
         }),
 
-      removeFromLibrary: (userBookId, userId) =>
+      removeFromLibrary: (userBookId, userId, options = {}) =>
         Effect.gen(function* () {
+          yield* getOwnedUserBookRef(userBookId, userId)
+
+          if (!options.confirmActiveLoan) {
+            const activeLoan = yield* Effect.tryPromise({
+              try: () => dbService.db
+                .select({ borrowerDisplayName: loans.borrowerDisplayName })
+                .from(loans)
+                .where(and(eq(loans.userBookId, userBookId), eq(loans.ownerUserId, userId), eq(loans.status, 'active')))
+                .limit(1),
+              catch: error => new DatabaseError({
+                message: `Failed to check active loan: ${error}`,
+                operation: 'removeFromLibrary.checkActiveLoan'
+              })
+            })
+
+            if (activeLoan[0]) {
+              return yield* Effect.fail(new ActiveLoanRemovalError({
+                userBookId,
+                borrowerDisplayName: activeLoan[0].borrowerDisplayName
+              }))
+            }
+          }
+
           const result = yield* Effect.tryPromise({
             try: () =>
               dbService.db
-                .delete(userBooks)
-                .where(and(eq(userBooks.id, userBookId), eq(userBooks.userId, userId)))
+                .update(userBooks)
+                .set({ removedAt: new Date() })
+                .where(and(eq(userBooks.id, userBookId), eq(userBooks.userId, userId), isNull(userBooks.removedAt)))
                 .returning(),
             catch: error => new DatabaseError({
               message: `Failed to remove book from library: ${error}`,
@@ -892,7 +962,7 @@ export const BookRepositoryLive = Layer.effect(
                 .select()
                 .from(userBooks)
                 .innerJoin(books, eq(userBooks.bookId, books.id))
-                .where(and(eq(userBooks.id, ref.userBookId), eq(userBooks.userId, userId)))
+                .where(and(eq(userBooks.id, ref.userBookId), eq(userBooks.userId, userId), isNull(userBooks.removedAt)))
                 .limit(1),
             catch: error => new DatabaseError({
               message: `Failed to get book details: ${error}`,
@@ -956,6 +1026,7 @@ export const BookRepositoryLive = Layer.effect(
           const bookData = row.books
           const authorsByBook = yield* hydrateAuthorsForBookIds([bookData.id])
           const bookAuthorList = authorsByBook.get(bookData.id) || []
+          const activeLoansByUserBook = yield* hydrateActiveLoansByUserBookIds([ref.userBookId])
 
           return {
             id: row.user_books.id,
@@ -982,7 +1053,8 @@ export const BookRepositoryLive = Layer.effect(
             numberOfPages: bookData.numberOfPages ?? null,
             openLibraryKey: bookData.openLibraryKey,
             workKey: bookData.workKey ?? null,
-            addedAt: row.user_books.addedAt
+            addedAt: row.user_books.addedAt,
+            activeLoan: activeLoansByUserBook.get(ref.userBookId) ?? null
           }
         }),
 
@@ -1287,8 +1359,12 @@ export const getLibraryByAuthor = (userId: string, authorId: string, pagination:
 export const getBookById = (bookId: string) =>
   Effect.flatMap(BookRepository, repo => repo.getBookById(bookId))
 
-export const removeFromLibrary = (userBookId: string, userId: string) =>
-  Effect.flatMap(BookRepository, repo => repo.removeFromLibrary(userBookId, userId))
+export const removeFromLibrary = (
+  userBookId: string,
+  userId: string,
+  options?: { confirmActiveLoan?: boolean }
+) =>
+  Effect.flatMap(BookRepository, repo => repo.removeFromLibrary(userBookId, userId, options))
 
 export const findByIsbn = (isbn: string) =>
   Effect.flatMap(BookRepository, repo => repo.findByIsbn(isbn))
diff --git a/server/repositories/lending.repository.ts b/server/repositories/lending.repository.ts
new file mode 100644
index 0000000..a1a3472
--- /dev/null
+++ b/server/repositories/lending.repository.ts
@@ -0,0 +1,404 @@
+import { Context, Data, Effect, Layer } from 'effect'
+import { and, desc, eq, isNotNull, isNull, not } from 'drizzle-orm'
+import { authors, bookAuthors, books, loans, user, userBooks } from 'hub:db:schema'
+import { BookNotFoundError, DatabaseError } from './book.repository'
+
+export class LoanNotFoundError extends Data.TaggedError('LoanNotFoundError')<{
+  loanId?: string
+}> { }
+
+export class ActiveLoanExistsError extends Data.TaggedError('ActiveLoanExistsError')<{
+  userBookId: string
+}> { }
+
+export class InvalidInviteError extends Data.TaggedError('InvalidInviteError')<{
+  message: string
+}> { }
+
+export class LoanUnavailableError extends Data.TaggedError('LoanUnavailableError')<{
+  message: string
+}> { }
+
+export interface LoanCreateInput {
+  userBookId: string
+  ownerUserId: string
+  borrowerDisplayName: string
+  borrowerEmail: string | null
+  dueAt: Date | null
+  ownerNote: string | null
+  acceptTokenHash: string
+}
+
+export interface LoanCreateResult {
+  loan: OwnerLoan
+  acceptTokenHash: string
+}
+
+interface LoanSnapshotSource {
+  title: string
+  author: string
+  coverPath: string | null
+  ownerName: string
+}
+
+export interface LendingRepositoryInterface {
+  createLoan: (input: LoanCreateInput) => Effect.Effect<OwnerLoan, BookNotFoundError | ActiveLoanExistsError | DatabaseError, DbService>
+  getActiveLoanForBook: (userBookId: string, ownerUserId: string) => Effect.Effect<OwnerLoan | null, DatabaseError, DbService>
+  returnLoan: (loanId: string, ownerUserId: string) => Effect.Effect<OwnerLoan, LoanNotFoundError | DatabaseError, DbService>
+  cancelLoan: (loanId: string, ownerUserId: string) => Effect.Effect<OwnerLoan, LoanNotFoundError | DatabaseError, DbService>
+  listOwnerLoans: (ownerUserId: string) => Effect.Effect<OwnerLoan[], DatabaseError, DbService>
+  listBorrowedBooks: (borrowerUserId: string) => Effect.Effect<BorrowedBook[], DatabaseError, DbService>
+  getInvitePreviewByHash: (tokenHash: string, viewerUserId?: string | null) => Effect.Effect<InvitePreview, InvalidInviteError | DatabaseError, DbService>
+  acceptInviteByHash: (tokenHash: string, borrowerUserId: string) => Effect.Effect<BorrowedBook, InvalidInviteError | LoanUnavailableError | DatabaseError, DbService>
+}
+
+export class LendingRepository extends Context.Tag('LendingRepository')<LendingRepository, LendingRepositoryInterface>() { }
+
+function generateId(): string {
+  return crypto.randomUUID()
+}
+
+export const LendingRepositoryLive = Layer.effect(
+  LendingRepository,
+  Effect.gen(function* () {
+    const dbService = yield* DbService
+
+    const snapshotForBook = (userBookId: string, ownerUserId: string) =>
+      Effect.gen(function* () {
+        const rows = yield* Effect.tryPromise({
+          try: () => dbService.db
+            .select({
+              title: books.title,
+              author: authors.name,
+              coverPath: books.coverPath,
+              ownerName: user.name
+            })
+            .from(userBooks)
+            .innerJoin(books, eq(userBooks.bookId, books.id))
+            .leftJoin(bookAuthors, eq(bookAuthors.bookId, books.id))
+            .leftJoin(authors, eq(bookAuthors.authorId, authors.id))
+            .innerJoin(user, eq(userBooks.userId, user.id))
+            .where(and(eq(userBooks.id, userBookId), eq(userBooks.userId, ownerUserId), isNull(userBooks.removedAt)))
+            .orderBy(bookAuthors.sortOrder)
+            .limit(1),
+          catch: error => new DatabaseError({
+            message: `Failed to load book snapshot: ${error}`,
+            operation: 'snapshotForBook'
+          })
+        })
+
+        const row = rows[0]
+        if (!row) {
+          return yield* Effect.fail(new BookNotFoundError({ bookId: userBookId }))
+        }
+
+        return {
+          title: row.title,
+          author: row.author ?? 'Unknown Author',
+          coverPath: row.coverPath,
+          ownerName: row.ownerName
+        } satisfies LoanSnapshotSource
+      })
+
+    const toOwnerLoan = (row: typeof loans.$inferSelect): OwnerLoan => ({
+      id: row.id,
+      userBookId: row.userBookId,
+      borrowerDisplayName: row.borrowerDisplayName,
+      acceptedByName: null,
+      status: row.status,
+      loanedAt: row.loanedAt,
+      dueAt: row.dueAt ?? null,
+      returnedAt: row.returnedAt ?? null,
+      canceledAt: row.canceledAt ?? null,
+      acceptedAt: row.acceptedAt ?? null,
+      book: {
+        title: row.snapshotBookTitle,
+        author: row.snapshotBookAuthor,
+        coverPath: row.snapshotCoverPath
+      },
+      inviteUrl: null
+    })
+
+    const toBorrowedBook = (row: typeof loans.$inferSelect & { ownerRemoved: Date | null }): BorrowedBook => ({
+      id: row.id,
+      status: row.status,
+      title: row.snapshotBookTitle,
+      author: row.snapshotBookAuthor,
+      coverPath: row.snapshotCoverPath,
+      ownerName: row.snapshotOwnerName,
+      loanedAt: row.loanedAt,
+      dueAt: row.dueAt ?? null,
+      returnedAt: row.returnedAt ?? null,
+      acceptedAt: row.acceptedAt!,
+      ownerRemoved: Boolean(row.ownerRemoved)
+    })
+
+    return {
+      createLoan: input =>
+        Effect.gen(function* () {
+          const snapshot = yield* snapshotForBook(input.userBookId, input.ownerUserId)
+          const existing = yield* Effect.tryPromise({
+            try: () => dbService.db
+              .select({ id: loans.id })
+              .from(loans)
+              .where(and(eq(loans.userBookId, input.userBookId), eq(loans.ownerUserId, input.ownerUserId), eq(loans.status, 'active')))
+              .limit(1),
+            catch: error => new DatabaseError({
+              message: `Failed to check active loan: ${error}`,
+              operation: 'createLoan.checkActive'
+            })
+          })
+
+          if (existing[0]) {
+            return yield* Effect.fail(new ActiveLoanExistsError({ userBookId: input.userBookId }))
+          }
+
+          const now = new Date()
+          const loan: typeof loans.$inferInsert = {
+            id: generateId(),
+            ownerUserId: input.ownerUserId,
+            userBookId: input.userBookId,
+            borrowerUserId: null,
+            borrowerDisplayName: input.borrowerDisplayName,
+            borrowerEmail: input.borrowerEmail,
+            status: 'active',
+            loanedAt: now,
+            dueAt: input.dueAt,
+            returnedAt: null,
+            canceledAt: null,
+            ownerNote: input.ownerNote,
+            snapshotBookTitle: snapshot.title,
+            snapshotBookAuthor: snapshot.author,
+            snapshotCoverPath: snapshot.coverPath,
+            snapshotOwnerName: snapshot.ownerName,
+            acceptTokenHash: input.acceptTokenHash,
+            acceptedAt: null,
+            createdAt: now,
+            updatedAt: now
+          }
+
+          const inserted = yield* Effect.tryPromise({
+            try: () => dbService.db.insert(loans).values(loan).returning(),
+            catch: error => new DatabaseError({
+              message: `Failed to create loan: ${error}`,
+              operation: 'createLoan.insert'
+            })
+          })
+
+          return toOwnerLoan(inserted[0]!)
+        }),
+
+      getActiveLoanForBook: (userBookId, ownerUserId) =>
+        Effect.gen(function* () {
+          const rows = yield* Effect.tryPromise({
+            try: () => dbService.db
+              .select()
+              .from(loans)
+              .where(and(eq(loans.userBookId, userBookId), eq(loans.ownerUserId, ownerUserId), eq(loans.status, 'active')))
+              .limit(1),
+            catch: error => new DatabaseError({
+              message: `Failed to load active loan: ${error}`,
+              operation: 'getActiveLoanForBook'
+            })
+          })
+
+          return rows[0] ? toOwnerLoan(rows[0]) : null
+        }),
+
+      returnLoan: (loanId, ownerUserId) =>
+        Effect.gen(function* () {
+          const now = new Date()
+          const rows = yield* Effect.tryPromise({
+            try: () => dbService.db
+              .update(loans)
+              .set({
+                status: 'returned',
+                returnedAt: now,
+                acceptTokenHash: null,
+                updatedAt: now
+              })
+              .where(and(eq(loans.id, loanId), eq(loans.ownerUserId, ownerUserId), eq(loans.status, 'active')))
+              .returning(),
+            catch: error => new DatabaseError({
+              message: `Failed to return loan: ${error}`,
+              operation: 'returnLoan'
+            })
+          })
+
+          if (!rows[0]) {
+            return yield* Effect.fail(new LoanNotFoundError({ loanId }))
+          }
+
+          return toOwnerLoan(rows[0])
+        }),
+
+      cancelLoan: (loanId, ownerUserId) =>
+        Effect.gen(function* () {
+          const now = new Date()
+          const rows = yield* Effect.tryPromise({
+            try: () => dbService.db
+              .update(loans)
+              .set({
+                status: 'canceled',
+                canceledAt: now,
+                acceptTokenHash: null,
+                updatedAt: now
+              })
+              .where(and(eq(loans.id, loanId), eq(loans.ownerUserId, ownerUserId), eq(loans.status, 'active'), isNull(loans.acceptedAt)))
+              .returning(),
+            catch: error => new DatabaseError({
+              message: `Failed to cancel loan: ${error}`,
+              operation: 'cancelLoan'
+            })
+          })
+
+          if (!rows[0]) {
+            return yield* Effect.fail(new LoanNotFoundError({ loanId }))
+          }
+
+          return toOwnerLoan(rows[0])
+        }),
+
+      listOwnerLoans: ownerUserId =>
+        Effect.gen(function* () {
+          const rows = yield* Effect.tryPromise({
+            try: () => dbService.db
+              .select()
+              .from(loans)
+              .where(eq(loans.ownerUserId, ownerUserId))
+              .orderBy(desc(loans.loanedAt)),
+            catch: error => new DatabaseError({
+              message: `Failed to list owner loans: ${error}`,
+              operation: 'listOwnerLoans'
+            })
+          })
+
+          return rows.map(toOwnerLoan)
+        }),
+
+      listBorrowedBooks: borrowerUserId =>
+        Effect.gen(function* () {
+          const rows = yield* Effect.tryPromise({
+            try: () => dbService.db
+              .select({
+                id: loans.id,
+                status: loans.status,
+                snapshotBookTitle: loans.snapshotBookTitle,
+                snapshotBookAuthor: loans.snapshotBookAuthor,
+                snapshotCoverPath: loans.snapshotCoverPath,
+                snapshotOwnerName: loans.snapshotOwnerName,
+                loanedAt: loans.loanedAt,
+                dueAt: loans.dueAt,
+                returnedAt: loans.returnedAt,
+                acceptedAt: loans.acceptedAt,
+                ownerRemoved: userBooks.removedAt
+              })
+              .from(loans)
+              .leftJoin(userBooks, eq(loans.userBookId, userBooks.id))
+              .where(and(eq(loans.borrowerUserId, borrowerUserId), isNotNull(loans.acceptedAt)))
+              .orderBy(desc(loans.loanedAt)),
+            catch: error => new DatabaseError({
+              message: `Failed to list borrowed books: ${error}`,
+              operation: 'listBorrowedBooks'
+            })
+          })
+
+          return rows.map(row => ({
+            id: row.id,
+            status: row.status,
+            title: row.snapshotBookTitle,
+            author: row.snapshotBookAuthor,
+            coverPath: row.snapshotCoverPath,
+            ownerName: row.snapshotOwnerName,
+            loanedAt: row.loanedAt,
+            dueAt: row.dueAt ?? null,
+            returnedAt: row.returnedAt ?? null,
+            acceptedAt: row.acceptedAt!,
+            ownerRemoved: Boolean(row.ownerRemoved)
+          }))
+        }),
+
+      getInvitePreviewByHash: (tokenHash, viewerUserId = null) =>
+        Effect.gen(function* () {
+          const rows = yield* Effect.tryPromise({
+            try: () => dbService.db
+              .select()
+              .from(loans)
+              .where(eq(loans.acceptTokenHash, tokenHash))
+              .limit(1),
+            catch: error => new DatabaseError({
+              message: `Failed to load invite: ${error}`,
+              operation: 'getInvitePreviewByHash'
+            })
+          })
+
+          const loan = rows[0]
+          if (!loan) {
+            return yield* Effect.fail(new InvalidInviteError({ message: 'This invitation is no longer available.' }))
+          }
+
+          const isOwnInvite = Boolean(viewerUserId && viewerUserId === loan.ownerUserId)
+          const canAccept = loan.status === 'active' && !loan.borrowerUserId && !loan.acceptedAt && !isOwnInvite
+          return {
+            title: loan.snapshotBookTitle,
+            author: loan.snapshotBookAuthor,
+            coverPath: loan.snapshotCoverPath,
+            ownerName: loan.snapshotOwnerName,
+            dueAt: loan.dueAt ?? null,
+            canAccept,
+            isOwnInvite,
+            status: canAccept ? 'available' : loan.acceptedAt ? 'already_accepted' : 'unavailable'
+          }
+        }),
+
+      acceptInviteByHash: (tokenHash, borrowerUserId) =>
+        Effect.gen(function* () {
+          const now = new Date()
+          const rows = yield* Effect.tryPromise({
+            try: () => dbService.db
+              .update(loans)
+              .set({
+                borrowerUserId,
+                acceptedAt: now,
+                acceptTokenHash: null,
+                updatedAt: now
+              })
+              .where(and(eq(loans.acceptTokenHash, tokenHash), eq(loans.status, 'active'), isNull(loans.borrowerUserId), isNull(loans.acceptedAt), not(eq(loans.ownerUserId, borrowerUserId))))
+              .returning(),
+            catch: error => new DatabaseError({
+              message: `Failed to accept invite: ${error}`,
+              operation: 'acceptInviteByHash'
+            })
+          })
+
+          const accepted = rows[0]
+          if (!accepted) {
+            return yield* Effect.fail(new InvalidInviteError({ message: 'This invitation is no longer available.' }))
+          }
+
+          return toBorrowedBook({ ...accepted, ownerRemoved: null })
+        })
+    }
+  })
+)
+
+export const createLoan = (input: LoanCreateInput) =>
+  Effect.flatMap(LendingRepository, repo => repo.createLoan(input))
+
+export const returnLoan = (loanId: string, ownerUserId: string) =>
+  Effect.flatMap(LendingRepository, repo => repo.returnLoan(loanId, ownerUserId))
+
+export const cancelLoan = (loanId: string, ownerUserId: string) =>
+  Effect.flatMap(LendingRepository, repo => repo.cancelLoan(loanId, ownerUserId))
+
+export const listOwnerLoans = (ownerUserId: string) =>
+  Effect.flatMap(LendingRepository, repo => repo.listOwnerLoans(ownerUserId))
+
+export const listBorrowedBooks = (borrowerUserId: string) =>
+  Effect.flatMap(LendingRepository, repo => repo.listBorrowedBooks(borrowerUserId))
+
+export const getInvitePreviewByHash = (tokenHash: string) =>
+  Effect.flatMap(LendingRepository, repo => repo.getInvitePreviewByHash(tokenHash))
+
+export const acceptInviteByHash = (tokenHash: string, borrowerUserId: string) =>
+  Effect.flatMap(LendingRepository, repo => repo.acceptInviteByHash(tokenHash, borrowerUserId))
diff --git a/server/services/book.service.ts b/server/services/book.service.ts
index b6f4966..b8c584e 100644
--- a/server/services/book.service.ts
+++ b/server/services/book.service.ts
@@ -14,6 +14,7 @@ interface UserBookViewModel {
   }
   tags: string[]
   addedAt: Date
+  activeLoan: ActiveLoanSummary | null
 }
 
 export class InvalidReadingProgressError extends Data.TaggedError('InvalidReadingProgressError')<{
@@ -29,7 +30,8 @@ export const toLibraryBook = (userBook: UserBookViewModel): LibraryBook => ({
   isbn: userBook.book.isbn,
   coverPath: userBook.book.coverPath,
   tags: userBook.tags,
-  addedAt: userBook.addedAt
+  addedAt: userBook.addedAt,
+  activeLoan: userBook.activeLoan
 })
 
 // ===== Service Interface =====
@@ -57,8 +59,9 @@ export interface BookServiceInterface {
 
   removeBookFromLibrary: (
     userBookId: string,
-    userId: string
-  ) => Effect.Effect<void, BookNotFoundError | DatabaseError, DbService>
+    userId: string,
+    options?: { confirmActiveLoan?: boolean }
+  ) => Effect.Effect<void, BookNotFoundError | ActiveLoanRemovalError | DatabaseError, DbService>
 
   batchRemoveFromLibrary: (
     ids: string[],
@@ -175,8 +178,8 @@ export const BookServiceLive = Layer.effect(
           }
         }),
 
-      removeBookFromLibrary: (userBookId, userId) =>
-        bookRepo.removeFromLibrary(userBookId, userId),
+      removeBookFromLibrary: (userBookId, userId, options) =>
+        bookRepo.removeFromLibrary(userBookId, userId, options),
 
       batchRemoveFromLibrary: (ids, userId) =>
         Effect.gen(function* () {
@@ -308,8 +311,12 @@ export const getAuthorLibrary = (userId: string, authorId: string, pagination: P
 export const addBookToLibrary = (userId: string, isbn: string) =>
   Effect.flatMap(BookService, service => service.addBookToLibrary(userId, isbn))
 
-export const removeBookFromLibrary = (userBookId: string, userId: string) =>
-  Effect.flatMap(BookService, service => service.removeBookFromLibrary(userBookId, userId))
+export const removeBookFromLibrary = (
+  userBookId: string,
+  userId: string,
+  options?: { confirmActiveLoan?: boolean }
+) =>
+  Effect.flatMap(BookService, service => service.removeBookFromLibrary(userBookId, userId, options))
 
 export const batchRemoveFromLibrary = (ids: string[], userId: string) =>
   Effect.flatMap(BookService, service => service.batchRemoveFromLibrary(ids, userId))
diff --git a/server/services/lending.service.ts b/server/services/lending.service.ts
new file mode 100644
index 0000000..f23e147
--- /dev/null
+++ b/server/services/lending.service.ts
@@ -0,0 +1,129 @@
+import { Context, Effect, Layer } from 'effect'
+import type { ActiveLoanExistsError, InvalidInviteError, LoanNotFoundError, LoanUnavailableError } from '../repositories/lending.repository'
+import { LendingRepository } from '../repositories/lending.repository'
+import type { BookNotFoundError } from '../repositories/book.repository'
+import { DatabaseError } from '../repositories/book.repository'
+
+interface CreateLoanInput {
+  borrowerDisplayName: string
+  borrowerEmail?: string | null
+  dueAt?: Date | null
+  ownerNote?: string | null
+}
+
+interface CreateLoanResult {
+  loan: OwnerLoan
+  inviteUrl: string
+}
+
+export interface LendingServiceInterface {
+  createLoan: (
+    userBookId: string,
+    ownerUserId: string,
+    input: CreateLoanInput
+  ) => Effect.Effect<CreateLoanResult, BookNotFoundError | ActiveLoanExistsError | DatabaseError, DbService>
+  returnLoan: (loanId: string, ownerUserId: string) => Effect.Effect<OwnerLoan, LoanNotFoundError | DatabaseError, DbService>
+  cancelLoan: (loanId: string, ownerUserId: string) => Effect.Effect<OwnerLoan, LoanNotFoundError | DatabaseError, DbService>
+  listOwnerLoans: (ownerUserId: string) => Effect.Effect<OwnerLoan[], DatabaseError, DbService>
+  listBorrowedBooks: (borrowerUserId: string) => Effect.Effect<BorrowedBook[], DatabaseError, DbService>
+  getInvitePreview: (token: string, viewerUserId?: string | null) => Effect.Effect<InvitePreview, InvalidInviteError | DatabaseError, DbService>
+  acceptInvite: (token: string, borrowerUserId: string) => Effect.Effect<BorrowedBook, InvalidInviteError | LoanUnavailableError | DatabaseError, DbService>
+}
+
+export class LendingService extends Context.Tag('LendingService')<LendingService, LendingServiceInterface>() { }
+
+function createAcceptToken(): string {
+  return `${crypto.randomUUID().replaceAll('-', '')}${crypto.randomUUID().replaceAll('-', '')}`
+}
+
+function hashToken(token: string): Effect.Effect<string, DatabaseError> {
+  return Effect.tryPromise({
+    try: async () => {
+      const bytes = new TextEncoder().encode(token)
+      const digest = await crypto.subtle.digest('SHA-256', bytes)
+      return [...new Uint8Array(digest)].map(byte => byte.toString(16).padStart(2, '0')).join('')
+    },
+    catch: error => new DatabaseError({
+      message: `Failed to hash invitation token: ${error}`,
+      operation: 'hashToken'
+    })
+  })
+}
+
+export const LendingServiceLive = Layer.effect(
+  LendingService,
+  Effect.gen(function* () {
+    const lendingRepo = yield* LendingRepository
+
+    return {
+      createLoan: (userBookId, ownerUserId, input) =>
+        Effect.gen(function* () {
+          const token = createAcceptToken()
+          const acceptTokenHash = yield* hashToken(token)
+          const loan = yield* lendingRepo.createLoan({
+            userBookId,
+            ownerUserId,
+            borrowerDisplayName: input.borrowerDisplayName,
+            borrowerEmail: input.borrowerEmail ?? null,
+            dueAt: input.dueAt ?? null,
+            ownerNote: input.ownerNote ?? null,
+            acceptTokenHash
+          })
+
+          const inviteUrl = `/i/${token}`
+          return {
+            loan: {
+              ...loan,
+              inviteUrl
+            },
+            inviteUrl
+          }
+        }),
+
+      returnLoan: (loanId, ownerUserId) =>
+        lendingRepo.returnLoan(loanId, ownerUserId),
+
+      cancelLoan: (loanId, ownerUserId) =>
+        lendingRepo.cancelLoan(loanId, ownerUserId),
+
+      listOwnerLoans: ownerUserId =>
+        lendingRepo.listOwnerLoans(ownerUserId),
+
+      listBorrowedBooks: borrowerUserId =>
+        lendingRepo.listBorrowedBooks(borrowerUserId),
+
+      getInvitePreview: (token, viewerUserId = null) =>
+        Effect.gen(function* () {
+          const tokenHash = yield* hashToken(token)
+          return yield* lendingRepo.getInvitePreviewByHash(tokenHash, viewerUserId)
+        }),
+
+      acceptInvite: (token, borrowerUserId) =>
+        Effect.gen(function* () {
+          const tokenHash = yield* hashToken(token)
+          return yield* lendingRepo.acceptInviteByHash(tokenHash, borrowerUserId)
+        })
+    }
+  })
+)
+
+export const createLoanForBook = (userBookId: string, ownerUserId: string, input: CreateLoanInput) =>
+  Effect.flatMap(LendingService, service => service.createLoan(userBookId, ownerUserId, input))
+
+export const returnLoanForOwner = (loanId: string, ownerUserId: string) =>
+  Effect.flatMap(LendingService, service => service.returnLoan(loanId, ownerUserId))
+
+export const cancelLoanForOwner = (loanId: string, ownerUserId: string) =>
+  Effect.flatMap(LendingService, service => service.cancelLoan(loanId, ownerUserId))
+
+export const listLoansForOwner = (ownerUserId: string) =>
+  Effect.flatMap(LendingService, service => service.listOwnerLoans(ownerUserId))
+
+export const listBooksLentToUser = (borrowerUserId: string) =>
+  Effect.flatMap(LendingService, service => service.listBorrowedBooks(borrowerUserId))
+
+export const getInvitePreview = (token: string, viewerUserId?: string | null) =>
+  Effect.flatMap(LendingService, service => service.getInvitePreview(token, viewerUserId))
+
+export const acceptBookInvite = (token: string, borrowerUserId: string) =>
+  Effect.flatMap(LendingService, service => service.acceptInvite(token, borrowerUserId))
diff --git a/server/utils/effect.ts b/server/utils/effect.ts
index d278b10..4d86f09 100644
--- a/server/utils/effect.ts
+++ b/server/utils/effect.ts
@@ -21,13 +21,13 @@ const BaseServicesLive = Layer.mergeAll(
 
 // Repository layer (depends on base services)
 const RepositoriesLive = Layer.provideMerge(
-  Layer.mergeAll(BookRepositoryLive, OpenLibraryRepositoryLive),
+  Layer.mergeAll(BookRepositoryLive, OpenLibraryRepositoryLive, LendingRepositoryLive),
   BaseServicesLive
 )
 
 // Service layer (depends on repositories)
 const ServicesLive = Layer.provideMerge(
-  BookServiceLive,
+  Layer.mergeAll(BookServiceLive, LendingServiceLive),
   RepositoriesLive
 )
 
@@ -41,7 +41,9 @@ export type MainServices
     | AuthService
     | BookRepository
     | OpenLibraryRepository
+    | LendingRepository
     | BookService
+    | LendingService
     | HttpClient.HttpClient
 
 // Helper to safely get property from unknown object
@@ -58,10 +60,15 @@ const errorStatusCodes: Record<string, number> = {
   BookNotFoundError: 404,
   OpenLibraryBookNotFoundError: 404,
   BookAlreadyOwnedError: 409,
+  ActiveLoanRemovalError: 409,
   OpenLibraryApiError: 502,
   BookCreateError: 500,
   InvalidTagError: 400,
   InvalidReadingProgressError: 400,
+  ActiveLoanExistsError: 409,
+  LoanNotFoundError: 404,
+  InvalidInviteError: 400,
+  LoanUnavailableError: 409,
   DatabaseError: 500,
   StorageError: 500
 }
@@ -75,6 +82,15 @@ const errorMessageFormatters: Record<string, (error: unknown) => string> = {
   BookAlreadyOwnedError: (error) => {
     const isbn = getProp<string>(error, 'isbn')
     return `You already have this book (ISBN: ${isbn || 'unknown'}) in your library`
+  },
+  ActiveLoanRemovalError: (error) => {
+    const borrower = getProp<string>(error, 'borrowerDisplayName')
+    return borrower
+      ? `This book is currently lent to ${borrower}. Confirm removal to remove it from your library while keeping lending history.`
+      : 'This book is currently lent out. Confirm removal to remove it from your library while keeping lending history.'
+  },
+  ActiveLoanExistsError: () => {
+    return 'This book is already lent out.'
   }
 }
 
diff --git a/shared/types/book.ts b/shared/types/book.ts
index 80c84e6..df4a75c 100644
--- a/shared/types/book.ts
+++ b/shared/types/book.ts
@@ -13,6 +13,7 @@ export interface LibraryBook {
   coverPath: string | null
   tags?: string[]
   addedAt: Date | string
+  activeLoan?: ActiveLoanSummary | null
 }
 
 export interface BookTag {
@@ -71,6 +72,56 @@ export interface BookDetails {
   openLibraryKey: string | null
   workKey: string | null
   addedAt: Date | string
+  activeLoan: ActiveLoanSummary | null
+}
+
+export type LoanStatus = 'active' | 'returned' | 'canceled'
+
+export interface ActiveLoanSummary {
+  id: string
+  borrowerDisplayName: string
+  acceptedByName: string | null
+  loanedAt: Date | string
+  dueAt: Date | string | null
+  acceptedAt: Date | string | null
+}
+
+export interface OwnerLoan extends ActiveLoanSummary {
+  userBookId: string
+  status: LoanStatus
+  returnedAt: Date | string | null
+  canceledAt: Date | string | null
+  book: {
+    title: string
+    author: string
+    coverPath: string | null
+  }
+  inviteUrl: string | null
+}
+
+export interface BorrowedBook {
+  id: string
+  status: LoanStatus
+  title: string
+  author: string
+  coverPath: string | null
+  ownerName: string
+  loanedAt: Date | string
+  dueAt: Date | string | null
+  returnedAt: Date | string | null
+  acceptedAt: Date | string
+  ownerRemoved: boolean
+}
+
+export interface InvitePreview {
+  title: string
+  author: string
+  coverPath: string | null
+  ownerName: string
+  dueAt: Date | string | null
+  canAccept: boolean
+  isOwnInvite: boolean
+  status: 'available' | 'already_accepted' | 'unavailable'
 }
 
 export interface AuthorLibrary {
diff --git a/shared/utils/schemas.ts b/shared/utils/schemas.ts
index 845bd3b..1ecc060 100644
--- a/shared/utils/schemas.ts
+++ b/shared/utils/schemas.ts
@@ -199,3 +199,45 @@ export const bookReadingProgressSchema = z.object({
 )
 
 export type BookReadingProgressSchema = z.infer<typeof bookReadingProgressSchema>
+
+const optionalTrimmedString = z.preprocess(
+  (val) => {
+    if (typeof val !== 'string') return val
+    const trimmed = val.trim()
+    return trimmed === '' ? null : trimmed
+  },
+  z.string().nullable().optional()
+)
+
+export const createLoanSchema = z.object({
+  borrowerDisplayName: z.string({ error: 'Borrower name is required' })
+    .trim()
+    .min(1, { error: 'Borrower name is required' })
+    .max(120, { error: 'Borrower name is too long' }),
+  borrowerEmail: z.preprocess(
+    (val) => {
+      if (typeof val !== 'string') return val
+      const trimmed = val.trim()
+      return trimmed === '' ? null : trimmed
+    },
+    z.email({ error: 'Borrower email must be valid' }).nullable().optional()
+  ),
+  dueAt: nullableDateSchema,
+  ownerNote: optionalTrimmedString
+}).refine((value) => {
+  if (!value.dueAt) return true
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
+  return value.dueAt >= today
+}, {
+  path: ['dueAt'],
+  error: 'Due date cannot be in the past'
+})
+
+export type CreateLoanSchema = z.infer<typeof createLoanSchema>
+
+export const removeBookSchema = z.object({
+  confirmActiveLoan: z.boolean().optional().default(false)
+})
+
+export type RemoveBookSchema = z.infer<typeof removeBookSchema>
diff --git a/test/unit/server/api/_helpers/api-route.ts b/test/unit/server/api/_helpers/api-route.ts
index d673bc8..208e7e7 100644
--- a/test/unit/server/api/_helpers/api-route.ts
+++ b/test/unit/server/api/_helpers/api-route.ts
@@ -97,10 +97,18 @@ interface ApiRouteTestGlobals {
   batchUpdateTags: (...args: unknown[]) => unknown
   deleteTag: (...args: unknown[]) => unknown
   promoteSuggestedTag: (...args: unknown[]) => unknown
+  createLoanForBook: (...args: unknown[]) => unknown
+  returnLoanForOwner: (...args: unknown[]) => unknown
+  cancelLoanForOwner: (...args: unknown[]) => unknown
+  listLoansForOwner: (...args: unknown[]) => unknown
+  listBooksLentToUser: (...args: unknown[]) => unknown
+  getInvitePreview: (...args: unknown[]) => unknown
+  acceptBookInvite: (...args: unknown[]) => unknown
   getBlob: (...args: unknown[]) => unknown
   bookIsbnSchema: unknown
   bookBatchDeleteSchema: unknown
   bookTagAddSchema: unknown
+  createLoanSchema: unknown
 }
 
 const testGlobal = globalThis as typeof globalThis & Partial<ApiRouteTestGlobals>
@@ -126,6 +134,13 @@ export const serviceMocks = {
   batchUpdateTags: vi.fn(),
   deleteTag: vi.fn(),
   promoteSuggestedTag: vi.fn(),
+  createLoanForBook: vi.fn(),
+  returnLoanForOwner: vi.fn(),
+  cancelLoanForOwner: vi.fn(),
+  listLoansForOwner: vi.fn(),
+  listBooksLentToUser: vi.fn(),
+  getInvitePreview: vi.fn(),
+  acceptBookInvite: vi.fn(),
   getBlob: vi.fn()
 }
 
@@ -157,10 +172,18 @@ const originalGlobals = {
   batchUpdateTags: testGlobal.batchUpdateTags,
   deleteTag: testGlobal.deleteTag,
   promoteSuggestedTag: testGlobal.promoteSuggestedTag,
+  createLoanForBook: testGlobal.createLoanForBook,
+  returnLoanForOwner: testGlobal.returnLoanForOwner,
+  cancelLoanForOwner: testGlobal.cancelLoanForOwner,
+  listLoansForOwner: testGlobal.listLoansForOwner,
+  listBooksLentToUser: testGlobal.listBooksLentToUser,
+  getInvitePreview: testGlobal.getInvitePreview,
+  acceptBookInvite: testGlobal.acceptBookInvite,
   getBlob: testGlobal.getBlob,
   bookIsbnSchema: testGlobal.bookIsbnSchema,
   bookBatchDeleteSchema: testGlobal.bookBatchDeleteSchema,
-  bookTagAddSchema: testGlobal.bookTagAddSchema
+  bookTagAddSchema: testGlobal.bookTagAddSchema,
+  createLoanSchema: testGlobal.createLoanSchema
 }
 
 const createHttpError: HttpErrorFactory = (input) => {
@@ -226,12 +249,20 @@ export async function setupApiRouteTest() {
   testGlobal.batchUpdateTags = (...args: unknown[]) => serviceMocks.batchUpdateTags(...args)
   testGlobal.deleteTag = (...args: unknown[]) => serviceMocks.deleteTag(...args)
   testGlobal.promoteSuggestedTag = (...args: unknown[]) => serviceMocks.promoteSuggestedTag(...args)
+  testGlobal.createLoanForBook = (...args: unknown[]) => serviceMocks.createLoanForBook(...args)
+  testGlobal.returnLoanForOwner = (...args: unknown[]) => serviceMocks.returnLoanForOwner(...args)
+  testGlobal.cancelLoanForOwner = (...args: unknown[]) => serviceMocks.cancelLoanForOwner(...args)
+  testGlobal.listLoansForOwner = (...args: unknown[]) => serviceMocks.listLoansForOwner(...args)
+  testGlobal.listBooksLentToUser = (...args: unknown[]) => serviceMocks.listBooksLentToUser(...args)
+  testGlobal.getInvitePreview = (...args: unknown[]) => serviceMocks.getInvitePreview(...args)
+  testGlobal.acceptBookInvite = (...args: unknown[]) => serviceMocks.acceptBookInvite(...args)
   testGlobal.getBlob = (...args: unknown[]) => serviceMocks.getBlob(...args)
 
   const schemas = await import('../../../../../shared/utils/schemas')
   testGlobal.bookIsbnSchema = schemas.bookIsbnSchema
   testGlobal.bookBatchDeleteSchema = schemas.bookBatchDeleteSchema
   testGlobal.bookTagAddSchema = schemas.bookTagAddSchema
+  testGlobal.createLoanSchema = schemas.createLoanSchema
 
   for (const mock of Object.values(serviceMocks)) {
     mock.mockReset()
diff --git a/test/unit/server/api/books/[id]/index.delete.test.ts b/test/unit/server/api/books/[id]/index.delete.test.ts
index bd6926a..60de906 100644
--- a/test/unit/server/api/books/[id]/index.delete.test.ts
+++ b/test/unit/server/api/books/[id]/index.delete.test.ts
@@ -25,7 +25,19 @@ describe('server/api/books/[id]/index.delete', () => {
     const handler = await importRoute(route)
 
     await expect(handler(makeEvent({ params: { id: 'ub-1' } }))).resolves.toEqual({ success: true })
-    expect(serviceMocks.removeBookFromLibrary).toHaveBeenCalledWith('ub-1', 'user-1')
+    expect(serviceMocks.removeBookFromLibrary).toHaveBeenCalledWith('ub-1', 'user-1', { confirmActiveLoan: false })
+  })
+
+  it('passes active-loan removal confirmation', async () => {
+    mockLoggedInUser()
+    serviceMocks.removeBookFromLibrary.mockReturnValueOnce(Effect.succeed(undefined))
+    const handler = await importRoute(route)
+
+    await expect(handler(makeEvent({
+      params: { id: 'ub-1' },
+      query: { confirmActiveLoan: 'true' }
+    }))).resolves.toEqual({ success: true })
+    expect(serviceMocks.removeBookFromLibrary).toHaveBeenCalledWith('ub-1', 'user-1', { confirmActiveLoan: true })
   })
 
   it('rejects missing book ids', async () => {
diff --git a/test/unit/server/api/books/[id]/loans/index.post.test.ts b/test/unit/server/api/books/[id]/loans/index.post.test.ts
new file mode 100644
index 0000000..938467a
--- /dev/null
+++ b/test/unit/server/api/books/[id]/loans/index.post.test.ts
@@ -0,0 +1,64 @@
+import { Effect } from 'effect'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import {
+  cleanupApiRouteTest,
+  importRoute,
+  itRequiresAuth,
+  makeEvent,
+  mockLoggedInUser,
+  routePath,
+  serviceMocks,
+  setupApiRouteTest
+} from '../../../_helpers/api-route'
+
+const route = routePath('books/[id]/loans/index.post')
+
+describe('server/api/books/[id]/loans/index.post', () => {
+  beforeEach(setupApiRouteTest)
+  afterEach(cleanupApiRouteTest)
+
+  itRequiresAuth(route, { params: { id: 'ub-1' }, body: { borrowerDisplayName: 'Grace' } })
+
+  it('creates a loan for a user book', async () => {
+    mockLoggedInUser()
+    const result = {
+      loan: {
+        id: 'loan-1',
+        userBookId: 'ub-1',
+        borrowerDisplayName: 'Grace',
+        status: 'active',
+        loanedAt: new Date('2026-05-18T00:00:00.000Z'),
+        dueAt: null,
+        returnedAt: null,
+        canceledAt: null,
+        acceptedAt: null,
+        book: { title: 'Example', author: 'Author', coverPath: null },
+        inviteUrl: '/i/token'
+      },
+      inviteUrl: '/i/token'
+    }
+    serviceMocks.createLoanForBook.mockReturnValueOnce(Effect.succeed(result))
+    const handler = await importRoute(route)
+
+    await expect(handler(makeEvent({
+      params: { id: 'ub-1' },
+      body: { borrowerDisplayName: 'Grace', borrowerEmail: '', dueAt: null, ownerNote: '' }
+    }))).resolves.toEqual(result)
+    expect(serviceMocks.createLoanForBook).toHaveBeenCalledWith('ub-1', 'user-1', {
+      borrowerDisplayName: 'Grace',
+      borrowerEmail: null,
+      dueAt: null,
+      ownerNote: null
+    })
+  })
+
+  it('rejects missing book ids', async () => {
+    mockLoggedInUser()
+    const handler = await importRoute(route)
+
+    await expect(handler(makeEvent({ body: { borrowerDisplayName: 'Grace' } }))).rejects.toMatchObject({
+      statusCode: 400,
+      message: 'Book ID is required'
+    })
+  })
+})
diff --git a/test/unit/server/api/invite/[token]/accept.post.test.ts b/test/unit/server/api/invite/[token]/accept.post.test.ts
new file mode 100644
index 0000000..2b260e9
--- /dev/null
+++ b/test/unit/server/api/invite/[token]/accept.post.test.ts
@@ -0,0 +1,43 @@
+import { Effect } from 'effect'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import {
+  cleanupApiRouteTest,
+  importRoute,
+  itRequiresAuth,
+  makeEvent,
+  mockLoggedInUser,
+  routePath,
+  serviceMocks,
+  setupApiRouteTest
+} from '../../_helpers/api-route'
+
+const route = routePath('invite/[token]/accept.post')
+
+describe('server/api/invite/[token]/accept.post', () => {
+  beforeEach(setupApiRouteTest)
+  afterEach(cleanupApiRouteTest)
+
+  itRequiresAuth(route, { params: { token: 'token-1' } })
+
+  it('accepts a book invite for the signed-in user', async () => {
+    mockLoggedInUser()
+    const borrowed = {
+      id: 'loan-1',
+      status: 'active',
+      title: 'Example',
+      author: 'Author',
+      coverPath: null,
+      ownerName: 'Ada',
+      loanedAt: new Date('2026-05-18T00:00:00.000Z'),
+      dueAt: null,
+      returnedAt: null,
+      acceptedAt: new Date('2026-05-18T00:00:00.000Z'),
+      ownerRemoved: false
+    }
+    serviceMocks.acceptBookInvite.mockReturnValueOnce(Effect.succeed(borrowed))
+    const handler = await importRoute(route)
+
+    await expect(handler(makeEvent({ params: { token: 'token-1' } }))).resolves.toEqual(borrowed)
+    expect(serviceMocks.acceptBookInvite).toHaveBeenCalledWith('token-1', 'user-1')
+  })
+})
diff --git a/test/unit/server/api/invite/[token]/index.get.test.ts b/test/unit/server/api/invite/[token]/index.get.test.ts
new file mode 100644
index 0000000..11a58cf
--- /dev/null
+++ b/test/unit/server/api/invite/[token]/index.get.test.ts
@@ -0,0 +1,44 @@
+import { Effect } from 'effect'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import {
+  cleanupApiRouteTest,
+  importRoute,
+  makeEvent,
+  routePath,
+  serviceMocks,
+  setupApiRouteTest
+} from '../../_helpers/api-route'
+
+const route = routePath('invite/[token]/index.get')
+
+describe('server/api/invite/[token]/index.get', () => {
+  beforeEach(setupApiRouteTest)
+  afterEach(cleanupApiRouteTest)
+
+  it('returns only public invite preview fields', async () => {
+    const preview = {
+      title: 'Example',
+      author: 'Author',
+      coverPath: 'covers/example.webp',
+      ownerName: 'Ada',
+      dueAt: '2026-06-01T00:00:00.000Z',
+      canAccept: true,
+      isOwnInvite: false,
+      status: 'available' as const
+    }
+    serviceMocks.getInvitePreview.mockReturnValueOnce(Effect.succeed(preview))
+    const handler = await importRoute(route)
+
+    await expect(handler(makeEvent({ params: { token: 'token-1' } }))).resolves.toEqual(preview)
+    expect(serviceMocks.getInvitePreview).toHaveBeenCalledWith('token-1', null)
+  })
+
+  it('rejects missing tokens', async () => {
+    const handler = await importRoute(route)
+
+    await expect(handler(makeEvent())).rejects.toMatchObject({
+      statusCode: 400,
+      message: 'Invitation token is required'
+    })
+  })
+})

From 0c67adf277444f815e657ca5d1714eb50dc9183b Mon Sep 17 00:00:00 2001
From: niklhut <49069026+niklhut@users.noreply.github.com>
Date: Wed, 20 May 2026 14:07:34 -0400
Subject: [PATCH 2/8] fix: harden lending invite acceptance

---
 app/components/BookLendingModal.vue           |  6 ++-
 app/pages/i/[token].vue                       |  1 -
 .../sqlite/0011_lending_unique_indexes.sql    |  5 ++
 .../db/migrations/sqlite/meta/_journal.json   |  7 +++
 server/db/schema/domain.ts                    |  3 +-
 server/repositories/lending.repository.ts     | 49 +++++++++++++++----
 shared/utils/schemas.ts                       | 25 ++++++++--
 .../api/invite/[token]/accept.post.test.ts    | 11 +++++
 8 files changed, 91 insertions(+), 16 deletions(-)
 create mode 100644 server/db/migrations/sqlite/0011_lending_unique_indexes.sql

diff --git a/app/components/BookLendingModal.vue b/app/components/BookLendingModal.vue
index baeabb9..2bde755 100644
--- a/app/components/BookLendingModal.vue
+++ b/app/components/BookLendingModal.vue
@@ -24,7 +24,11 @@ const copiedAutomatically = ref(false)
 const tomorrowDate = computed(() => {
   const date = new Date()
   date.setDate(date.getDate() + 1)
-  return date.toISOString().slice(0, 10)
+  return [
+    date.getFullYear(),
+    String(date.getMonth() + 1).padStart(2, '0'),
+    String(date.getDate()).padStart(2, '0')
+  ].join('-')
 })
 
 const modalOpen = computed({
diff --git a/app/pages/i/[token].vue b/app/pages/i/[token].vue
index 4494d43..65d7764 100644
--- a/app/pages/i/[token].vue
+++ b/app/pages/i/[token].vue
@@ -45,7 +45,6 @@ async function acceptBook() {
       title: 'Added to borrowed books',
       color: 'success'
     })
-    isAccepting.value = false
     await navigateTo({ path: '/library/loans', query: { view: 'borrowed' } })
   } catch (err: unknown) {
     const message = (err as { data?: { message?: string } })?.data?.message
diff --git a/server/db/migrations/sqlite/0011_lending_unique_indexes.sql b/server/db/migrations/sqlite/0011_lending_unique_indexes.sql
new file mode 100644
index 0000000..50b2f2c
--- /dev/null
+++ b/server/db/migrations/sqlite/0011_lending_unique_indexes.sql
@@ -0,0 +1,5 @@
+DROP INDEX IF EXISTS `loans_accept_token_hash_idx`;
+--> statement-breakpoint
+CREATE UNIQUE INDEX `loans_active_user_book_unique` ON `loans` (`user_book_id`) WHERE `status` = 'active';
+--> statement-breakpoint
+CREATE UNIQUE INDEX `loans_accept_token_hash_unique` ON `loans` (`accept_token_hash`) WHERE `accept_token_hash` IS NOT NULL;
diff --git a/server/db/migrations/sqlite/meta/_journal.json b/server/db/migrations/sqlite/meta/_journal.json
index 5f35f54..188a362 100644
--- a/server/db/migrations/sqlite/meta/_journal.json
+++ b/server/db/migrations/sqlite/meta/_journal.json
@@ -78,6 +78,13 @@
       "when": 1779144600000,
       "tag": "0010_lending_history",
       "breakpoints": true
+    },
+    {
+      "idx": 11,
+      "version": "6",
+      "when": 1779235200000,
+      "tag": "0011_lending_unique_indexes",
+      "breakpoints": true
     }
   ]
 }
diff --git a/server/db/schema/domain.ts b/server/db/schema/domain.ts
index 94768fd..82ec654 100644
--- a/server/db/schema/domain.ts
+++ b/server/db/schema/domain.ts
@@ -133,5 +133,6 @@ export const loans = sqliteTable('loans', {
   index('loans_owner_user_id_idx').on(table.ownerUserId),
   index('loans_user_book_id_idx').on(table.userBookId),
   index('loans_borrower_user_id_idx').on(table.borrowerUserId),
-  index('loans_accept_token_hash_idx').on(table.acceptTokenHash)
+  uniqueIndex('loans_active_user_book_unique').on(table.userBookId).where(sql`${table.status} = 'active'`),
+  uniqueIndex('loans_accept_token_hash_unique').on(table.acceptTokenHash).where(sql`${table.acceptTokenHash} IS NOT NULL`)
 ])
diff --git a/server/repositories/lending.repository.ts b/server/repositories/lending.repository.ts
index a1a3472..736d316 100644
--- a/server/repositories/lending.repository.ts
+++ b/server/repositories/lending.repository.ts
@@ -1,5 +1,5 @@
 import { Context, Data, Effect, Layer } from 'effect'
-import { and, desc, eq, isNotNull, isNull, not } from 'drizzle-orm'
+import { and, desc, eq, exists, isNotNull, isNull, not, sql } from 'drizzle-orm'
 import { authors, bookAuthors, books, loans, user, userBooks } from 'hub:db:schema'
 import { BookNotFoundError, DatabaseError } from './book.repository'
 
@@ -58,6 +58,14 @@ function generateId(): string {
   return crypto.randomUUID()
 }
 
+function isUniqueConstraintError(error: unknown): boolean {
+  const message = error instanceof Error ? error.message : String(error)
+  return message.includes('SQLITE_CONSTRAINT')
+    || message.includes('UNIQUE constraint failed')
+    || message.includes('loans_active_user_book_unique')
+    || message.includes('loans_accept_token_hash_unique')
+}
+
 export const LendingRepositoryLive = Layer.effect(
   LendingRepository,
   Effect.gen(function* () {
@@ -179,10 +187,12 @@ export const LendingRepositoryLive = Layer.effect(
 
           const inserted = yield* Effect.tryPromise({
             try: () => dbService.db.insert(loans).values(loan).returning(),
-            catch: error => new DatabaseError({
-              message: `Failed to create loan: ${error}`,
-              operation: 'createLoan.insert'
-            })
+            catch: error => isUniqueConstraintError(error)
+              ? new ActiveLoanExistsError({ userBookId: input.userBookId })
+              : new DatabaseError({
+                  message: `Failed to create loan: ${error}`,
+                  operation: 'createLoan.insert'
+                })
           })
 
           return toOwnerLoan(inserted[0]!)
@@ -322,8 +332,12 @@ export const LendingRepositoryLive = Layer.effect(
         Effect.gen(function* () {
           const rows = yield* Effect.tryPromise({
             try: () => dbService.db
-              .select()
+              .select({
+                loan: loans,
+                ownerRemovedAt: userBooks.removedAt
+              })
               .from(loans)
+              .innerJoin(userBooks, and(eq(loans.userBookId, userBooks.id), eq(loans.ownerUserId, userBooks.userId)))
               .where(eq(loans.acceptTokenHash, tokenHash))
               .limit(1),
             catch: error => new DatabaseError({
@@ -332,11 +346,12 @@ export const LendingRepositoryLive = Layer.effect(
             })
           })
 
-          const loan = rows[0]
-          if (!loan) {
+          const row = rows[0]
+          if (!row || row.ownerRemovedAt) {
             return yield* Effect.fail(new InvalidInviteError({ message: 'This invitation is no longer available.' }))
           }
 
+          const loan = row.loan
           const isOwnInvite = Boolean(viewerUserId && viewerUserId === loan.ownerUserId)
           const canAccept = loan.status === 'active' && !loan.borrowerUserId && !loan.acceptedAt && !isOwnInvite
           return {
@@ -363,7 +378,23 @@ export const LendingRepositoryLive = Layer.effect(
                 acceptTokenHash: null,
                 updatedAt: now
               })
-              .where(and(eq(loans.acceptTokenHash, tokenHash), eq(loans.status, 'active'), isNull(loans.borrowerUserId), isNull(loans.acceptedAt), not(eq(loans.ownerUserId, borrowerUserId))))
+              .where(and(
+                eq(loans.acceptTokenHash, tokenHash),
+                eq(loans.status, 'active'),
+                isNull(loans.borrowerUserId),
+                isNull(loans.acceptedAt),
+                not(eq(loans.ownerUserId, borrowerUserId)),
+                exists(
+                  dbService.db
+                    .select({ value: sql`1` })
+                    .from(userBooks)
+                    .where(and(
+                      eq(userBooks.id, loans.userBookId),
+                      eq(userBooks.userId, loans.ownerUserId),
+                      isNull(userBooks.removedAt)
+                    ))
+                )
+              ))
               .returning(),
             catch: error => new DatabaseError({
               message: `Failed to accept invite: ${error}`,
diff --git a/shared/utils/schemas.ts b/shared/utils/schemas.ts
index 1ecc060..5c2b634 100644
--- a/shared/utils/schemas.ts
+++ b/shared/utils/schemas.ts
@@ -178,6 +178,25 @@ const nullableDateSchema = z.preprocess(
   z.date({ error: 'Date must be valid' }).nullable().optional()
 )
 
+const localNullableDateSchema = z.preprocess(
+  (val) => {
+    if (val === '' || val === undefined) return val
+    if (val === null || val instanceof Date) return val
+    if (typeof val === 'string') {
+      const date = /^\d{4}-\d{2}-\d{2}$/.test(val)
+        ? new Date(`${val}T00:00:00`)
+        : new Date(val)
+      return Number.isNaN(date.getTime()) ? val : date
+    }
+    return val
+  },
+  z.date({ error: 'Date must be valid' }).nullable().optional()
+)
+
+function toLocalDateKey(date: Date): number {
+  return date.getFullYear() * 10000 + (date.getMonth() + 1) * 100 + date.getDate()
+}
+
 export const bookReadingProgressSchema = z.object({
   status: z.enum(['unread', 'reading', 'read'], { error: 'Reading status is invalid' }).optional(),
   currentPage: z.number({ error: 'Current page must be a number' })
@@ -222,13 +241,11 @@ export const createLoanSchema = z.object({
     },
     z.email({ error: 'Borrower email must be valid' }).nullable().optional()
   ),
-  dueAt: nullableDateSchema,
+  dueAt: localNullableDateSchema,
   ownerNote: optionalTrimmedString
 }).refine((value) => {
   if (!value.dueAt) return true
-  const today = new Date()
-  today.setHours(0, 0, 0, 0)
-  return value.dueAt >= today
+  return toLocalDateKey(value.dueAt) >= toLocalDateKey(new Date())
 }, {
   path: ['dueAt'],
   error: 'Due date cannot be in the past'
diff --git a/test/unit/server/api/invite/[token]/accept.post.test.ts b/test/unit/server/api/invite/[token]/accept.post.test.ts
index 2b260e9..7d346e7 100644
--- a/test/unit/server/api/invite/[token]/accept.post.test.ts
+++ b/test/unit/server/api/invite/[token]/accept.post.test.ts
@@ -40,4 +40,15 @@ describe('server/api/invite/[token]/accept.post', () => {
     await expect(handler(makeEvent({ params: { token: 'token-1' } }))).resolves.toEqual(borrowed)
     expect(serviceMocks.acceptBookInvite).toHaveBeenCalledWith('token-1', 'user-1')
   })
+
+  it('rejects missing invite tokens', async () => {
+    mockLoggedInUser()
+    const handler = await importRoute(route)
+
+    await expect(handler(makeEvent())).rejects.toMatchObject({
+      statusCode: 400,
+      message: 'Invitation token is required'
+    })
+    expect(serviceMocks.acceptBookInvite).not.toHaveBeenCalled()
+  })
 })

From d5262cd4650c8fbd56cfc28a6e748f98e3d8e3c9 Mon Sep 17 00:00:00 2001
From: niklhut <49069026+niklhut@users.noreply.github.com>
Date: Wed, 20 May 2026 14:23:14 -0400
Subject: [PATCH 3/8] fix: open loan cards and show claimed borrower names

---
 app/pages/library/loans.vue               | 80 +++++++++++++++--------
 server/repositories/lending.repository.ts | 29 +++++++-
 2 files changed, 77 insertions(+), 32 deletions(-)

diff --git a/app/pages/library/loans.vue b/app/pages/library/loans.vue
index 048caf4..0709cf4 100644
--- a/app/pages/library/loans.vue
+++ b/app/pages/library/loans.vue
@@ -82,6 +82,10 @@ function borrowerLabel(loan: OwnerLoan) {
   return `${loan.acceptedByName} · entered as ${loan.borrowerDisplayName}`
 }
 
+function openOwnerBook(loan: OwnerLoan) {
+  return navigateTo(`/library/${loan.userBookId}`)
+}
+
 async function returnLoan(loan: OwnerLoan) {
   if (returningLoanId.value) return
 
@@ -192,22 +196,31 @@ async function returnLoan(loan: OwnerLoan) {
                 v-for="loan in activeOwnerLoans"
                 :key="loan.id"
                 variant="subtle"
+                class="group cursor-pointer transition hover:ring-1 hover:ring-primary/30"
+                role="link"
+                tabindex="0"
+                :aria-label="`Open ${loanTitle(loan)}`"
+                @click="openOwnerBook(loan)"
+                @keydown.enter.prevent="openOwnerBook(loan)"
+                @keydown.space.prevent="openOwnerBook(loan)"
               >
                 <div class="flex gap-4">
-                  <NuxtImg
-                    v-if="coverUrl(loan)"
-                    :src="coverUrl(loan)!"
-                    :alt="loanTitle(loan)"
-                    class="h-28 w-19 object-cover rounded"
-                  />
-                  <div
-                    v-else
-                    class="h-28 w-19 rounded bg-muted flex items-center justify-center"
-                  >
-                    <UIcon
-                      name="i-lucide-book"
-                      class="text-3xl text-muted"
+                  <div class="shrink-0">
+                    <NuxtImg
+                      v-if="coverUrl(loan)"
+                      :src="coverUrl(loan)!"
+                      :alt="loanTitle(loan)"
+                      class="h-28 w-19 object-cover rounded"
                     />
+                    <div
+                      v-else
+                      class="h-28 w-19 rounded bg-muted flex items-center justify-center"
+                    >
+                      <UIcon
+                        name="i-lucide-book"
+                        class="text-3xl text-muted"
+                      />
+                    </div>
                   </div>
                   <div class="min-w-0 flex-1">
                     <UBadge
@@ -217,7 +230,7 @@ async function returnLoan(loan: OwnerLoan) {
                     >
                       Lent out
                     </UBadge>
-                    <h3 class="font-semibold line-clamp-2">
+                    <h3 class="font-semibold line-clamp-2 transition-colors group-hover:text-primary">
                       {{ loanTitle(loan) }}
                     </h3>
                     <p class="text-sm text-muted line-clamp-1">
@@ -240,7 +253,7 @@ async function returnLoan(loan: OwnerLoan) {
                       icon="i-lucide-undo-2"
                       :loading="returningLoanId === loan.id"
                       :disabled="Boolean(returningLoanId)"
-                      @click="returnLoan(loan)"
+                      @click.stop="returnLoan(loan)"
                     >
                       Mark returned
                     </UButton>
@@ -268,26 +281,35 @@ async function returnLoan(loan: OwnerLoan) {
                 v-for="loan in ownerLoanHistory"
                 :key="loan.id"
                 variant="subtle"
+                class="group cursor-pointer transition hover:ring-1 hover:ring-primary/30"
+                role="link"
+                tabindex="0"
+                :aria-label="`Open ${loanTitle(loan)}`"
+                @click="openOwnerBook(loan)"
+                @keydown.enter.prevent="openOwnerBook(loan)"
+                @keydown.space.prevent="openOwnerBook(loan)"
               >
                 <div class="flex items-center justify-between gap-4">
                   <div class="flex min-w-0 items-center gap-3">
-                    <NuxtImg
-                      v-if="coverUrl(loan)"
-                      :src="coverUrl(loan)!"
-                      :alt="loanTitle(loan)"
-                      class="h-18 w-12 shrink-0 rounded object-cover"
-                    />
-                    <div
-                      v-else
-                      class="h-18 w-12 shrink-0 rounded bg-muted flex items-center justify-center"
-                    >
-                      <UIcon
-                        name="i-lucide-book"
-                        class="text-xl text-muted"
+                    <div class="shrink-0">
+                      <NuxtImg
+                        v-if="coverUrl(loan)"
+                        :src="coverUrl(loan)!"
+                        :alt="loanTitle(loan)"
+                        class="h-18 w-12 rounded object-cover"
                       />
+                      <div
+                        v-else
+                        class="h-18 w-12 rounded bg-muted flex items-center justify-center"
+                      >
+                        <UIcon
+                          name="i-lucide-book"
+                          class="text-xl text-muted"
+                        />
+                      </div>
                     </div>
                     <div class="min-w-0">
-                      <h3 class="font-semibold truncate">
+                      <h3 class="font-semibold truncate transition-colors group-hover:text-primary">
                         {{ loanTitle(loan) }}
                       </h3>
                       <p class="text-sm text-muted truncate">
diff --git a/server/repositories/lending.repository.ts b/server/repositories/lending.repository.ts
index 736d316..8677ea4 100644
--- a/server/repositories/lending.repository.ts
+++ b/server/repositories/lending.repository.ts
@@ -108,11 +108,11 @@ export const LendingRepositoryLive = Layer.effect(
         } satisfies LoanSnapshotSource
       })
 
-    const toOwnerLoan = (row: typeof loans.$inferSelect): OwnerLoan => ({
+    const toOwnerLoan = (row: typeof loans.$inferSelect & { acceptedByName?: string | null }): OwnerLoan => ({
       id: row.id,
       userBookId: row.userBookId,
       borrowerDisplayName: row.borrowerDisplayName,
-      acceptedByName: null,
+      acceptedByName: row.acceptedByName ?? null,
       status: row.status,
       loanedAt: row.loanedAt,
       dueAt: row.dueAt ?? null,
@@ -273,8 +273,31 @@ export const LendingRepositoryLive = Layer.effect(
         Effect.gen(function* () {
           const rows = yield* Effect.tryPromise({
             try: () => dbService.db
-              .select()
+              .select({
+                id: loans.id,
+                ownerUserId: loans.ownerUserId,
+                userBookId: loans.userBookId,
+                borrowerUserId: loans.borrowerUserId,
+                borrowerDisplayName: loans.borrowerDisplayName,
+                borrowerEmail: loans.borrowerEmail,
+                status: loans.status,
+                loanedAt: loans.loanedAt,
+                dueAt: loans.dueAt,
+                returnedAt: loans.returnedAt,
+                canceledAt: loans.canceledAt,
+                ownerNote: loans.ownerNote,
+                snapshotBookTitle: loans.snapshotBookTitle,
+                snapshotBookAuthor: loans.snapshotBookAuthor,
+                snapshotCoverPath: loans.snapshotCoverPath,
+                snapshotOwnerName: loans.snapshotOwnerName,
+                acceptTokenHash: loans.acceptTokenHash,
+                acceptedAt: loans.acceptedAt,
+                createdAt: loans.createdAt,
+                updatedAt: loans.updatedAt,
+                acceptedByName: user.name
+              })
               .from(loans)
+              .leftJoin(user, eq(loans.borrowerUserId, user.id))
               .where(eq(loans.ownerUserId, ownerUserId))
               .orderBy(desc(loans.loanedAt)),
             catch: error => new DatabaseError({

From e7172eb356bef692dd02c008c68158a81a3de0ab Mon Sep 17 00:00:00 2001
From: niklhut <49069026+niklhut@users.noreply.github.com>
Date: Wed, 20 May 2026 20:01:14 -0400
Subject: [PATCH 4/8] fix: stop nested card keydowns and clear due dates

---
 app/pages/library/loans.vue | 8 ++++----
 shared/utils/schemas.ts     | 3 ++-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/pages/library/loans.vue b/app/pages/library/loans.vue
index 0709cf4..e0e3268 100644
--- a/app/pages/library/loans.vue
+++ b/app/pages/library/loans.vue
@@ -201,8 +201,8 @@ async function returnLoan(loan: OwnerLoan) {
                 tabindex="0"
                 :aria-label="`Open ${loanTitle(loan)}`"
                 @click="openOwnerBook(loan)"
-                @keydown.enter.prevent="openOwnerBook(loan)"
-                @keydown.space.prevent="openOwnerBook(loan)"
+                @keydown.enter.prevent.stop="openOwnerBook(loan)"
+                @keydown.space.prevent.stop="openOwnerBook(loan)"
               >
                 <div class="flex gap-4">
                   <div class="shrink-0">
@@ -286,8 +286,8 @@ async function returnLoan(loan: OwnerLoan) {
                 tabindex="0"
                 :aria-label="`Open ${loanTitle(loan)}`"
                 @click="openOwnerBook(loan)"
-                @keydown.enter.prevent="openOwnerBook(loan)"
-                @keydown.space.prevent="openOwnerBook(loan)"
+                @keydown.enter.prevent.stop="openOwnerBook(loan)"
+                @keydown.space.prevent.stop="openOwnerBook(loan)"
               >
                 <div class="flex items-center justify-between gap-4">
                   <div class="flex min-w-0 items-center gap-3">
diff --git a/shared/utils/schemas.ts b/shared/utils/schemas.ts
index 5c2b634..f3cec29 100644
--- a/shared/utils/schemas.ts
+++ b/shared/utils/schemas.ts
@@ -180,7 +180,8 @@ const nullableDateSchema = z.preprocess(
 
 const localNullableDateSchema = z.preprocess(
   (val) => {
-    if (val === '' || val === undefined) return val
+    if (val === '') return undefined
+    if (val === undefined) return val
     if (val === null || val instanceof Date) return val
     if (typeof val === 'string') {
       const date = /^\d{4}-\d{2}-\d{2}$/.test(val)

From b287e2a1e5ef0f0346f2f238dd49666d4cecb171 Mon Sep 17 00:00:00 2001
From: niklhut <49069026+niklhut@users.noreply.github.com>
Date: Wed, 20 May 2026 20:11:10 -0400
Subject: [PATCH 5/8] fix: refine loan card keyboard handling and schema
 default

---
 app/pages/library/loans.vue | 8 ++++----
 shared/utils/schemas.ts     | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/pages/library/loans.vue b/app/pages/library/loans.vue
index e0e3268..68d6e6e 100644
--- a/app/pages/library/loans.vue
+++ b/app/pages/library/loans.vue
@@ -201,8 +201,8 @@ async function returnLoan(loan: OwnerLoan) {
                 tabindex="0"
                 :aria-label="`Open ${loanTitle(loan)}`"
                 @click="openOwnerBook(loan)"
-                @keydown.enter.prevent.stop="openOwnerBook(loan)"
-                @keydown.space.prevent.stop="openOwnerBook(loan)"
+                @keydown.enter.self.prevent.stop="openOwnerBook(loan)"
+                @keydown.space.self.prevent.stop="openOwnerBook(loan)"
               >
                 <div class="flex gap-4">
                   <div class="shrink-0">
@@ -286,8 +286,8 @@ async function returnLoan(loan: OwnerLoan) {
                 tabindex="0"
                 :aria-label="`Open ${loanTitle(loan)}`"
                 @click="openOwnerBook(loan)"
-                @keydown.enter.prevent.stop="openOwnerBook(loan)"
-                @keydown.space.prevent.stop="openOwnerBook(loan)"
+                @keydown.enter.self.prevent.stop="openOwnerBook(loan)"
+                @keydown.space.self.prevent.stop="openOwnerBook(loan)"
               >
                 <div class="flex items-center justify-between gap-4">
                   <div class="flex min-w-0 items-center gap-3">
diff --git a/shared/utils/schemas.ts b/shared/utils/schemas.ts
index f3cec29..2fb312c 100644
--- a/shared/utils/schemas.ts
+++ b/shared/utils/schemas.ts
@@ -255,7 +255,7 @@ export const createLoanSchema = z.object({
 export type CreateLoanSchema = z.infer<typeof createLoanSchema>
 
 export const removeBookSchema = z.object({
-  confirmActiveLoan: z.boolean().optional().default(false)
+  confirmActiveLoan: z.boolean().default(false).optional()
 })
 
 export type RemoveBookSchema = z.infer<typeof removeBookSchema>

From 3b86e19bf429c23b2f027db7a2680a9f2b8b5538 Mon Sep 17 00:00:00 2001
From: niklhut <49069026+niklhut@users.noreply.github.com>
Date: Sat, 23 May 2026 18:00:47 -0400
Subject: [PATCH 6/8] refactor: split loans view and remove loan note

---
 app/components/BorrowedLoansSection.vue       | 171 ++++++++
 app/components/LoanedOutLoansSection.vue      | 217 ++++++++++
 app/pages/library/borrowed.vue                |   7 -
 app/pages/library/loans.vue                   | 375 +-----------------
 .../sqlite/0012_remove_loan_owner_note.sql    |   1 +
 .../db/migrations/sqlite/meta/_journal.json   |   7 +
 server/db/schema/domain.ts                    |   1 -
 server/repositories/lending.repository.ts     |   3 -
 server/services/lending.service.ts            |   2 -
 shared/utils/schemas.ts                       |  12 +-
 .../api/books/[id]/loans/index.post.test.ts   |   5 +-
 11 files changed, 410 insertions(+), 391 deletions(-)
 create mode 100644 app/components/BorrowedLoansSection.vue
 create mode 100644 app/components/LoanedOutLoansSection.vue
 delete mode 100644 app/pages/library/borrowed.vue
 create mode 100644 server/db/migrations/sqlite/0012_remove_loan_owner_note.sql

diff --git a/app/components/BorrowedLoansSection.vue b/app/components/BorrowedLoansSection.vue
new file mode 100644
index 0000000..99dc193
--- /dev/null
+++ b/app/components/BorrowedLoansSection.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import type { BorrowedBook } from '~~/shared/types/book'
+
+const props = defineProps<{
+  books: BorrowedBook[]
+}>()
+
+const activeBooks = computed(() => props.books.filter(book => book.status === 'active'))
+const bookHistory = computed(() => props.books.filter(book => book.status !== 'active'))
+
+function coverUrl(book: BorrowedBook) {
+  return book.coverPath ? `/api/blob/${book.coverPath}` : null
+}
+
+function formatDate(value: Date | string | null): string | null {
+  if (!value) return null
+  const date = value instanceof Date ? value : new Date(value)
+  if (Number.isNaN(date.getTime())) return null
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  })
+}
+</script>
+
+<template>
+  <UCard
+    v-if="books.length === 0"
+    class="text-center py-12"
+  >
+    <UIcon
+      name="i-lucide-book-user"
+      class="text-6xl text-muted mx-auto mb-4"
+    />
+    <h2 class="text-xl font-semibold mb-2">
+      No borrowed books yet
+    </h2>
+    <p class="text-muted">
+      Accepted books will appear here.
+    </p>
+  </UCard>
+
+  <div
+    v-else
+    class="space-y-8"
+  >
+    <section>
+      <h2 class="text-lg font-semibold mb-3">
+        Current
+      </h2>
+      <div
+        v-if="activeBooks.length > 0"
+        class="grid gap-4 md:grid-cols-2"
+      >
+        <UCard
+          v-for="book in activeBooks"
+          :key="book.id"
+          variant="subtle"
+        >
+          <div class="flex gap-4">
+            <NuxtImg
+              v-if="coverUrl(book)"
+              :src="coverUrl(book)!"
+              :alt="book.title"
+              class="h-28 w-19 object-cover rounded"
+            />
+            <div
+              v-else
+              class="h-28 w-19 rounded bg-muted flex items-center justify-center"
+            >
+              <UIcon
+                name="i-lucide-book"
+                class="text-3xl text-muted"
+              />
+            </div>
+            <div class="min-w-0 flex-1">
+              <UBadge
+                color="success"
+                variant="subtle"
+                class="mb-2"
+              >
+                With you
+              </UBadge>
+              <h3 class="font-semibold line-clamp-2">
+                {{ book.title }}
+              </h3>
+              <p class="text-sm text-muted line-clamp-1">
+                {{ book.author }}
+              </p>
+              <p class="mt-2 text-sm text-muted">
+                Lent by {{ book.ownerName }} · {{ formatDate(book.loanedAt) }}
+              </p>
+              <p
+                v-if="book.dueAt"
+                class="text-sm text-muted"
+              >
+                Due {{ formatDate(book.dueAt) }}
+              </p>
+            </div>
+          </div>
+        </UCard>
+      </div>
+      <p
+        v-else
+        class="text-sm text-muted"
+      >
+        Nothing currently with you.
+      </p>
+    </section>
+
+    <section>
+      <h2 class="text-lg font-semibold mb-3">
+        History
+      </h2>
+      <div
+        v-if="bookHistory.length > 0"
+        class="space-y-3"
+      >
+        <UCard
+          v-for="book in bookHistory"
+          :key="book.id"
+          variant="subtle"
+        >
+          <div class="flex items-center justify-between gap-4">
+            <div class="flex min-w-0 items-center gap-3">
+              <NuxtImg
+                v-if="coverUrl(book)"
+                :src="coverUrl(book)!"
+                :alt="book.title"
+                class="h-18 w-12 shrink-0 rounded object-cover"
+              />
+              <div
+                v-else
+                class="h-18 w-12 shrink-0 rounded bg-muted flex items-center justify-center"
+              >
+                <UIcon
+                  name="i-lucide-book"
+                  class="text-xl text-muted"
+                />
+              </div>
+              <div class="min-w-0">
+                <h3 class="font-semibold truncate">
+                  {{ book.title }}
+                </h3>
+                <p class="text-sm text-muted truncate">
+                  {{ book.author }} · Lent by {{ book.ownerName }}
+                </p>
+                <p class="text-sm text-muted">
+                  {{ book.status === 'returned' ? `Returned ${formatDate(book.returnedAt)}` : 'No longer active' }}
+                </p>
+              </div>
+            </div>
+            <UBadge
+              :color="book.status === 'returned' ? 'neutral' : 'warning'"
+              variant="subtle"
+            >
+              {{ book.status === 'returned' ? 'Returned' : 'Closed' }}
+            </UBadge>
+          </div>
+        </UCard>
+      </div>
+      <p
+        v-else
+        class="text-sm text-muted"
+      >
+        Returned books will stay here.
+      </p>
+    </section>
+  </div>
+</template>
diff --git a/app/components/LoanedOutLoansSection.vue b/app/components/LoanedOutLoansSection.vue
new file mode 100644
index 0000000..43be9ff
--- /dev/null
+++ b/app/components/LoanedOutLoansSection.vue
@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import type { OwnerLoan } from '~~/shared/types/book'
+
+const props = defineProps<{
+  loans: OwnerLoan[]
+  returningLoanId: string | null
+}>()
+
+const emit = defineEmits<{
+  returnLoan: [loan: OwnerLoan]
+}>()
+
+const activeLoans = computed(() => props.loans.filter(loan => loan.status === 'active'))
+const loanHistory = computed(() => props.loans.filter(loan => loan.status !== 'active'))
+
+function coverUrl(loan: OwnerLoan) {
+  return loan.book.coverPath ? `/api/blob/${loan.book.coverPath}` : null
+}
+
+function formatDate(value: Date | string | null): string | null {
+  if (!value) return null
+  const date = value instanceof Date ? value : new Date(value)
+  if (Number.isNaN(date.getTime())) return null
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  })
+}
+
+function borrowerLabel(loan: OwnerLoan) {
+  if (!loan.acceptedByName || loan.acceptedByName === loan.borrowerDisplayName) {
+    return loan.borrowerDisplayName
+  }
+  return `${loan.acceptedByName} · entered as ${loan.borrowerDisplayName}`
+}
+
+function openBook(loan: OwnerLoan) {
+  return navigateTo(`/library/${loan.userBookId}`)
+}
+</script>
+
+<template>
+  <UCard
+    v-if="loans.length === 0"
+    class="text-center py-12"
+  >
+    <UIcon
+      name="i-lucide-handshake"
+      class="text-6xl text-muted mx-auto mb-4"
+    />
+    <h2 class="text-xl font-semibold mb-2">
+      No loans yet
+    </h2>
+    <p class="text-muted">
+      Books you record as loaned out will appear here.
+    </p>
+  </UCard>
+
+  <div
+    v-else
+    class="space-y-8"
+  >
+    <section>
+      <h2 class="text-lg font-semibold mb-3">
+        Current
+      </h2>
+      <div
+        v-if="activeLoans.length > 0"
+        class="grid gap-4 md:grid-cols-2"
+      >
+        <UCard
+          v-for="loan in activeLoans"
+          :key="loan.id"
+          variant="subtle"
+          class="group cursor-pointer transition hover:ring-1 hover:ring-primary/30"
+          role="link"
+          tabindex="0"
+          :aria-label="`Open ${loan.book.title}`"
+          @click="openBook(loan)"
+          @keydown.enter.self.prevent.stop="openBook(loan)"
+          @keydown.space.self.prevent.stop="openBook(loan)"
+        >
+          <div class="flex gap-4">
+            <div class="shrink-0">
+              <NuxtImg
+                v-if="coverUrl(loan)"
+                :src="coverUrl(loan)!"
+                :alt="loan.book.title"
+                class="h-28 w-19 object-cover rounded"
+              />
+              <div
+                v-else
+                class="h-28 w-19 rounded bg-muted flex items-center justify-center"
+              >
+                <UIcon
+                  name="i-lucide-book"
+                  class="text-3xl text-muted"
+                />
+              </div>
+            </div>
+            <div class="min-w-0 flex-1">
+              <UBadge
+                color="warning"
+                variant="subtle"
+                class="mb-2"
+              >
+                Lent out
+              </UBadge>
+              <h3 class="font-semibold line-clamp-2 transition-colors group-hover:text-primary">
+                {{ loan.book.title }}
+              </h3>
+              <p class="text-sm text-muted line-clamp-1">
+                {{ loan.book.author }}
+              </p>
+              <p class="mt-2 text-sm text-muted">
+                {{ borrowerLabel(loan) }} · Lent {{ formatDate(loan.loanedAt) }}
+              </p>
+              <p
+                v-if="loan.dueAt"
+                class="text-sm text-muted"
+              >
+                Due {{ formatDate(loan.dueAt) }}
+              </p>
+              <UButton
+                class="mt-3"
+                color="neutral"
+                variant="outline"
+                size="sm"
+                icon="i-lucide-undo-2"
+                :loading="returningLoanId === loan.id"
+                :disabled="Boolean(returningLoanId)"
+                @click.stop="emit('returnLoan', loan)"
+              >
+                Mark returned
+              </UButton>
+            </div>
+          </div>
+        </UCard>
+      </div>
+      <p
+        v-else
+        class="text-sm text-muted"
+      >
+        No books are currently loaned out.
+      </p>
+    </section>
+
+    <section>
+      <h2 class="text-lg font-semibold mb-3">
+        History
+      </h2>
+      <div
+        v-if="loanHistory.length > 0"
+        class="space-y-3"
+      >
+        <UCard
+          v-for="loan in loanHistory"
+          :key="loan.id"
+          variant="subtle"
+          class="group cursor-pointer transition hover:ring-1 hover:ring-primary/30"
+          role="link"
+          tabindex="0"
+          :aria-label="`Open ${loan.book.title}`"
+          @click="openBook(loan)"
+          @keydown.enter.self.prevent.stop="openBook(loan)"
+          @keydown.space.self.prevent.stop="openBook(loan)"
+        >
+          <div class="flex items-center justify-between gap-4">
+            <div class="flex min-w-0 items-center gap-3">
+              <div class="shrink-0">
+                <NuxtImg
+                  v-if="coverUrl(loan)"
+                  :src="coverUrl(loan)!"
+                  :alt="loan.book.title"
+                  class="h-18 w-12 rounded object-cover"
+                />
+                <div
+                  v-else
+                  class="h-18 w-12 rounded bg-muted flex items-center justify-center"
+                >
+                  <UIcon
+                    name="i-lucide-book"
+                    class="text-xl text-muted"
+                  />
+                </div>
+              </div>
+              <div class="min-w-0">
+                <h3 class="font-semibold truncate transition-colors group-hover:text-primary">
+                  {{ loan.book.title }}
+                </h3>
+                <p class="text-sm text-muted truncate">
+                  {{ loan.book.author }} · {{ borrowerLabel(loan) }}
+                </p>
+                <p class="text-sm text-muted">
+                  {{ loan.status === 'returned' ? `Returned ${formatDate(loan.returnedAt)}` : 'Canceled' }}
+                </p>
+              </div>
+            </div>
+            <UBadge
+              :color="loan.status === 'returned' ? 'neutral' : 'warning'"
+              variant="subtle"
+            >
+              {{ loan.status === 'returned' ? 'Returned' : 'Canceled' }}
+            </UBadge>
+          </div>
+        </UCard>
+      </div>
+      <p
+        v-else
+        class="text-sm text-muted"
+      >
+        Returned books will stay here.
+      </p>
+    </section>
+  </div>
+</template>
diff --git a/app/pages/library/borrowed.vue b/app/pages/library/borrowed.vue
deleted file mode 100644
index 593da6b..0000000
--- a/app/pages/library/borrowed.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-await navigateTo('/library/loans', { replace: true })
-</script>
-
-<template>
-  <div />
-</template>
diff --git a/app/pages/library/loans.vue b/app/pages/library/loans.vue
index 68d6e6e..f798754 100644
--- a/app/pages/library/loans.vue
+++ b/app/pages/library/loans.vue
@@ -41,51 +41,8 @@ const { data: borrowedBooks, status: borrowedStatus } = await useFetch<BorrowedB
   default: () => []
 })
 
-const activeOwnerLoans = computed(() => ownerLoans.value.filter(loan => loan.status === 'active'))
-const ownerLoanHistory = computed(() => ownerLoans.value.filter(loan => loan.status !== 'active'))
-const activeBorrowedBooks = computed(() => borrowedBooks.value.filter(book => book.status === 'active'))
-const borrowedHistory = computed(() => borrowedBooks.value.filter(book => book.status !== 'active'))
 const isPending = computed(() => view.value === 'loaned' ? ownerStatus.value === 'pending' : borrowedStatus.value === 'pending')
 
-function loanCoverPath(item: OwnerLoan | BorrowedBook): string | null {
-  return 'book' in item ? item.book.coverPath : item.coverPath
-}
-
-function loanTitle(item: OwnerLoan | BorrowedBook): string {
-  return 'book' in item ? item.book.title : item.title
-}
-
-function loanAuthor(item: OwnerLoan | BorrowedBook): string {
-  return 'book' in item ? item.book.author : item.author
-}
-
-function coverUrl(item: OwnerLoan | BorrowedBook) {
-  const coverPath = loanCoverPath(item)
-  return coverPath ? `/api/blob/${coverPath}` : null
-}
-
-function formatDate(value: Date | string | null): string | null {
-  if (!value) return null
-  const date = value instanceof Date ? value : new Date(value)
-  if (Number.isNaN(date.getTime())) return null
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric'
-  })
-}
-
-function borrowerLabel(loan: OwnerLoan) {
-  if (!loan.acceptedByName || loan.acceptedByName === loan.borrowerDisplayName) {
-    return loan.borrowerDisplayName
-  }
-  return `${loan.acceptedByName} · entered as ${loan.borrowerDisplayName}`
-}
-
-function openOwnerBook(loan: OwnerLoan) {
-  return navigateTo(`/library/${loan.userBookId}`)
-}
-
 async function returnLoan(loan: OwnerLoan) {
   if (returningLoanId.value) return
 
@@ -163,327 +120,17 @@ async function returnLoan(loan: OwnerLoan) {
         />
       </div>
 
-      <template v-else-if="view === 'loaned'">
-        <UCard
-          v-if="ownerLoans.length === 0"
-          class="text-center py-12"
-        >
-          <UIcon
-            name="i-lucide-handshake"
-            class="text-6xl text-muted mx-auto mb-4"
-          />
-          <h2 class="text-xl font-semibold mb-2">
-            No loans yet
-          </h2>
-          <p class="text-muted">
-            Books you record as loaned out will appear here.
-          </p>
-        </UCard>
-
-        <div
-          v-else
-          class="space-y-8"
-        >
-          <section>
-            <h2 class="text-lg font-semibold mb-3">
-              Current
-            </h2>
-            <div
-              v-if="activeOwnerLoans.length > 0"
-              class="grid gap-4 md:grid-cols-2"
-            >
-              <UCard
-                v-for="loan in activeOwnerLoans"
-                :key="loan.id"
-                variant="subtle"
-                class="group cursor-pointer transition hover:ring-1 hover:ring-primary/30"
-                role="link"
-                tabindex="0"
-                :aria-label="`Open ${loanTitle(loan)}`"
-                @click="openOwnerBook(loan)"
-                @keydown.enter.self.prevent.stop="openOwnerBook(loan)"
-                @keydown.space.self.prevent.stop="openOwnerBook(loan)"
-              >
-                <div class="flex gap-4">
-                  <div class="shrink-0">
-                    <NuxtImg
-                      v-if="coverUrl(loan)"
-                      :src="coverUrl(loan)!"
-                      :alt="loanTitle(loan)"
-                      class="h-28 w-19 object-cover rounded"
-                    />
-                    <div
-                      v-else
-                      class="h-28 w-19 rounded bg-muted flex items-center justify-center"
-                    >
-                      <UIcon
-                        name="i-lucide-book"
-                        class="text-3xl text-muted"
-                      />
-                    </div>
-                  </div>
-                  <div class="min-w-0 flex-1">
-                    <UBadge
-                      color="warning"
-                      variant="subtle"
-                      class="mb-2"
-                    >
-                      Lent out
-                    </UBadge>
-                    <h3 class="font-semibold line-clamp-2 transition-colors group-hover:text-primary">
-                      {{ loanTitle(loan) }}
-                    </h3>
-                    <p class="text-sm text-muted line-clamp-1">
-                      {{ loanAuthor(loan) }}
-                    </p>
-                    <p class="mt-2 text-sm text-muted">
-                      {{ borrowerLabel(loan) }} · Lent {{ formatDate(loan.loanedAt) }}
-                    </p>
-                    <p
-                      v-if="loan.dueAt"
-                      class="text-sm text-muted"
-                    >
-                      Due {{ formatDate(loan.dueAt) }}
-                    </p>
-                    <UButton
-                      class="mt-3"
-                      color="neutral"
-                      variant="outline"
-                      size="sm"
-                      icon="i-lucide-undo-2"
-                      :loading="returningLoanId === loan.id"
-                      :disabled="Boolean(returningLoanId)"
-                      @click.stop="returnLoan(loan)"
-                    >
-                      Mark returned
-                    </UButton>
-                  </div>
-                </div>
-              </UCard>
-            </div>
-            <p
-              v-else
-              class="text-sm text-muted"
-            >
-              No books are currently loaned out.
-            </p>
-          </section>
-
-          <section>
-            <h2 class="text-lg font-semibold mb-3">
-              History
-            </h2>
-            <div
-              v-if="ownerLoanHistory.length > 0"
-              class="space-y-3"
-            >
-              <UCard
-                v-for="loan in ownerLoanHistory"
-                :key="loan.id"
-                variant="subtle"
-                class="group cursor-pointer transition hover:ring-1 hover:ring-primary/30"
-                role="link"
-                tabindex="0"
-                :aria-label="`Open ${loanTitle(loan)}`"
-                @click="openOwnerBook(loan)"
-                @keydown.enter.self.prevent.stop="openOwnerBook(loan)"
-                @keydown.space.self.prevent.stop="openOwnerBook(loan)"
-              >
-                <div class="flex items-center justify-between gap-4">
-                  <div class="flex min-w-0 items-center gap-3">
-                    <div class="shrink-0">
-                      <NuxtImg
-                        v-if="coverUrl(loan)"
-                        :src="coverUrl(loan)!"
-                        :alt="loanTitle(loan)"
-                        class="h-18 w-12 rounded object-cover"
-                      />
-                      <div
-                        v-else
-                        class="h-18 w-12 rounded bg-muted flex items-center justify-center"
-                      >
-                        <UIcon
-                          name="i-lucide-book"
-                          class="text-xl text-muted"
-                        />
-                      </div>
-                    </div>
-                    <div class="min-w-0">
-                      <h3 class="font-semibold truncate transition-colors group-hover:text-primary">
-                        {{ loanTitle(loan) }}
-                      </h3>
-                      <p class="text-sm text-muted truncate">
-                        {{ loanAuthor(loan) }} · {{ borrowerLabel(loan) }}
-                      </p>
-                      <p class="text-sm text-muted">
-                        {{ loan.status === 'returned' ? `Returned ${formatDate(loan.returnedAt)}` : 'Canceled' }}
-                      </p>
-                    </div>
-                  </div>
-                  <UBadge
-                    :color="loan.status === 'returned' ? 'neutral' : 'warning'"
-                    variant="subtle"
-                  >
-                    {{ loan.status === 'returned' ? 'Returned' : 'Canceled' }}
-                  </UBadge>
-                </div>
-              </UCard>
-            </div>
-            <p
-              v-else
-              class="text-sm text-muted"
-            >
-              Returned books will stay here.
-            </p>
-          </section>
-        </div>
-      </template>
-
-      <template v-else>
-        <UCard
-          v-if="borrowedBooks.length === 0"
-          class="text-center py-12"
-        >
-          <UIcon
-            name="i-lucide-book-user"
-            class="text-6xl text-muted mx-auto mb-4"
-          />
-          <h2 class="text-xl font-semibold mb-2">
-            No borrowed books yet
-          </h2>
-          <p class="text-muted">
-            Accepted books will appear here.
-          </p>
-        </UCard>
-
-        <div
-          v-else
-          class="space-y-8"
-        >
-          <section>
-            <h2 class="text-lg font-semibold mb-3">
-              Current
-            </h2>
-            <div
-              v-if="activeBorrowedBooks.length > 0"
-              class="grid gap-4 md:grid-cols-2"
-            >
-              <UCard
-                v-for="book in activeBorrowedBooks"
-                :key="book.id"
-                variant="subtle"
-              >
-                <div class="flex gap-4">
-                  <NuxtImg
-                    v-if="coverUrl(book)"
-                    :src="coverUrl(book)!"
-                    :alt="loanTitle(book)"
-                    class="h-28 w-19 object-cover rounded"
-                  />
-                  <div
-                    v-else
-                    class="h-28 w-19 rounded bg-muted flex items-center justify-center"
-                  >
-                    <UIcon
-                      name="i-lucide-book"
-                      class="text-3xl text-muted"
-                    />
-                  </div>
-                  <div class="min-w-0 flex-1">
-                    <UBadge
-                      color="success"
-                      variant="subtle"
-                      class="mb-2"
-                    >
-                      With you
-                    </UBadge>
-                    <h3 class="font-semibold line-clamp-2">
-                      {{ loanTitle(book) }}
-                    </h3>
-                    <p class="text-sm text-muted line-clamp-1">
-                      {{ loanAuthor(book) }}
-                    </p>
-                    <p class="mt-2 text-sm text-muted">
-                      Lent by {{ book.ownerName }} · {{ formatDate(book.loanedAt) }}
-                    </p>
-                    <p
-                      v-if="book.dueAt"
-                      class="text-sm text-muted"
-                    >
-                      Due {{ formatDate(book.dueAt) }}
-                    </p>
-                  </div>
-                </div>
-              </UCard>
-            </div>
-            <p
-              v-else
-              class="text-sm text-muted"
-            >
-              Nothing currently with you.
-            </p>
-          </section>
-
-          <section>
-            <h2 class="text-lg font-semibold mb-3">
-              History
-            </h2>
-            <div
-              v-if="borrowedHistory.length > 0"
-              class="space-y-3"
-            >
-              <UCard
-                v-for="book in borrowedHistory"
-                :key="book.id"
-                variant="subtle"
-              >
-                <div class="flex items-center justify-between gap-4">
-                  <div class="flex min-w-0 items-center gap-3">
-                    <NuxtImg
-                      v-if="coverUrl(book)"
-                      :src="coverUrl(book)!"
-                      :alt="loanTitle(book)"
-                      class="h-18 w-12 shrink-0 rounded object-cover"
-                    />
-                    <div
-                      v-else
-                      class="h-18 w-12 shrink-0 rounded bg-muted flex items-center justify-center"
-                    >
-                      <UIcon
-                        name="i-lucide-book"
-                        class="text-xl text-muted"
-                      />
-                    </div>
-                    <div class="min-w-0">
-                      <h3 class="font-semibold truncate">
-                        {{ loanTitle(book) }}
-                      </h3>
-                      <p class="text-sm text-muted truncate">
-                        {{ loanAuthor(book) }} · Lent by {{ book.ownerName }}
-                      </p>
-                      <p class="text-sm text-muted">
-                        {{ book.status === 'returned' ? `Returned ${formatDate(book.returnedAt)}` : 'No longer active' }}
-                      </p>
-                    </div>
-                  </div>
-                  <UBadge
-                    :color="book.status === 'returned' ? 'neutral' : 'warning'"
-                    variant="subtle"
-                  >
-                    {{ book.status === 'returned' ? 'Returned' : 'Closed' }}
-                  </UBadge>
-                </div>
-              </UCard>
-            </div>
-            <p
-              v-else
-              class="text-sm text-muted"
-            >
-              Returned books will stay here.
-            </p>
-          </section>
-        </div>
-      </template>
+      <LoanedOutLoansSection
+        v-else-if="view === 'loaned'"
+        :loans="ownerLoans"
+        :returning-loan-id="returningLoanId"
+        @return-loan="returnLoan"
+      />
+
+      <BorrowedLoansSection
+        v-else
+        :books="borrowedBooks"
+      />
     </UPageBody>
   </UContainer>
 </template>
diff --git a/server/db/migrations/sqlite/0012_remove_loan_owner_note.sql b/server/db/migrations/sqlite/0012_remove_loan_owner_note.sql
new file mode 100644
index 0000000..0b25f5c
--- /dev/null
+++ b/server/db/migrations/sqlite/0012_remove_loan_owner_note.sql
@@ -0,0 +1 @@
+ALTER TABLE `loans` DROP COLUMN `owner_note`;
diff --git a/server/db/migrations/sqlite/meta/_journal.json b/server/db/migrations/sqlite/meta/_journal.json
index 188a362..3328a4a 100644
--- a/server/db/migrations/sqlite/meta/_journal.json
+++ b/server/db/migrations/sqlite/meta/_journal.json
@@ -85,6 +85,13 @@
       "when": 1779235200000,
       "tag": "0011_lending_unique_indexes",
       "breakpoints": true
+    },
+    {
+      "idx": 12,
+      "version": "6",
+      "when": 1779559200000,
+      "tag": "0012_remove_loan_owner_note",
+      "breakpoints": true
     }
   ]
 }
diff --git a/server/db/schema/domain.ts b/server/db/schema/domain.ts
index 82ec654..f2bf934 100644
--- a/server/db/schema/domain.ts
+++ b/server/db/schema/domain.ts
@@ -119,7 +119,6 @@ export const loans = sqliteTable('loans', {
   dueAt: integer('due_at', { mode: 'timestamp' }),
   returnedAt: integer('returned_at', { mode: 'timestamp' }),
   canceledAt: integer('canceled_at', { mode: 'timestamp' }),
-  ownerNote: text('owner_note'),
   snapshotBookTitle: text('snapshot_book_title').notNull(),
   snapshotBookAuthor: text('snapshot_book_author').notNull(),
   snapshotCoverPath: text('snapshot_cover_path'),
diff --git a/server/repositories/lending.repository.ts b/server/repositories/lending.repository.ts
index 8677ea4..a677585 100644
--- a/server/repositories/lending.repository.ts
+++ b/server/repositories/lending.repository.ts
@@ -25,7 +25,6 @@ export interface LoanCreateInput {
   borrowerDisplayName: string
   borrowerEmail: string | null
   dueAt: Date | null
-  ownerNote: string | null
   acceptTokenHash: string
 }
 
@@ -174,7 +173,6 @@ export const LendingRepositoryLive = Layer.effect(
             dueAt: input.dueAt,
             returnedAt: null,
             canceledAt: null,
-            ownerNote: input.ownerNote,
             snapshotBookTitle: snapshot.title,
             snapshotBookAuthor: snapshot.author,
             snapshotCoverPath: snapshot.coverPath,
@@ -285,7 +283,6 @@ export const LendingRepositoryLive = Layer.effect(
                 dueAt: loans.dueAt,
                 returnedAt: loans.returnedAt,
                 canceledAt: loans.canceledAt,
-                ownerNote: loans.ownerNote,
                 snapshotBookTitle: loans.snapshotBookTitle,
                 snapshotBookAuthor: loans.snapshotBookAuthor,
                 snapshotCoverPath: loans.snapshotCoverPath,
diff --git a/server/services/lending.service.ts b/server/services/lending.service.ts
index f23e147..4ea17f4 100644
--- a/server/services/lending.service.ts
+++ b/server/services/lending.service.ts
@@ -8,7 +8,6 @@ interface CreateLoanInput {
   borrowerDisplayName: string
   borrowerEmail?: string | null
   dueAt?: Date | null
-  ownerNote?: string | null
 }
 
 interface CreateLoanResult {
@@ -66,7 +65,6 @@ export const LendingServiceLive = Layer.effect(
             borrowerDisplayName: input.borrowerDisplayName,
             borrowerEmail: input.borrowerEmail ?? null,
             dueAt: input.dueAt ?? null,
-            ownerNote: input.ownerNote ?? null,
             acceptTokenHash
           })
 
diff --git a/shared/utils/schemas.ts b/shared/utils/schemas.ts
index 2fb312c..8514089 100644
--- a/shared/utils/schemas.ts
+++ b/shared/utils/schemas.ts
@@ -220,15 +220,6 @@ export const bookReadingProgressSchema = z.object({
 
 export type BookReadingProgressSchema = z.infer<typeof bookReadingProgressSchema>
 
-const optionalTrimmedString = z.preprocess(
-  (val) => {
-    if (typeof val !== 'string') return val
-    const trimmed = val.trim()
-    return trimmed === '' ? null : trimmed
-  },
-  z.string().nullable().optional()
-)
-
 export const createLoanSchema = z.object({
   borrowerDisplayName: z.string({ error: 'Borrower name is required' })
     .trim()
@@ -242,8 +233,7 @@ export const createLoanSchema = z.object({
     },
     z.email({ error: 'Borrower email must be valid' }).nullable().optional()
   ),
-  dueAt: localNullableDateSchema,
-  ownerNote: optionalTrimmedString
+  dueAt: localNullableDateSchema
 }).refine((value) => {
   if (!value.dueAt) return true
   return toLocalDateKey(value.dueAt) >= toLocalDateKey(new Date())
diff --git a/test/unit/server/api/books/[id]/loans/index.post.test.ts b/test/unit/server/api/books/[id]/loans/index.post.test.ts
index 938467a..9b78ee9 100644
--- a/test/unit/server/api/books/[id]/loans/index.post.test.ts
+++ b/test/unit/server/api/books/[id]/loans/index.post.test.ts
@@ -42,13 +42,12 @@ describe('server/api/books/[id]/loans/index.post', () => {
 
     await expect(handler(makeEvent({
       params: { id: 'ub-1' },
-      body: { borrowerDisplayName: 'Grace', borrowerEmail: '', dueAt: null, ownerNote: '' }
+      body: { borrowerDisplayName: 'Grace', borrowerEmail: '', dueAt: null }
     }))).resolves.toEqual(result)
     expect(serviceMocks.createLoanForBook).toHaveBeenCalledWith('ub-1', 'user-1', {
       borrowerDisplayName: 'Grace',
       borrowerEmail: null,
-      dueAt: null,
-      ownerNote: null
+      dueAt: null
     })
   })
 

From 3443caec771fdb3c6d4ce2948bd28b3bba953e8d Mon Sep 17 00:00:00 2001
From: niklhut <49069026+niklhut@users.noreply.github.com>
Date: Sat, 23 May 2026 18:43:41 -0400
Subject: [PATCH 7/8] fix: guard returned labels against missing dates

---
 app/components/BorrowedLoansSection.vue  | 7 ++++++-
 app/components/LoanedOutLoansSection.vue | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/components/BorrowedLoansSection.vue b/app/components/BorrowedLoansSection.vue
index 99dc193..9822d1f 100644
--- a/app/components/BorrowedLoansSection.vue
+++ b/app/components/BorrowedLoansSection.vue
@@ -22,6 +22,11 @@ function formatDate(value: Date | string | null): string | null {
     day: 'numeric'
   })
 }
+
+function returnedLabel(value: Date | string | null): string {
+  const formatted = formatDate(value)
+  return formatted ? `Returned ${formatted}` : 'Returned'
+}
 </script>
 
 <template>
@@ -147,7 +152,7 @@ function formatDate(value: Date | string | null): string | null {
                   {{ book.author }} · Lent by {{ book.ownerName }}
                 </p>
                 <p class="text-sm text-muted">
-                  {{ book.status === 'returned' ? `Returned ${formatDate(book.returnedAt)}` : 'No longer active' }}
+                  {{ book.status === 'returned' ? returnedLabel(book.returnedAt) : 'No longer active' }}
                 </p>
               </div>
             </div>
diff --git a/app/components/LoanedOutLoansSection.vue b/app/components/LoanedOutLoansSection.vue
index 43be9ff..d37beec 100644
--- a/app/components/LoanedOutLoansSection.vue
+++ b/app/components/LoanedOutLoansSection.vue
@@ -28,6 +28,11 @@ function formatDate(value: Date | string | null): string | null {
   })
 }
 
+function returnedLabel(value: Date | string | null): string {
+  const formatted = formatDate(value)
+  return formatted ? `Returned ${formatted}` : 'Returned'
+}
+
 function borrowerLabel(loan: OwnerLoan) {
   if (!loan.acceptedByName || loan.acceptedByName === loan.borrowerDisplayName) {
     return loan.borrowerDisplayName
@@ -193,7 +198,7 @@ function openBook(loan: OwnerLoan) {
                   {{ loan.book.author }} · {{ borrowerLabel(loan) }}
                 </p>
                 <p class="text-sm text-muted">
-                  {{ loan.status === 'returned' ? `Returned ${formatDate(loan.returnedAt)}` : 'Canceled' }}
+                  {{ loan.status === 'returned' ? returnedLabel(loan.returnedAt) : 'Canceled' }}
                 </p>
               </div>
             </div>

From 6e6bdcfbdfa000af54a917f8e764a63450635ec1 Mon Sep 17 00:00:00 2001
From: niklhut <49069026+niklhut@users.noreply.github.com>
Date: Sun, 24 May 2026 21:13:17 -0400
Subject: [PATCH 8/8] refactor: share loan date helpers

---
 app/components/BorrowedLoansSection.vue  | 17 +----------------
 app/components/LoanedOutLoansSection.vue | 17 +----------------
 app/utils/loan-date-helpers.ts           | 15 +++++++++++++++
 3 files changed, 17 insertions(+), 32 deletions(-)
 create mode 100644 app/utils/loan-date-helpers.ts

diff --git a/app/components/BorrowedLoansSection.vue b/app/components/BorrowedLoansSection.vue
index 9822d1f..03a9fc3 100644
--- a/app/components/BorrowedLoansSection.vue
+++ b/app/components/BorrowedLoansSection.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { BorrowedBook } from '~~/shared/types/book'
+import { formatDate, returnedLabel } from '~/utils/loan-date-helpers'
 
 const props = defineProps<{
   books: BorrowedBook[]
@@ -11,22 +12,6 @@ const bookHistory = computed(() => props.books.filter(book => book.status !== 'a
 function coverUrl(book: BorrowedBook) {
   return book.coverPath ? `/api/blob/${book.coverPath}` : null
 }
-
-function formatDate(value: Date | string | null): string | null {
-  if (!value) return null
-  const date = value instanceof Date ? value : new Date(value)
-  if (Number.isNaN(date.getTime())) return null
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric'
-  })
-}
-
-function returnedLabel(value: Date | string | null): string {
-  const formatted = formatDate(value)
-  return formatted ? `Returned ${formatted}` : 'Returned'
-}
 </script>
 
 <template>
diff --git a/app/components/LoanedOutLoansSection.vue b/app/components/LoanedOutLoansSection.vue
index d37beec..7cf3d8c 100644
--- a/app/components/LoanedOutLoansSection.vue
+++ b/app/components/LoanedOutLoansSection.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { OwnerLoan } from '~~/shared/types/book'
+import { formatDate, returnedLabel } from '~/utils/loan-date-helpers'
 
 const props = defineProps<{
   loans: OwnerLoan[]
@@ -17,22 +18,6 @@ function coverUrl(loan: OwnerLoan) {
   return loan.book.coverPath ? `/api/blob/${loan.book.coverPath}` : null
 }
 
-function formatDate(value: Date | string | null): string | null {
-  if (!value) return null
-  const date = value instanceof Date ? value : new Date(value)
-  if (Number.isNaN(date.getTime())) return null
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric'
-  })
-}
-
-function returnedLabel(value: Date | string | null): string {
-  const formatted = formatDate(value)
-  return formatted ? `Returned ${formatted}` : 'Returned'
-}
-
 function borrowerLabel(loan: OwnerLoan) {
   if (!loan.acceptedByName || loan.acceptedByName === loan.borrowerDisplayName) {
     return loan.borrowerDisplayName
diff --git a/app/utils/loan-date-helpers.ts b/app/utils/loan-date-helpers.ts
new file mode 100644
index 0000000..94a207f
--- /dev/null
+++ b/app/utils/loan-date-helpers.ts
@@ -0,0 +1,15 @@
+export function formatDate(value: Date | string | null): string | null {
+  if (!value) return null
+  const date = value instanceof Date ? value : new Date(value)
+  if (Number.isNaN(date.getTime())) return null
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  })
+}
+
+export function returnedLabel(value: Date | string | null): string {
+  const formatted = formatDate(value)
+  return formatted ? `Returned ${formatted}` : 'Returned'
+}