Merge pull request #18 from frankduandou/20240603_gantt-chart_ads-man…

…agement ads management gantt chart and some update on ad details
Mi-Tech-Consulting · Jun 4, 2024 · b4e58c0 · b4e58c0
2 parents b9af35e + 483212a
commit b4e58c0
Show file tree

Hide file tree

Showing 16 changed files with 694 additions and 162 deletions.
diff --git a/app/(root)/manage/page.tsx b/app/(root)/manage/page.tsx
@@ -2,10 +2,10 @@ import Pagination from '@/components/ui/pagination';
 import Search from '@mitech/shared-components/ui/search';
 import AdsTable from '@/components/ui/ads-table';
 import { CreateAd } from '@/components/ui/button';
-//import { lusitana } from '@/app/ui/fonts';
 import { Suspense } from 'react';
 import { Metadata } from 'next';
 import { GetAllAds,GetFilteredAdsPages } from '@/lib/data';
+import GanttChart from '@/components/ui/gantt-chart/gantt-chart';
 
 export const metadata: Metadata = {
   title: 'Manage Ads',
@@ -19,10 +19,8 @@ export default async function Page({
     page?: string;
   };
 }) {
-  //const ITEMS_PER_PAGE = 6;
   const query = searchParams?.query || '';
   const currentPage = Number(searchParams?.page) || 1;
-  //const totalPages =Math.ceil(GetAllAds().length / ITEMS_PER_PAGE);
   const totalPages = await GetFilteredAdsPages(query);
 return ( 
   <div className="w-full">
@@ -40,7 +38,16 @@ return (
       <div className="mt-5 flex w-full justify-center">
         <Pagination totalPages={totalPages} />
       </div>
-    </div>    
+    </div> 
+    <br /><hr />
+    <div className='w-full max-w-[80%] justify-center items-center m-auto pb-40'>
+      <div className="mt-4 items-center justify-center gap-2 md:mt-8">
+        <div className='row'><p className='ml-3 font-bold'>AD Campaign Gantt Chart</p></div>
+        <div className="row">
+          <GanttChart />          
+        </div>
+        </div>
+    </div>   
   </div>
 );
 }
diff --git a/components/ui/ad-details.tsx b/components/ui/ad-details.tsx
@@ -2,6 +2,7 @@
 import React, { useState } from "react";
 import { Advertisement, ChannelField } from '@/lib/definitions';
 import { Button, Link } from "@nextui-org/react";
+import Image from "next/image";
 
 export default function Form({ channels, ad }: { channels: ChannelField[], ad:Advertisement }) {
 
@@ -167,7 +168,7 @@ export default function Form({ channels, ad }: { channels: ChannelField[], ad:Ad
                     </label>
                   </div>
                   <div className="md:w-1/4 inline-flex">
-                    <img src={ad.image_url} />
+                    <Image src={ad.image_url} alt={ad.image_url} width={500} height={500}/>
                   </div>
                 </div>
               </div>): null}

diff --git a/components/ui/gantt-chart/gantt-chart.tsx b/components/ui/gantt-chart/gantt-chart.tsx
@@ -0,0 +1,93 @@
+'use client';
+import React, { FC, useState, useEffect } from 'react';
+import Grid from '@/components/ui/gantt-chart/grid';
+import Tasks from '@/components/ui/gantt-chart/tasks';
+import TimeTable from '@/components/ui/gantt-chart/time-table';
+import { GetAllTaskDurations, GetAllTasks } from '@/lib/data';
+
+interface TimeTableProps {
+
+    timeRange: {
+      fromSelectYear: string;
+      fromSelectMonth: number;
+      toSelectYear: string;
+      toSelectMonth: number;
+    };
+    tasks: {
+      id: string;
+      name: string;
+    }[];
+    taskDurations: {
+      task: string;
+      start: string;
+      end: string;
+      id: string;
+      headline: string;
+      channel: string;
+      url: string;
+      budget: number;
+    }[];
+
+  setTaskDurations: (taskDurations: {
+    task: string;
+    start: string;
+    end: string;
+    id: string;
+    headline: string;
+    channel: string;
+    url: string;
+    budget: number;
+  }[]) => void;
+}
+
+const GanttChart: FC = () => {
+  const [tasks, setTasks] = useState<null | any>(null);
+  const [taskDurations, setTaskDurations] = useState<null | any>(null);
+  const [timeRange, setTimeRange] = useState<TimeTableProps["timeRange"]>({
+    fromSelectMonth: 0,
+    fromSelectYear: '2024',
+    toSelectMonth: 5,
+    toSelectYear: '2024',
+  });
+
+  useEffect(() => {
+    const tasktemp = GetAllTasks();
+    setTasks(tasktemp);
+    const taskDurationtemp = GetAllTaskDurations();
+    setTaskDurations(taskDurationtemp);
+  }, []);
+
+  return (
+    <div id="gantt-container">
+      <Grid>
+        <Tasks
+          tasks={tasks}       
+          setTasks={setTasks}
+          setTaskDurations={setTaskDurations}  
+        />
+        <TimeTable
+          timeRange={timeRange}
+          tasks={tasks}
+          taskDurations={taskDurations}    
+          setTaskDurations={setTaskDurations}    
+        />
+      </Grid>
+      <style jsx>{`
+        #gantt-container {
+          --color-text: #272a2e;
+          --color-primary-dark: #0195e4;
+          --color-primary-light: #9ddcff;
+          --color-secondary: #4be35a;
+          --color-tertiary: #f7f7f7;
+          --color-orange: #ef5350;
+          --color-outline: #e9eaeb;
+          --border-radius: 5px;
+          --cell-height: 40px;
+          padding: 1rem;
+        }
+      `}</style>
+    </div>
+  );
+}
+
+export default GanttChart;
diff --git a/components/ui/gantt-chart/grid.tsx b/components/ui/gantt-chart/grid.tsx
@@ -0,0 +1,24 @@
+import React, { FC, ReactNode } from 'react';
+
+interface GridProps {
+  children: ReactNode;
+}
+
+const Grid: FC<GridProps> = ({ children }) => {
+  return (
+    <div id="gantt-grid-container" className='grid grid-cols-[150px_1fr] shadow-[3px_3px_3px_rgba(0,0,0,0.05)] rounded-[5px]'>
+      {children}
+      <style jsx>{`
+        #gantt-grid-container {
+          display: grid;
+          grid-template-columns: 150px 1fr;
+          outline: 2px solid var(--color-outline);
+          border-radius: 5px;
+          box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.05);
+        }
+      `}</style>
+    </div>
+  );
+}
+
+export default Grid;
diff --git a/components/ui/gantt-chart/tasks.tsx b/components/ui/gantt-chart/tasks.tsx
@@ -0,0 +1,64 @@
+import React, { FC, useEffect, useRef } from 'react';
+
+interface Task {
+  id: number;
+  name: string;
+}
+
+interface TasksProps {
+    tasks: Task[];
+  setTasks: (tasks: Task[]) => void;
+  setTaskDurations: (durations: number[]) => void;
+}
+
+const Tasks: FC<TasksProps> = ({ tasks, setTasks, setTaskDurations }) => {
+  const inputRef = useRef<HTMLInputElement[]>([]);
+  const indexRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (inputRef.current.length && indexRef.current !== null) {
+      inputRef.current[indexRef.current]?.focus();
+    }
+  });
+
+  return (
+    <div id="gantt-grid-container__tasks">
+      <div className="gantt-task-row"></div>
+      <div className="gantt-task-row"></div>
+      <div className="gantt-task-row"></div>
+      {tasks &&
+        tasks.map((tsk, i) => (
+          <div key={`${i}-${tsk?.id}-${tsk.name}`} className="gantt-task-row">
+            <input
+              data-task-id={tsk?.id}
+              value={tsk?.name}
+              ref={(el) => (inputRef.current[i] = el as HTMLInputElement)}
+            />
+          </div>
+        ))}
+      <style jsx>{`
+        #gantt-grid-container__tasks {
+          outline: 0.5px solid var(--color-outline);
+        }
+
+        .gantt-task-row {
+          display: flex;
+          outline: 0.5px solid var(--color-outline);
+          text-align: center;
+          height: var(--cell-height);
+          border: none;
+        }
+
+        input {
+          width: 127px;
+          border: none;
+          outline: none;
+          background: none;
+          font-size: 0.875rem;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default Tasks;