Skip to content

Commit

Permalink
Merge branch 'main' into fix-207
Browse files Browse the repository at this point in the history
  • Loading branch information
@Verifieddanny
Verifieddanny authored Mar 2, 2025
2 parents af994ce + 051e79f commit 630c5a8
Show file tree
Hide file tree
Showing 4 changed files with 261 additions and 37 deletions.
61 changes: 25 additions & 36 deletions src/app/dashboard/employer/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,33 @@
"use client";

import { useState } from "react";
;
import DashBoardContextProvider from "@/app/useContext/dashboardContext";
import { Logs } from "lucide-react";
import { Sidebar } from "./components/employer-sidebar";
import Header from "./components/header";
import { DashBoardContext } from "@/app/useContext/dashboardContext";
import { useState } from "react";

const Layout = ({ children }: { children: React.ReactNode }) => {
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
return (
<DashBoardContextProvider>
<main className="bg-[#101110] h-[90vh] max-h-screen">
<Header />
<div
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
className="md:hidden px-8"
>
<Logs size={30} className="text-white" />
</div>
<div className="flex h-[100%] text-white overflow-y-auto scrollbar-hide scroll-smooth">
{isSidebarOpen && (
<section className="">
{" "}
<Sidebar />
</section>
)}

<section className=" hidden md:block">
{" "}
<Sidebar />
</section>
export default function EmployerLayout({
children,
}: {
children: React.ReactNode;
}) {
const [activeSection, setActiveSection] = useState("home");

<main className="flex-grow overflow-y-scroll scrollbar-hide h-auto hide-scrollbar">
{children}
</main>
return (
<DashBoardContext.Provider
value={{
activeSection,
setActiveSection,
activeNotificationTab: "all",
setActiveNotificationTab: useState("all")[1],
}}
>
<div className="flex min-h-screen bg-[#101110] text-white">
<Sidebar />
<div className="flex-1">
<Header />
<main>{children}</main>
</div>
</main>
</DashBoardContextProvider>
</div>
</DashBoardContext.Provider>
);
};

export default Layout;
}
4 changes: 3 additions & 1 deletion src/app/dashboard/employer/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { DashBoardContext } from "@/app/useContext/dashboardContext";
import JobOpening from "./job-openings/job-openings";
import Notifications from "./notifications/notifications";
import Profile from "./profile/profile";
import Payment from "./payment/payment";

function Page() {
const { activeSection } = useContext(DashBoardContext);
Expand All @@ -20,7 +21,8 @@ function Page() {
return <Notifications />;
case "profile":
return <Profile />;

case "payments":
return <Payment />;
default:
return <EmployerDashboard />;
}
Expand Down
15 changes: 15 additions & 0 deletions src/app/dashboard/employer/payment/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
"use client";

import Payment from "./payment";
import { useContext, useEffect } from "react";
import { DashBoardContext } from "@/app/useContext/dashboardContext";

export default function PaymentPage() {
const { setActiveSection } = useContext(DashBoardContext);

useEffect(() => {
setActiveSection("payments");
}, [setActiveSection]);

return <Payment />;
}
218 changes: 218 additions & 0 deletions src/app/dashboard/employer/payment/payment.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,218 @@
"use client";

import { useState } from "react";
import { Copy } from "lucide-react";

type TabType = "all-time" | "weekly" | "monthly";

interface Transaction {
id: string;
amount: string;
date: string;
}

interface PaymentData {
totalPayment: string;
balance: string;
transactions: Transaction[];
}

export default function Payment() {
const [activeTab, setActiveTab] = useState<TabType>("all-time");

const tabData: Record<TabType, PaymentData> = {
"all-time": {
totalPayment: "$30,500",
balance: "$130,500",
transactions: [
{
id: "0xe46d0b1039a8f97df2800...",
amount: "$15",
date: "12th Jan, 2025",
},
{
id: "0xe46d0b1039a8f97df2800...",
amount: "$15",
date: "12th Jan, 2025",
},
{
id: "0xe46d0b1039a8f97df2800...",
amount: "$15",
date: "12th Jan, 2025",
},
],
},
weekly: {
totalPayment: "$11,500",
balance: "$30,500",
transactions: [
{
id: "0xe46d0b1039a8f97df2800...",
amount: "$5",
date: "10th Jan, 2025",
},
{
id: "0xe46d0b1039a8f97df2800...",
amount: "$6.5",
date: "8th Jan, 2025",
},
],
},
monthly: {
totalPayment: "$44,500",
balance: "$84,500",
transactions: [
{
id: "0xe46d0b1039a8f97df2800...",
amount: "$15",
date: "10th Jan, 2025",
},
{
id: "0xe46d0b1039a8f97df2800...",
amount: "$12.5",
date: "8th Jan, 2025",
},
{
id: "0xe46d0b1039a8f97df2800...",
amount: "$17",
date: "1st Jan, 2025",
},
],
},
};

const tabs = [
{ id: "all-time", label: "All-Time" },
{ id: "weekly", label: "Weekly" },
{ id: "monthly", label: "Monthly" },
] as const;
const copyToClipboard = (text: string) => {
navigator.clipboard.writeText(text);
};
const currentData = tabData[activeTab];
return (
<div className="min-h-screen text-white">
<div className="py-4 px-4 md:px-8">
<div className="flex gap-4">
{tabs.map((tab) => (
<button
key={tab.id}
onClick={() => setActiveTab(tab.id)}
className={`px-5 py-2 transition-all rounded-lg text-sm ${
activeTab === tab.id
? "bg-[#1D1D1C] text-white"
: "text-gray-400 hover:text-gray-300"
}`}
>
{tab.label}
</button>
))}
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8 px-4 md:px-8">
<div className="bg-[#161716] rounded-lg p-6">
<div className="flex items-center">
<div className="bg-[#1E293B] w-12 h-12 rounded-full mr-4 flex items-center justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#2B82CA"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="19" x2="5" y1="5" y2="19"></line>
<circle cx="6.5" cy="6.5" r="2.5"></circle>
<circle cx="17.5" cy="17.5" r="2.5"></circle>
</svg>
</div>
<div>
<p className="text-2xl font-bold">{currentData.totalPayment}</p>
<p className="text-gray-400 text-sm">Total Payment</p>
</div>
</div>
</div>
<div className="bg-[#161716] rounded-lg p-6">
<div className="flex items-center">
<div className="bg-[#1E293B] w-12 h-12 rounded-full mr-4 flex items-center justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#2B82CA"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="19" x2="5" y1="5" y2="19"></line>
<circle cx="6.5" cy="6.5" r="2.5"></circle>
<circle cx="17.5" cy="17.5" r="2.5"></circle>
</svg>
</div>
<div>
<p className="text-2xl font-bold">{currentData.balance}</p>
<p className="text-gray-400 text-sm">Balance</p>
</div>
</div>
</div>
</div>
<div className="mt-8 px-4 md:px-8">
<h2 className="text-xl font-semibold mb-4 text-gray-400">
Payment History
</h2>
<div className="overflow-x-auto">
<table className="min-w-full bg-[#101110] rounded-lg">
<thead>
<tr className="border-b border-[#1D1D1C]">
<th className="py-4 px-6 text-left text-sm font-medium text-gray-400">
SN
</th>
<th className="py-4 px-6 text-left text-sm font-medium text-gray-400">
Transaction ID
</th>
<th className="py-4 px-6 text-right text-sm font-medium text-gray-400">
Amount
</th>
<th className="py-4 px-6 text-right text-sm font-medium text-gray-400">
Date
</th>
</tr>
</thead>
<tbody>
{currentData.transactions.map((transaction, index) => (
<tr
key={index}
className="border-t border-[#1D1D1C] hover:bg-[#161716]"
>
<td className="py-6 px-6 text-white">{index + 1}</td>
<td className="py-6 px-6">
<div className="flex items-center">
<span className="text-white">{transaction.id}</span>
<button
onClick={() => copyToClipboard(transaction.id)}
className="ml-2 text-gray-400 hover:text-white"
>
<Copy size={16} />
</button>
</div>
</td>
<td className="py-6 px-6 text-right text-white">
{transaction.amount}
</td>
<td className="py-6 px-6 text-right text-white">
{transaction.date}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
);
}

0 comments on commit 630c5a8

Please sign in to comment.