✨ were moving from portions to units

app/components/pen/PenCard.vue

@@ -8,14 +8,12 @@ defineProps<{ round: Round }>()
   <div class="flex">
     <u-card class="w-full">
       <div class="flex flex-col items-center justify-center space-y-4">
+        <div> {{ round.mg }}mg of {{ round.content }} </div>
         <pen-model :color="round.color">
           <transition name="fade">
             <cartridge-model :round="round" />
           </transition>
         </pen-model>
-        <div>
-          {{ round.content }} {{ round.ml }}ml {{ round.mg }}mg
-        </div>
         <shot-summary :round="round" />
         <shot-log :round="round" />
       </div>

app/components/round/RoundForm.vue

@@ -15,8 +15,8 @@ const state = reactive<Partial<Round>>({
   color: props.round?.color ?? range.colors[0],
   content: props.round?.content ?? range.contents[0],
   ml: props.round?.ml ?? range.mls[0],
-  mg: props.round?.mg ?? range.mgs[1],
-  portions: props.round?.portions ?? 4,
+  mg: props.round?.mg ?? range.mgs[2],
+  units: props.round?.portions ?? range.units[2],
   frequency: props.round?.frequency ?? 'weekly',
   date: props.round?.date
     ? format(new Date(props.round.date), 'yyyy-MM-dd')
@@ -79,8 +79,11 @@ const submit = async () => {
       />
     </u-form-group>
 
-    <u-form-group label="Portions" name="portions">
-      <u-input v-model="state.portions" type="number" label="Portions" />
+    <u-form-group label="Units per-shot" name="units">
+      <u-select-menu
+        v-model="state.units"
+        :options="range.units"
+      />
     </u-form-group>
     <u-form-group label="Frequency" name="frequency">
       <u-input

app/components/shot/ShotSummary.vue

@@ -2,11 +2,12 @@
 import type { Round } from '~/types/models'
 
 const props = defineProps<{ round: Round }>()
-const { unitsRemain } = useRound(props.round)
+const { unitsRemain, mgPerUnits } = useRound(props.round)
 </script>
 
 <template>
   <div>
-    {{ unitsRemain() }} remaining units
+    <div> {{ unitsRemain() }} remaining units </div>
+    <div> {{ round.units }} units = {{ mgPerUnits() }}mg </div>
   </div>
 </template>

app/composables/round.ts

@@ -10,7 +10,7 @@ export interface ShotDay {
 
 export const useRound = (round: Round) => {
   const shotDates = (): Date[] => {
-    const portions = round.portions || 4
+    const portions = round.ml * 100 / round.units
 
     const getNextDate = (index: number): Date => {
       switch (round.frequency) {
@@ -29,7 +29,7 @@ export const useRound = (round: Round) => {
     const today = new Date()
     return shotDates().map(date => ({
       date,
-      units: round.ml * 100 / round.portions,
+      units: round.units,
       taken: isBefore(date, today),
       isToday: isSameDay(date, today),
     }))
@@ -55,6 +55,9 @@ export const useRound = (round: Round) => {
       .reduce((total, day) => total + day.units, 0)
   }
 
+  // 200 units = 20mg so 50 units is 5mg
+  const mgPerUnits = (): number => round.mg * round.units / (round.ml * 100)
+
   return {
     shotDates,
     lastShotDate,
@@ -63,6 +66,7 @@ export const useRound = (round: Round) => {
     shotDaysLeft,
     isShotDayToday,
     unitsRemain,
+    mgPerUnits,
     title,
   }
 }

app/pages/users/[user]/rounds.vue

@@ -51,6 +51,7 @@ const columns = [
   { label: 'Content', key: 'content' },
   { label: 'Mg', key: 'mg' },
   { label: 'Ml', key: 'ml' },
+  { label: 'Units', key: 'units' },
   { label: 'Timeline', key: 'date' },
   { label: 'Actions', key: 'actions' },
 ]

app/utils/shared.ts

@@ -1,4 +1,3 @@
-import type { CookieOptions } from '#app'
 import type { HeaderLink } from '@nuxt/ui-pro/types'
 
 (BigInt.prototype as any).toJSON = function () {
@@ -21,7 +20,7 @@ export type HeaderIconLink = HeaderLink & { icon: string }
 export const links: HeaderIconLink[] = [
   {
     label: 'Home',
-    icon: 'i-heroicons-home',
+    icon: 'i-mdi-home',
     to: '/',
   },
   {
@@ -34,18 +33,8 @@ export const links: HeaderIconLink[] = [
     icon: 'i-mdi-account-multiple',
     to: '/users',
   },
-  {
-    label: 'Shots',
-    icon: 'i-mdi-syringe',
-  },
 ]
 
-export const cookieOptions: CookieOptions & { readonly?: false } = {
-  path: '/',
-  sameSite: 'strict',
-  maxAge: 60 * 60 * 24 * 365,
-}
-
 const colors = [
   'cyan',
   'sky',
@@ -57,8 +46,7 @@ const colors = [
 
 const contents = [
   'Tirzepatide',
-  'Retatrutide',
-  'Semaglutide',
+  'Cagrilintide',
 ]
 
 const mls = [
@@ -67,6 +55,7 @@ const mls = [
 ]
 
 const mgs = [
+  5,
   10,
   20,
   30,
@@ -75,6 +64,7 @@ const mgs = [
 
 const units = [
   25,
+  40,
   50,
 ]
 export const range = {

package.json

@@ -34,7 +34,7 @@
     "jose": "^5.9.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^3.7.1",
+    "@antfu/eslint-config": "^3.7.3",
     "@cloudflare/workers-types": "^4.20240925.0",
     "@iconify-json/logos": "^1.2.0",
     "@iconify-json/mdi": "^1.2.0",
@@ -51,12 +51,12 @@
     "dotenv-cli": "^7.4.2",
     "happy-dom": "^15.7.4",
     "nuxt": "^3.13.2",
-    "nuxt-auth-utils": "^0.3.9",
-    "nuxt-og-image": "3.0.2",
+    "nuxt-auth-utils": "^0.4.1",
+    "nuxt-og-image": "3.0.4",
     "prisma": "^5.20.0",
     "ua-parser-js": "^1.0.39",
     "vitest": "^2.1.1",
-    "wrangler": "^3.78.9",
+    "wrangler": "^3.78.12",
     "zod": "^3.23.8"
   }
 }