Skip to content

Commit

Permalink
branch table and transaction table responsive issue fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@jitheshm
jitheshm committed Sep 17, 2024
1 parent 61bc868 commit caf6af4
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 114 deletions.
130 changes: 68 additions & 62 deletions frontend/src/components/common/BranchTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,72 +69,78 @@ const BranchTable: React.FC = () => {
};
return (
<>
<div className='p-5'>
<div className='my-5 flex justify-between items-center'>
<p>
All Branches
</p>
<div>
<Input placeholder='Search Users' onChange={handleSearchChange} value={searchTerm} />
<div className='w-full'>
<div className='my-5 mx-10 flex flex-wrap justify-between gap-5 items-center'>
<div className='w-full text-center md:text-start'>
<p>
All Branches
</p>
</div>

<div>
{
<Link href='/dashboard/branches/create' className='w-full text-end md:w-auto'>
<MainButton name='Add Branch' />
</Link>
}
<div className='flex flex-wrap justify-center gap-5 items-center w-full '>
<div>
<Input placeholder='Search Users' onChange={handleSearchChange} value={searchTerm} />
</div>

<div>
{
<Link href='/dashboard/branches/create' className='w-full text-end md:w-auto'>
<MainButton name='Add Branch' />
</Link>
}
</div>
</div>
</div>
<Table removeWrapper aria-label="Example static table with custom cells" className='bg-background md:p-10 rounded-lg md:border md:border-border'>
<TableHeader>
<TableColumn >ID</TableColumn>
<TableColumn >Location</TableColumn>
<TableColumn align="center">Actions</TableColumn>
</TableHeader>
{
!loading && branches.length > 0 ? (
<TableBody isLoading={loading} loadingContent={<Spinner label="Loading..." />}>
{branches.map((branch, index) => {

return (
<TableRow key={index}>
<TableCell>
{branch.branch_id}
</TableCell>
<TableCell >

{branch.location}

</TableCell>

<TableCell >
<div className="relative flex items-center justify-center gap-2">
<Tooltip content="Details">
<span className="text-lg text-default-400 cursor-pointer active:opacity-50">
<MoreButton>

<Link href={`/dashboard/branches/${branch._id}/edit`}>
<DropdownMenuItem>
Edit
<div className='w-screen mx-2 sm:p-10 overflow-x-scroll md:w-full md:overflow-hidden'>
<Table removeWrapper aria-label="Example static table with custom cells" className='bg-background md:p-10 rounded-lg md:border md:border-border'>
<TableHeader>
<TableColumn >ID</TableColumn>
<TableColumn >Location</TableColumn>
<TableColumn align="center">Actions</TableColumn>
</TableHeader>
{
!loading && branches.length > 0 ? (
<TableBody isLoading={loading} loadingContent={<Spinner label="Loading..." />}>
{branches.map((branch, index) => {

return (
<TableRow key={index}>
<TableCell>
{branch.branch_id}
</TableCell>
<TableCell >

{branch.location}

</TableCell>

<TableCell >
<div className="relative flex items-center justify-center gap-2">
<Tooltip content="Details">
<span className="text-lg text-default-400 cursor-pointer active:opacity-50">
<MoreButton>

<Link href={`/dashboard/branches/${branch._id}/edit`}>
<DropdownMenuItem>
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem onClick={() => handleDelete(branch._id)}>
Delete
</DropdownMenuItem>
</Link>
<DropdownMenuItem onClick={() => handleDelete(branch._id)}>
Delete
</DropdownMenuItem>
</MoreButton>
</span>
</Tooltip>
</div>
</TableCell>
</TableRow>
);
})}
</TableBody>
) :
<TableBody isLoading={loading} loadingContent={<Spinner label="Loading..." />} emptyContent={"No data found."}>{[]}</TableBody>
}
</Table>
</MoreButton>
</span>
</Tooltip>
</div>
</TableCell>
</TableRow>
);
})}
</TableBody>
) :
<TableBody isLoading={loading} loadingContent={<Spinner label="Loading..." />} emptyContent={"No data found."}>{[]}</TableBody>
}
</Table>
</div>
{
!loading && total > 0 && <div className='flex justify-center mt-2 h-1/6'>

Expand Down
109 changes: 57 additions & 52 deletions frontend/src/components/common/TransactionTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,60 +28,65 @@ function TransactionTable() {
<>
<div className='p-5'>
<div className='my-5 flex justify-between items-center'>
<p>
All Transactions
</p>
<div className='w-full text-center md:text-start'>
<p>
All Transactions
</p>
</div>

</div>
<div className='w-[90vw] mx-2 sm:p-10 overflow-x-scroll md:w-full md:overflow-hidden'>

<Table removeWrapper aria-label="Example static table with custom cells" className='bg-background md:p-10 rounded-lg md:border md:border-border'>
<TableHeader>
<TableColumn >Transaction Id</TableColumn>
<TableColumn >Amount</TableColumn>
<TableColumn >Status</TableColumn>
<TableColumn >Date</TableColumn>
</TableHeader>
{
transactions.length > 0 ? (
<TableBody>
{transactions.sort((a, b) => {
const dateA = new Date(a.date).getTime();
const dateB = new Date(b.date).getTime();

// Sort in descending order
return dateB - dateA;

}).map((transaction, index) => {

return (
< TableRow key={index} >
<TableCell>
{transaction.transaction_id}
</TableCell>
<TableCell >

{transaction.amount}

</TableCell>
<TableCell >

{transaction.status}

</TableCell>
<TableCell >

{new Date(transaction.date).toLocaleDateString()}

</TableCell>


</TableRow >
);
})}
</TableBody>
) :
<TableBody emptyContent={"No data found."}>{[]}</TableBody>
}
</Table>
</div>
<Table removeWrapper aria-label="Example static table with custom cells" className='bg-background md:p-10 rounded-lg md:border md:border-border'>
<TableHeader>
<TableColumn >Transaction Id</TableColumn>
<TableColumn >Amount</TableColumn>
<TableColumn >Status</TableColumn>
<TableColumn >Date</TableColumn>
</TableHeader>
{
transactions.length > 0 ? (
<TableBody>
{transactions.sort((a, b) => {
const dateA = new Date(a.date).getTime();
const dateB = new Date(b.date).getTime();

// Sort in descending order
return dateB - dateA;

}).map((transaction, index) => {

return (
< TableRow key={index} >
<TableCell>
{transaction.transaction_id}
</TableCell>
<TableCell >

{transaction.amount}

</TableCell>
<TableCell >

{transaction.status}

</TableCell>
<TableCell >

{new Date(transaction.date).toLocaleDateString()}

</TableCell>


</TableRow >
);
})}
</TableBody>
) :
<TableBody emptyContent={"No data found."}>{[]}</TableBody>
}
</Table>
{/* {
total > 0 && <div className='flex justify-center mt-2 h-1/6'>
Expand Down

0 comments on commit caf6af4

Please sign in to comment.