Added Started At Date Field

README.md

@@ -15,7 +15,7 @@ Currently, there is no documentation or wiki available but there will be one add
 
 This will be published on the site some time soon but for now, the roadmap will be listed here.
 
-- [ ] Finish adding started at date feature
+- [x] Finish adding started at date field
 - [x] Pagination for Audit Logs page
 - [ ] Board sorting options (Boards Page)
 - [ ] Add real-time collaboration

actions/update-card/index.ts

@@ -32,6 +32,7 @@ const handler = async (data: InputType): Promise<ReturnType> => {
       data: {
         ...values,
         dueDate: dueDate,
+        startedAt: startedAt,
       },
     });
 

app/(platform)/(dashboard)/board/[boardId]/_components/card-item.tsx

@@ -24,15 +24,21 @@ export const CardItem = ({ index, data }: CardItemProps) => {
           ref={provided.innerRef}
           role='button'
           onClick={() => cardModal.onOpen(data.id)}
-          className='truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm hover:border-black'
+          className='space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm hover:border-black'
         >
           {data.title}
-          <div className='flex w-fit rounded-md border-2 border-transparent bg-slate-100 px-0.5 pb-0.5 pt-0.5 text-sm'>
-            <Calendar className='ml-0.5 mr-0.5 h-4 w-4' />
-            {data?.dueDate
-              ? 'Due: ' + format(data.dueDate, 'PP')
-              : 'No Due Date'}
-          </div>
+          {data?.dueDate && (
+            <div className='flex w-fit rounded-md border-2 border-transparent bg-slate-100 px-0.5 pb-0.5 pt-0.5 text-sm'>
+              <Calendar className='ml-0.5 mr-0.5 h-4 w-4' />
+              Due: {format(data.dueDate, 'PP')}
+            </div>
+          )}
+          {data?.startedAt && (
+            <div className='flex w-fit rounded-md border-2 border-transparent bg-slate-100 px-0.5 pb-0.5 pt-0.5 text-sm'>
+              <Calendar className='ml-0.5 mr-0.5 h-4 w-4' />
+              Started: {format(data.startedAt, 'PP')}
+            </div>
+          )}
         </div>
       )}
     </Draggable>

components/modals/card-modal/actions.tsx

@@ -80,6 +80,7 @@ export const Actions = ({ data }: ActionsProps) => {
         Copy
       </Button>
       <DatePicker
+        type='dueDate'
         variant='gray'
         className='w-full justify-start text-black'
         size='inline'
@@ -88,6 +89,16 @@ export const Actions = ({ data }: ActionsProps) => {
         boardId={params.boardId as string}
         card={data}
       />
+      <DatePicker
+        type='startedAtDate'
+        variant='gray'
+        className='w-full justify-start text-black'
+        size='inline'
+        placeholder='Add Started Date'
+        afterSelectText='Started '
+        boardId={params.boardId as string}
+        card={data}
+      />
       <Button
         onClick={onDelete}
         disabled={isLoadingDelete}

components/ui/date-picker.tsx

@@ -18,6 +18,7 @@ import { useAction } from '@/hooks/use-action';
 import { CardWithList } from '@/types';
 
 interface DatePickerProps {
+  type: 'dueDate' | 'startedAtDate';
   variant?:
     | 'outline'
     | 'default'
@@ -37,6 +38,7 @@ interface DatePickerProps {
 }
 
 export function DatePicker({
+  type,
   variant,
   className,
   size,
@@ -49,7 +51,7 @@ export function DatePicker({
 
   const { execute, isLoading } = useAction(updateCard, {
     onSuccess: () => {
-      toast.success('Due date updated');
+      toast.success('Date updated');
     },
     onError: (error) => {
       toast.error(error);
@@ -57,19 +59,33 @@ export function DatePicker({
   });
 
   React.useEffect(() => {
-    if (card?.dueDate) {
+    if (card?.dueDate && type === 'dueDate') {
       setDate(card.dueDate);
     }
-  }, [card?.dueDate]);
+
+    if (card?.startedAt && type === 'startedAtDate') {
+      setDate(card.startedAt);
+    }
+  }, [card?.startedAt, card?.dueDate, type]);
 
   const onBlur = () => {
     if (!date || !boardId || !card) return;
 
-    execute({
-      id: card.id,
-      boardId,
-      dueDate: date,
-    });
+    if (type === 'dueDate') {
+      execute({
+        id: card.id,
+        boardId,
+        dueDate: date,
+      });
+    }
+
+    if (type === 'startedAtDate') {
+      execute({
+        id: card.id,
+        boardId,
+        startedAt: date,
+      });
+    }
 
     setDate(date);
   };