From 3b09ab6be5970d97915ba35ce4bd2d39bea1e4d2 Mon Sep 17 00:00:00 2001
From: Marley <marleyrae1997@gmail.com>
Date: Sat, 15 Jul 2023 14:02:49 -0700
Subject: [PATCH] Start patrons/[id]

---
 frontend/app.vue                      |  22 +-
 frontend/components/Table/TableTh.vue |   8 +-
 frontend/package-lock.json            | 602 +-------------------------
 frontend/package.json                 |   4 +-
 frontend/pages/medias/index.vue       |   2 +-
 frontend/pages/patrons/[id].vue       |  70 +++
 frontend/pages/patrons/index.vue      |   2 +-
 7 files changed, 95 insertions(+), 615 deletions(-)
 create mode 100644 frontend/pages/patrons/[id].vue

diff --git a/frontend/app.vue b/frontend/app.vue
index 6cd33d1..14fb922 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -2,7 +2,9 @@
   <div class="page">
 
     <header>
-      <h1><NuxtLink to="/">Bibliothecary</NuxtLink></h1>
+      <h1>
+        <NuxtLink to="/">Bibliothecary</NuxtLink>
+      </h1>
 
       <nav>
         <NuxtLink to="/patrons">Patrons</NuxtLink>
@@ -43,11 +45,11 @@ header {
 }
 
 main {
-  @apply grow flex justify-center;
+  @apply grow flex justify-center gap-x-5;
 }
 
 section {
-  @apply p-4;
+  @apply py-4 px-5;
 }
 
 footer {
@@ -60,11 +62,14 @@ nav a {
   @apply opacity-70;
 }
 
-h1,
-h2 {
+h1 {
   @apply text-2xl uppercase italic font-bold;
 }
 
+h2 {
+  @apply text-xl font-bold;
+}
+
 header h1 {
   @apply tracking-wide;
   @apply transition-[letter-spacing] hover:tracking-widest;
@@ -81,6 +86,11 @@ main a {
 }
 
 p {
-  @apply mb-2;
+  @apply mb-2 last:mb-0;
+}
+
+hr {
+  @apply border-pink-400/40;
+  @apply mt-2 mb-3;
 }
 </style>
diff --git a/frontend/components/Table/TableTh.vue b/frontend/components/Table/TableTh.vue
index 85ffed1..d0c6874 100644
--- a/frontend/components/Table/TableTh.vue
+++ b/frontend/components/Table/TableTh.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
-defineProps<{actions?: boolean}>()
+defineProps<{ actions?: boolean }>()
 </script>
 
 <template>
-  <th :class="{actions: actions}"><slot /></th>
+  <th :class="{actions: actions}">
+    <slot />
+  </th>
 </template>
 
 <style lang="postcss">
 th {
-  @apply py-3.5 px-3;
+  @apply pb-3.5 px-3;
   @apply font-bold text-left;
 
   @apply first-of-type:ps-0;
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7c4cb5a..be6914d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,15 +13,13 @@
         "@types/node": "^18",
         "@typescript-eslint/eslint-plugin": "^5.59.7",
         "@typescript-eslint/parser": "^5.59.7",
-        "@vue/test-utils": "^2.3.2",
         "@vueuse/core": "^10.2.1",
         "@vueuse/nuxt": "^10.2.1",
         "eslint": "^8.41.0",
         "eslint-plugin-vue": "^9.14.0",
         "nuxt": "^3.5.1",
         "nuxt-typed-router": "^3.2.2",
-        "typescript": "^5.0.4",
-        "vitest": "^0.31.1"
+        "typescript": "^5.0.4"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -2304,21 +2302,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/@types/chai": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.5.tgz",
-      "integrity": "sha512-mEo1sAde+UCE6b2hxn332f1g1E8WfYRu6p5SvTKr2ZKC1f7gFJXk4h5PyGP9Dt6gCaG8y8XhwnXWC6Iy2cmBng==",
-      "dev": true
-    },
-    "node_modules/@types/chai-subset": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@types/chai-subset/-/chai-subset-1.3.3.tgz",
-      "integrity": "sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==",
-      "dev": true,
-      "dependencies": {
-        "@types/chai": "*"
-      }
-    },
     "node_modules/@types/eslint": {
       "version": "8.37.0",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.37.0.tgz",
@@ -2795,102 +2778,6 @@
         "vue": "^3.0.0"
       }
     },
-    "node_modules/@vitest/expect": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.31.1.tgz",
-      "integrity": "sha512-BV1LyNvhnX+eNYzJxlHIGPWZpwJFZaCcOIzp2CNG0P+bbetenTupk6EO0LANm4QFt0TTit+yqx7Rxd1qxi/SQA==",
-      "dev": true,
-      "dependencies": {
-        "@vitest/spy": "0.31.1",
-        "@vitest/utils": "0.31.1",
-        "chai": "^4.3.7"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
-    "node_modules/@vitest/runner": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-0.31.1.tgz",
-      "integrity": "sha512-imWuc82ngOtxdCUpXwtEzZIuc1KMr+VlQ3Ondph45VhWoQWit5yvG/fFcldbnCi8DUuFi+NmNx5ehMUw/cGLUw==",
-      "dev": true,
-      "dependencies": {
-        "@vitest/utils": "0.31.1",
-        "concordance": "^5.0.4",
-        "p-limit": "^4.0.0",
-        "pathe": "^1.1.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
-    "node_modules/@vitest/runner/node_modules/p-limit": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
-      "integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==",
-      "dev": true,
-      "dependencies": {
-        "yocto-queue": "^1.0.0"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@vitest/runner/node_modules/yocto-queue": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz",
-      "integrity": "sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==",
-      "dev": true,
-      "engines": {
-        "node": ">=12.20"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@vitest/snapshot": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-0.31.1.tgz",
-      "integrity": "sha512-L3w5uU9bMe6asrNzJ8WZzN+jUTX4KSgCinEJPXyny0o90fG4FPQMV0OWsq7vrCWfQlAilMjDnOF9nP8lidsJ+g==",
-      "dev": true,
-      "dependencies": {
-        "magic-string": "^0.30.0",
-        "pathe": "^1.1.0",
-        "pretty-format": "^27.5.1"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
-    "node_modules/@vitest/spy": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-0.31.1.tgz",
-      "integrity": "sha512-1cTpt2m9mdo3hRLDyCG2hDQvRrePTDgEJBFQQNz1ydHHZy03EiA6EpFxY+7ODaY7vMRCie+WlFZBZ0/dQWyssQ==",
-      "dev": true,
-      "dependencies": {
-        "tinyspy": "^2.1.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
-    "node_modules/@vitest/utils": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-0.31.1.tgz",
-      "integrity": "sha512-yFyRD5ilwojsZfo3E0BnH72pSVSuLg2356cN1tCEe/0RtDzxTPYwOomIC+eQbot7m6DRy4tPZw+09mB7NkbMmA==",
-      "dev": true,
-      "dependencies": {
-        "concordance": "^5.0.4",
-        "loupe": "^2.3.6",
-        "pretty-format": "^27.5.1"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
     "node_modules/@vue-macros/common": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-1.3.1.tgz",
@@ -3077,24 +2964,6 @@
       "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==",
       "dev": true
     },
-    "node_modules/@vue/test-utils": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.3.2.tgz",
-      "integrity": "sha512-hJnVaYhbrIm0yBS0+e1Y0Sj85cMyAi+PAbK4JHqMRUZ6S622Goa+G7QzkRSyvCteG8wop7tipuEbHoZo26wsSA==",
-      "dev": true,
-      "dependencies": {
-        "js-beautify": "1.14.6"
-      },
-      "optionalDependencies": {
-        "@vue/compiler-dom": "^3.0.1",
-        "@vue/server-renderer": "^3.0.1"
-      },
-      "peerDependencies": {
-        "@vue/compiler-dom": "^3.0.1",
-        "@vue/server-renderer": "^3.0.1",
-        "vue": "^3.0.1"
-      }
-    },
     "node_modules/@vueuse/core": {
       "version": "10.2.1",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.2.1.tgz",
@@ -3454,15 +3323,6 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/acorn-walk": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
-      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -3750,15 +3610,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/assertion-error": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
-      "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/ast-walker-scope": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/ast-walker-scope/-/ast-walker-scope-0.4.1.tgz",
@@ -3890,12 +3741,6 @@
         "readable-stream": "^3.4.0"
       }
     },
-    "node_modules/blueimp-md5": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.19.0.tgz",
-      "integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==",
-      "dev": true
-    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -4123,24 +3968,6 @@
         }
       ]
     },
-    "node_modules/chai": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.7.tgz",
-      "integrity": "sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==",
-      "dev": true,
-      "dependencies": {
-        "assertion-error": "^1.1.0",
-        "check-error": "^1.0.2",
-        "deep-eql": "^4.1.2",
-        "get-func-name": "^2.0.0",
-        "loupe": "^2.3.1",
-        "pathval": "^1.1.1",
-        "type-detect": "^4.0.5"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/chalk": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
@@ -4153,15 +3980,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/check-error": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
-      "integrity": "sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -4399,35 +4217,6 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
-    "node_modules/concordance": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/concordance/-/concordance-5.0.4.tgz",
-      "integrity": "sha512-OAcsnTEYu1ARJqWVGwf4zh4JDfHZEaSNlNccFmt8YjB2l/n19/PF2viLINHc57vO4FKIAFl2FWASIGZZWZ2Kxw==",
-      "dev": true,
-      "dependencies": {
-        "date-time": "^3.1.0",
-        "esutils": "^2.0.3",
-        "fast-diff": "^1.2.0",
-        "js-string-escape": "^1.0.1",
-        "lodash": "^4.17.15",
-        "md5-hex": "^3.0.1",
-        "semver": "^7.3.2",
-        "well-known-symbols": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10.18.0 <11 || >=12.14.0 <13 || >=14"
-      }
-    },
-    "node_modules/config-chain": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
-      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
-      "dev": true,
-      "dependencies": {
-        "ini": "^1.3.4",
-        "proto-list": "~1.2.1"
-      }
-    },
     "node_modules/consola": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/consola/-/consola-3.2.3.tgz",
@@ -4787,18 +4576,6 @@
         "node": ">= 12"
       }
     },
-    "node_modules/date-time": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/date-time/-/date-time-3.1.0.tgz",
-      "integrity": "sha512-uqCUKXE5q1PNBXjPqvwhwJf9SwMoAHBgWJ6DcrnS5o+W2JOiIILl0JEdVD8SGujrNS02GGxgwAg2PN2zONgtjg==",
-      "dev": true,
-      "dependencies": {
-        "time-zone": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -4816,18 +4593,6 @@
         }
       }
     },
-    "node_modules/deep-eql": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz",
-      "integrity": "sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==",
-      "dev": true,
-      "dependencies": {
-        "type-detect": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/deep-equal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
@@ -5043,52 +4808,6 @@
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
       "dev": true
     },
-    "node_modules/editorconfig": {
-      "version": "0.15.3",
-      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
-      "integrity": "sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==",
-      "dev": true,
-      "dependencies": {
-        "commander": "^2.19.0",
-        "lru-cache": "^4.1.5",
-        "semver": "^5.6.0",
-        "sigmund": "^1.0.1"
-      },
-      "bin": {
-        "editorconfig": "bin/editorconfig"
-      }
-    },
-    "node_modules/editorconfig/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
-    },
-    "node_modules/editorconfig/node_modules/lru-cache": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-      "dev": true,
-      "dependencies": {
-        "pseudomap": "^1.0.2",
-        "yallist": "^2.1.2"
-      }
-    },
-    "node_modules/editorconfig/node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
-    "node_modules/editorconfig/node_modules/yallist": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
-      "dev": true
-    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -5660,12 +5379,6 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
-    "node_modules/fast-diff": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
-      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
-      "dev": true
-    },
     "node_modules/fast-glob": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.0.tgz",
@@ -5968,15 +5681,6 @@
         "node": "6.* || 8.* || >= 10.*"
       }
     },
-    "node_modules/get-func-name": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
-      "integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/get-port-please": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/get-port-please/-/get-port-please-3.0.1.tgz",
@@ -6801,50 +6505,6 @@
         "jiti": "bin/jiti.js"
       }
     },
-    "node_modules/js-beautify": {
-      "version": "1.14.6",
-      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.6.tgz",
-      "integrity": "sha512-GfofQY5zDp+cuHc+gsEXKPpNw2KbPddreEo35O6jT6i0RVK6LhsoYBhq5TvK4/n74wnA0QbK8gGd+jUZwTMKJw==",
-      "dev": true,
-      "dependencies": {
-        "config-chain": "^1.1.13",
-        "editorconfig": "^0.15.3",
-        "glob": "^8.0.3",
-        "nopt": "^6.0.0"
-      },
-      "bin": {
-        "css-beautify": "js/bin/css-beautify.js",
-        "html-beautify": "js/bin/html-beautify.js",
-        "js-beautify": "js/bin/js-beautify.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/js-beautify/node_modules/nopt": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz",
-      "integrity": "sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==",
-      "dev": true,
-      "dependencies": {
-        "abbrev": "^1.0.0"
-      },
-      "bin": {
-        "nopt": "bin/nopt.js"
-      },
-      "engines": {
-        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
-      }
-    },
-    "node_modules/js-string-escape": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz",
-      "integrity": "sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -7331,15 +6991,6 @@
       "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
       "dev": true
     },
-    "node_modules/loupe": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.6.tgz",
-      "integrity": "sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==",
-      "dev": true,
-      "dependencies": {
-        "get-func-name": "^2.0.0"
-      }
-    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -7397,18 +7048,6 @@
         "semver": "bin/semver.js"
       }
     },
-    "node_modules/md5-hex": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/md5-hex/-/md5-hex-3.0.1.tgz",
-      "integrity": "sha512-BUiRtTtV39LIJwinWBjqVsU9xhdnz7/i889V859IBFpuqGAj6LuOvHv5XLbgZ2R7ptJoJaEcxkv88/h25T7Ciw==",
-      "dev": true,
-      "dependencies": {
-        "blueimp-md5": "^2.10.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/mdn-data": {
       "version": "2.0.30",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
@@ -9301,15 +8940,6 @@
       "integrity": "sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==",
       "dev": true
     },
-    "node_modules/pathval": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
-      "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/perfect-debounce": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
@@ -10208,32 +9838,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/pretty-format": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
-      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.1",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^17.0.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/pretty-format/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -10253,12 +9857,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/proto-list": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
-      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
-      "dev": true
-    },
     "node_modules/protocols": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/protocols/-/protocols-2.0.1.tgz",
@@ -10271,12 +9869,6 @@
       "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
       "dev": true
     },
-    "node_modules/pseudomap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-      "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==",
-      "dev": true
-    },
     "node_modules/punycode": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@@ -10347,12 +9939,6 @@
       "integrity": "sha512-FJ9RDpf3GicEBvzI3jxc2XhHzbqD8p4ANw/1kPsFBfTvP1b7Gn/Lg1vO7R9J4IVgoMbyUmFrFGZafJ1hPZpvlg==",
       "dev": true
     },
-    "node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
-    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -10945,18 +10531,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/siginfo": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
-      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
-      "dev": true
-    },
-    "node_modules/sigmund": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
-      "integrity": "sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g==",
-      "dev": true
-    },
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -11024,12 +10598,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/stackback": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
-      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
-      "dev": true
-    },
     "node_modules/standard-as-callback": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/standard-as-callback/-/standard-as-callback-2.1.0.tgz",
@@ -11536,45 +11104,12 @@
         "node": ">=0.8"
       }
     },
-    "node_modules/time-zone": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/time-zone/-/time-zone-1.0.0.tgz",
-      "integrity": "sha512-TIsDdtKo6+XrPtiTm1ssmMngN1sAhyKnTO2kunQWqNPWIVvCm15Wmw4SWInwTVgJ5u/Tr04+8Ei9TNcw4x4ONA==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/tiny-invariant": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
       "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
       "dev": true
     },
-    "node_modules/tinybench": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.5.0.tgz",
-      "integrity": "sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA==",
-      "dev": true
-    },
-    "node_modules/tinypool": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.5.0.tgz",
-      "integrity": "sha512-paHQtnrlS1QZYKF/GnLoOM/DN9fqaGOFbCbxzAhwniySnzl9Ebk8w73/dd34DAhe/obUbPAOldTyYXQZxnPBPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/tinyspy": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.1.0.tgz",
-      "integrity": "sha512-7eORpyqImoOvkQJCSkL0d0mB4NHHIFAy4b1u8PHdDa7SjGS2njzl6/lyGoZLm+eyYEtlUmFGE0rFj66SWxZgQQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -11659,15 +11194,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/type-detect": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
-      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/type-fest": {
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
@@ -12051,29 +11577,6 @@
         }
       }
     },
-    "node_modules/vite-node": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-0.31.1.tgz",
-      "integrity": "sha512-BajE/IsNQ6JyizPzu9zRgHrBwczkAs0erQf/JRpgTIESpKvNj9/Gd0vxX905klLkb0I0SJVCKbdrl5c6FnqYKA==",
-      "dev": true,
-      "dependencies": {
-        "cac": "^6.7.14",
-        "debug": "^4.3.4",
-        "mlly": "^1.2.0",
-        "pathe": "^1.1.0",
-        "picocolors": "^1.0.0",
-        "vite": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "vite-node": "vite-node.mjs"
-      },
-      "engines": {
-        "node": ">=v14.18.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
     "node_modules/vite-plugin-checker": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/vite-plugin-checker/-/vite-plugin-checker-0.6.1.tgz",
@@ -12185,84 +11688,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/vitest": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.31.1.tgz",
-      "integrity": "sha512-/dOoOgzoFk/5pTvg1E65WVaobknWREN15+HF+0ucudo3dDG/vCZoXTQrjIfEaWvQXmqScwkRodrTbM/ScMpRcQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/chai": "^4.3.5",
-        "@types/chai-subset": "^1.3.3",
-        "@types/node": "*",
-        "@vitest/expect": "0.31.1",
-        "@vitest/runner": "0.31.1",
-        "@vitest/snapshot": "0.31.1",
-        "@vitest/spy": "0.31.1",
-        "@vitest/utils": "0.31.1",
-        "acorn": "^8.8.2",
-        "acorn-walk": "^8.2.0",
-        "cac": "^6.7.14",
-        "chai": "^4.3.7",
-        "concordance": "^5.0.4",
-        "debug": "^4.3.4",
-        "local-pkg": "^0.4.3",
-        "magic-string": "^0.30.0",
-        "pathe": "^1.1.0",
-        "picocolors": "^1.0.0",
-        "std-env": "^3.3.2",
-        "strip-literal": "^1.0.1",
-        "tinybench": "^2.5.0",
-        "tinypool": "^0.5.0",
-        "vite": "^3.0.0 || ^4.0.0",
-        "vite-node": "0.31.1",
-        "why-is-node-running": "^2.2.2"
-      },
-      "bin": {
-        "vitest": "vitest.mjs"
-      },
-      "engines": {
-        "node": ">=v14.18.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      },
-      "peerDependencies": {
-        "@edge-runtime/vm": "*",
-        "@vitest/browser": "*",
-        "@vitest/ui": "*",
-        "happy-dom": "*",
-        "jsdom": "*",
-        "playwright": "*",
-        "safaridriver": "*",
-        "webdriverio": "*"
-      },
-      "peerDependenciesMeta": {
-        "@edge-runtime/vm": {
-          "optional": true
-        },
-        "@vitest/browser": {
-          "optional": true
-        },
-        "@vitest/ui": {
-          "optional": true
-        },
-        "happy-dom": {
-          "optional": true
-        },
-        "jsdom": {
-          "optional": true
-        },
-        "playwright": {
-          "optional": true
-        },
-        "safaridriver": {
-          "optional": true
-        },
-        "webdriverio": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/vscode-jsonrpc": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-6.0.0.tgz",
@@ -12532,15 +11957,6 @@
       "integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==",
       "dev": true
     },
-    "node_modules/well-known-symbols": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/well-known-symbols/-/well-known-symbols-2.0.0.tgz",
-      "integrity": "sha512-ZMjC3ho+KXo0BfJb7JgtQ5IBuvnShdlACNkKkdsqBmYw3bPAaJfPeYUo6tLUaT5tG/Gkh7xkpBhKRQ9e7pyg9Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
@@ -12566,22 +11982,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/why-is-node-running": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.2.2.tgz",
-      "integrity": "sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==",
-      "dev": true,
-      "dependencies": {
-        "siginfo": "^2.0.0",
-        "stackback": "0.0.2"
-      },
-      "bin": {
-        "why-is-node-running": "cli.js"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/wide-align": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 2ed4c01..d860712 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,14 +15,12 @@
     "@types/node": "^18",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@typescript-eslint/parser": "^5.59.7",
-    "@vue/test-utils": "^2.3.2",
     "@vueuse/core": "^10.2.1",
     "@vueuse/nuxt": "^10.2.1",
     "eslint": "^8.41.0",
     "eslint-plugin-vue": "^9.14.0",
     "nuxt": "^3.5.1",
     "nuxt-typed-router": "^3.2.2",
-    "typescript": "^5.0.4",
-    "vitest": "^0.31.1"
+    "typescript": "^5.0.4"
   }
 }
diff --git a/frontend/pages/medias/index.vue b/frontend/pages/medias/index.vue
index 083ba3f..185bf54 100644
--- a/frontend/pages/medias/index.vue
+++ b/frontend/pages/medias/index.vue
@@ -57,6 +57,6 @@ const mediaList = computed(() => {
 
 <style scoped lang="postcss">
 section {
-  @apply w-full px-10;
+  @apply w-full;
 }
 </style>
diff --git a/frontend/pages/patrons/[id].vue b/frontend/pages/patrons/[id].vue
new file mode 100644
index 0000000..08eb4ec
--- /dev/null
+++ b/frontend/pages/patrons/[id].vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import patrons from '@data/patrons'
+
+const route = useRoute()
+
+const patron = patrons.find((p) => p.id == route.params.id)
+
+if (!patron) {
+  await navigateTo('/patrons')
+}
+
+const viewing = ref('Borrowed')
+</script>
+
+<template>
+  <section v-if="patron">
+    <h2>{{ patron.name }}</h2>
+    <SecondaryInfo>{{ patron.email }}</SecondaryInfo>
+
+    <hr>
+
+    <p>
+      <Badge :state="patron.status === 'Active' ? 'good' : 'bad'">
+        {{ patron.status }}
+        <span v-if="patron.fines > 0">
+          &nbsp;/&nbsp;${{ patron.fines }} in fines
+        </span>
+      </Badge>
+    </p>
+
+    <p>
+      {{ patron.checkedOut }}
+      <span v-if="patron.checkedOut === 1">item</span>
+      <span v-else>items</span>
+      checked out
+      <span v-if="patron.overdue > 0">/ {{ patron.overdue }} overdue</span>
+    </p>
+  </section>
+
+  <section class="w-full">
+    <Table>
+      <TableThead>
+        <tr>
+          <TableTh>Item</TableTh>
+          <TableTh>Checked Out</TableTh>
+          <TableTh>Returned</TableTh>
+          <TableTh></TableTh>
+          <TableTh actions>
+            <Dropdown :options="['Borrowed', 'Holds']"
+                      @select="(i) => (viewing = (i as string))">
+              {{ viewing }}
+            </Dropdown>
+
+            <PrimaryButton>Check Out</PrimaryButton>
+          </TableTh>
+        </tr>
+      </TableThead>
+
+      <TableTbody>
+        <tr>
+          <TableTd></TableTd>
+        </tr>
+      </TableTbody>
+    </Table>
+  </section>
+</template>
+
+<style scoped lang="postcss">
+
+</style>
diff --git a/frontend/pages/patrons/index.vue b/frontend/pages/patrons/index.vue
index deee164..9c2997f 100644
--- a/frontend/pages/patrons/index.vue
+++ b/frontend/pages/patrons/index.vue
@@ -62,6 +62,6 @@ import patrons from '@data/patrons'
 
 <style scoped lang="postcss">
 section {
-  @apply w-full px-10;
+  @apply w-full;
 }
 </style>