From 4866d1385c521c9f7bcbe7a976a84b61f32a3ab2 Mon Sep 17 00:00:00 2001 From: Tseg-tech Date: Tue, 16 Sep 2025 11:40:08 +0300 Subject: [PATCH 01/26] modified side bar styles --- src/componnents/Sidebar.js | 80 +++++++++++++++++++++++++++++--------- 1 file changed, 61 insertions(+), 19 deletions(-) diff --git a/src/componnents/Sidebar.js b/src/componnents/Sidebar.js index e8a3545..a81bd9b 100644 --- a/src/componnents/Sidebar.js +++ b/src/componnents/Sidebar.js @@ -8,7 +8,8 @@ import Avatar from "./Avatar" //import "./Sidebar.css" import { Box, - UnorderedList, ListItem, Flex, Text + UnorderedList, ListItem, Flex, Text, Image, + Img, } from '@chakra-ui/react'; //import { MdOutlineMail } from "react-icons/md"; import DashboardIcon from '../assets/dashboard_icon.svg' @@ -26,53 +27,94 @@ export default function Sidebar() { boxSizing="border-box" position="relative" color="white" - + > - + + borderBottom="1px solid rgba(255, 255, 255, 0.2)" + >

{user.displayName}

 - - + + isActive ? "active-link" : "inactive-link" } - style={{ textDecoration: "none" }} + > - - dashboard icon + + + dashboard icon Dashboard - + isActive ? "active-link" : "inactive-link" } - style={{ textDecoration: "none" }} + > - - add project icon + + add project icon New Project From b8065b6a8c173bff82c4ab6b45ec8215d67cf60f Mon Sep 17 00:00:00 2001 From: Tseg-tech Date: Tue, 16 Sep 2025 14:24:29 +0300 Subject: [PATCH 02/26] modified Avatar with chakra --- src/componnents/Avatar.js | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/src/componnents/Avatar.js b/src/componnents/Avatar.js index 4cb7ad5..e186a48 100644 --- a/src/componnents/Avatar.js +++ b/src/componnents/Avatar.js @@ -1,10 +1,26 @@ // styles -import './Avatar.css' - +//import './Avatar.css' +import { Box, Img } from '@chakra-ui/react' export default function Avatar({ src }) { return ( -
- user avatar -
+ + user avatar + ) } \ No newline at end of file From e2670642f8a98d91091346f9e32dd83ec4c3430a Mon Sep 17 00:00:00 2001 From: Tseg-tech Date: Tue, 16 Sep 2025 16:35:22 +0300 Subject: [PATCH 03/26] modified All user Section --- package-lock.json | 25 ++++---- package.json | 1 + src/componnents/OnlineUsers.js | 112 ++++++++++++++++++++++++++------- src/componnents/Sidebar.js | 54 ++++++++-------- 4 files changed, 130 insertions(+), 62 deletions(-) diff --git a/package-lock.json b/package-lock.json index 284e981..eb972a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "the-dojo", "version": "0.1.0", "dependencies": { + "@chakra-ui/icons": "^2.2.4", "@chakra-ui/react": "^1.8.9", "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", @@ -2271,6 +2272,16 @@ "react": ">=16.8.6" } }, + "node_modules/@chakra-ui/icons": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-2.2.4.tgz", + "integrity": "sha512-l5QdBgwrAg3Sc2BRqtNkJpfuLw/pWRDwwT58J6c4PqQT6wzXxyNa8Q0PForu1ltB5qEiFb1kxr/F/HO1EwNa6g==", + "license": "MIT", + "peerDependencies": { + "@chakra-ui/react": ">=2.0.0", + "react": ">=18" + } + }, "node_modules/@chakra-ui/image": { "version": "1.1.10", "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-1.1.10.tgz", @@ -20878,20 +20889,6 @@ "is-typedarray": "^1.0.0" } }, - "node_modules/typescript": { - "version": "4.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", - "license": "Apache-2.0", - "peer": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/package.json b/package.json index 42d1ba6..1b8630c 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@chakra-ui/icons": "^2.2.4", "@chakra-ui/react": "^1.8.9", "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", diff --git a/src/componnents/OnlineUsers.js b/src/componnents/OnlineUsers.js index 2a70968..a58d6cc 100644 --- a/src/componnents/OnlineUsers.js +++ b/src/componnents/OnlineUsers.js @@ -1,26 +1,94 @@ -import { useCollection } from '../hooks/useCollection' - -// components -import Avatar from './Avatar' - -// styles -import './OnlineUsers.css' +import { useState } from 'react'; +import { + Box, + Heading, + Text, + Spinner, + IconButton, +} from '@chakra-ui/react'; +//import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'; +import { useCollection } from '../hooks/useCollection'; +import Avatar from './Avatar'; export default function OnlineUsers() { - const { isPending, error, documents } = useCollection('users') + const { isPending, error, documents } = useCollection('users'); + const [isOpen, setIsOpen] = useState(false); return ( -
-

All Users

- {isPending &&
Loading users...
} - {error &&
{error}
} - {documents && documents.map(user => ( -
- {user.online && } - {user.displayName} - -
- ))} -
- ) -} \ No newline at end of file + <> + {/* Toggle Button */} + {isOpen ? '🙈' : '👁️'}} + onClick={() => setIsOpen(!isOpen)} + aria-label="Toggle" + position="fixed" + bottom="20px" + right="20px" + size="lg" + borderRadius="full" + colorScheme="green" + /> + + + {/* User List Box */} + {isOpen && ( + + + All Users + + + {isPending && } + {error && {error}} + + {documents && + documents.map((user) => ( + + {user.online && ( + + )} + {user.displayName} + + + ))} + + )} + + ); +} diff --git a/src/componnents/Sidebar.js b/src/componnents/Sidebar.js index a81bd9b..9a4c960 100644 --- a/src/componnents/Sidebar.js +++ b/src/componnents/Sidebar.js @@ -11,6 +11,8 @@ import { UnorderedList, ListItem, Flex, Text, Image, Img, } from '@chakra-ui/react'; +import { css } from '@emotion/react' + //import { MdOutlineMail } from "react-icons/md"; import DashboardIcon from '../assets/dashboard_icon.svg' import AddIcon from '../assets/add_icon.svg' @@ -63,19 +65,19 @@ export default function Sidebar() { > add project icon New Project From a2f4d8dc46bbe9438e485c844a411daef5b0c08b Mon Sep 17 00:00:00 2001 From: Tseg-tech Date: Tue, 16 Sep 2025 17:00:46 +0300 Subject: [PATCH 04/26] modified project list --- src/componnents/OnlineUsers.js | 4 +-- src/componnents/ProjectList.js | 48 ++++++++++++++++++++++++---------- 2 files changed, 36 insertions(+), 16 deletions(-) diff --git a/src/componnents/OnlineUsers.js b/src/componnents/OnlineUsers.js index a58d6cc..c4c19c5 100644 --- a/src/componnents/OnlineUsers.js +++ b/src/componnents/OnlineUsers.js @@ -6,7 +6,7 @@ import { Spinner, IconButton, } from '@chakra-ui/react'; -//import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'; + import { useCollection } from '../hooks/useCollection'; import Avatar from './Avatar'; @@ -90,5 +90,5 @@ export default function OnlineUsers() { )} - ); + ) } diff --git a/src/componnents/ProjectList.js b/src/componnents/ProjectList.js index 1fecc09..fa6f135 100644 --- a/src/componnents/ProjectList.js +++ b/src/componnents/ProjectList.js @@ -2,30 +2,50 @@ import { Link } from 'react-router-dom' import Avatar from '../componnents/Avatar' // styles -import './ProjectList.css' +//import './ProjectList.css' +import { Box, Heading, Text,UnorderedList, ListItem } from '@chakra-ui/react' export default function ProjectList({ projects }) { console.log(projects) return ( -
+ {projects.length === 0 &&

No projects yet!

} {projects.map(project => ( - -

{project.name}

-

Due by {project.dueDate.toDate().toDateString()}

-
-

Assigned to:

-
    + + {project.name} + Due by {project.dueDate.toDate().toDateString()} + + Assigned to: + {project.assignedUsersList.map(user => ( -
  • - -
    • + + + ))} -
-
+ + ))} -
+ ) } \ No newline at end of file From b299fa0bef1720c87c5b25f57ce4e0853892d745 Mon Sep 17 00:00:00 2001 From: Tseg-tech Date: Tue, 16 Sep 2025 17:03:57 +0300 Subject: [PATCH 05/26] modified project list --- src/componnents/ProjectList.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/componnents/ProjectList.js b/src/componnents/ProjectList.js index fa6f135..ad73609 100644 --- a/src/componnents/ProjectList.js +++ b/src/componnents/ProjectList.js @@ -3,7 +3,7 @@ import Avatar from '../componnents/Avatar' // styles //import './ProjectList.css' -import { Box, Heading, Text,UnorderedList, ListItem } from '@chakra-ui/react' +import { Box, Heading, Text, UnorderedList, ListItem } from '@chakra-ui/react' export default function ProjectList({ projects }) { console.log(projects) @@ -26,16 +26,18 @@ export default function ProjectList({ projects }) { color="inherit" > {project.name} - Due by {project.dueDate.toDate().toDateString()} + + Due by {project.dueDate.toDate().toDateString()} + - Assigned to: - Assigned to: + {project.assignedUsersList.map(user => ( From ad7b421ce67d1c4dc6ee214bf21e27aa4086206c Mon Sep 17 00:00:00 2001 From: Tseg-tech Date: Wed, 17 Sep 2025 00:41:45 +0300 Subject: [PATCH 06/26] commit --- src/App.js | 2 +- src/componnents/Sidebar.js | 10 +++---- src/pages/dashboard/Dashboard.css | 2 +- src/pages/dashboard/Dashboard.js | 30 +++++++++++++------ src/pages/dashboard/ProjectFilter.js | 43 ++++++++++++++++++++++------ 5 files changed, 62 insertions(+), 25 deletions(-) diff --git a/src/App.js b/src/App.js index b5e1536..8f6b3ec 100644 --- a/src/App.js +++ b/src/App.js @@ -25,7 +25,7 @@ function App() { minH="100vh" bgImage="url('/github.png')" bgSize= "auto" - bgPosition="center" + //bgPosition="center" bgRepeat="repeat" >
diff --git a/src/componnents/Sidebar.js b/src/componnents/Sidebar.js index 9a4c960..5f95fd7 100644 --- a/src/componnents/Sidebar.js +++ b/src/componnents/Sidebar.js @@ -41,10 +41,10 @@ export default function Sidebar() { borderBottom="1px solid rgba(255, 255, 255, 0.2)" > -

{user.displayName}

+ {user.displayName} - @@ -69,7 +69,7 @@ export default function Sidebar() { img { filter: invert(100%); } - .active-link & img { + &.active-link & img { filter: invert(40%); } &.active-link { @@ -83,7 +83,7 @@ export default function Sidebar() { src={DashboardIcon} alt="dashboard icon" /> - Dashboard + Dashboard diff --git a/src/pages/dashboard/Dashboard.css b/src/pages/dashboard/Dashboard.css index 4cb1deb..1eea339 100644 --- a/src/pages/dashboard/Dashboard.css +++ b/src/pages/dashboard/Dashboard.css @@ -1,5 +1,5 @@ .project-filter { - margin: 30px auto; + margin: 20px auto; } .project-filter nav { display: flex; diff --git a/src/pages/dashboard/Dashboard.js b/src/pages/dashboard/Dashboard.js index bcb3706..a26f528 100644 --- a/src/pages/dashboard/Dashboard.js +++ b/src/pages/dashboard/Dashboard.js @@ -7,8 +7,14 @@ import ProjectList from '../../componnents/ProjectList' import ProjectFilter from './ProjectFilter' // styles -import './Dashboard.css' - +//import './Dashboard.css' +import { + Box, + Heading, + Text, + Spinner, + IconButton, +} from '@chakra-ui/react'; export default function Dashboard() { const { user } = useAuthContext() const { documents, error } = useCollection('projects') @@ -17,15 +23,15 @@ export default function Dashboard() { const changeFilter = (newFilter) => { setFilter(newFilter) } - + const projects = documents ? documents.filter(document => { - switch(filter) { + switch (filter) { case 'all': return true case 'mine': let assignedToMe = false document.assignedUsersList.forEach(u => { - if(u.id === user.uid) { + if (u.id === user.uid) { assignedToMe = true } }) @@ -42,11 +48,17 @@ export default function Dashboard() { }) : null return ( -
-

Dashboard

- {error &&

{error}

} + + + Dashboard + + {error && {error}} {documents && } {projects && } -
+ ) } \ No newline at end of file diff --git a/src/pages/dashboard/ProjectFilter.js b/src/pages/dashboard/ProjectFilter.js index c4494c0..84f10d7 100644 --- a/src/pages/dashboard/ProjectFilter.js +++ b/src/pages/dashboard/ProjectFilter.js @@ -1,3 +1,4 @@ +import { Box, Text, Button, Center } from '@chakra-ui/react' import { useState } from 'react' const filterList = ['all', 'mine', 'development', 'design', 'marketing', 'sales'] @@ -11,16 +12,40 @@ export default function ProjectFilter({ changeFilter }) { } return ( -
- -
+ + ) } \ No newline at end of file From 30734d74bf8ede0177d7cfef74f10e289eaa9816 Mon Sep 17 00:00:00 2001 From: Tseg-tech Date: Wed, 17 Sep 2025 12:57:17 +0300 Subject: [PATCH 07/26] modified pages --- src/componnents/Sidebar.js | 26 +++++-- src/pages/create/Create.js | 142 ++++++++++++++++++++++++++----------- 2 files changed, 118 insertions(+), 50 deletions(-) diff --git a/src/componnents/Sidebar.js b/src/componnents/Sidebar.js index 5f95fd7..d2f7bb0 100644 --- a/src/componnents/Sidebar.js +++ b/src/componnents/Sidebar.js @@ -23,46 +23,58 @@ export default function Sidebar() { return ( {user.displayName} + ({ + color: isActive ? '#4c0606ff' : '#f59e9eff', + textDecoration: "none" + })} className={({ isActive }) => isActive ? "active-link" : "inactive-link" } - > + - Dashboard + Dashboard @@ -117,7 +129,7 @@ export default function Sidebar() { `} > add project icon - New Project + New Project diff --git a/src/pages/create/Create.js b/src/pages/create/Create.js index de6d0ba..cf811b4 100644 --- a/src/pages/create/Create.js +++ b/src/pages/create/Create.js @@ -7,7 +7,19 @@ import { useHistory } from 'react-router' import Select from 'react-select' // styles -import './Create.css' +//import './Create.css' + +import { + Box, + UnorderedList, ListItem, Flex, Text, Image, + Img, + Input, + Heading, + FormControl, + Textarea, + Button, + Spacer, +} from '@chakra-ui/react'; const categories = [ { value: 'development', label: 'Development' }, @@ -33,9 +45,9 @@ export default function Create() { // create user values for react-select useEffect(() => { - if(documents) { + if (documents) { setUsers(documents.map(user => { - return { value: {...user, id: user.id}, label: user.displayName } + return { value: { ...user, id: user.id }, label: user.displayName } })) } }, [documents]) @@ -54,14 +66,14 @@ export default function Create() { } const assignedUsersList = assignedUsers.map(u => { - return { - displayName: u.value.displayName, + return { + displayName: u.value.displayName, photoURL: u.value.photoURL, id: u.value.id } }) - const createdBy = { - displayName: user.displayName, + const createdBy = { + displayName: user.displayName, photoURL: user.photoURL, id: user.uid } @@ -69,7 +81,7 @@ export default function Create() { const project = { name, details, - assignedUsersList, + assignedUsersList, createdBy, category: category.value, dueDate: timestamp.fromDate(new Date(dueDate)), @@ -83,55 +95,99 @@ export default function Create() { } return ( -
-

Create a new Project

-
- - - - - + - + - {formError &&

{formError}

} - -
+ + + {formError && {formError}} + + + + ) } \ No newline at end of file From 6add6cabe2eafbc2d3ebcb3065a1a6229a7e7c64 Mon Sep 17 00:00:00 2001 From: Tseg-tech Date: Wed, 17 Sep 2025 16:51:20 +0300 Subject: [PATCH 08/26] modified projectlist,create project,pojectComment,projectSummury --- src/componnents/ProjectList.js | 44 +++++-- src/pages/create/Create.js | 174 ++++++++++++++------------- src/pages/project/Project.js | 16 ++- src/pages/project/ProjectComments.js | 74 +++++++----- src/pages/project/ProjectSummary.js | 49 +++++--- 5 files changed, 214 insertions(+), 143 deletions(-) diff --git a/src/componnents/ProjectList.js b/src/componnents/ProjectList.js index ad73609..12ef82d 100644 --- a/src/componnents/ProjectList.js +++ b/src/componnents/ProjectList.js @@ -1,53 +1,75 @@ import { Link } from 'react-router-dom' import Avatar from '../componnents/Avatar' - +import { useAuthContext } from '../hooks/useAuthContext' // styles //import './ProjectList.css' import { Box, Heading, Text, UnorderedList, ListItem } from '@chakra-ui/react' export default function ProjectList({ projects }) { console.log(projects) + const { user } = useAuthContext() return ( {projects.length === 0 &&

No projects yet!

} {projects.map(project => ( - {project.name} - + {project.name} + Due by {project.dueDate.toDate().toDateString()} Assigned to: {project.assignedUsersList.map(user => ( - - + + {user.displayName} + + ))} - ))} - + )) + } + ) } \ No newline at end of file diff --git a/src/pages/create/Create.js b/src/pages/create/Create.js index cf811b4..bcfdd33 100644 --- a/src/pages/create/Create.js +++ b/src/pages/create/Create.js @@ -100,93 +100,99 @@ export default function Create() { fontFamily="inherit" fontWeight="bold" fontSize="1.2em" - my="20px" + my="20px" mx="auto" - - // alignItems="center" + + // alignItems="center" >New Project - - - - Project name: - setName(e.target.value)} - value={name} - /> - - - - Project Details: - - - - - Set due date: - setDueDate(e.target.value)} - value={dueDate} - /> - - - - - Project category: - ({ ...styles, borderColor: '#131313ff' }) }} - onChange={(option) => setAssignedUsers(option)} - options={users} - isMulti - /> - - - - - - - {formError && {formError}} - - + + Project name: + setName(e.target.value)} + value={name} + /> + + + + Project Details: + + + + + Set Duedate: + setDueDate(e.target.value)} + value={dueDate} + /> + + + + + Project category: + ({ ...styles, borderColor: '#131313ff' }) }} + onChange={(option) => setAssignedUsers(option)} + options={users} + isMulti + /> + + + + + + + {formError && ( + + {formError} + + )} + + + ) diff --git a/src/pages/project/Project.js b/src/pages/project/Project.js index 3f0acb5..ac4054b 100644 --- a/src/pages/project/Project.js +++ b/src/pages/project/Project.js @@ -2,11 +2,12 @@ import { useParams } from "react-router-dom" import { useDocument } from '../../hooks/useDocument' // styles -import './Project.css' - +//import './Project.css' +import { Grid } from '@chakra-ui/react'; //components import ProjectSummary from "./ProjectSummary" import ProjectComments from "./ProjectComments" +//import { Box } from "@chakra-ui/react" export default function Project() { const { id } = useParams() @@ -20,9 +21,14 @@ export default function Project() { } return ( -
+ + - -
+ + ) } \ No newline at end of file diff --git a/src/pages/project/ProjectComments.js b/src/pages/project/ProjectComments.js index f12528b..d942b26 100644 --- a/src/pages/project/ProjectComments.js +++ b/src/pages/project/ProjectComments.js @@ -4,6 +4,7 @@ import { useAuthContext } from "../../hooks/useAuthContext" import { useFirestore } from "../../hooks/useFirestore" import Avatar from "../../componnents/Avatar" import formatDistanceToNow from 'date-fns/formatDistanceToNow' +import { Box, Heading, UnorderedList, ListItem, Text, FormLabel,Textarea,Button } from "@chakra-ui/react" export default function ProjectComments({ project }) { const { user } = useAuthContext() @@ -20,7 +21,7 @@ export default function ProjectComments({ project }) { createdAt: timestamp.fromDate(new Date()), id: Math.random() } - + await updateDocument(project.id, { comments: [...project.comments, commentToAdd], }) @@ -30,36 +31,55 @@ export default function ProjectComments({ project }) { } return ( -
-

Project Comments

- -
    + + Project Comments + + {project.comments.length > 0 && project.comments.map(comment => ( -
  • -
    - -

    {comment.displayName}

    -
    -
    -

    {formatDistanceToNow(comment.createdAt.toDate(), {addSuffix: true})}

    -
    -
    -

    {comment.content}

    -
    -
    • + + + + {comment.displayName} + + + {formatDistanceToNow(comment.createdAt.toDate(), { addSuffix: true })} + + + {comment.content} + + ))} -
+ -
- - -
-
+ > + + + + ) } \ No newline at end of file diff --git a/src/pages/project/ProjectSummary.js b/src/pages/project/ProjectSummary.js index 7a29449..4790dbd 100644 --- a/src/pages/project/ProjectSummary.js +++ b/src/pages/project/ProjectSummary.js @@ -2,6 +2,7 @@ import Avatar from "../../componnents/Avatar" import { useFirestore } from "../../hooks/useFirestore" import { useHistory } from 'react-router-dom' import { useAuthContext } from "../../hooks/useAuthContext" +import { Box, Button, Heading, Text } from "@chakra-ui/react" export default function ProjectSummary({ project }) { const { deleteDocument } = useFirestore('projects') @@ -14,27 +15,43 @@ export default function ProjectSummary({ project }) { } return ( -
-
-

{project.name}

-

+ + + {project.name} + Project due by {project.dueDate.toDate().toDateString()} -

-

+ + {project.details} -

-

Project assigned to:

-
+ + + Project assigned to: + + {project.assignedUsersList.map(user => ( -
- -
+ + + ))} -
-
+ + {user.uid === project.createdBy.id && ( - + )} -
+ ) } \ No newline at end of file From a68423f22b1a31dd812db838c2cfd004b3ac3143 Mon Sep 17 00:00:00 2001 From: Tseg-tech Date: Thu, 18 Sep 2025 12:15:16 +0300 Subject: [PATCH 09/26] modifief comment section --- src/componnents/Navbar.js | 45 ++++---- src/componnents/OnlineUsers.js | 16 ++- src/componnents/Sidebar.js | 21 +++- src/pages/create/Create.js | 10 +- src/pages/login/Login.js | 15 +-- src/pages/project/ProjectComments.js | 155 +++++++++++++++++++-------- src/pages/project/ProjectSummary.js | 6 +- 7 files changed, 184 insertions(+), 84 deletions(-) diff --git a/src/componnents/Navbar.js b/src/componnents/Navbar.js index 79e14bd..6aab987 100644 --- a/src/componnents/Navbar.js +++ b/src/componnents/Navbar.js @@ -19,7 +19,7 @@ import { Heading, List, ListItem, - + } from '@chakra-ui/react'; @@ -30,11 +30,11 @@ import { SiAnalogue } from "react-icons/si" export default function Navbar() { const { logout, isPending } = useLogout() const { user } = useAuthContext() - + return ( - + {!user && ( <> @@ -50,13 +50,15 @@ export default function Navbar() { @@ -74,23 +76,24 @@ export default function Navbar() { - - - Hello World - + + + Hello World + diff --git a/src/componnents/OnlineUsers.js b/src/componnents/OnlineUsers.js index c4c19c5..804bf05 100644 --- a/src/componnents/OnlineUsers.js +++ b/src/componnents/OnlineUsers.js @@ -26,7 +26,8 @@ export default function OnlineUsers() { right="20px" size="lg" borderRadius="full" - colorScheme="green" + colorScheme='pink' + bg="#f59e9eff" /> @@ -39,20 +40,24 @@ export default function OnlineUsers() { w="fit-content" maxW="90vw" p="30px" - bg="#c8f078ff" + //bg="#c8f078ff" + bg="#f59e9eff" color="var(--heading-color)" borderRadius="10px" boxShadow="md" zIndex="1000" + //display="grid" + //columnGap="20px" + > - All Users + Users {isPending && } @@ -66,6 +71,7 @@ export default function OnlineUsers() { alignItems="center" justifyContent="flex-end" mb="12px" + > {user.online && ( )} - {user.displayName} + {user.displayName} - Dashboard + Dashboard @@ -103,6 +109,10 @@ export default function Sidebar() { - add project icon - New Project + add project icon + Create diff --git a/src/pages/create/Create.js b/src/pages/create/Create.js index bcfdd33..9ac4b8d 100644 --- a/src/pages/create/Create.js +++ b/src/pages/create/Create.js @@ -102,9 +102,11 @@ export default function Create() { fontSize="1.2em" my="20px" mx="auto" - + textAlign="center" // alignItems="center" - >New Project + > + Task + - {formError && ( diff --git a/src/pages/login/Login.js b/src/pages/login/Login.js index fda1b20..04a0dae 100644 --- a/src/pages/login/Login.js +++ b/src/pages/login/Login.js @@ -12,10 +12,10 @@ import { Spinner, Alert, AlertIcon, - InputGroup,Popover, - Portal, - Text, - Theme, + InputGroup, Popover, + Portal, + Text, + Theme, } from '@chakra-ui/react'; import { MdOutlineMail } from "react-icons/md"; // styles @@ -32,7 +32,7 @@ export default function Login() { } return ( - +
- + Login @@ -78,7 +78,8 @@ export default function Login() { + )} + + + + {comment.displayName} + + + + + {formatDistanceToNow(comment.createdAt.toDate(), { + addSuffix: true, + })} + + + + + {comment.content} + + + ) + })} - + {/* Comment Form */} + Add new comment: + /> - + + + + + ) -} \ No newline at end of file +} diff --git a/src/pages/project/ProjectSummary.js b/src/pages/project/ProjectSummary.js index 4790dbd..f81170c 100644 --- a/src/pages/project/ProjectSummary.js +++ b/src/pages/project/ProjectSummary.js @@ -15,7 +15,7 @@ export default function ProjectSummary({ project }) { } return ( - + + {user.uid === project.createdBy.id && ( - + )} + {/* // */} ) } \ No newline at end of file From 6048c8b6a5a891fd624d62bd72fad57909dd6521 Mon Sep 17 00:00:00 2001 From: Tseg-tech Date: Thu, 18 Sep 2025 12:53:08 +0300 Subject: [PATCH 10/26] modifief comment section --- src/App.js | 5 +++-- src/componnents/Navbar.js | 18 +++++++----------- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index 8f6b3ec..47bea05 100644 --- a/src/App.js +++ b/src/App.js @@ -23,8 +23,9 @@ function App() { diff --git a/src/componnents/Navbar.js b/src/componnents/Navbar.js index 6aab987..e9205a5 100644 --- a/src/componnents/Navbar.js +++ b/src/componnents/Navbar.js @@ -47,21 +47,17 @@ export default function Navbar() { - - - + From 68b9dbeafdebd9cd9a97f0818304c1a9b1c3721a Mon Sep 17 00:00:00 2001 From: Tseg-tech Date: Thu, 18 Sep 2025 17:05:58 +0300 Subject: [PATCH 11/26] changed Navbar --- src/componnents/Navbar.js | 37 ++++++++++++++++++++++++------------- src/componnents/Sidebar.js | 6 +++--- 2 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/componnents/Navbar.js b/src/componnents/Navbar.js index e9205a5..cd44b2a 100644 --- a/src/componnents/Navbar.js +++ b/src/componnents/Navbar.js @@ -1,7 +1,7 @@ import { Link } from 'react-router-dom' import { useLogout } from '../hooks/useLogout' import { useAuthContext } from '../hooks/useAuthContext' - +import Avatar from "./Avatar" // styles & images dojo logo //import './Navbar.css' //import Temple from '../assets/temple.svg' @@ -49,32 +49,48 @@ export default function Navbar() { Login Signup - )} {user && ( + - + + + + DMP + + + + + {user.displayName} + + + */} + + + + + + + ) +} \ No newline at end of file From e4e13209daff1e3b8f8fcf69fbf8eb61d375ad8e Mon Sep 17 00:00:00 2001 From: Tseg-tech Date: Fri, 19 Sep 2025 15:21:54 +0300 Subject: [PATCH 14/26] modified welcome page --- src/componnents/Navbar.js | 2 +- src/pages/welcomeboard/me.js | 55 +++++++++++------------------------- 2 files changed, 17 insertions(+), 40 deletions(-) diff --git a/src/componnents/Navbar.js b/src/componnents/Navbar.js index 6733531..65b53bb 100644 --- a/src/componnents/Navbar.js +++ b/src/componnents/Navbar.js @@ -1,4 +1,4 @@ -import { Link, Link as RouterLink, useLocation } from 'react-router-dom' +import { Link as RouterLink, useLocation } from 'react-router-dom' import { useLogout } from '../hooks/useLogout' import { useAuthContext } from '../hooks/useAuthContext' import Avatar from "./Avatar" diff --git a/src/pages/welcomeboard/me.js b/src/pages/welcomeboard/me.js index 7c34f55..80f81f7 100644 --- a/src/pages/welcomeboard/me.js +++ b/src/pages/welcomeboard/me.js @@ -1,55 +1,32 @@ -import { Box, Text, Button, Link as ChakraLink, } from '@chakra-ui/react'; - -import { Link, Link as RouterLink, useLocation } from 'react-router-dom' -import { BeatLoader } from "react-spinners" - +import { Box, Text, Button, AbsoluteCenter,Heading } from '@chakra-ui/react'; export default function Welcome() { - const location = useLocation(); - const isActive = (path) => location.pathname === path; + return ( - Hey, I'm Tseganeh - {/* */} - - - + + {/* */} + ) } \ No newline at end of file From 83f480a7438256fd04765fb4e7abf1feee81e92b Mon Sep 17 00:00:00 2001 From: Tseg-tech Date: Fri, 19 Sep 2025 16:52:37 +0300 Subject: [PATCH 15/26] added files to welcome page --- src/assets/explore.svg | 1 + src/assets/hamburger-menu.svg | 1 + src/assets/home.svg | 1 + src/assets/library.svg | 1 + src/assets/notifications.svg | 1 + src/assets/originals.svg | 1 + src/assets/search.svg | 1 + src/assets/subscriptions.svg | 1 + src/assets/upload.svg | 1 + src/assets/voice-search-icon.svg | 1 + src/assets/youtube-apps.svg | 1 + src/assets/youtube-logo.svg | 1 + src/assets/youtube-music.svg | 1 + src/componnents/Navbar.js | 63 ++++++++++++++++++++++++++------ src/pages/login/Login.js | 15 ++++---- src/pages/signup/Signup.js | 7 +++- src/pages/welcomeboard/me.js | 9 +++-- 17 files changed, 84 insertions(+), 23 deletions(-) create mode 100644 src/assets/explore.svg create mode 100644 src/assets/hamburger-menu.svg create mode 100644 src/assets/home.svg create mode 100644 src/assets/library.svg create mode 100644 src/assets/notifications.svg create mode 100644 src/assets/originals.svg create mode 100644 src/assets/search.svg create mode 100644 src/assets/subscriptions.svg create mode 100644 src/assets/upload.svg create mode 100644 src/assets/voice-search-icon.svg create mode 100644 src/assets/youtube-apps.svg create mode 100644 src/assets/youtube-logo.svg create mode 100644 src/assets/youtube-music.svg diff --git a/src/assets/explore.svg b/src/assets/explore.svg new file mode 100644 index 0000000..47526fc --- /dev/null +++ b/src/assets/explore.svg @@ -0,0 +1 @@ + diff --git a/src/assets/hamburger-menu.svg b/src/assets/hamburger-menu.svg new file mode 100644 index 0000000..155e238 --- /dev/null +++ b/src/assets/hamburger-menu.svg @@ -0,0 +1 @@ + diff --git a/src/assets/home.svg b/src/assets/home.svg new file mode 100644 index 0000000..4c12dbb --- /dev/null +++ b/src/assets/home.svg @@ -0,0 +1 @@ + diff --git a/src/assets/library.svg b/src/assets/library.svg new file mode 100644 index 0000000..9a21da4 --- /dev/null +++ b/src/assets/library.svg @@ -0,0 +1 @@ + diff --git a/src/assets/notifications.svg b/src/assets/notifications.svg new file mode 100644 index 0000000..1e176c3 --- /dev/null +++ b/src/assets/notifications.svg @@ -0,0 +1 @@ + diff --git a/src/assets/originals.svg b/src/assets/originals.svg new file mode 100644 index 0000000..405a1e8 --- /dev/null +++ b/src/assets/originals.svg @@ -0,0 +1 @@ + diff --git a/src/assets/search.svg b/src/assets/search.svg new file mode 100644 index 0000000..64a0860 --- /dev/null +++ b/src/assets/search.svg @@ -0,0 +1 @@ + diff --git a/src/assets/subscriptions.svg b/src/assets/subscriptions.svg new file mode 100644 index 0000000..590e44a --- /dev/null +++ b/src/assets/subscriptions.svg @@ -0,0 +1 @@ + diff --git a/src/assets/upload.svg b/src/assets/upload.svg new file mode 100644 index 0000000..b72b498 --- /dev/null +++ b/src/assets/upload.svg @@ -0,0 +1 @@ + diff --git a/src/assets/voice-search-icon.svg b/src/assets/voice-search-icon.svg new file mode 100644 index 0000000..4aa17ea --- /dev/null +++ b/src/assets/voice-search-icon.svg @@ -0,0 +1 @@ + diff --git a/src/assets/youtube-apps.svg b/src/assets/youtube-apps.svg new file mode 100644 index 0000000..f2a5783 --- /dev/null +++ b/src/assets/youtube-apps.svg @@ -0,0 +1 @@ + diff --git a/src/assets/youtube-logo.svg b/src/assets/youtube-logo.svg new file mode 100644 index 0000000..728f4ff --- /dev/null +++ b/src/assets/youtube-logo.svg @@ -0,0 +1 @@ + diff --git a/src/assets/youtube-music.svg b/src/assets/youtube-music.svg new file mode 100644 index 0000000..22c5bc0 --- /dev/null +++ b/src/assets/youtube-music.svg @@ -0,0 +1 @@ + diff --git a/src/componnents/Navbar.js b/src/componnents/Navbar.js index 65b53bb..d638ac1 100644 --- a/src/componnents/Navbar.js +++ b/src/componnents/Navbar.js @@ -1,4 +1,4 @@ -import { Link as RouterLink, useLocation } from 'react-router-dom' +import { Link, Link as RouterLink, useLocation } from 'react-router-dom' import { useLogout } from '../hooks/useLogout' import { useAuthContext } from '../hooks/useAuthContext' import Avatar from "./Avatar" @@ -19,11 +19,14 @@ import { Heading, List, ListItem, - Link as ChakraLink - + Link as ChakraLink, + useDisclosure, + Image, IconButton } from '@chakra-ui/react'; +import HamburgerIconImg from '../assets/hamburger-menu.svg'; // or .png/.jpg + //import { DecorativeBox } from "compositions/lib/decorative-box" import { SiAnalogue } from "react-icons/si" @@ -35,9 +38,16 @@ export default function Navbar() { const location = useLocation(); const isActive = (path) => location.pathname === path; + const { isOpen, onToggle } = useDisclosure(); + return ( - + {!user && ( @@ -50,13 +60,36 @@ export default function Navbar() { _focus={{ boxShadow: "none" }} cursor="pointer" transition="all 0.2s" - + _hover={{ + textDecoration: "none", // Prevent default anchor underline + }} + > - DMP + + DMP + + {/* : } + display={{ base: "block", md: "none" }} + onClick={onToggle} + variant="ghost" + /> */} @@ -65,8 +98,10 @@ export default function Navbar() { From 0d916a622b844866c49d1f9a52d851eaed8ddcfa Mon Sep 17 00:00:00 2001 From: Tseg-tech Date: Sat, 20 Sep 2025 19:04:08 +0300 Subject: [PATCH 16/26] modified the login page --- src/App.js | 4 ++-- src/componnents/Navbar.js | 12 +++++++----- src/componnents/Sidebar.js | 2 +- src/pages/login/Login.js | 28 ++++++++++++++-------------- src/pages/signup/Signup.js | 23 ++++++++++++----------- src/pages/welcomeboard/me.js | 2 +- 6 files changed, 37 insertions(+), 34 deletions(-) diff --git a/src/App.js b/src/App.js index c7ac32d..cc29bfb 100644 --- a/src/App.js +++ b/src/App.js @@ -12,7 +12,7 @@ import Login from './pages/login/Login' import Signup from './pages/signup/Signup' import Project from './pages/project/Project' import Navbar from './componnents/Navbar' -import Sidebar from './componnents/Sidebar' +// import Sidebar from './componnents/Sidebar' import OnlineUsers from './componnents/OnlineUsers' import Welcome from './pages/welcomeboard/me' @@ -28,7 +28,7 @@ function App() { {authIsReady && ( - {user && } + {/* {user && } */} diff --git a/src/componnents/Navbar.js b/src/componnents/Navbar.js index d638ac1..b8c1b2d 100644 --- a/src/componnents/Navbar.js +++ b/src/componnents/Navbar.js @@ -41,13 +41,14 @@ export default function Navbar() { const { isOpen, onToggle } = useDisclosure(); return ( - + // + // bg="gray.50" + // boxShadow="md" + // px={4} + // py={2} + > {!user && ( @@ -179,5 +180,6 @@ export default function Navbar() { )} + // ) } diff --git a/src/componnents/Sidebar.js b/src/componnents/Sidebar.js index cbae9db..73a9b21 100644 --- a/src/componnents/Sidebar.js +++ b/src/componnents/Sidebar.js @@ -25,7 +25,7 @@ export default function Sidebar() { width="300px" // w="fit-content" minWidth="300px" - bg="#f59e9eff" + // bg="#f59e9eff" minHeight="100vh" boxSizing="border-box" position="relative" diff --git a/src/pages/login/Login.js b/src/pages/login/Login.js index 23d04cd..fbcf196 100644 --- a/src/pages/login/Login.js +++ b/src/pages/login/Login.js @@ -16,6 +16,7 @@ import { Portal, Text, Theme, + Stack } from '@chakra-ui/react'; import { MdOutlineMail } from "react-icons/md"; // styles @@ -32,7 +33,7 @@ export default function Login() { } return ( - + - + {/* */} - Login + Welcome! @@ -76,15 +77,13 @@ export default function Login() { @@ -94,8 +93,9 @@ export default function Login() { {error} )} - + {/* */} + ) } \ No newline at end of file diff --git a/src/pages/signup/Signup.js b/src/pages/signup/Signup.js index 212df63..95e1566 100644 --- a/src/pages/signup/Signup.js +++ b/src/pages/signup/Signup.js @@ -8,7 +8,7 @@ import { Input, Heading, Text, - VStack, + // VStack, Spinner, Alert, AlertIcon, @@ -63,16 +63,16 @@ export default function Signup() { mt={12} padding="1rem" // p={6} - bg="rgba(255, 255, 255, 0.1)" // light transparent white - backdropFilter="blur(10px)" // adds blur effect (like glass) - borderWidth="1px" - borderColor="gray.200" - borderRadius="md" - boxShadow="md" + // bg="rgba(255, 255, 255, 0.1)" // light transparent white + // backdropFilter="blur(10px)" // adds blur effect (like glass) + // borderWidth="1px" + // borderColor="gray.200" + // borderRadius="md" + // boxShadow="md" >
- - Sign Up + {/* */} + Welcome! Email }> @@ -119,7 +119,8 @@ export default function Signup() { bg="green" variant="surface" color="white" - width="full" + mt="10px" + // width="full" isLoading={isPending} loadingText="Loading" > @@ -127,7 +128,7 @@ export default function Signup() { {error &&
{error}
} - + {/* */}
) diff --git a/src/pages/welcomeboard/me.js b/src/pages/welcomeboard/me.js index 2e320b5..238e390 100644 --- a/src/pages/welcomeboard/me.js +++ b/src/pages/welcomeboard/me.js @@ -14,7 +14,7 @@ export default function Welcome() { > {/* */} Welcome aboard! - Hey, I'm Tseganeh! + Hey, I'm Tseganeh! Welcome! This onboarding will guide you through setting up projects, tracking progress, and collaborating effortlessly with your team. + + + + + {thumbnailError && ( + {thumbnailError} + )} + + + + isLoading={isPending} + loadingText="Loading" + > + Sign up + - {error &&
{error}
} + {error &&
{error}
} {/*
*/} diff --git a/src/pages/welcomeboard/me.js b/src/pages/welcomeboard/me.js index 238e390..4b4a816 100644 --- a/src/pages/welcomeboard/me.js +++ b/src/pages/welcomeboard/me.js @@ -1,5 +1,5 @@ import { Box, Text, Button, AbsoluteCenter,Heading } from '@chakra-ui/react'; - +import { FaChild } from "react-icons/fa" export default function Welcome() { @@ -14,7 +14,7 @@ export default function Welcome() { > {/* */} Welcome aboard! - Hey, I'm Tseganeh! + Hey, I'm Tseganeh! {} Welcome! This onboarding will guide you through setting up projects, tracking progress, and collaborating effortlessly with your team. - - - - - - )} + + + + + dashboard icon + Dashboard + + + + + + add project icon + Create + + + + + + + {/* */} + + + + + {user.displayName} + + + + + + + + + + + )} + + + + {/* */} + ) } diff --git a/src/pages/create/Create.js b/src/pages/create/Create.js index 9ac4b8d..50882ff 100644 --- a/src/pages/create/Create.js +++ b/src/pages/create/Create.js @@ -1,4 +1,5 @@ import { useState, useEffect } from 'react' +import { Link, Link as RouterLink, useLocation, } from 'react-router-dom' import { useCollection } from '../../hooks/useCollection' import { useAuthContext } from '../../hooks/useAuthContext' import { timestamp } from '../../firebase/config' @@ -19,6 +20,7 @@ import { Textarea, Button, Spacer, + AbsoluteCenter } from '@chakra-ui/react'; const categories = [ @@ -52,9 +54,12 @@ export default function Create() { } }, [documents]) + + const handleSubmit = async (e) => { e.preventDefault() setFormError(null) + if (!category) { setFormError('Please select a project category.') @@ -92,110 +97,116 @@ export default function Create() { if (!response.error) { history.push('/') } + history.push('/dashboard'); // Navigate programmatically } return ( - - + + - Task + + Task - - + Project name: + setName(e.target.value)} + value={name} + /> + + + - - Project name: - setName(e.target.value)} - value={name} - /> - - - - Project Details: - - - - - Set Duedate: - setDueDate(e.target.value)} - value={dueDate} - /> - - - - - Project category: - ({ ...styles, borderColor: '#131313ff' }) }} - onChange={(option) => setAssignedUsers(option)} - options={users} - isMulti - /> - - - - - - - {formError && ( - - {formError} - - )} - - - + Project Details: + + + + + Set Duedate: + setDueDate(e.target.value)} + value={dueDate} + /> + + + + + Project category: + ({ ...styles, borderColor: '#131313ff' }) }} + onChange={(option) => setAssignedUsers(option)} + options={users} + isMulti + /> + + + + + + + {formError && ( + + {formError} + + )} + + + + ) } \ No newline at end of file diff --git a/src/pages/dashboard/Dashboard.js b/src/pages/dashboard/Dashboard.js index a26f528..1564799 100644 --- a/src/pages/dashboard/Dashboard.js +++ b/src/pages/dashboard/Dashboard.js @@ -48,12 +48,14 @@ export default function Dashboard() { }) : null return ( - - + + + Dashboard {error && {error}} diff --git a/src/pages/dashboard/ProjectFilter.js b/src/pages/dashboard/ProjectFilter.js index 84f10d7..a8a4a23 100644 --- a/src/pages/dashboard/ProjectFilter.js +++ b/src/pages/dashboard/ProjectFilter.js @@ -19,6 +19,7 @@ export default function ProjectFilter({ changeFilter }) { my="20px" mx="auto" display="flex" + justifyContent="space-evenly" p="10px" bg="#f59e9eff" borderRadius="4px" diff --git a/src/pages/project/Project.js b/src/pages/project/Project.js index ac4054b..545f93e 100644 --- a/src/pages/project/Project.js +++ b/src/pages/project/Project.js @@ -3,7 +3,7 @@ import { useDocument } from '../../hooks/useDocument' // styles //import './Project.css' -import { Grid } from '@chakra-ui/react'; +import { Flex, Grid } from '@chakra-ui/react'; //components import ProjectSummary from "./ProjectSummary" import ProjectComments from "./ProjectComments" @@ -23,9 +23,12 @@ export default function Project() { return ( diff --git a/src/pages/project/ProjectSummary.js b/src/pages/project/ProjectSummary.js index f81170c..35fed3b 100644 --- a/src/pages/project/ProjectSummary.js +++ b/src/pages/project/ProjectSummary.js @@ -2,7 +2,7 @@ import Avatar from "../../componnents/Avatar" import { useFirestore } from "../../hooks/useFirestore" import { useHistory } from 'react-router-dom' import { useAuthContext } from "../../hooks/useAuthContext" -import { Box, Button, Heading, Text } from "@chakra-ui/react" +import { Box, Button, Heading, Text, AbsoluteCenter } from "@chakra-ui/react" export default function ProjectSummary({ project }) { const { deleteDocument } = useFirestore('projects') @@ -20,6 +20,7 @@ export default function ProjectSummary({ project }) { bg="#f59e9eff" p="30px" borderRadius="4px" + mt="40px" > {project.name} Project due by {project.dueDate.toDate().toDateString()} - {project.details} - + Project assigned to: - + {project.assignedUsersList.map(user => ( - + ))} @@ -51,9 +52,9 @@ export default function ProjectSummary({ project }) { {user.uid === project.createdBy.id && ( - + )} - {/* // */} + ) } \ No newline at end of file diff --git a/src/pages/welcomeboard/me.js b/src/pages/welcomeboard/me.js index 4b4a816..b08df3c 100644 --- a/src/pages/welcomeboard/me.js +++ b/src/pages/welcomeboard/me.js @@ -1,4 +1,4 @@ -import { Box, Text, Button, AbsoluteCenter,Heading } from '@chakra-ui/react'; +import { Box, Text, Button, AbsoluteCenter, Heading, AspectRatio} from '@chakra-ui/react'; import { FaChild } from "react-icons/fa" export default function Welcome() { @@ -6,26 +6,31 @@ export default function Welcome() { return ( {/* */} Welcome aboard! - Hey, I'm Tseganeh! {} + Hey, I'm Tseganeh! {} Welcome! This onboarding will guide you through setting up projects, tracking progress, and collaborating effortlessly with your team. - - + + +