Skip to content

Commit

Permalink
most of sections are dynamic
Browse files Browse the repository at this point in the history
  • Loading branch information
@Waislam
Waislam committed Jul 10, 2023
1 parent c338399 commit be8627f
Show file tree
Hide file tree
Showing 6 changed files with 182 additions and 110 deletions.
14 changes: 12 additions & 2 deletions frontend/pages/branch/[id].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ const BranchDetailsPage = (props) => {
const [isOpenEditModal, setOpenEditModal] = useState(false); // branch editing modal
// const [isOpenMemberEditModal, setOpenMemberEditModal] = useState(false); // branch editing modal
const [branchTotalTeam, setBranchTotalTeam] = useState();
const [totalBranchMembers, setTotalBranchMembers] = useState();

const modalHandling = (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
Expand Down Expand Up @@ -70,6 +71,11 @@ const BranchDetailsPage = (props) => {
setBranchTotalTeam(teamCounting);
};

//get total members of the branch
const totalMembers = (members) => {
setTotalBranchMembers(members);
};

return (
<section className="container mx-auto pb-8 pt-4">
<CommonBreadCrumb items={breadcrumbItems} />
Expand Down Expand Up @@ -197,7 +203,7 @@ const BranchDetailsPage = (props) => {
onClick={() => setTab('MEMBER')}
backgroundColor={tab === 'MEMBER' ? 'gray.100' : 'white'}
>
Members - (2333){' '}
Members - ({totalBranchMembers}){' '}
</Button>
</ButtonGroup>
</div>
Expand Down Expand Up @@ -257,7 +263,11 @@ const BranchDetailsPage = (props) => {
</div>
</div>
{/* {tab === 'TEAM' ? <TeamsTable branchId={branchId} /> : <MembersTable />} */}
{tab === 'TEAM' ? <TeamsTable totalTeam={totalTeam} /> : <BranchMembersList />}
{tab === 'TEAM' ? (
<TeamsTable totalTeam={totalTeam} />
) : (
<BranchMembersList total_members={totalMembers} />
)}
</div>
</section>
);
Expand Down
34 changes: 22 additions & 12 deletions frontend/pages/member/[id].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ const MemberDetailPage = () => {
const role = session?.user?.role;
const branch_id = session?.user?.branch;
const { teamId } = router.query;
console.log('team team id in memeber detail: ', teamId);

const [openDisbursementModal, setDisbursementModal] = useState(false);
const [openWithdrawModal, setWithdrawModal] = useState(false);
Expand All @@ -45,10 +44,17 @@ const MemberDetailPage = () => {
const memberId = id.id;

//get member details
const { data, isLoading } = useQuery(['member'], async () =>
const { data: data1, isLoading } = useQuery(['member'], async () =>
zodSafeQuery(`/api/v1/peoples/members/${memberId}/`)()
);
const member = data?.result;
const member = data1?.result;

//get members finance details
const { data: data2 } = useQuery(['memberfinance'], async () =>
zodSafeQuery(`/api/v1/peoples/members/${memberId}/saving-loan-info/`)()
);
const memberFinanceDetail = data2?.result;
console.log('finance: ', memberFinanceDetail);

//handle disbursement
const disbursement = () => {
Expand Down Expand Up @@ -156,32 +162,32 @@ const MemberDetailPage = () => {
<dl className="flex">
<dd className="w-3/12">Total Savings</dd>
<dd className="mr-5">:</dd>
<dd>2000 TK</dd>
<dd>{memberFinanceDetail?.total_savings} TK</dd>
</dl>
<dl className="flex">
<dd className="w-3/12">Last Loan</dd>
<dd className="mr-5">:</dd>
<dd>1000 TK</dd>
<dd>{memberFinanceDetail?.last_loan} TK</dd>
</dl>
<dl className="flex">
<dd className="w-3/12">Loan Date</dd>
<dd className="mr-5">:</dd>
<dd>12-03-2023</dd>
<dd>{memberFinanceDetail?.loan_date}</dd>
</dl>
<dl className="flex">
<dd className="w-3/12">Loan Paid</dd>
<dd className="mr-5">:</dd>
<dd>500 TK</dd>
<dd>{memberFinanceDetail?.loan_paid} TK</dd>
</dl>
<dl className="flex">
<dd className="w-3/12">InstallMent Paid</dd>
<dd className="mr-5">:</dd>
<dd>10/12</dd>
<dd>{memberFinanceDetail?.installment_paid}</dd>
</dl>
<dl className="flex">
<dd className="w-3/12">Total Loan Count</dd>
<dd className="mr-5">:</dd>
<dd>2</dd>
<dd>{memberFinanceDetail?.total_loan_count}</dd>
</dl>
</dt>
</div>
Expand All @@ -193,7 +199,7 @@ const MemberDetailPage = () => {
<dl className="flex gap-3 font-bold">
<dd>Total Savings</dd>
<dd>:</dd>
<dd>2000 Tk</dd>
<dd>{memberFinanceDetail?.total_savings} Tk</dd>
</dl>
</dt>
</div>
Expand All @@ -208,12 +214,16 @@ const MemberDetailPage = () => {
<dl className="flex gap-3 font-bold">
<dd>Loan</dd>
<dd>:</dd>
<dd>2500 Tk,</dd>
<dd>{memberFinanceDetail?.last_loan} Tk,</dd>
</dl>
<dl className="flex gap-3 font-bold">
<dd>Status</dd>
<dd>:</dd>
<dd>Unpaid</dd>
{`${memberFinanceDetail?.loan_paid}` < `${memberFinanceDetail?.last_loan}` ? (
<dd>Unpaid</dd>
) : (
<dd>Paid</dd>
)}
</dl>
</dt>
</div>
Expand Down
58 changes: 44 additions & 14 deletions frontend/pages/team/[teamId].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,32 +10,41 @@ import EditTeamInfoModal from '@/modules/team/components/EditGroupModal';

import CommonBreadCrumb, { SingleBreadCrumbItemType } from '@/components/CommonBreadCrumb';
import { CashHandIcon, DepositIcon, FilterIcon, LoanIcon, PersonPlusIcon, PlusIcon, SearchIcon } from '@/icons';
import zodSafeQuery from '@/utils/zodSafeQuery';
import { useQuery } from '@tanstack/react-query';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';

const TeamPage = () => {
const TeamPage = (sessionData) => {
const router = useRouter();
const { teamName } = router.query;
const { teamId } = router.query;

const { data: session } = useSession();
const role = session?.user?.role;
const branch_id = session?.user?.branch;
const sessionDetail = sessionData;
// const role = sessionDetail?.user?.role;
// const branch_id = sessionDetail?.user?.branch;

const [tab, setTab] = useState<'DEPOSIT' | 'LOAN'>('DEPOSIT');

const [isOpenAddMemberModal, setIsOpenAddMemberModal] = useState(false);
const [isOpenTeamEditModal, setIsOpenTeamEditModal] = useState(false);

//get team details
const { data } = useQuery(['team'], async () => zodSafeQuery(`/api/v1/organization/teams/${teamId}/`)());
const teamdetail = data?.result;

const breadcrumbItems: SingleBreadCrumbItemType[] =
role === 'BO'
? [
{
label: 'Branch',
label: `${teamdetail?.branch_name}`,
href: `/branch/${branch_id}`,
},
{
label: `${teamName}`,
label: `${teamdetail?.name}`,
href: `/team/${teamId}`,
},
]
Expand All @@ -45,11 +54,11 @@ const TeamPage = () => {
href: `/dashboard`,
},
{
label: 'Branch',
label: `${teamdetail?.branch_name}`,
href: `/branch/${branch_id}`,
},
{
label: `${teamName}`,
label: `${teamdetail?.name}`,
href: `/team/${teamId}`,
},
];
Expand All @@ -71,26 +80,26 @@ const TeamPage = () => {
>
<div className="flex justify-between border-b border-gray-200 px-5 py-5">
<div>
<h3 className="mb-0.5 text-xl font-semibold capitalize">{teamName}</h3>
<p className="text-sm font-medium text-gray-500">village Name, Moshjid Name</p>
<h3 className="mb-0.5 text-xl font-semibold capitalize">{teamdetail?.name}</h3>
<p className="text-sm font-medium text-gray-500">{teamdetail?.address}</p>
<div className="mt-2 flex gap-2 divide-x divide-gray-300 font-medium text-gray-500 ">
<div className="flex items-center gap-2 text-sm">
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-brand-50">
<CashHandIcon />
</div>
Cash in hand : 200
Cash in hand : "nai"
</div>
<div className="flex items-center gap-2 pl-2 text-sm">
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-brand-50">
<LoanIcon />
</div>
Total Loans : 22323
Total Loans : {teamdetail?.total_unpaid_loan}
</div>
<div className="flex items-center gap-2 pl-2 text-sm">
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-brand-50">
<DepositIcon />
</div>
Total Deposit : 200
Total Deposit : {teamdetail?.total_deposit}
</div>
</div>
</div>
Expand All @@ -112,13 +121,13 @@ const TeamPage = () => {
onClick={() => setTab('DEPOSIT')}
backgroundColor={tab === 'DEPOSIT' ? 'gray.100' : 'white'}
>
Deposit - (25)
Deposit - ('nai')
</Button>
<Button
onClick={() => setTab('LOAN')}
backgroundColor={tab === 'LOAN' ? 'gray.100' : 'white'}
>
Installment - (10)
Installment - ({teamdetail?.active_loan})
</Button>
</ButtonGroup>
<div className="flex flex-col gap-3 md:flex-row">
Expand All @@ -142,16 +151,37 @@ const TeamPage = () => {
</div>

{tab == 'LOAN' ? (
<MemberInstallmentsTable teamId={teamId} teamName={teamName} />
<MemberInstallmentsTable
teamId={teamId}
teamName={teamdetail?.name}
branchName={teamdetail?.branch_name}
orgName={teamdetail?.org_name}
teamAddress={teamdetail?.address}
/>
) : (
<MemberSavingsTable teamId={teamId} teamName={teamName} />
<MemberSavingsTable
teamId={teamId}
teamName={teamdetail?.name}
branchName={teamdetail?.branch_name}
orgName={teamdetail?.org_name}
teamAddress={teamdetail?.address}
/>
)}
</div>
</section>
</>
);
};

// export const getServerSideProps = async ({ req }) => {
// const session = await getSession({ req });
// return {
// props: {
// sessionData: session,
// },
// };
// };

TeamPage.getLayout = (page: ReactNode) => {
return <DashboardLayout className="min-h-screen">{page}</DashboardLayout>;
};
Expand Down
Loading

0 comments on commit be8627f

Please sign in to comment.