fix: relative date for birthday

Signed-off-by: Varun Raj <mailme@varunraj.in>

package.json

@@ -31,6 +31,7 @@
     "@types/cookie": "^0.6.0",
     "@types/qs": "^6.9.15",
     "axios": "^1.7.4",
+    "chrono-node": "^1.4.9",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "1.0.0",

src/components/people/PeopleList.tsx

@@ -54,7 +54,7 @@ export default function PeopleList() {
     if (errorMessage) return <div>{errorMessage}</div>;
 
     return (
-      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6  gap-1 p-2">
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5  gap-1 p-2">
         {people.map((person) => (
           <PersonItem person={person} key={person.id} onRemove={handleRemove}/>
         ))}

src/components/people/PersonBirthdayCell.tsx

@@ -3,6 +3,12 @@ import React, { useState } from 'react'
 import { DatePicker } from '../ui/datepicker'
 import { updatePerson } from '@/handlers/api/people.handler';
 import { formatDate } from '@/helpers/date.helper';
+import { Input } from '../ui/input';
+import { useToast } from '../ui/use-toast';
+// @ts-ignore
+import chrono from 'chrono-node'
+
+
 
 interface IProps {
   person: IPerson
@@ -11,19 +17,22 @@ interface IProps {
 export default function PersonBirthdayCell(
   { person }: IProps
 ) {
-  const [formData, setFormData] = useState(person);
   const [loading, setLoading] = useState(false);
+  const { toast } = useToast();
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [textDate, setTextDate] = useState<string | null>(person.birthDate ? formatDate(person.birthDate?.toString(), 'PPP'): "");
 
   const handleEdit = (date?: Date | null) => {
-    if (!date) return;
-    const formatedDate = formatDate(date.toString(), 'yyyy-MM-dd');
+    const formatedDate = date ? formatDate(date.toString(), 'yyyy-MM-dd') : null;
     setLoading(true);
     return updatePerson(person.id, {
       birthDate: formatedDate,
     })
       .then(() => {
-        
+        toast({
+          title: "Success",
+          description: "Person updated successfully",
+        })
       })
       .catch(() => {})
       .finally(() => {
@@ -33,5 +42,27 @@ export default function PersonBirthdayCell(
 
 
 
-  return <DatePicker date={person.birthDate} onSelect={handleEdit}/>
+  return (
+    <div className='flex gap-1'>
+      <Input 
+        className='' 
+        value={textDate || ""}
+        placeholder='Enter a date'
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            const parsedDate = chrono.parseDate(textDate || "");
+            if (parsedDate) {
+              handleEdit(parsedDate);
+              setTextDate(formatDate(parsedDate.toString(), 'PPP'));
+            } else {
+              handleEdit(null);
+            }
+          }
+        }}
+        disabled={loading}
+        onChange={(e) => setTextDate(e.target.value)}
+      />
+      <DatePicker date={person.birthDate} onSelect={handleEdit} iconOnly/>
+    </div>
+  )
 }

src/components/people/PersonItem.tsx

@@ -86,7 +86,7 @@ export default function PersonItem({ person, onRemove }: IProps) {
           }}
         >
           <Avatar
-            className="w-full h-auto rounded-lg"
+            className="w-full min-h-full h-auto rounded-lg"
             src={person.thumbnailPath}
             alt={person.name}
           />

src/components/ui/datepicker.tsx

@@ -16,9 +16,10 @@ import {
 interface IProps {
   date?: Date | null
   onSelect?: (date?: Date | null) => any
+  iconOnly?: boolean
 }
 export function DatePicker(
-  { date: _date, onSelect }: IProps
+  { date: _date, onSelect, iconOnly }: IProps
 ) {
   const [date, setDate] = React.useState<Date | null>(_date || null)
 
@@ -32,12 +33,12 @@ export function DatePicker(
         <Button
           variant={"outline"}
           className={cn(
-            "justify-start text-left font-normal",
+            "justify-start text-left font-normal flex gap-1",
             !date && "text-muted-foreground"
           )}
         >
-          <CalendarIcon className="mr-2 h-4 w-4" />
-          {date ? format(date, "PPP") : <span>Pick a date</span>}
+          <CalendarIcon className="h-3 w-3" />
+          {!iconOnly && <span>{date ? format(date, "PPP") : <span>Pick a date</span>}</span>}
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-auto p-0">

src/handlers/api/people.handler.ts

@@ -26,7 +26,7 @@ export const listPeople = (filters: IPersonListFilters): Promise<IPeopleListResp
 
 export const updatePerson = (id: string, data: Partial<{
   name: string;
-  birthDate: string;
+  birthDate: string | null;
   isHidden: boolean;
 }>) => {
   return API.put(UPDATE_PERSON_PATH(id), data)

src/pages/assets/missing-locations.tsx

@@ -49,7 +49,6 @@ export default function MissingLocations() {
         leftComponent="Missing Location"
         rightComponent={
           <>
-            <AssetFilter />
             <Badge variant={"outline"}>
               {config.selectedIds.length} Selected
             </Badge>