diff --git a/package-lock.json b/package-lock.json index 284e981..6c41531 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "the-dojo", "version": "0.1.0", "dependencies": { + "@chakra-ui/icons": "^1.1.7", "@chakra-ui/react": "^1.8.9", "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", @@ -24,6 +25,7 @@ "react-router-dom": "5.1", "react-scripts": "^5.0.1", "react-select": "^5.8.0", + "react-spinners": "^0.17.0", "source-map-loader": "^5.0.0", "web-vitals": "^1.1.2" }, @@ -2271,6 +2273,20 @@ "react": ">=16.8.6" } }, + "node_modules/@chakra-ui/icons": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-1.1.7.tgz", + "integrity": "sha512-YIHxey/B4M2PyFASlHXtAWFyW+tsAtGAChOJ8dsM2kpu1MbVUqm/6nMI1KIFd7Te5IWuNYA75rAHBdLI0Yu61A==", + "license": "MIT", + "dependencies": { + "@chakra-ui/icon": "2.0.5", + "@types/react": "^17.0.15" + }, + "peerDependencies": { + "@chakra-ui/system": ">=1.0.0", + "react": ">=16.8.6" + } + }, "node_modules/@chakra-ui/image": { "version": "1.1.10", "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-1.1.10.tgz", @@ -18927,6 +18943,16 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-spinners": { + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.17.0.tgz", + "integrity": "sha512-L/8HTylaBmIWwQzIjMq+0vyaRXuoAevzWoD35wKpNTxxtYXWZp+xtgkfD7Y4WItuX0YvdxMPU79+7VhhmbmuTQ==", + "license": "MIT", + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/react-style-singleton": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz", diff --git a/package.json b/package.json index 42d1ba6..1daf89b 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@chakra-ui/icons": "^1.1.7", "@chakra-ui/react": "^1.8.9", "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", @@ -19,6 +20,7 @@ "react-router-dom": "5.1", "react-scripts": "^5.0.1", "react-select": "^5.8.0", + "react-spinners": "^0.17.0", "source-map-loader": "^5.0.0", "web-vitals": "^1.1.2" }, diff --git a/src/App.js b/src/App.js index b5e1536..df37617 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,6 @@ import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom' import { useAuthContext } from './hooks/useAuthContext' -import { Box , Text, Button} from '@chakra-ui/react'; +import { Box, Text, Button, Flex} from '@chakra-ui/react'; // styles import './App.css' @@ -12,55 +12,59 @@ 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' function App() { const { authIsReady, user } = useAuthContext() - return ( - - -
- {authIsReady && ( - - {user && } -
- + + + {authIsReady && ( + + {/* Navbar + Content in flex box */} + + + + - {!user && } + {!user && } + {user && } + + + {!user && } {user && } - {!user && } + {!user && } {user && } - {!user && } + {!user && } {user && } + + {!user && } + {user && } + - {user && } + {user && } {!user && } - {user && } + {user && } {!user && } + -
- {user && } - - )} -
+ + + {user && } + + )} ); } 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/Avatar.js b/src/componnents/Avatar.js index 4cb7ad5..439fffa 100644 --- a/src/componnents/Avatar.js +++ b/src/componnents/Avatar.js @@ -1,10 +1,22 @@ // 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 diff --git a/src/componnents/Navbar.js b/src/componnents/Navbar.js index 79e14bd..0708471 100644 --- a/src/componnents/Navbar.js +++ b/src/componnents/Navbar.js @@ -1,16 +1,25 @@ -import { Link } 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 { NavLink } from "react-router-dom" +import { css } from '@emotion/react' +import Avatar from "./Avatar" +import { useRef, useEffect } from "react"; + +//import Dashboard from './pages/dashboard/Dashboard' // styles & images dojo logo //import './Navbar.css' //import Temple from '../assets/temple.svg' +import { useState } from "react"; import { Box, Button, VStack, HStack, Stack, + + UnorderedList, Img, Separator, Text, Flex, @@ -19,85 +28,236 @@ import { Heading, List, ListItem, - + Link as ChakraLink, + useDisclosure, + Image, IconButton, + AbsoluteCenter, } 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" +import DashboardIcon from '../assets/dashboard_icon.svg' +import AddIcon from '../assets/add_icon.svg' + + export default function Navbar() { const { logout, isPending } = useLogout() const { user } = useAuthContext() - + + const location = useLocation(); + const path = location.pathname; + + const isActive = (path) => location.pathname === path; + // const { isOpen, onToggle } = useDisclosure(); + const [clicked, setClicked] = useState(false); + const [isOpen, setIsOpen] = useState(false); + const handleClick = () => { + setClicked(true); + }; + const dropdownRef = useRef(null); + + useEffect(() => { + function handleClickOutside(event) { + if (dropdownRef.current && !dropdownRef.current.contains(event.target)) { + setIsOpen(false); + } + } + + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + return ( + // + // + - - - - {!user && ( - <> - - - - - DMP - - - - - - - - - - - - - )} - - {user && ( - - - - - - - + //right={{ base: "10px", md: "20px" }} + size="lg" + border={isOpen ? "2px solid white" : "none"} + borderRadius="full" + colorScheme="white" + + zIndex="1100" + _focus={{ boxShadow: "none", outline: "none" }} + /> + + + {isOpen && ( - Hello World + + + Hi, {user.displayName}! + + + {/* User Info + Logout */} + + {/* */} + + + {/* */} + + - - - - - - )} - - + )} + + + + + + // + ) +} + + + + ) } diff --git a/src/componnents/OnlineUsers.js b/src/componnents/OnlineUsers.js index 2a70968..774d874 100644 --- a/src/componnents/OnlineUsers.js +++ b/src/componnents/OnlineUsers.js @@ -1,26 +1,132 @@ -import { useCollection } from '../hooks/useCollection' +import { useState } from 'react'; +import ChatMessage from '../pages/chatmessage/chatMessage' +import { useAuthContext } from '../hooks/useAuthContext' +import { + Box, + Heading, + Text, + Spinner, + IconButton, + Button, +} from '@chakra-ui/react'; -// components -import Avatar from './Avatar' - -// styles -import './OnlineUsers.css' +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); + + const { user } = useAuthContext() + + + const [selectedUser, setSelectedUser] = useState(null); + return ( -
-

All Users

- {isPending &&
Loading users...
} - {error &&
{error}
} - {documents && documents.map(user => ( -
- {user.online && } - {user.displayName} - -
- ))} -
+ <> + + + + {/* Toggle Button */} + {isOpen ? '🙈' : '👁️'}} + onClick={() => setIsOpen(!isOpen)} + aria-label="Toggle" + position="fixed" + bottom="20px" + right={{ base: "10px", md: "20px" }} + size="lg" + borderRadius="full" + colorScheme="pink" + bg="#f77c7c" + zIndex="1100" + /> + + {/* User List Box */} + {isOpen && ( + + + + Users + + + {isPending && } + {error && {error}} + + {documents && + documents.map((user) => ( + + + + {user.online && ( + + + )} + + setSelectedUser(user)}> + + {user.displayName} + + + + + {selectedUser && ( + + )} + + + + ))} + + + + )} + + + ) -} \ No newline at end of file +} diff --git a/src/componnents/ProjectList.js b/src/componnents/ProjectList.js index 1fecc09..ea125c0 100644 --- a/src/componnents/ProjectList.js +++ b/src/componnents/ProjectList.js @@ -1,31 +1,78 @@ import { Link } from 'react-router-dom' import Avatar from '../componnents/Avatar' - +import { useAuthContext } from '../hooks/useAuthContext' // 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) + const { user } = useAuthContext() return ( -
- {projects.length === 0 &&

No projects yet!

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

{project.name}

-

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

-
-

Assigned to:

-
    - {project.assignedUsersList.map(user => ( -
  • - -
    • - ))} -
-
+ + + {projects.length === 0 && No projects yet!} + + {projects.map((project) => ( + + + + {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/componnents/Sidebar.js b/src/componnents/Sidebar.js index e8a3545..73a9b21 100644 --- a/src/componnents/Sidebar.js +++ b/src/componnents/Sidebar.js @@ -8,8 +8,11 @@ import Avatar from "./Avatar" //import "./Sidebar.css" import { Box, - UnorderedList, ListItem, Flex, Text + 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' @@ -20,60 +23,128 @@ export default function Sidebar() { return ( - - + {/* + borderBottom="1px solid rgba(255, 255, 255, 0.2)" + borderColor="#131313ff" + > -

{user.displayName}

- - {user.displayName} + */} + - - + + + ({ + color: isActive ? '#4c0606ff' : '#f59e9eff', + textDecoration: "none" + })} className={({ isActive }) => isActive ? "active-link" : "inactive-link" } - style={{ textDecoration: "none" }} > - - dashboard icon - Dashboard + + + + dashboard icon + Dashboard - + isActive ? "active-link" : "inactive-link" } - style={{ textDecoration: "none" }} + > - - add project icon - New Project + + add project icon + Create diff --git a/src/pages/chatmessage/chatMessage.js b/src/pages/chatmessage/chatMessage.js new file mode 100644 index 0000000..e8be323 --- /dev/null +++ b/src/pages/chatmessage/chatMessage.js @@ -0,0 +1,32 @@ +import { useAuthContext } from '../../hooks/useAuthContext' +import { + Box, + Button, + Input +} from '@chakra-ui/react'; +import Avatar from "../../componnents/Avatar"; + +export default function ChatMessage(props) { + const a = props.send; + const rawMessage = props.message; + + + return ( + + + + + ); +} diff --git a/src/pages/create/Create.js b/src/pages/create/Create.js index de6d0ba..5e7d14f 100644 --- a/src/pages/create/Create.js +++ b/src/pages/create/Create.js @@ -1,13 +1,27 @@ 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' import { useFirestore } from '../../hooks/useFirestore' import { useHistory } from 'react-router' import Select from 'react-select' - +//import Dashboard from '../dashboard/Dashboard' // styles -import './Create.css' +//import './Create.css' + +import { + Box, + UnorderedList, ListItem, Flex, Text, Image, + Img, + Input, + Heading, + FormControl, + Textarea, + Button, + Spacer, + AbsoluteCenter, FormLabel +} from '@chakra-ui/react'; const categories = [ { value: 'development', label: 'Development' }, @@ -33,17 +47,20 @@ 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]) + + const handleSubmit = async (e) => { e.preventDefault() setFormError(null) + if (!category) { setFormError('Please select a project category.') return @@ -54,14 +71,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 +86,7 @@ export default function Create() { const project = { name, details, - assignedUsersList, + assignedUsersList, createdBy, category: category.value, dueDate: timestamp.fromDate(new Date(dueDate)), @@ -78,60 +95,114 @@ export default function Create() { await addDocument(project) if (!response.error) { - history.push('/') + history.push('/dashboard') } + // history.push('/dashboard'); // Navigate programmatically } return ( -
-

Create a new Project

-
- - - - + + + {/* Category (React Select) */} + + Project Category + + setAssignedUsers(option)} + options={users} + /> + + + + {/* Submit Button */} + + + {/* Error Message */} + {formError && ( + + {formError} + + )} + + - - {formError &&

{formError}

} -
-
) } \ No newline at end of file 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..da797ef 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,36 +23,51 @@ export default function Dashboard() { const changeFilter = (newFilter) => { setFilter(newFilter) } - + + const projects = documents ? documents.filter(document => { - switch(filter) { - case 'all': - return true - case 'mine': - let assignedToMe = false - document.assignedUsersList.forEach(u => { - if(u.id === user.uid) { - assignedToMe = true - } - }) - return assignedToMe - case 'development': - case 'design': - case 'sales': - case 'marketing': - console.log(document.category, filter) - return document.category === filter - default: - return true - } - }) : null + // ✅ Remove completed projects from all filters *except* "history" + if (filter !== 'history' && document.status === 'completed') return false; + + // ✅ Now handle filters + switch (filter) { + case 'all': + return true; + + case 'mine': + return document.assignedUsersList.some(u => u.id === user.uid); + + case 'development': + case 'design': + case 'sales': + case 'marketing': + return document.category === filter; + + case 'history': + return document.status === 'completed' && document.createdBy.id === user.uid; + + default: + return true; + } +}) : 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..fc4568b 100644 --- a/src/pages/dashboard/ProjectFilter.js +++ b/src/pages/dashboard/ProjectFilter.js @@ -1,6 +1,7 @@ +import { Box, Text, Button, Center } from '@chakra-ui/react' import { useState } from 'react' -const filterList = ['all', 'mine', 'development', 'design', 'marketing', 'sales'] +const filterList = ['all', 'mine', 'development', 'design', 'marketing', 'sales','history'] export default function ProjectFilter({ changeFilter }) { const [currentFilter, setCurrentFilter] = useState('all') @@ -11,16 +12,43 @@ export default function ProjectFilter({ changeFilter }) { } return ( -
- -
+ + + ) } \ No newline at end of file diff --git a/src/pages/login/Login.js b/src/pages/login/Login.js index fda1b20..832f294 100644 --- a/src/pages/login/Login.js +++ b/src/pages/login/Login.js @@ -12,10 +12,11 @@ import { Spinner, Alert, AlertIcon, - InputGroup,Popover, - Portal, - Text, - Theme, + InputGroup, Popover, + Portal, + Text, + Theme, + Stack } from '@chakra-ui/react'; import { MdOutlineMail } from "react-icons/md"; // styles @@ -32,27 +33,26 @@ export default function Login() { } return ( - +
- - - Login + {/* */} + + Welcome! @@ -71,18 +71,20 @@ export default function Login() { Password setPassword(e.target.value)} /> @@ -92,8 +94,9 @@ export default function Login() { {error} )} - + {/* */}
+ ) } \ No newline at end of file diff --git a/src/pages/project/Project.js b/src/pages/project/Project.js index 3f0acb5..f05779f 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 { Flex, 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,16 @@ 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..59da796 100644 --- a/src/pages/project/ProjectComments.js +++ b/src/pages/project/ProjectComments.js @@ -4,62 +4,153 @@ 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, + Flex +} from "@chakra-ui/react" export default function ProjectComments({ project }) { const { user } = useAuthContext() const { updateDocument, response } = useFirestore('projects') + const [newComment, setNewComment] = useState('') + const [selectedCommentId, setSelectedCommentId] = useState(null) const handleSubmit = async (e) => { - e.preventDefault(); + e.preventDefault() const commentToAdd = { displayName: user.displayName, photoURL: user.photoURL, content: newComment, createdAt: timestamp.fromDate(new Date()), - id: Math.random() + id: Math.random(), // ideally use uuid } - + await updateDocument(project.id, { comments: [...project.comments, commentToAdd], }) + if (!response.error) { setNewComment('') } } + const handleDeleteSelected = async () => { + if (!selectedCommentId) return + + const updatedComments = project.comments.filter( + (comment) => comment.id !== selectedCommentId + ) + + await updateDocument(project.id, { + comments: updatedComments, + }) + + setSelectedCommentId(null) // clear selection + } + return ( -
-

Project Comments

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

    {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..68acd99 100644 --- a/src/pages/project/ProjectSummary.js +++ b/src/pages/project/ProjectSummary.js @@ -2,39 +2,77 @@ 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') + const { deleteDocument} = useFirestore('projects') const { user } = useAuthContext() const history = useHistory() - - const handleClick = () => { - deleteDocument(project.id) - history.push('/') + const { updateDocument, response } = useFirestore('projects') + // const handleClick = () => { + // deleteDocument(project.id) + + // history.push('/dashboard') + // } + const handleClick = async () => { + try { + await updateDocument(project.id, { + status: "completed", + completedAt: new Date() + }); + + history.push('/dashboard'); + } catch (err) { + console.error("Failed to mark project as complete:", err); } +}; + return ( -
-
-

{project.name}

-

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

-

- {project.details} -

-

Project assigned to:

-
- {project.assignedUsersList.map(user => ( -
- -
- ))} -
-
- {user.uid === project.createdBy.id && ( - - )} -
+ + + {/* Project Title */} + + {project.name} + + + {/* Due Date */} + + Project due by {project.dueDate.toDate().toDateString()} + + + {/* Project Details */} + + {project.details} + + + {/* Assigned Users */} + + Project assigned to: + + + {project.assignedUsersList.map((user) => ( + + ))} + + + + {/* Action Button for Project Creator */} + {user.uid === project.createdBy.id && ( + + )} + + ) } \ No newline at end of file diff --git a/src/pages/signup/Signup.js b/src/pages/signup/Signup.js index 10f3bfe..72a1c14 100644 --- a/src/pages/signup/Signup.js +++ b/src/pages/signup/Signup.js @@ -1,4 +1,5 @@ -import { useState } from 'react' +import { useRef, useState } from "react"; + import { useSignup } from '../../hooks/useSignup' import { Box, @@ -8,14 +9,18 @@ import { Input, Heading, Text, - VStack, + // VStack, Spinner, Alert, AlertIcon, + FileUpload, InputGroup, + InputRightElement, + FormErrorMessage, + InputLeftElement, } from '@chakra-ui/react'; import { MdOutlineMail } from "react-icons/md"; -import { HiUpload } from "react-icons/hi" +import { HiArrowCircleUp } from "react-icons/hi" // styles //import './Signup.css' @@ -27,6 +32,9 @@ export default function Signup() { const [thumbnailError, setThumbnailError] = useState(null) const { signup, isPending, error } = useSignup() + const inputRef = useRef(); + const [fileName, setFileName] = useState(""); + const handleSubmit = (e) => { e.preventDefault() signup(email, password, displayName, thumbnail) @@ -55,74 +63,112 @@ export default function Signup() { console.log('thumbnail updated') } + const onFileChange = (e) => { + const file = e.target.files[0]; + setFileName(file?.name || ""); + handleFileChange(e); // Call the parent handler + } + return (
- - Sign Up - - Email - }> - setEmail(e.target.value)} - /> - - - - Password + {/* */} + Welcome! + + Email + }> setPassword(e.target.value)} + type="email" + placeholder="Enter your email" + value={email} + onChange={(e) => setEmail(e.target.value)} /> - + + + + Password + setPassword(e.target.value)} + /> + - - Display Name - setDisplayName(e.target.value)} - value={displayName} - /> - - - - Profile Thumbnail: - }> - + Display Name + setDisplayName(e.target.value)} + value={displayName} + /> + + + + Profile Thumbnail: + + + + - - {thumbnailError &&
{thumbnailError}
} - - - - - {error &&
{error}
} - + + + + + + + + {thumbnailError && ( + {thumbnailError} + )} + + + + + {error &&
{error}
} + {/* */}
) diff --git a/src/pages/welcomeboard/me.js b/src/pages/welcomeboard/me.js new file mode 100644 index 0000000..b08df3c --- /dev/null +++ b/src/pages/welcomeboard/me.js @@ -0,0 +1,40 @@ +import { Box, Text, Button, AbsoluteCenter, Heading, AspectRatio} from '@chakra-ui/react'; +import { FaChild } from "react-icons/fa" +export default function Welcome() { + + + return ( + + + {/* */} + Welcome aboard! + Hey, I'm Tseganeh! {} + Welcome! This onboarding will guide you through setting up projects, tracking progress, and collaborating effortlessly with your team. + + + +