Monthly stats page new function

blotztask-ui/package.json

@@ -54,6 +54,7 @@
     "next-auth": "^4.24.10",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
+    "react-countup": "^6.5.3",
     "react-day-picker": "^8.7.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.44.3",
@@ -76,5 +77,6 @@
     "prettier": "^3.3.3",
     "tailwindcss": "^3.4.6",
     "typescript": "^5"
-  }
+  },
+  "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
 }

blotztask-ui/src/app/monthly-stats/page.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { H1, H5, P } from '@/components/ui/heading-with-anchor';
+import { mock } from 'node:test';
+import CountUp from 'react-countup';
+export default function Monthlystats() {
+  const mockTasks = [
+    {
+      id: 1,
+      title: 'Complete project report',
+      description: 'Finalize the project report and submit it to the manager.',
+      isDone: false,
+      createdAt: '2024-07-20T08:30:00Z',
+      updatedAt: '2024-07-20T08:30:00Z',
+    },
+    {
+      id: 2,
+      title: 'Meeting with the team',
+      description:
+        'Discuss the project milestones and deadlines with the team.',
+      isDone: false,
+      createdAt: '2024-07-21T10:00:00Z',
+      updatedAt: '2024-07-21T10:00:00Z',
+    },
+  ];
+
+  const taskCount = mockTasks.length;
+  return (
+    <>
+      <div className="flex flex-col gap-5 md:items-center md:p-28">
+        <div className="flex flex-col gap-5 ">
+          <img
+            src="/assets/images/profileImage.png"
+            alt="an incredable image"
+            className="w-[120px] h-[120px] absolute top-[80px] left-[500px]"
+          />
+          <p className="font-arial font-bold text-[40px] leading-[100px] tracking-[-0.41px] text-center text-[#278291]">
+            You planned{' '}
+            <span className="font-arial font-bold text-[123px] leading-[100px] tracking-[-0.41px] text-center text-[#278291]">
+              <CountUp end={taskCount} />{' '}
+            </span>
+            tasks this month
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}

blotztask-ui/src/app/navbar/main-nav.tsx

@@ -1,9 +1,6 @@
 'use client';
 
-import {
-  signOut,
-  useSession,
-} from 'next-auth/react';
+import { signOut, useSession } from 'next-auth/react';
 import Link from 'next/link';
 import styles from './main-nav.module.css';
 
@@ -29,16 +26,14 @@ export function MainNav({}: React.HTMLAttributes<HTMLElement>) {
       <div className="sm:flex hidden justify-end">
         {session?.user ? (
           <div className="flex gap-6">
-            <Link
-              href="/task-dayview"
-              className={styles['nav-btn']}
-            >
+            <Link href="/task-dayview" className={styles['nav-btn']}>
               <span className={styles['link-underline']}>Day View</span>
             </Link>
-            <Link
-              href="/task-list"
-              className={styles['nav-btn']}
-            >
+            {/* Add the link to the Monthly view page */}
+            <Link href="/monthly-stats" className={styles['nav-btn']}>
+              <span className={styles['link-underline']}>Monthly Summary</span>
+            </Link>
+            <Link href="/task-list" className={styles['nav-btn']}>
               <span className={styles['link-underline']}>All Task</span>
             </Link>
             {/* <Link
@@ -47,16 +42,10 @@ export function MainNav({}: React.HTMLAttributes<HTMLElement>) {
             >
               <span className={styles['link-underline']}>New Task List</span>
             </Link> */}
-            <Link
-              href="/test-connection"
-              className={styles['nav-btn']}
-            >
+            <Link href="/test-connection" className={styles['nav-btn']}>
               <span className={styles['link-underline']}>Test Connection</span>
             </Link>
-            <Link
-              href="/profile"
-              className={styles['nav-btn']}
-            >
+            <Link href="/profile" className={styles['nav-btn']}>
               <span className={styles['link-underline']}>Profile</span>
             </Link>
             <button
@@ -69,25 +58,15 @@ export function MainNav({}: React.HTMLAttributes<HTMLElement>) {
           </div>
         ) : (
           <div className="flex gap-6">
-            <Link
-              href="/signIn"
-            >
-            <button
-              type="button"
-              className={styles['nav-secondary-btn']}
-            >
-              <span>Sign in</span>
-            </button>
+            <Link href="/signIn">
+              <button type="button" className={styles['nav-secondary-btn']}>
+                <span>Sign in</span>
+              </button>
             </Link>
-            <Link
-              href="/signup"
-            >
-            <button
-              type="button"
-              className={styles['nav-btn']}
-            >
-              <span>Sign up</span>
-            </button>
+            <Link href="/signup">
+              <button type="button" className={styles['nav-btn']}>
+                <span>Sign up</span>
+              </button>
             </Link>
           </div>
         )}

blotztask-ui/src/app/page.tsx

@@ -1,18 +1,16 @@
-import { H1, H3 } from '@/components/ui/heading-with-anchor';
+import { P } from '@/components/ui/heading-with-anchor';
 
 export default function Home() {
   return (
     <main className="flex flex-col gap-5 p-12 md:items-center md:p-28">
-      <H1 className="heading-primary">
-        Blotz
-        <span className="heading-secondary">Task</span>
-      </H1>
-
-      <H3 className="text-lg font-light text-muted-foreground sm:text-xl">
-        Designed to help users efficiently organize and track their tasks
-        providing functionality for task creation, management, and completion
-        tracking.
-      </H3>
+      <p className="w-[679px] h-[60px] absolute top-[197px] left-[402px] font-arial text-[32px] font-bold leading-[48px] tracking-[-0.41px] text-center text-[#278291]">
+        Welcome to the new age note taking web
+      </p>
+      <img
+        src="/assets/images/homePageNewPicture.png"
+        alt="an incredable image"
+        className="w-[849px] h-[350px] absolute top-[305px] left-[296px]"
+      />
     </main>
   );
 }

blotztask-ui/src/app/task-dayview/page.tsx

@@ -58,24 +58,25 @@ export default function Dayview() {
     // Simulate fetching tasks
     setTasks(validatedTasks);
   }, []);
-
+  // Count this month's tasks' number for user
+  const countTasks = (tasks: taskDto[]): number => {
+    return tasks.length;
+  };
   return (
     <>
-      <div className='flex flex-col gap-5'>
-        <div className='flex flex-col gap-5'>
+      <div className="flex flex-col gap-5">
+        <div className="flex flex-col gap-5">
           <H1 className="heading-primary">
             Day
             <span className="heading-secondary">View</span>
-          </H1>        
-          <H5>
-              List of today&apos;s task
-          </H5>
+          </H1>
+          <H5>List of today&apos;s task</H5>
+          <H5>You planned {countTasks(mockTasks)} tasks this month</H5>
         </div>
 
         <div className="grid gap-6 w-3/4">
-
           {tasks.map((task) => (
-            <Card key={task.id} className='bg-white'>
+            <Card key={task.id} className="bg-white">
               <CardHeader className="flex-row pb-1">
                 <Checkbox
                   className="rounded-full mt-1 mr-2"
@@ -99,7 +100,9 @@ export default function Dayview() {
           ))}
 
           <div className="w-1/2 flex gap-5 flex-col">
-            <Button className="self-start" onClick={toggleFormVisibility}>Add task</Button>
+            <Button className="self-start" onClick={toggleFormVisibility}>
+              Add task
+            </Button>
             {isFormVisible && (
               <Card>
                 <CardHeader className="pb-1"></CardHeader>