Skip to content

Commit

Permalink
Development (#3)
Browse files Browse the repository at this point in the history 
* Readme updated

* Readme updated

* Readme updated

* Updated for SEO

* Updated for SEO
  • Loading branch information
@bilalmohib
bilalmohib authored Apr 8, 2023
1 parent c6a0077 commit f90df6b
Show file tree
Hide file tree
Showing 11 changed files with 913 additions and 802 deletions.
72 changes: 72 additions & 0 deletions components/Main/Home/MainContent/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import React, { useState, useEffect, useRef } from 'react';
import { useRouter } from 'next/router';
import type { NextPage } from 'next';
import Head from 'next/head';
// Importing Components
import Home from '@app/components/Main/Home';
import Navbar from '@app/components/Navbar';
import Sidebar from '@app/components/Sidebar';
import Inbox from '@app/components/Main/Inbox';

// Importing Material UI Components
import {
Box
} from '@mui/material';

import styles from "../../../../styles/Home.module.css";

interface MainContentProps {
isOpen: boolean;
setIsOpen: (value: boolean) => void;
currentMenuItem: number;
setCurrentMenuItem: (value: number) => void;
signedInUserData: { email: string };
}

const MainContent: React.FC<MainContentProps> = ({ isOpen, setIsOpen, currentMenuItem, setCurrentMenuItem, signedInUserData }) => {
return (
<main className={styles.main}>
<Navbar isOpen={isOpen} setIsOpen={setIsOpen} />
<div className="d-flex">
<Sidebar currentMenuItem={currentMenuItem} setCurrentMenuItem={setCurrentMenuItem} isOpen={isOpen} setIsOpen={setIsOpen} />

<div style={{ marginTop: 70 }} className={`${styles.rightSideContainer} ${isOpen ? styles.shrinkContainer : styles.expandContainer}`}>
{/* Home Page */}
<section className={currentMenuItem === 1 ? '' : 'd-none'}>
<Home />
</section>

{/* My Tasks Page */}
<section className={currentMenuItem === 2 ? '' : 'd-none'}>
<br />
<h3 style={{ marginLeft: 30, marginTop: 5, color: 'black', fontWeight: 'lighter' }}>My Tasks</h3>
</section>

{/* Inbox Page */}
<section className={currentMenuItem === 3 ? '' : 'd-none'}>
<Inbox email={signedInUserData.email} />
</section>

{/* Reporting Page */}
<section className={currentMenuItem === 4 ? '' : 'd-none'}>
<br />
<h3 style={{ marginLeft: 30, marginTop: 5, color: 'black', fontWeight: 'lighter' }}>Reporting</h3>
</section>

{/* Portfolios Page */}
<section className={currentMenuItem === 5 ? '' : 'd-none'}>
<br />
<h3 style={{ marginLeft: 30, marginTop: 5, color: 'black', fontWeight: 'lighter' }}>Portfolios</h3>
</section>

{/* Goals Page */}
<section className={currentMenuItem === 6 ? '' : 'd-none'}>
<br />
<h3 style={{ marginLeft: 30, marginTop: 5, color: 'black', fontWeight: 'lighter' }}>Goals</h3>
</section>
</div>
</div>
</main>
);
};
export default MainContent;
284 changes: 284 additions & 0 deletions components/Pages/Profile/ProfileComp/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,284 @@
import React, { useState, useEffect, useRef } from 'react';
import { useRouter } from 'next/router';
import type { NextPage } from 'next';
import Image from 'next/image';
import Head from 'next/head';

// Importing Material UI Components
import {
Box
} from '@mui/material';

// Importing Icons
import { CiTimer } from "react-icons/ci";
import { AiOutlineMail } from "react-icons/ai";
import { BsCheckCircle } from "react-icons/bs";

import DatePicker from 'react-date-picker/dist/entry.nostyle';

import {
doc,
collection,
onSnapshot,
addDoc,
query,
orderBy,
deleteDoc,
setDoc,
where
} from "firebase/firestore";
import { useCollection } from 'react-firebase-hooks/firestore';

import {
onAuthStateChanged,
} from "firebase/auth";

import { db, auth } from "../../../../firebase";

// Importing Components
import CustomLoader from '@app/components/CustomLoader';
import Navbar from '@app/components/Navbar';
import Sidebar from '@app/components/Sidebar';

import styles from './style.module.css';

interface ProfileCompProps {
isSignedIn: boolean;
signedInUserData: any;
}

const ProfileComp: React.FC<ProfileCompProps> = ({ isSignedIn, signedInUserData }) => {
const router = useRouter();
const { uuid } = router.query;

const [taskDue, setTaskDue] = useState<Date>(new Date());

const frequentCollaboratorsList = [
{
name: "Bilal Mohib",
email: "[email protected]",
photoURL: null
},
{
name: "Arif Alvi",
email: "[email protected]",
photoURL: null
},
{
name: "Imran Khan",
email: "[email protected]",
photoURL: null
},
{
name: "Nawaz Sharif",
email: "[email protected]",
photoURL: null
},
{
name: "Asif Ali Zardari",
email: "[email protected]",
photoURL: null
}
]

/////////////////////////////////////// Database Part ////////////////////////////////////////////////
let q = query(collection(db, "Data", "Projects", `${uuid}`));

const [snapshot, loading, error] = useCollection(
q,
{
snapshotListenOptions: { includeMetadataChanges: true },
}
);

// GETTINGS Active Jobs
const [projects, setProjects] = useState<any>([])
// const [loading, setLoading] = useState(true);

// FOR GETTING PROJECTS
useEffect(() => {

if (!loading) {
// if (snapshot.docs.length !== projects.length) {
setProjects(snapshot?.docs.map(doc => ({ ...doc.data(), id: doc.id })));
// setLoading(false);
// console.clear();
console.log("Projects ==> ", projects);
// }
}

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [loading, snapshot]);
// FOR GETTING PROJECTS

/////////////////////////////////////// Database Part ////////////////////////////////////////////////

return (
<div className={styles.container}>
{(isSignedIn && !loading) ? (
<div>
<div className={styles.profileContainerTop}>
<div className='d-flex'>
<div className={styles.profileImageContainer}>
<Image
className={styles.profileImage}
width={120}
height={120}
src={signedInUserData.photoURL}
alt={signedInUserData.displayName}
title={signedInUserData.displayName}
loading='eager'
/>
</div>
<div className={styles.profileRightContainer}>
<h4 className={styles.profileName}>{signedInUserData.displayName}</h4>
<p className={styles.profileInfoContainer}>
<p>
<CiTimer />
{/* 10:19am */}
&nbsp;
{new Date().toLocaleTimeString()}
&nbsp;
local time
</p>
<p style={{ marginLeft: 10 }}><AiOutlineMail /> <span className={styles.email}>[email protected]</span></p>
</p>
</div>
</div>
<div>
<button
className={`btn btn-primary ${styles.signOutBtn}`}
onClick={() => {
auth.signOut();
router.push("/login");
}}>
Sign Out
</button>
</div>
</div>

{/* Main Profile Container */}
<div className={styles.profileContainerMain}>
<div className={styles.myTasksMainContainer}>
<div>
<header className={styles.headerMyTasks}>
<div>
My tasks
</div>
<div className={styles.myTasksHeaderRight}>
<button className={`btn ${styles.viewAllTasksBtn}`} onClick={() => {
alert("View all tasks");
}}>View all tasks</button>
</div>
</header>
<section className={styles.bodymyTasksContainer}>
{
projects.map((item: any, index: any) => {
return (
<div key={index} className={styles.myTasksList}>
<div className={styles.myTasksListLeft}>
<p className={styles.taskCompleteIcon} onClick={() => alert("Mark As Completed")}><BsCheckCircle /></p>
<p className={styles.pnmyTask}>{item.ProjectName}</p>
</div>
<div className={styles.myTasksListRight}>
<DatePicker
onChange={setTaskDue}
value={new Date(item.ProjectEndingDate)}
/>
</div>
</div>
)
})
}
</section>
</div>
</div>

<div className={styles.rightSideMainContainer}>
<div className={styles.aboutMeContainer}>
<h1>About me</h1>
<p>Use this space to tell people about yourself.</p>
</div>
<div className={styles.frequentCollaborators}>
<h1 className={styles.fcHeading}>Frequent collaborators</h1>
<div className={styles.outsideContainerFCL}>
{
frequentCollaboratorsList.map((item, index) => {
return (
<div key={index} className={styles.frequentCollaboratorsList}>
<div className={`${styles.lifcl} d-flex`}>
<div className={styles.frequentCollaboratorsImageContainer}>
<Image
className={styles.frequentCollaboratorsImage}
width={48}
height={48}
src={(item.photoURL !== null)
? item.photoURL
: "http://localhost:3000/_next/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAEdFTp7zFuG2WiiEzzreDfzI4170bnvEDdD_l1Hlly7K%3Ds96-c&w=256&q=75"
}
alt={item.name}
title={item.name}
/>
</div>
<div className={styles.frequentCollaboratorsNameContainer}>
<p className={styles.emailfcnc}>{item.email}</p>
</div>
</div>
</div>
)
})
}
</div>
{/* <br /> */}
</div>
</div>
</div>


{/* MAIN Profile Container */}
<div className={styles.profileContainerMain}>
<div className={styles.myTasksMainContainer}>
<div>
<header className={styles.headerMyTasks}>
<div>
My recent projects
</div>
</header>
<section className={styles.bodymyTasksContainer}>
{
projects.map((item: any, index: any) => {
return (
<div key={index} className={styles.myTasksList}>
<div className={styles.myTasksListLeft}>
<p className={styles.taskCompleteIcon} onClick={() => alert("Mark As Completed")}><BsCheckCircle /></p>
<p className={styles.pnmyTask}>{item.ProjectName}</p>
</div>
<div className={styles.myTasksListRight}>
<DatePicker
onChange={setTaskDue}
value={new Date(item.ProjectEndingDate)}
/>
</div>
</div>
)
})
}
</section>
</div>
</div>

<div className={styles.rightSideMainContainer}>
{/* */}
</div>
</div>
<br /><br />
{/* MAIN Profile Container */}
</div>
) : (
<CustomLoader />
)}
</div>
)
}

export default ProfileComp;
Loading

1 comment on commit f90df6b

@vercel
Copy link

@vercel vercel bot commented on f90df6b Apr 8, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

fyp-project-management-software – ./

fyp-project-management-software-git-main-topideas.vercel.app
www.taskencher.com
fyp-project-management-software-topideas.vercel.app
taskencher.com
fyp-project-management-software.vercel.app

Please sign in to comment.