Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add feature: Enhance dashboard with additional sections #109

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add feature: Enhance dashboard with additional sections #109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
db2a0c1
Add feature: Enhance dashboard with additional sections (recent activ…
suksham11 Oct 8, 2024
94b6b6c
Merge branch 'main' into feature/add-dashboard-sections-and-footer-fix
suksham11 Oct 14, 2024
a2c795c
Update Footer.js
suksham11 Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 90 additions & 55 deletions site/components/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,88 +1,123 @@
import React from 'react'
import Link from 'next/link'
import { Apple, Play } from 'lucide-react'
import React from "react";
import Link from "next/link";
import { Apple, Play } from "lucide-react";

const Footer = () => {
return (
<footer aria-label="Site Footer" className="relative bg-gray-900 text-white py-10 px-6">

{/* Wave Effect (You can add SVG wave here for a design touch) */}
<svg className="absolute top-0 left-0 right-0 -mt-1 h-8" viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg">
<path fill="#1a202c" fillOpacity="1" d="M0,224L48,208C96,192,192,160,288,160C384,160,480,192,576,186.7C672,181,768,139,864,133.3C960,128,1056,160,1152,176C1248,192,1344,192,1392,192L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
<footer
aria-label="Site Footer"
className="relative bg-gray-900 text-white pt-4 pb-10 px-4"
>
{" "}
{/* Reduced padding */}
{/* Wave Effect */}
<svg
className="absolute top-0 left-0 right-0 -mt-1 h-8"
viewBox="0 0 1440 320"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#1a202c"
fillOpacity="1"
d="M0,224L48,208C96,192,192,160,288,160C384,160,480,192,576,186.7C672,181,768,139,864,133.3C960,128,1056,160,1152,176C1248,192,1344,192,1392,192L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
></path>
</svg>

<div className="container mx-auto flex flex-col md:flex-row items-center justify-between relative z-10 space-y-8 md:space-y-0">

<div className="container mx-auto flex flex-col md:flex-row items-center justify-between relative z-10 space-y-6 md:space-y-0">
{" "}
{/* Adjusted spacing */}
{/* Left Section: Logo & Copyright */}
<div className="flex flex-col items-center md:items-start">
<Link href="/" className="text-2xl font-bold">
HireHUB
</Link>
<p className="text-sm text-gray-400 mt-2">&copy; {new Date().getFullYear()} Your Company. All rights reserved.</p>
<p className="text-sm text-gray-400 mt-1">
&copy; {new Date().getFullYear()} HireHub. All rights reserved.
</p>
</div>

{/* Right Section: Download the App */}
<div className="flex space-x-4 md:order-3">
<Link href="https://play.google.com/store" target="_blank">
<div className="flex items-center px-4 py-2 bg-white text-gray-800 rounded-lg hover:bg-blue-500 hover:text-white hover:shadow-xl transition-all duration-300 ease-in-out">
<Play className="w-5 h-5 mr-2 transition-transform duration-300 ease-in-out hover:scale-110" />
<span className="text-sm font-semibold">Google Play</span>
</div>
</Link>

<Link href="https://www.apple.com/app-store/" target="_blank">
<div className="flex items-center px-4 py-2 bg-white text-gray-800 rounded-lg hover:bg-blue-500 hover:text-white hover:shadow-xl transition-all duration-300 ease-in-out">
<Apple className="w-5 h-5 mr-2 transition-transform duration-300 ease-in-out hover:scale-110" />
<span className="text-sm font-semibold">App Store</span>
</div>
</Link>
</div>

{/* Feature: Contact Us */}
<div className="flex flex-col items-start mb-6 md:mb-0">
<h3 className="mb-4 text-lg font-semibold">Contact Us</h3>
<div className="flex flex-col space-y-2">
{/* Email Contact */}
<a href="mailto:[email protected]" className="text-sm font-semibold hover:underline">
<a
href="mailto:[email protected]"
className="text-sm font-semibold hover:underline"
>
[email protected]
</a>
{/* Phone Contact */}
<a href="tel:+123456789" className="text-sm font-semibold hover:underline">
<a
href="tel:+123456789"
className="text-sm font-semibold hover:underline"
>
+1 234 567 89
</a>
{/* Or a Contact Form Link */}
<Link href="/contact" className="text-sm font-semibold hover:underline">
<Link
href="/contact"
className="text-sm font-semibold hover:underline"
>
Contact Form
</Link>
</div>
</div>

{/* Right Section: Social Media Links */}
<div className="flex space-x-6 md:order-2">
<Link href="https://twitter.com/yourprofile" target="_blank" aria-label="Twitter" className="text-gray-400 hover:text-blue-400 transition">
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
{/* Social Media Links */}
<div className="flex space-x-4 md:order-2">
{" "}
{/* Adjusted spacing */}
<Link
href="https://twitter.com/yourprofile"
target="_blank"
rel="noopener noreferrer"
aria-label="Twitter"
className="text-gray-400 hover:text-blue-400 transition"
>
<svg
className="h-5 w-5"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
{/* Add Twitter SVG Path */}
</svg>
</Link>
<Link href="https://linkedin.com/in/yourprofile" target="_blank" aria-label="LinkedIn" className="text-gray-400 hover:text-blue-600 transition">
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<Link
href="https://linkedin.com/in/yourprofile"
target="_blank"
rel="noopener noreferrer"
aria-label="LinkedIn"
className="text-gray-400 hover:text-blue-600 transition"
>
<svg
className="h-5 w-5"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
{/* Add LinkedIn SVG Path */}
</svg>
</Link>
<Link href="https://github.com/yourprofile" target="_blank" aria-label="GitHub" className="text-gray-400 hover:text-blue-600 transition">
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<Link
href="https://github.com/yourprofile"
target="_blank"
rel="noopener noreferrer"
aria-label="GitHub"
className="text-gray-400 hover:text-blue-600 transition"
>
<svg
className="h-5 w-5"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
{/* Add GitHub SVG Path */}
</svg>
</Link>
</div>
</div>

{/* Bottom Text */}
<div className="text-center mt-10">
<p className="text-sm">&copy; 2024 Shubhadip Bhowmik. All rights reserved.</p>
<div className="text-center mt-6">
{" "}
{/* Reduced margin-top */}
<p className="text-sm">
&copy; 2024 HireHub. All rights reserved.
</p>
</div>
</footer>
)
}
);
};

export default Footer
export default Footer;
185 changes: 115 additions & 70 deletions site/pages/dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,126 @@
import React, { useContext, useEffect, useState } from 'react';
import LinkBox from '@/components/LinkBox';
import UserHeader from '@/components/UserHeader';
import { toast } from 'react-toastify';
import UserContext from '@/context/userContext';
import React, { useContext, useEffect, useState } from "react";
import LinkBox from "@/components/LinkBox";
import UserHeader from "@/components/UserHeader";
import { toast } from "react-toastify";
import UserContext from "@/context/userContext";

const Dashboard = () => {
const [data, setData] = useState({});
const {setUserData} = useContext(UserContext);
const [data, setData] = useState({});
const { setUserData } = useContext(UserContext);

useEffect(() => {
if (!localStorage.getItem('BioTreeToken')) {
return window.location.href = '/login';
}
useEffect(() => {
if (!localStorage.getItem("BioTreeToken")) {
return (window.location.href = "/login");
}

const options = {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
tokenMail: localStorage.getItem("BioTreeToken"),
}),
};

const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
tokenMail: localStorage.getItem('BioTreeToken')
}),
};
fetch("https://bio-branch-server.onrender.com/data/dashboard", options)
.then((res) => res.json())
.then((data) => {
console.log(data);
if (data.status === "error") {
return toast.error("Error happened");
}
setData(data.userData);
setUserData(data.userData);
localStorage.setItem("userHandle", data.userData.handle);
// toast.success(data.message);
})
.catch((err) => console.log(err));
}, []);

fetch('https://bio-branch-server.onrender.com/data/dashboard', options)
.then((res) => res.json())
.then((data) => {
console.log(data);
if (data.status === 'error') {
return toast.error("Error happened");
}
setData(data.userData);
setUserData(data.userData);
localStorage.setItem('userHandle', data.userData.handle);
// toast.success(data.message);
})
.catch((err) => console.log(err));
}, []);
return (
<>
<div>
<UserHeader />
<main>
<section className="grid md:grid-cols-2 xl:grid-cols-4 gap-4 p-8">
<LinkBox
lbTitle="Links"
lbNumber={data.links}
lbSvg="email"
lbTheme="red"
/>
<LinkBox
lbTitle="Total Clicks"
lbNumber="30%"
lbSvg="growth"
lbTheme="yellow"
/>
<LinkBox
lbTitle="Total Shares"
lbNumber="39"
lbSvg="share"
lbTheme="green"
/>
<LinkBox
lbTitle="Total Retention"
lbNumber="50%"
lbSvg="url"
lbTheme="green"
/>
</section>

return (
<>
<div>
<UserHeader/>
<main>
<section className='grid md:grid-cols-2 xl:grid-cols-4 gap-4 p-8'>
<LinkBox
lbTitle="Links"
lbNumber={data.links}
lbSvg="email"
lbTheme="red"
/>
<LinkBox
lbTitle="Total Clicks"
lbNumber="30%"
lbSvg="growth"
lbTheme="yellow"
/>
<LinkBox
lbTitle="Total Shares"
lbNumber="39"
lbSvg="share"
lbTheme="green"
/>
<LinkBox
lbTitle="Total Retention"
lbNumber="50%"
lbSvg="url"
lbTheme="green"
/>
</section>
<section>
{/* New Section: Recent Activities */}
<section className="p-8">
<h2 className="text-2xl font-bold mb-4">Recent Activities</h2>
<ul className="space-y-2">
<li className="bg-gray-100 p-4 rounded-lg shadow-md">
<p className="font-semibold">Activity 1</p>
<p className="text-sm text-gray-600">
Description of activity 1...
</p>
</li>
<li className="bg-gray-100 p-4 rounded-lg shadow-md">
<p className="font-semibold">Activity 2</p>
<p className="text-sm text-gray-600">
Description of activity 2...
</p>
</li>
<li className="bg-gray-100 p-4 rounded-lg shadow-md">
<p className="font-semibold">Activity 3</p>
<p className="text-sm text-gray-600">
Description of activity 3...
</p>
</li>
</ul>
</section>

</section>
</main>
{/* New Section: User Statistics */}
<section className="p-8">
<h2 className="text-2xl font-bold mb-4">User Statistics</h2>
<div className="grid md:grid-cols-2 xl:grid-cols-4 gap-4">
<div className="bg-blue-100 p-4 rounded-lg shadow-md">
<h3 className="font-semibold">Total Posts</h3>
<p className="text-2xl">{data.totalPosts || 0}</p>
</div>
<div className="bg-blue-100 p-4 rounded-lg shadow-md">
<h3 className="font-semibold">Followers</h3>
<p className="text-2xl">{data.followers || 0}</p>
</div>
<div className="bg-blue-100 p-4 rounded-lg shadow-md">
<h3 className="font-semibold">Following</h3>
<p className="text-2xl">{data.following || 0}</p>
</div>
<div className="bg-blue-100 p-4 rounded-lg shadow-md">
<h3 className="font-semibold">Likes</h3>
<p className="text-2xl">{data.likes || 0}</p>
</div>
</div>
</>
);
</section>
</main>
</div>
</>
);
};

export default Dashboard;