feat: datefn

package.json

@@ -1,6 +1,6 @@
 {
   "name": "op-notes",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Op Notes",
   "main": "./out/main/index.js",
   "author": "Kasun Vithanage",
@@ -55,6 +55,7 @@
     "clsx": "^2.1.0",
     "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
+    "dayjs": "^1.11.11",
     "electron-updater": "^6.1.8",
     "kysely": "^0.27.3",
     "lucide-react": "^0.368.0",

src/renderer/src/lib/utils.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { type ClassValue, clsx } from 'clsx'
+import dayjs from 'dayjs'
 
 import { twMerge } from 'tailwind-merge'
 
@@ -19,3 +20,9 @@ export async function unwrapResult<T>(promise: Promise<{ result: T; error: any }
 }
 
 export const trim = (str: string, len = 20) => (str.length > len ? str.slice(0, len) + '...' : str)
+
+export const formatDate = (date?: Date) => dayjs(date).format('DD/MM/YYYY')
+
+export const formatDateTime = (date?: Date) => dayjs(date).format('DD/MM/YYYY HH:mm')
+
+export const formatTime = (date?: Date) => dayjs(date).format('HH:mm')

src/renderer/src/routes/doctors/list-doctors.tsx

@@ -16,7 +16,7 @@ import { Input } from '@renderer/components/ui/input'
 import { useBreadcrumbs } from '@renderer/contexts/BreadcrumbContext'
 import { AppLayout } from '@renderer/layouts/AppLayout'
 import { queries } from '@renderer/lib/queries'
-import { unwrapResult } from '@renderer/lib/utils'
+import { formatDate, unwrapResult } from '@renderer/lib/utils'
 import {
   keepPreviousData,
   queryOptions,
@@ -108,7 +108,7 @@ const columns: ColumnDef<DoctorModel, any>[] = [
   {
     id: 'updatedAt',
     header: 'Updated At',
-    cell: (cell) => cell.row.original.updated_at.toLocaleDateString()
+    cell: (cell) => formatDate(cell.row.original.updated_at)
   },
   {
     id: 'actions',

src/renderer/src/routes/patients/view-patient.tsx

@@ -23,7 +23,7 @@ import { ColumnDef, PaginationState } from '@tanstack/react-table'
 import toast from 'react-hot-toast'
 import { SurgeryFilter } from 'src/shared/types/api'
 import { Input } from '@renderer/components/ui/input'
-import { cn } from '@renderer/lib/utils'
+import { cn, formatDate, formatDateTime } from '@renderer/lib/utils'
 import womenIcon from '../../../../../resources/woman.png?asset'
 import manIcon from '../../../../../resources/man.png?asset'
 import { LabeledChip } from '@renderer/components/common/LabeledChip'
@@ -143,13 +143,12 @@ const columns: ColumnDef<Surgery, any>[] = [
   {
     id: 'date',
     header: 'Surgery Date',
-    cell: (cell) =>
-      cell.row.original.date !== null ? cell.row.original.date.toLocaleDateString() : 'N/A'
+    cell: (cell) => (cell.row.original.date !== null ? formatDate(cell.row.original.date) : 'N/A')
   },
   {
     id: 'updatedAt',
     header: 'Updated At',
-    cell: (cell) => cell.row.original.updated_at.toLocaleDateString()
+    cell: (cell) => formatDateTime(cell.row.original.updated_at)
   },
   {
     id: 'actions',

src/renderer/src/routes/surgeries/list-surgeries.tsx

@@ -16,7 +16,7 @@ import { Input } from '@renderer/components/ui/input'
 import { useBreadcrumbs } from '@renderer/contexts/BreadcrumbContext'
 import { AppLayout } from '@renderer/layouts/AppLayout'
 import { queries } from '@renderer/lib/queries'
-import { cn, unwrapResult } from '@renderer/lib/utils'
+import { cn, formatDate, formatDateTime, unwrapResult } from '@renderer/lib/utils'
 import { SurgeryModel } from '@shared/models/SurgeryModel'
 import { SurgeryFilter } from '@shared/types/api'
 
@@ -118,12 +118,12 @@ const columns: ColumnDef<SurgeryModel, any>[] = [
   {
     id: 'surgeryDate',
     header: 'Surgery Date',
-    cell: (cell) => (cell.row.original.date ? cell.row.original.date.toLocaleDateString() : 'N/A')
+    cell: (cell) => (cell.row.original.date ? formatDate(cell.row.original.date) : 'N/A')
   },
   {
     id: 'updatedAt',
     header: 'Updated At',
-    cell: (cell) => cell.row.original.updated_at.toLocaleDateString()
+    cell: (cell) => formatDateTime(cell.row.original.updated_at)
   },
   {
     id: 'patient',

src/renderer/src/routes/surgeries/view-surgery.tsx

@@ -12,7 +12,7 @@ import { PatientModel } from 'src/shared/models/PatientModel'
 import { Badge } from '@renderer/components/ui/badge'
 import { AddOrEditFollowup } from '@renderer/components/surgery/AddOrEditFollowup'
 import { Card, CardContent, CardHeader } from '@renderer/components/ui/card'
-import { cn, unwrapResult } from '@renderer/lib/utils'
+import { cn, formatDate, formatDateTime, unwrapResult } from '@renderer/lib/utils'
 import { Skeleton } from '@renderer/components/ui/skeleton'
 import { FollowupModel } from 'src/shared/models/FollowupModel'
 import {
@@ -65,7 +65,7 @@ const FollowupCard = ({ followup }: FollowupCardProps) => {
   return (
     <Card className="mb-2 border rounded-lg mt-1 hover:bg-secondary/10">
       <CardHeader className="flex justify-end items-center flex-row w-full space-x-1">
-        <span>{followup.created_at.toLocaleString()}</span>
+        <span>{formatDateTime(followup.created_at)}</span>
 
         <AddOrEditFollowup
           trigger={
@@ -157,7 +157,7 @@ export const SurgeryCard = ({ surgery, patient }: SurgeryCardProps) => {
 
         <div className="md:ml-4">
           <span className="font-semibold">Date:</span>{' '}
-          <Badge variant={'secondary'}>{surgery.date?.toLocaleDateString()}</Badge>
+          <Badge variant={'secondary'}>{surgery.date ? formatDate(surgery.date) : 'N/A'}</Badge>
         </div>
       </div>