feat: bump zod v4, time input

Author: agmmtoo

app/(protected)/borrows/[id]/page.tsx

@@ -3,7 +3,6 @@ import { IsLoggedIn, Verify } from '@/lib/firebase/firebase'
 import { getBorrow, getListBorrows } from '@/lib/api/borrow'
 import { Badge } from '@/components/ui/badge'
 import {
-  formatDate,
   getSubscriptionStatus,
   isBorrowDue,
   isSubscriptionActive,
@@ -32,6 +31,7 @@ import { Borrow } from '@/lib/types/borrow'
 import { Button } from '@/components/ui/button'
 import { BtnUndoReturn } from '@/components/borrows/BtnUndoReturn'
 import { redirect, RedirectType } from 'next/navigation'
+import { DateTime } from '@/components/common/DateTime'
 
 export default async function BorrowDetailsPage({
   params,
@@ -168,7 +168,10 @@ export default async function BorrowDetailsPage({
             <Calendar className="size-4 text-muted-foreground" />
             <p>
               <span className="font-medium">Borrowed:&nbsp;</span>
-              {formatDate(borrowRes.data.borrowed_at)}
+              <DateTime
+                dateTime={borrowRes.data.borrowed_at}
+                relative={!borrowRes.data.returning}
+              />
             </p>
             {isDue ? (
               <>
@@ -200,14 +203,17 @@ export default async function BorrowDetailsPage({
             )}
             <p className={clsx({ 'text-destructive': isDue })}>
               <span className="font-medium">Due:&nbsp;</span>
-              {formatDate(borrowRes.data.due_at)}
+              <DateTime
+                dateTime={borrowRes.data.due_at}
+                relative={!borrowRes.data.returning}
+              />
             </p>
             {borrowRes.data.returning ? (
               <>
                 <CalendarCheck className="size-4 text-muted-foreground" />
                 <p>
                   <span className="font-medium">Returned:&nbsp;</span>
-                  {formatDate(borrowRes.data.returning.returned_at)}
+                  <DateTime dateTime={borrowRes.data.returning.returned_at} />
                 </p>
                 <Gavel className="size-4 text-muted-foreground" />
                 <p>
@@ -250,7 +256,7 @@ export default async function BorrowDetailsPage({
           <Clock className="size-4" />
           <p>
             <span className="font-medium">Expires:&nbsp;</span>
-            {formatDate(borrowRes.data.subscription.expires_at)}
+            <DateTime dateTime={borrowRes.data.subscription.expires_at} />
           </p>
           <CalendarClock className="size-4" />
           <p>
@@ -275,7 +281,7 @@ export default async function BorrowDetailsPage({
           <Calendar className="size-4" />
           <p>
             <span className="font-medium">Purchased At:&nbsp;</span>
-            {formatDate(borrowRes.data.subscription.created_at)}
+            <DateTime dateTime={borrowRes.data.subscription.created_at} />
           </p>
         </CardContent>
       </Card>
@@ -315,7 +321,7 @@ export default async function BorrowDetailsPage({
       )}
 
       {(isSuperAdmin || isAdmin || isStaff) && (
-        <div className="bottom-0 sticky py-2 flex flex-col md:flex-row gap-2 md:gap-4 basis-1/2">
+        <div className="bottom-0 sticky py-2 grid md:grid-cols-2 gap-2">
           {borrowRes.data.returning ? (
             <BtnUndoReturn
               variant="outline"

app/globals.css

@@ -147,3 +147,8 @@
     @apply bg-background text-foreground;
   }
 }
+
+input[type='time']::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+  cursor: pointer;
+}

components/borrows/FormEditBorrow.tsx

@@ -21,6 +21,7 @@ import { Calendar } from '../ui/calendar'
 import { Input } from '../ui/input'
 import { useCallback, useTransition } from 'react'
 import { updateBorrowAction } from '@/lib/actions/update-borrow'
+import { TimeInput } from '../ui/time-input'
 
 const FormSchema = z.object({
   id: z.string({
@@ -89,7 +90,10 @@ export const FormEditBorrow: React.FC<{
                       className={cn(!field.value && 'text-muted-foreground')}
                     >
                       {field.value ? (
-                        formatDate(field.value)
+                        formatDate(field.value, {
+                          hour: '2-digit',
+                          minute: '2-digit',
+                        })
                       ) : (
                         <span>Pick a date</span>
                       )}
@@ -106,7 +110,25 @@ export const FormEditBorrow: React.FC<{
                       date > new Date(form.getValues('due_at')) ||
                       date < new Date('1900-01-01')
                     }
-                    initialFocus
+                    autoFocus
+                  />
+                  <Input
+                    className="max-w-max mx-auto mb-2"
+                    type="time"
+                    value={(() => {
+                      const d = new Date(field.value)
+                      const hh = String(d.getHours()).padStart(2, '0')
+                      const mm = String(d.getMinutes()).padStart(2, '0')
+                      return `${hh}:${mm}`
+                    })()}
+                    onChange={(e) => {
+                      const [hh = 0, mm = 0] = e.target.value
+                        .split(':')
+                        .map(Number)
+                      const d = new Date(field.value)
+                      d.setHours(hh, mm)
+                      field.onChange(d.toISOString())
+                    }}
                   />
                 </PopoverContent>
               </Popover>
@@ -129,7 +151,10 @@ export const FormEditBorrow: React.FC<{
                       className={cn(!field.value && 'text-muted-foreground')}
                     >
                       {field.value ? (
-                        formatDate(field.value)
+                        formatDate(field.value, {
+                          hour: '2-digit',
+                          minute: '2-digit',
+                        })
                       ) : (
                         <span>Pick a date</span>
                       )}
@@ -145,8 +170,9 @@ export const FormEditBorrow: React.FC<{
                     disabled={(date) =>
                       date < new Date(form.getValues('borrowed_at'))
                     }
-                    initialFocus
+                    autoFocus
                   />
+                  <TimeInput value={field.value} onChange={field.onChange} />
                 </PopoverContent>
               </Popover>
 
@@ -172,7 +198,10 @@ export const FormEditBorrow: React.FC<{
                           )}
                         >
                           {field.value ? (
-                            formatDate(field.value)
+                            formatDate(field.value, {
+                              hour: '2-digit',
+                              minute: '2-digit',
+                            })
                           ) : (
                             <span>Pick a date</span>
                           )}
@@ -188,7 +217,11 @@ export const FormEditBorrow: React.FC<{
                         disabled={(date) =>
                           date < new Date(form.getValues('borrowed_at'))
                         }
-                        initialFocus
+                        autoFocus
+                      />
+                      <TimeInput
+                        value={field.value}
+                        onChange={field.onChange}
                       />
                     </PopoverContent>
                   </Popover>

components/common/DateTime.tsx

@@ -0,0 +1,23 @@
+import { formatDate } from '@/lib/utils'
+import { formatDistanceToNowStrict } from 'date-fns'
+
+interface Props extends React.HTMLAttributes<HTMLTimeElement> {
+  dateTime: string
+  children?: React.ReactNode
+  relative?: boolean
+}
+
+export function DateTime({ dateTime, children, relative, ...rest }: Props) {
+  const formatted = formatDate(dateTime, {
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+  const distance = formatDistanceToNowStrict(new Date(dateTime), {
+    addSuffix: true,
+  })
+  return (
+    <time dateTime={dateTime.slice(0, 19)} {...rest}>
+      {children ?? `${formatted}${relative ? ` (${distance})` : ''}`}
+    </time>
+  )
+}

components/dashboard/DateRangeSelector.tsx

@@ -94,7 +94,7 @@ export function DateRangeSelector({
             </SelectContent>
           </Select>
           <Calendar
-            initialFocus
+            autoFocus
             mode="range"
             defaultMonth={date?.from}
             selected={date}

components/libraries/LibraryForm.tsx

@@ -2,7 +2,7 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
-import { z } from 'zod'
+import { z } from 'zod/v4'
 import {
   Form,
   FormControl,
@@ -28,7 +28,7 @@ type LibraryFormProps = {
 }
 
 const FormSchema = z.object({
-  name: z.string().nonempty({ message: 'Name is required' }),
+  name: z.string().nonempty({ error: 'Name is required' }),
   logo: z.string().optional(),
   address: z.string().optional(),
   phone: z.string().optional(),

components/ui/avatar.tsx

@@ -1,9 +1,9 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 function Avatar({
   className,
@@ -13,7 +13,7 @@ function Avatar({
     <AvatarPrimitive.Root
       data-slot="avatar"
       className={cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
         className
       )}
       {...props}
@@ -28,7 +28,7 @@ function AvatarImage({
   return (
     <AvatarPrimitive.Image
       data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
+      className={cn('aspect-square size-full', className)}
       {...props}
     />
   )
@@ -42,7 +42,7 @@ function AvatarFallback({
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
       className={cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
+        'bg-muted flex size-full items-center justify-center rounded-full',
         className
       )}
       {...props}

components/ui/button.tsx

@@ -5,25 +5,27 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default:
+          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
         destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
         outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
         secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
+          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
       },
     },
     defaultVariants: {
@@ -33,24 +35,25 @@ const buttonVariants = cva(
   }
 )
 
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button'
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = 'Button'
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
 
 export { Button, buttonVariants }