feat: integrate board page

src/app/board/components/StatusBoard.tsx

@@ -1,19 +1,19 @@
 import * as React from 'react';
 import { FaPlus } from 'react-icons/fa';
 
+import TicketBoard from '@/app/board/components/TicketBoard';
 import IconButton from '@/components/buttons/IconButton';
 import Typography from '@/components/Typography';
 import clsxm from '@/lib/clsxm';
+import { taskType } from '@/types/entities/task';
 
 type StatusBoardProps = {
   title: string;
-  ticketCount?: number;
+  data: taskType[] | null;
 };
 
-export default function StatusBoard({
-  title,
-  ticketCount = 0,
-}: StatusBoardProps) {
+export default function StatusBoard({ title, data }: StatusBoardProps) {
+  const ticketCount = data?.length;
   return (
     <div
       className={clsxm(
@@ -63,6 +63,9 @@ export default function StatusBoard({
           )}
         />
       </div>
+      <div className='flex w-full flex-col gap-y-3 overflow-y-auto px-4 pb-4'>
+        {data?.map((task) => <TicketBoard key={task._id} data={task} />)}
+      </div>
     </div>
   );
 }

src/app/board/components/TicketBoard.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { FaCalendar, FaEdit } from 'react-icons/fa';
+
+import IconButton from '@/components/buttons/IconButton';
+import Chips from '@/components/Chips';
+import UnderlineLink from '@/components/links/UnderlineLink';
+import Typography from '@/components/Typography';
+import { randomColor, showFormattedDate } from '@/lib/helper';
+import { taskType } from '@/types/entities/task';
+
+export default function TicketBoard({ data }: { data: taskType | null }) {
+  const tags = data?.tags;
+  return (
+    <div className='flex w-full flex-col gap-y-4 rounded-xl bg-typo-white p-4 shadow-md'>
+      <div className='flex flex-row items-center justify-between gap-x-6'>
+        <div className='flex flex-row flex-wrap gap-x-2'>
+          {tags?.map((tag) => (
+            <Chips key={tag} color={randomColor()} size='sm'>
+              {tag}
+            </Chips>
+          ))}
+        </div>
+        <IconButton
+          icon={FaEdit}
+          variant='outline'
+          iconClassName='size-4'
+          className='border-2 border-primary-500 font-normal'
+        />
+      </div>
+      <div className='flex flex-col gap-1'>
+        <UnderlineLink href={`/board/${data?._id}`} className='w-fit'>
+          <Typography as='h3' variant='bt' weight='semibold'>
+            {data?.title}
+          </Typography>
+        </UnderlineLink>
+        <Typography variant='c1' weight='regular' color='icon'>
+          {data?.description}
+        </Typography>
+      </div>
+      <div className='flex flex-row items-center gap-2'>
+        <FaCalendar className='size-4 text-typo-icon' />
+        <Typography variant='c1' weight='regular' color='secondary'>
+          {showFormattedDate(data?.dueDate ?? new Date())}
+        </Typography>
+      </div>
+    </div>
+  );
+}

src/app/board/container/BoardPage.tsx

@@ -3,12 +3,32 @@ import * as React from 'react';
 import { FaGithub } from 'react-icons/fa';
 
 import StatusBoard from '@/app/board/components/StatusBoard';
+import { useGetTickets } from '@/app/board/hooks/query';
 import withAuth from '@/components/hoc/withAuth';
 import PrimaryLink from '@/components/links/PrimaryLink';
+import Loading from '@/components/Loading';
 import Typography from '@/components/Typography';
 
 export default withAuth(BoardContainer, ['user']);
 function BoardContainer() {
+  const { boardData, isLoading } = useGetTickets();
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  const unarchivedTickets =
+    boardData && boardData.data
+      ? boardData.data.tasks.filter((ticket) => !ticket.deletedAt)
+      : [];
+
+  const [backlogTickets, readyTickets, inProgressTickets, doneTickets] = [
+    unarchivedTickets.filter((ticket) => ticket.status === 'backlog'),
+    unarchivedTickets.filter((ticket) => ticket.status === 'ready'),
+    unarchivedTickets.filter((ticket) => ticket.status === 'in progress'),
+    unarchivedTickets.filter((ticket) => ticket.status === 'done'),
+  ];
+
   return (
     <main className='my-16 flex min-h-screen w-full flex-col gap-8 bg-typo-surface'>
       <section className='mx-auto flex w-11/12 flex-col gap-2'>
@@ -18,7 +38,7 @@ function BoardContainer() {
         <Typography
           as='p'
           variant='bt'
-          color='inline'
+          color='icon'
           weight='regular'
           className='flex items-end gap-1'
         >
@@ -30,10 +50,10 @@ function BoardContainer() {
         </Typography>
       </section>
       <section className='mx-auto grid w-11/12 grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4'>
-        <StatusBoard title='Backlog' ticketCount={5} />
-        <StatusBoard title='Ready' ticketCount={15} />
-        <StatusBoard title='In Progress' ticketCount={5} />
-        <StatusBoard title='Done' ticketCount={5} />
+        <StatusBoard title='Backlog' data={backlogTickets} />
+        <StatusBoard title='Ready' data={readyTickets} />
+        <StatusBoard title='In Progress' data={inProgressTickets} />
+        <StatusBoard title='Done' data={doneTickets} />
       </section>
     </main>
   );

src/app/board/hooks/query.ts

@@ -0,0 +1,14 @@
+'use client';
+import { useQuery } from '@tanstack/react-query';
+
+import { ApiResponse } from '@/types/api';
+import { tasksType } from '@/types/entities/task';
+
+export const useGetTickets = () => {
+  const { data: boardData, isPending: isLoading } = useQuery<
+    ApiResponse<tasksType>
+  >({
+    queryKey: ['/task'],
+  });
+  return { boardData, isLoading };
+};

src/lib/helper.ts

@@ -0,0 +1,15 @@
+export const showFormattedDate = (date: Date) => {
+  return new Date(date).toLocaleDateString('id-ID', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+};
+
+type colorType = 'primary' | 'success' | 'warning' | 'danger';
+
+export const randomColor = () => {
+  const colors: colorType[] = ['primary', 'success', 'warning', 'danger'];
+  return colors[Math.floor(Math.random() * colors.length)];
+};

src/types/entities/task.ts

@@ -0,0 +1,30 @@
+export type checklistType = {
+  _id: string;
+  isDone: boolean;
+  checklistItem: string;
+};
+
+export type attachmentType = {
+  _id: string;
+  displayText: string;
+  link: string;
+};
+
+export type taskType = {
+  _id: string;
+  title: string;
+  description: string;
+  tags: string[];
+  dueDate: Date;
+  checklists: checklistType[];
+  status: 'backlog' | 'ready' | 'in progress' | 'done';
+  attachments: attachmentType[];
+  createdAt: Date;
+  updatedAt: Date;
+  deletedAt?: Date;
+  __v: number;
+};
+
+export type tasksType = {
+  tasks: taskType[];
+};

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -18,7 +19,8 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "~/*": ["./public/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],