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

Merge branch 'develop' into improvement/stats-page-updaes

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-12-27 14:50:10 +00:00
parent cb73196503 9dbe876d65
commit a07e5a7312
6 changed files with 247 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,6 +26,7 @@ import ReactDatePicker from "react-datepicker";
import moment from "moment";
import PaymentAssetManager from "@/components/PaymentAssetManager";
import {toFixedNumber} from "@/utils/number";
import {CSVLink} from "react-csv";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -236,7 +237,8 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
};
export default function PaymentRecord() {
const [selectedUser, setSelectedUser] = useState<User>();
const [selectedCorporateUser, setSelectedCorporateUser] = useState<User>();
const [selectedAgentUser, setSelectedAgentUser] = useState<User>();
const [isCreatingPayment, setIsCreatingPayment] = useState(false);
const [filters, setFilters] = useState<{filter: (p: Payment) => boolean; id: string}[]>([]);
const [displayPayments, setDisplayPayments] = useState<Payment[]>([]);
@@ -321,6 +323,7 @@ export default function PaymentRecord() {
return [
columnHelper.accessor("corporateTransfer", {
header: "Corporate transfer",
id: "corporateTransfer",
cell: (info) => (
<div className={containerClassName}>
<PaymentAssetManager
@@ -337,6 +340,7 @@ export default function PaymentRecord() {
return [
columnHelper.accessor("commissionTransfer", {
header: "Commission transfer",
id: "commissionTransfer",
cell: (info) => (
<div className={containerClassName}>
<PaymentAssetManager
@@ -353,6 +357,7 @@ export default function PaymentRecord() {
return [
columnHelper.accessor("corporateTransfer", {
header: "Corporate transfer",
id: "corporateTransfer",
cell: (info) => (
<div className={containerClassName}>
<PaymentAssetManager
@@ -366,6 +371,7 @@ export default function PaymentRecord() {
}),
columnHelper.accessor("commissionTransfer", {
header: "Commission transfer",
id: "commissionTransfer",
cell: (info) => (
<div className={containerClassName}>
<PaymentAssetManager
@@ -382,6 +388,7 @@ export default function PaymentRecord() {
return [
columnHelper.accessor("corporateTransfer", {
header: "Corporate transfer",
id: "corporateTransfer",
cell: (info) => (
<div className={containerClassName}>
<PaymentAssetManager
@@ -395,6 +402,7 @@ export default function PaymentRecord() {
}),
columnHelper.accessor("commissionTransfer", {
header: "Commission transfer",
id: "commissionTransfer",
cell: (info) => (
<div className={containerClassName}>
<PaymentAssetManager
@@ -417,10 +425,12 @@ export default function PaymentRecord() {
const defaultColumns = [
columnHelper.accessor("id", {
header: "ID",
id: "id",
cell: (info) => info.getValue(),
}),
columnHelper.accessor("corporate", {
header: "Corporate",
id: "corporate",
cell: (info) => {
const user = users.find((x) => x.id === info.row.original.corporate) as CorporateUser;
return (
@@ -428,7 +438,7 @@ export default function PaymentRecord() {
className={clsx(
"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
)}
onClick={() => setSelectedUser(user)}>
onClick={() => setSelectedCorporateUser(user)}>
{user?.corporateInformation.companyInformation.name || user?.name}
</div>
);
@@ -436,10 +446,12 @@ export default function PaymentRecord() {
}),
columnHelper.accessor("date", {
header: "Date",
id: "date",
cell: (info) => <span>{moment(info.getValue()).format("DD/MM/YYYY")}</span>,
}),
columnHelper.accessor("value", {
header: "Amount",
id: "amount",
cell: (info) => (
<span>
{toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label}
@@ -448,20 +460,23 @@ export default function PaymentRecord() {
}),
columnHelper.accessor("agent", {
header: "Country Manager",
id: "agent",
cell: (info) => (
<div
className={clsx("underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer")}
onClick={() => setSelectedUser(users.find((x) => x.id === info.row.original.agent))}>
onClick={() => setSelectedAgentUser(users.find((x) => x.id === info.row.original.agent))}>
{(users.find((x) => x.id === info.row.original.agent) as AgentUser)?.name}
</div>
),
}),
columnHelper.accessor("agentCommission", {
header: "Commission",
id: "agentCommission",
cell: (info) => <>{info.getValue()}%</>,
}),
columnHelper.accessor("agentValue", {
header: "Commission Value",
id: "agentValue",
cell: (info) => (
<span>
{toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label}
@@ -470,6 +485,7 @@ export default function PaymentRecord() {
}),
columnHelper.accessor("isPaid", {
header: "Paid",
id: "isPaid",
cell: (info) => (
<Checkbox
isChecked={info.getValue()}
@@ -502,6 +518,55 @@ export default function PaymentRecord() {
getCoreRowModel: getCoreRowModel(),
});
const getUserModal = () => {
if(user) {
if(selectedCorporateUser) {
return (
<Modal isOpen={!!selectedCorporateUser} onClose={() => setSelectedCorporateUser(undefined)}>
<>
{selectedCorporateUser && (
<div className="w-full flex flex-col gap-8">
<UserCard
loggedInUser={user}
onClose={(shouldReload) => {
setSelectedCorporateUser(undefined);
if (shouldReload) reload();
}}
user={selectedCorporateUser}
disabled
/>
</div>
)}
</>
</Modal>
);
}
if(selectedAgentUser) {
return (
<Modal isOpen={!!selectedAgentUser} onClose={() => setSelectedAgentUser(undefined)}>
<>
{selectedAgentUser && (
<div className="w-full flex flex-col gap-8">
<UserCard
loggedInUser={user}
onClose={(shouldReload) => {
setSelectedAgentUser(undefined);
if (shouldReload) reload();
}}
user={selectedAgentUser}
/>
</div>
)}
</>
</Modal>
);
}
}
return null;
}
return (
<>
<Head>
@@ -516,23 +581,7 @@ export default function PaymentRecord() {
<ToastContainer />
{user && (
<Layout user={user} className="gap-6">
<Modal isOpen={!!selectedUser} onClose={() => setSelectedUser(undefined)}>
<>
{selectedUser && (
<div className="w-full flex flex-col gap-8">
<UserCard
loggedInUser={user}
onClose={(shouldReload) => {
setSelectedUser(undefined);
if (shouldReload) reload();
}}
user={selectedUser}
/>
</div>
)}
</>
</Modal>
{getUserModal()}
<Modal isOpen={isCreatingPayment} onClose={() => setIsCreatingPayment(false)}>
<PaymentCreator
onClose={() => setIsCreatingPayment(false)}
@@ -544,9 +593,24 @@ export default function PaymentRecord() {
<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 className="flex justify-end gap-2">
<Button className="max-w-[200px]" variant="outline">
<CSVLink
data={displayPayments}
headers={defaultColumns
.filter((e) => e.header)
.map((e) => ({
label: e.header?.toString() || "",
key: e.id || "",
}))}
filename="payment-records.csv">
Download CSV
</CSVLink>
</Button>
<Button className="max-w-[200px]" variant="outline" onClick={() => setIsCreatingPayment(true)}>
New Payment
</Button>
</div>
)}
</div>
<div className="flex gap-8 w-full">

47
src/pages/profile.tsx
View File

@@ -361,26 +361,37 @@ export default function Home() {
</div>
</form>
</div>
<div
className="flex flex-col gap-3 items-center w-48 h-fit cursor-pointer group"
onClick={() => (profilePictureInput.current as any)?.click()}>
<div className="relative overflow-hidden h-48 w-48 rounded-full">
<div
className={clsx(
"absolute top-0 left-0 bg-mti-purple-light/60 w-full h-full z-20 flex items-center justify-center opacity-0 group-hover:opacity-100",
"transition ease-in-out duration-300",
)}>
<BsCamera className="text-6xl text-mti-purple-ultralight/80" />
<div className="flex flex-col gap-6 w-48">
<div
className="flex flex-col gap-3 items-center h-fit cursor-pointer group"
onClick={() => (profilePictureInput.current as any)?.click()}>
<div className="relative overflow-hidden h-48 w-48 rounded-full">
<div
className={clsx(
"absolute top-0 left-0 bg-mti-purple-light/60 w-full h-full z-20 flex items-center justify-center opacity-0 group-hover:opacity-100",
"transition ease-in-out duration-300",
)}>
<BsCamera className="text-6xl text-mti-purple-ultralight/80" />
</div>
<img src={profilePicture} alt={user.name} className="aspect-square drop-shadow-xl self-end object-cover" />
</div>
<img src={profilePicture} alt={user.name} className="aspect-square drop-shadow-xl self-end object-cover" />
<input type="file" className="hidden" onChange={uploadProfilePicture} accept="image/*" ref={profilePictureInput} />
<span
onClick={() => (profilePictureInput.current as any)?.click()}
className="cursor-pointer text-mti-purple-light text-sm">
Change picture
</span>
<h6 className="font-normal text-base text-mti-gray-taupe">{USER_TYPE_LABELS[user.type]}</h6>
</div>
<input type="file" className="hidden" onChange={uploadProfilePicture} accept="image/*" ref={profilePictureInput} />
<span
onClick={() => (profilePictureInput.current as any)?.click()}
className="cursor-pointer text-mti-purple-light text-sm">
Change picture
</span>
<h6 className="font-normal text-base text-mti-gray-taupe">{USER_TYPE_LABELS[user.type]}</h6>
{user.type === 'agent' && (
<div className="flag items-center h-fit">
<img
alt={user.demographicInformation?.country.toLowerCase() + '_flag'}
src={`https://flagcdn.com/w320/${user.demographicInformation?.country.toLowerCase()}.png`}
width="320"
/>
</div>
)}
</div>
</div>
<div className="flex flex-col gap-4 mt-8 mb-20">