Skip to content

Commit

Permalink
Monthly stats page new function (#127)
Browse files Browse the repository at this point in the history 
Co-authored-by: benjaminneoh <benjaminneoh6343@gmail.com>
  • Loading branch information
@JasonRenBang @Ben0189
JasonRenBang and Ben0189 authored Nov 17, 2024
1 parent ace3d10 commit 6c1d3da
Show file tree
Hide file tree
Showing 8 changed files with 111 additions and 70 deletions.
19 changes: 19 additions & 0 deletions blotztask-ui/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion blotztask-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -77,4 +78,4 @@
"tailwindcss": "^3.4.6",
"typescript": "^5"
}
}
}
Binary file added blotztask-ui/public/assets/images/homePageNewPicture.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added blotztask-ui/public/assets/images/profileImage.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 changes: 50 additions & 0 deletions blotztask-ui/src/app/monthly-stats/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
'use client';

import Image from 'next/image';
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-10">
<div className="mt-1">
<Image
src="/assets/images/profileImage.png"
alt="an incredable image"
width={150}
height={150}
/>
</div>
<div>
<p className="pl-20 font-arial font-bold text-[40px] leading-[100px] tracking-[-0.41px] text-center text-secondary">
You planned{' '}
<span className="font-arial font-bold text-[120px] leading-[100px] tracking-[-0.41px] text-center text-secondary">
<CountUp end={taskCount} />{' '}
</span>
tasks this month
</p>
</div>
</div>
</>
);
}
62 changes: 16 additions & 46 deletions blotztask-ui/src/app/navbar/main-nav.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -29,36 +26,19 @@ 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
href="/tasks"
className={styles['nav-btn']}
>
<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']}
>
<span className={styles['link-underline']}>Profile</span>
</Link>
<button
type="button"
onClick={() => signOut()}
Expand All @@ -69,25 +49,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>
)}
Expand Down
21 changes: 10 additions & 11 deletions blotztask-ui/src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import { H1, H3 } from '@/components/ui/heading-with-anchor';
import Image from "next/image";

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="mb-6 font-arial text-[32px] font-bold leading-[48px] tracking-[-0.41px] text-center text-secondary">
Welcome to the new age note taking web
</p>
<Image
src="/assets/images/homePageNewPicture.png"
alt="an incredable image"
width={600}
height={400}
/>
</main>
);
}
26 changes: 14 additions & 12 deletions blotztask-ui/src/app/task-dayview/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import { useEffect, useState } from 'react';
import { z } from 'zod';
import { TaskDTO, taskDTOSchema } from './schema/schema'
import { TaskDTO, taskDTOSchema } from './schema/schema';
import { H1, H5 } from '@/components/ui/heading-with-anchor';
import { fetchTaskItemsDueToday } from '@/services/taskService';

Expand All @@ -22,33 +22,35 @@ export default function Dayview() {
const notDoneTasks = validatedTasks.filter((task) => !task.isDone);
setIncompleteTasks(notDoneTasks);
} catch (error) {
console.error("Error loading tasks:", error);
console.error('Error loading tasks:', error);
}
};

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>
</div>

<div className="grid gap-6 w-full">
{incompleteTasks.length > 0 ? (
<div className="grid gap-6 w-full">
{incompleteTasks.map((task) => (
<div key={task.id} className='w-full'>
<div className='flex flex-row'>
<div className={`flex justify-center items-center rounded-xl bg-work-label mr-2 w-1/3 p-4`}>
<div key={task.id} className="w-full">
<div className="flex flex-row">
<div
className={`flex justify-center items-center rounded-xl bg-work-label mr-2 w-1/3 p-4`}
>
<p>{task.title}</p>
</div>
<div className={`flex justify-center items-center rounded-xl bg-work-label grow`}>
<div
className={`flex justify-center items-center rounded-xl bg-work-label grow`}
>
<p>{task.description}</p>
</div>
</div>
Expand Down

0 comments on commit 6c1d3da

Please sign in to comment.