Commit 7ac2e08e by Arjun Jhukal

updated the withdrawl and layout

parent c9ab7a02
...@@ -181,7 +181,8 @@ ...@@ -181,7 +181,8 @@
transform-origin: bottom left; transform-origin: bottom left;
} }
.status.paid { .status.paid,
.status.success {
background-color: #12A211; background-color: #12A211;
} }
......
...@@ -17,15 +17,16 @@ export default function CustomTable<TData>({ table, loading = false, ...@@ -17,15 +17,16 @@ export default function CustomTable<TData>({ table, loading = false,
const columnCount = table.getAllLeafColumns().length; const columnCount = table.getAllLeafColumns().length;
const user = useAppSelector((state) => state.auth.user) const user = useAppSelector((state) => state.auth.user)
if (user?.role && user?.role.toUpperCase() === "USER") { if (user?.role && user?.role.toUpperCase() === "USER") {
return ( return (
<table className="min-w-full text-left border-separate border-spacing-y-1 user_table"> <table className="min-w-full border-collapse border border-gray-200 text-left">
<thead> <thead>
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}> <tr key={headerGroup.id}>
{headerGroup.headers.map((header) => ( {headerGroup.headers.map((header) => (
<th <th
key={header.id} key={header.id}
className="text-[12px] font-[600] text-white p-2 lg:p-4" className="text-[12px] font-[600] text-title p-2 py-4 px-4 bg-light-gray"
> >
{flexRender( {flexRender(
header.column.columnDef.header, header.column.columnDef.header,
...@@ -41,8 +42,8 @@ export default function CustomTable<TData>({ table, loading = false, ...@@ -41,8 +42,8 @@ export default function CustomTable<TData>({ table, loading = false,
Array.from({ length: skeletonRows }).map((_, rowIndex) => ( Array.from({ length: skeletonRows }).map((_, rowIndex) => (
<tr key={`skeleton-${rowIndex}`} className="animate-pulse"> <tr key={`skeleton-${rowIndex}`} className="animate-pulse">
{Array.from({ length: columnCount }).map((_, colIndex) => ( {Array.from({ length: columnCount }).map((_, colIndex) => (
<td key={`skeleton-cell-${rowIndex}-${colIndex}`} className="text-[14px] p-2 lg:p-4 "> <td key={`skeleton-cell-${rowIndex}-${colIndex}`} className="p-2 py-4 px-4">
<div className="h-4 w-full rounded-xl bg-[rgba(255, 255, 255, 0.10)]" /> <div className="h-4 w-full rounded bg-gray-200" />
</td> </td>
))} ))}
</tr> </tr>
...@@ -58,11 +59,9 @@ export default function CustomTable<TData>({ table, loading = false, ...@@ -58,11 +59,9 @@ export default function CustomTable<TData>({ table, loading = false,
</tr> </tr>
) : ( ) : (
table.getRowModel().rows.map((row) => ( table.getRowModel().rows.map((row) => (
<tr key={row.id} className="rounded-[24px] mb-1" > <tr key={row.id} className="">
{row.getVisibleCells().map((cell) => ( {row.getVisibleCells().map((cell) => (
<td key={cell.id} <td key={cell.id} className="px-4 py-4 ">
className="text-[14px] px-4 py-4"
style={{ background: "rgba(255, 255, 255, 0.10)" }}>
{flexRender( {flexRender(
cell.column.columnDef.cell, cell.column.columnDef.cell,
cell.getContext() cell.getContext()
...@@ -73,18 +72,20 @@ export default function CustomTable<TData>({ table, loading = false, ...@@ -73,18 +72,20 @@ export default function CustomTable<TData>({ table, loading = false,
)) ))
)} )}
</tbody> </tbody>
</table> </table>
) );
} }
return ( return (
<table className="min-w-full border-collapse border border-gray-200 text-left"> <table className="min-w-full text-left border-separate border-spacing-y-1 user_table">
<thead> <thead>
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}> <tr key={headerGroup.id}>
{headerGroup.headers.map((header) => ( {headerGroup.headers.map((header) => (
<th <th
key={header.id} key={header.id}
className="text-[12px] font-[600] text-title p-2 py-4 px-4 bg-light-gray" className="text-[12px] font-[600] text-white p-2 lg:p-4"
> >
{flexRender( {flexRender(
header.column.columnDef.header, header.column.columnDef.header,
...@@ -100,8 +101,8 @@ export default function CustomTable<TData>({ table, loading = false, ...@@ -100,8 +101,8 @@ export default function CustomTable<TData>({ table, loading = false,
Array.from({ length: skeletonRows }).map((_, rowIndex) => ( Array.from({ length: skeletonRows }).map((_, rowIndex) => (
<tr key={`skeleton-${rowIndex}`} className="animate-pulse"> <tr key={`skeleton-${rowIndex}`} className="animate-pulse">
{Array.from({ length: columnCount }).map((_, colIndex) => ( {Array.from({ length: columnCount }).map((_, colIndex) => (
<td key={`skeleton-cell-${rowIndex}-${colIndex}`} className="p-2 py-4 px-4"> <td key={`skeleton-cell-${rowIndex}-${colIndex}`} className="text-[14px] p-2 lg:p-4 ">
<div className="h-4 w-full rounded bg-gray-200" /> <div className="h-4 w-full rounded-xl bg-[rgba(255, 255, 255, 0.10)]" />
</td> </td>
))} ))}
</tr> </tr>
...@@ -117,9 +118,11 @@ export default function CustomTable<TData>({ table, loading = false, ...@@ -117,9 +118,11 @@ export default function CustomTable<TData>({ table, loading = false,
</tr> </tr>
) : ( ) : (
table.getRowModel().rows.map((row) => ( table.getRowModel().rows.map((row) => (
<tr key={row.id} className=""> <tr key={row.id} className="rounded-[24px] mb-1" >
{row.getVisibleCells().map((cell) => ( {row.getVisibleCells().map((cell) => (
<td key={cell.id} className="px-4 py-4 "> <td key={cell.id}
className="text-[14px] px-4 py-4"
style={{ background: "rgba(255, 255, 255, 0.10)" }}>
{flexRender( {flexRender(
cell.column.columnDef.cell, cell.column.columnDef.cell,
cell.getContext() cell.getContext()
...@@ -130,7 +133,6 @@ export default function CustomTable<TData>({ table, loading = false, ...@@ -130,7 +133,6 @@ export default function CustomTable<TData>({ table, loading = false,
)) ))
)} )}
</tbody> </tbody>
</table> </table>
); )
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment