Finished up the modal to create a payment and added the page to the sidebar
This commit is contained in:
Tiago Ribeiro
@@ -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,18 +183,43 @@ const PaymentCreator = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col w-full gap-3">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Country Manager *</label>
|
||||
<Input
|
||||
name="referralAgent"
|
||||
value={referralAgent ? `${referralAgent.name} - ${referralAgent.email}` : "No country manager"}
|
||||
onChange={() => null}
|
||||
type="text"
|
||||
defaultValue={"No country manager"}
|
||||
disabled
|
||||
/>
|
||||
|
||||
<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
|
||||
name="referralAgent"
|
||||
value={referralAgent ? `${referralAgent.name} - ${referralAgent.email}` : "No country manager"}
|
||||
onChange={() => null}
|
||||
type="text"
|
||||
defaultValue={"No country manager"}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<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">
|
||||
<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>
|
||||
{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>
|
||||
<Button className="w-full max-w-[200px]" variant="outline" onClick={() => setIsCreatingPayment(true)}>
|
||||
New Payment
|
||||
</Button>
|
||||
{(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>
|
||||
|
||||
Reference in New Issue
Block a user