devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finished up the modal to create a payment and added the page to the sidebar

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-12-05 23:41:55 +00:00
parent 03520b650b
commit 58c18133ec
5 changed files with 114 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/MobileMenu.tsx
View File

@@ -103,6 +103,17 @@ export default function MobileMenu({isOpen, onClose, path, user}: Props) {
)}>
Record
</Link>
{["admin", "developer", "agent"].includes(user.type) && (
<Link
href="/payment-record"
className={clsx(
"transition ease-in-out duration-300 w-fit",
path === "/payment-record" &&
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
)}>
Payment Record
</Link>
)}
{["admin", "developer", "corporate", "teacher"].includes(user.type) && (
<Link
href="/settings"

20
src/components/Sidebar.tsx
View File

@@ -99,6 +99,16 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
)}
<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
{["admin", "developer", "agent"].includes(userType || "") && (
<Nav
disabled={disableNavigation}
Icon={BsCurrencyDollar}
label="Payment Record"
path={path}
keyPath="/payment-record"
isMinimized={isMinimized}
/>
)}
{["admin", "developer", "corporate", "teacher"].includes(userType || "") && (
<Nav
disabled={disableNavigation}
@@ -119,16 +129,6 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
isMinimized={isMinimized}
/>
)}
{userType === "developer" && (
<Nav
disabled={disableNavigation}
Icon={BsCurrencyDollar}
label="Payment Record"
path={path}
keyPath="/payment-record"
isMinimized={isMinimized}
/>
)}
</div>
<div className="xl:hidden -xl:flex flex-col gap-3">
<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={true} />

1
src/interfaces/paypal.ts
View File

@@ -31,4 +31,5 @@ export interface Payment {
currency: string;
value: number;
isPaid: boolean;
date: Date;
}

5
src/pages/api/payments/index.ts
View File

@@ -6,6 +6,8 @@ import {withIronSessionApiRoute} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {Group} from "@/interfaces/user";
import {Payment} from "@/interfaces/paypal";
import {v4} from "uuid";
import ShortUniqueId from "short-unique-id";
const db = getFirestore(app);
@@ -35,6 +37,7 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
async function post(req: NextApiRequest, res: NextApiResponse) {
const body = req.body as Payment;
await setDoc(doc(db, "payments", body.id), body);
const shortUID = new ShortUniqueId();
await setDoc(doc(db, "payments", shortUID.randomUUID(8)), body);
res.status(200).json({ok: true});
}

82
src/pages/payment-record.tsx
View File

@@ -22,6 +22,8 @@ import Checkbox from "@/components/Low/Checkbox";
import Button from "@/components/Low/Button";
import Select from "react-select";
import Input from "@/components/Low/Input";
import ReactDatePicker from "react-datepicker";
import moment from "moment";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -55,12 +57,13 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const columnHelper = createColumnHelper<Payment>();
const PaymentCreator = () => {
const PaymentCreator = ({onClose, reload}: {onClose: () => void; reload: () => void}) => {
const [corporate, setCorporate] = useState<CorporateUser>();
const [price, setPrice] = useState<number>(0);
const [currency, setCurrency] = useState<string>("EUR");
const [commission, setCommission] = useState<number>(0);
const [referralAgent, setReferralAgent] = useState<AgentUser>();
const [date, setDate] = useState<Date>(new Date());
const {users} = useUsers();
@@ -72,21 +75,43 @@ const PaymentCreator = () => {
setReferralAgent(referralAgent as AgentUser | undefined);
}, [corporate, users]);
const submit = () => {
axios
.post(`/api/payments`, {
corporate: corporate?.id,
agent: referralAgent?.id,
agentCommission: commission,
agentValue: (commission / 100) * price,
currency,
value: price,
isPaid: false,
date: date.toISOString(),
})
.then(() => {
toast.success("New payment has been created successfully!");
reload();
onClose();
})
.catch(() => {
toast.error("Something went wrong, please try again later!");
});
};
return (
<div className="flex flex-col gap-8">
<h1 className="text-2xl font-semibold">New Payment</h1>
<form className="flex flex-col gap-4">
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-3">
<label className="font-normal text-base text-mti-gray-dim">Corporate account *</label>
<Select
className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
options={(users.filter((u) => u.type === "corporate") as CorporateUser[]).map((user) => ({
value: user.id,
meta: user,
label: `${user.corporateInformation.companyInformation.name} - ${user.email}`,
label: `${user.corporateInformation.companyInformation.name || user.name} - ${user.email}`,
}))}
defaultValue={{value: "undefined", label: "Select an account"}}
onChange={(value) => console.log((value as any)?.meta ?? undefined)}
onChange={(value) => setCorporate((value as any)?.meta ?? undefined)}
styles={{
control: (styles) => ({
...styles,
@@ -105,6 +130,7 @@ const PaymentCreator = () => {
}}
/>
</div>
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Price *</label>
<div className="w-full grid grid-cols-5 gap-2">
@@ -139,6 +165,7 @@ const PaymentCreator = () => {
/>
</div>
</div>
<div className="flex gap-4 w-full">
<div className="flex flex-col w-full gap-3">
<label className="font-normal text-base text-mti-gray-dim">Commission *</label>
@@ -156,6 +183,22 @@ const PaymentCreator = () => {
/>
</div>
</div>
<div className="flex gap-4">
<div className="flex flex-col w-full gap-3">
<label className="font-normal text-base text-mti-gray-dim">Date *</label>
<ReactDatePicker
className={clsx(
"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"hover:border-mti-purple tooltip",
"transition duration-300 ease-in-out",
)}
dateFormat="dd/MM/yyyy"
selected={moment(date).toDate()}
onChange={(date) => setDate(date ?? new Date())}
/>
</div>
<div className="flex flex-col w-full gap-3">
<label className="font-normal text-base text-mti-gray-dim">Country Manager *</label>
<Input
@@ -167,7 +210,16 @@ const PaymentCreator = () => {
disabled
/>
</div>
</form>
</div>
<div className="flex w-full justify-end items-center gap-8 mt-4">
<Button variant="outline" color="red" className="w-full max-w-[200px]" onClick={onClose}>
Cancel
</Button>
<Button className="w-full max-w-[200px]" onClick={submit} disabled={!corporate || !price}>
Submit
</Button>
</div>
</div>
</div>
);
};
@@ -178,7 +230,7 @@ export default function PaymentRecord() {
const {user} = useUser({redirectTo: "/login"});
const {users} = useUsers();
const {payments, isLoading, reload} = usePayments();
const {payments, reload} = usePayments();
const updatePayment = (payment: Payment, key: string, value: any) => {
axios
@@ -224,6 +276,10 @@ export default function PaymentRecord() {
</div>
),
}),
columnHelper.accessor("date", {
header: "Date",
cell: (info) => <span>{moment(info.getValue()).format("DD/MM/YYYY")}</span>,
}),
columnHelper.accessor("value", {
header: "Amount",
cell: (info) => (
@@ -257,7 +313,9 @@ export default function PaymentRecord() {
columnHelper.accessor("isPaid", {
header: "Paid",
cell: (info) => (
<Checkbox isChecked={info.getValue()} onChange={(e) => updatePayment(info.row.original, "isPaid", e)}>
<Checkbox
isChecked={info.getValue()}
onChange={(e) => (user?.type !== "agent" ? updatePayment(info.row.original, "isPaid", e) : null)}>
<span></span>
</Checkbox>
),
@@ -268,9 +326,11 @@ export default function PaymentRecord() {
cell: ({row}: {row: {original: Payment}}) => {
return (
<div className="flex gap-4">
{user?.type !== "agent" && (
<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deletePayment(row.original.id)}>
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</div>
)}
</div>
);
},
@@ -278,7 +338,7 @@ export default function PaymentRecord() {
];
const table = useReactTable({
data: payments,
data: (user?.type === "agent" ? payments.filter((p) => p.agent === user.id) : payments).sort((a, b) => moment(b.date).diff(moment(a.date))),
columns: defaultColumns,
getCoreRowModel: getCoreRowModel(),
});
@@ -315,14 +375,16 @@ export default function PaymentRecord() {
</Modal>
<Modal isOpen={isCreatingPayment} onClose={() => setIsCreatingPayment(false)}>
<PaymentCreator />
<PaymentCreator onClose={() => setIsCreatingPayment(false)} reload={reload} />
</Modal>
<div className="w-full flex flex-end justify-between p-2">
<h1 className="text-2xl font-semibold">Payment Record</h1>
{(user.type === "developer" || user.type === "admin") && (
<Button className="w-full max-w-[200px]" variant="outline" onClick={() => setIsCreatingPayment(true)}>
New Payment
</Button>
)}
</div>
<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
<thead>