Skip to content

Commit

Permalink
Merge branch 'contracts' of https://github.com/Spencer-Sch/CCIP-Payroll…
Browse files Browse the repository at this point in the history 
… into contracts
  • Loading branch information
@Spencer-Sch
Spencer-Sch committed Dec 8, 2023
2 parents fb91d23 + f209232 commit 321d674
Show file tree
Hide file tree
Showing 8 changed files with 331 additions and 156 deletions.
10 changes: 9 additions & 1 deletion packages/nextjs/components/dash-wind/containers/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Bars3Icon from "@heroicons/react/24/outline/Bars3Icon";
import BellIcon from "@heroicons/react/24/outline/BellIcon";
import MoonIcon from "@heroicons/react/24/outline/MoonIcon";
import SunIcon from "@heroicons/react/24/outline/SunIcon";
import { setIsConnected } from "~~/auth/authSlice";
import { setIsAdmin, setIsConnected } from "~~/auth/authSlice";
import { web3auth } from "~~/auth/web3auth";
// import UserIcon from "@heroicons/react/24/outline/UserIcon";
import { MyState, useMyDispatch, useMySelector } from "~~/components/dash-wind/app/store";
Expand All @@ -20,6 +20,7 @@ import { Address as AddressDisplay } from "~~/components/web-3-crew/Address";
function Header() {
const dispatch = useMyDispatch();
const { noOfNotifications, pageTitle } = useMySelector((state: MyState) => state.header);
const { isAdmin } = useMySelector((state: MyState) => state.auth);
const [currentTheme, setCurrentTheme] = useState(
typeof window !== "undefined" ? localStorage.getItem("theme") : null,
);
Expand Down Expand Up @@ -76,6 +77,10 @@ function Header() {
router.push("/login");
}

function toggleIsAdmin() {
dispatch(setIsAdmin({ isAdmin: !isAdmin }));
}

return (
<>
<div className="navbar flex justify-between bg-base-100 z-10 shadow-md ">
Expand All @@ -88,6 +93,9 @@ function Header() {
</div>

<div className="order-last">
<button className="btn btn-ghost mr-4 btn-circle" onClick={() => toggleIsAdmin()}>
Toggle isAdmin
</button>
{/* Multiple theme selection, uncomment this if you want to enable multiple themes selection,
also includes corporate and retro themes in tailwind.config file */}

Expand Down
58 changes: 34 additions & 24 deletions ...dash-wind/features/transactions/index.tsx → ...nts/dash-wind/features/payments/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import { useCallback, useEffect, useState } from "react";
// import Image from "next/image";
import TitleCard from "../../components/Cards/TitleCard";
import SearchBar from "../../components/Input/SearchBar";
import { RECENT_TRANSACTIONS } from "../../utils/dummyData";
import { RECENT_PAYMENTS } from "../../utils/dummyData";
// import { showNotification } from "../common/headerSlice";
import moment from "moment";
// import moment from "moment";
// import { MyState, useMyDispatch, useMySelector } from "~~/components/dash-wind/app/store";
import FunnelIcon from "@heroicons/react/24/outline/FunnelIcon";
import XMarkIcon from "@heroicons/react/24/outline/XMarkIcon";
Expand All @@ -19,7 +19,7 @@ interface TopSideButtonsProps {
const TopSideButtons = ({ removeFilter, applyFilter, applySearch }: TopSideButtonsProps) => {
const [filterParam, setFilterParam] = useState("");
const [searchText, setSearchText] = useState("");
const locationFilters = ["Paris", "London", "Canada", "Peru", "Tokyo"];
const statusFilters = ["paid", "pending"];

const showFiltersAndApply = (params: string) => {
applyFilter(params);
Expand Down Expand Up @@ -54,11 +54,11 @@ const TopSideButtons = ({ removeFilter, applyFilter, applySearch }: TopSideButto
<FunnelIcon className="w-5 mr-2" />
Filter
</label>
<ul tabIndex={0} className="dropdown-content menu p-2 text-sm shadow bg-base-100 rounded-box w-52">
{locationFilters.map((l, k) => {
<ul tabIndex={0} className="dropdown-content menu p-2 text-sm shadow bg-base-100 rounded-box w-52 z-[100]">
{statusFilters.map((s, k) => {
return (
<li key={k}>
<a onClick={() => showFiltersAndApply(l)}>{l}</a>
<a onClick={() => showFiltersAndApply(s)}>{s}</a>
</li>
);
})}
Expand All @@ -72,32 +72,38 @@ const TopSideButtons = ({ removeFilter, applyFilter, applySearch }: TopSideButto
);
};

function Transactions() {
const [trans, setTrans] = useState(RECENT_TRANSACTIONS);
function Payments() {
const [payments, setPayments] = useState(RECENT_PAYMENTS);

const getPaymentStatus = (status: string) => {
if (status === "Paid") return <div className="badge badge-success">{status}</div>;
if (status === "Pending") return <div className="badge badge-primary">{status}</div>;
else return <div className="badge badge-ghost">{status}</div>;
};

const removeFilter = () => {
setTrans(RECENT_TRANSACTIONS);
setPayments(RECENT_PAYMENTS);
};

const applyFilter = (params: string) => {
const filteredTransactions = RECENT_TRANSACTIONS.filter(t => {
return t.location == params;
const filteredPayments = RECENT_PAYMENTS.filter(p => {
return p.status.toLowerCase() == params.toLowerCase();
});
setTrans(filteredTransactions);
setPayments(filteredPayments);
};

// Search according to name
const applySearch = (value: string) => {
const filteredTransactions = RECENT_TRANSACTIONS.filter(t => {
return t.email.toLowerCase().includes(value.toLowerCase()) || t.email.toLowerCase().includes(value.toLowerCase());
const filteredPayments = RECENT_PAYMENTS.filter(p => {
return p.name.toLowerCase().includes(value.toLowerCase()) || p.name.toLowerCase().includes(value.toLowerCase());
});
setTrans(filteredTransactions);
setPayments(filteredPayments);
};

return (
<>
<TitleCard
title="Recent Transactions"
title="Payment History"
topMargin="mt-2"
TopSideButtons={
<TopSideButtons applySearch={applySearch} applyFilter={applyFilter} removeFilter={removeFilter} />
Expand All @@ -109,14 +115,16 @@ function Transactions() {
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Location</th>
<th>To Wallet</th>
<th>Invoice No</th>
<th>Invoice Generated On</th>
<th>Amount</th>
<th>Transaction Date</th>
<th>Status</th>
<th>Invoice Paid On</th>
</tr>
</thead>
<tbody>
{trans.map((l, k) => {
{payments.map((l, k) => {
return (
<tr key={k}>
<td>
Expand All @@ -131,10 +139,12 @@ function Transactions() {
</div>
</div>
</td>
<td>{l.email}</td>
<td>{l.location}</td>
<td>{l.wallet}</td>
<th>{l.invoiceNo}</th>
<th>{l.generatedOn}</th>
<td>${l.amount}</td>
<td>{moment(l.date).format("D MMM")}</td>
<td>{getPaymentStatus(l.status)}</td>
<td>{l.paidOn}</td>
</tr>
);
})}
Expand All @@ -146,4 +156,4 @@ function Transactions() {
);
}

export default Transactions;
export default Payments;
16 changes: 13 additions & 3 deletions packages/nextjs/components/dash-wind/features/user/Login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,15 @@ import InputText from "../../components/Input/InputText";
import ErrorText from "../../components/Typography/ErrorText";
import { UpdateFormValues } from "../../types/FormTypes";
import LandingIntro from "./LandingIntro";
import { Address, createWalletClient, custom } from "viem";
import { polygonMumbai } from "viem/chains";
// import { Address, createWalletClient, custom } from "viem";
// import { polygonMumbai } from "viem/chains";
import { useContractRead } from "wagmi";
import { setIsConnected } from "~~/auth/authSlice";

import {
/*setIsAdmin,*/
setIsConnected,
} from "~~/auth/authSlice";

import { web3auth } from "~~/auth/web3auth";
import { MyState, useMyDispatch, useMySelector } from "~~/components/dash-wind/app/store";

Expand Down Expand Up @@ -150,6 +155,7 @@ function Login() {
await web3auth.connect();
if (web3auth.connected) {
dispatch(setIsConnected({ isConnected: true }));

//const userAddress = await getAccounts(); // Retrieve user's address

// await determineIfAccountIsAdmin();
Expand All @@ -159,12 +165,14 @@ function Login() {

return;
}

}
} catch (error) {
console.error(error);
}
}


// async function determineIfAccountIsAdmin() {
// // set loading === true ???
// const userAddress = getAccounts();
Expand All @@ -173,6 +181,7 @@ function Login() {
// return;
// }


// if (!owner) {
// console.error("From determineIfAccountIsAdmin: ownerData from Payroll Contract is undefined");
// return;
Expand Down Expand Up @@ -206,6 +215,7 @@ function Login() {
return userAddress as Address;
}


const submitForm = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setErrorMessage("");
Expand Down
6 changes: 3 additions & 3 deletions ...ash-wind/pages/protected/Transactions.tsx → ...ts/dash-wind/pages/protected/Payments.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import { useEffect } from "react";
import { setPageTitle } from "../../features/common/headerSlice";
import Transactions from "../../features/transactions";
import Payments from "../../features/payments";
import { useMyDispatch } from "~~/components/dash-wind/app/store";

function InternalPage() {
const dispatch = useMyDispatch();

useEffect(() => {
dispatch(setPageTitle({ title: "Transactions" }));
dispatch(setPageTitle({ title: "Payments" }));
}, [dispatch]);

return <Transactions />;
return <Payments />;
}

export default InternalPage;
101 changes: 53 additions & 48 deletions packages/nextjs/components/dash-wind/routes/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,82 +2,87 @@
import { lazy } from "react";

const Dashboard = lazy(() => import("../pages/protected/Dashboard"));
const Welcome = lazy(() => import("../pages/protected/Welcome"));
// const Welcome = lazy(() => import("../pages/protected/Welcome"));
const Page404 = lazy(() => import("../pages/protected/_404"));
const Blank = lazy(() => import("../pages/protected/Blank"));
const Charts = lazy(() => import("../pages/protected/Charts"));
// const Blank = lazy(() => import("../pages/protected/Blank"));
// const Charts = lazy(() => import("../pages/protected/Charts"));
// const Leads = lazy(() => import("../pages/protected/Leads"));
const Integration = lazy(() => import("../pages/protected/Integration"));
const Calendar = lazy(() => import("../pages/protected/Calendar"));
const Team = lazy(() => import("../pages/protected/Team"));
const Transactions = lazy(() => import("../pages/protected/Transactions"));
// const Integration = lazy(() => import("../pages/protected/Integration"));
// const Calendar = lazy(() => import("../pages/protected/Calendar"));
// const Team = lazy(() => import("../pages/protected/Team"));
// const Transactions = lazy(() => import("../pages/protected/Transactions"));
const Payments = lazy(() => import("../pages/protected/Payments"));
const Bills = lazy(() => import("../pages/protected/Bills"));
const ProfileSettings = lazy(() => import("../pages/protected/ProfileSettings"));
const GettingStarted = lazy(() => import("../pages/GettingStarted"));
// const ProfileSettings = lazy(() => import("../pages/protected/ProfileSettings"));
// const GettingStarted = lazy(() => import("../pages/GettingStarted"));
// const DocFeatures = lazy(() => import("../pages/DocFeatures"));
const DocComponents = lazy(() => import("../pages/DocComponents"));
// const DocComponents = lazy(() => import("../pages/DocComponents"));

const routes = [
{
path: "/dashboard", // the url
component: Dashboard, // view rendered
},
{
path: "/welcome", // the url
component: Welcome, // view rendered
},
// {
// path: "/welcome", // the url
// component: Welcome, // view rendered
// },
// {
// path: "/leads",
// component: Leads,
// },
// {
// path: "/settings-team",
// component: Team,
// },
// {
// path: "/calendar",
// component: Calendar,
// },
{
path: "/settings-team",
component: Team,
},
{
path: "/calendar",
component: Calendar,
},
{
path: "/transactions",
component: Transactions,
},
{
path: "/settings-profile",
component: ProfileSettings,
path: "/payments",
component: Payments,
},
// {
// path: "/transactions",
// component: Transactions,
// },
// {
// path: "/settings-profile",
// component: ProfileSettings,
// },
{
path: "/settings-billing",
component: Bills,
},
{
path: "/getting-started",
component: GettingStarted,
},
// {
// path: "/getting-started",
// component: GettingStarted,
// },
// {
// path: "/features",
// component: DocFeatures,
// },
{
path: "/components",
component: DocComponents,
},
{
path: "/integration",
component: Integration,
},
{
path: "/charts",
component: Charts,
},
// {
// path: "/components",
// component: DocComponents,
// },
// {
// path: "/integration",
// component: Integration,
// },
// {
// path: "/charts",
// component: Charts,
// },
{
path: "/404",
component: Page404,
},
{
path: "/blank",
component: Blank,
},
// {
// path: "/blank",
// component: Blank,
// },
];

export default routes;
Loading

0 comments on commit 321d674

Please sign in to comment.