-
Notifications
You must be signed in to change notification settings - Fork 125
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d90fcd9
commit 262f1e7
Showing
9 changed files
with
735 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
import { Payment, columns } from "./columns"; | ||
import { DataTable } from "./data-table"; | ||
|
||
const data: Payment[] = [ | ||
{ | ||
id: "728ed52f", | ||
img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_oG6bIjXDj7SK7Oa0TfC4ERFx274A_puT8obuMz-k8MYeUIdkeemDybaytw&s", | ||
name: "Afolabi Olanipekun", | ||
email: "[email protected]", | ||
phone: "09123456789", | ||
date: "02/07/2024", | ||
status: "active", | ||
}, | ||
{ | ||
id: "728ed52f", | ||
img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_oG6bIjXDj7SK7Oa0TfC4ERFx274A_puT8obuMz-k8MYeUIdkeemDybaytw&s", | ||
name: "Adetunji Oluwaseun", | ||
email: "[email protected]", | ||
phone: "09123456789", | ||
date: "02/07/2024", | ||
status: "inactive", | ||
}, | ||
{ | ||
id: "728ed52f", | ||
img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_oG6bIjXDj7SK7Oa0TfC4ERFx274A_puT8obuMz-k8MYeUIdkeemDybaytw&s", | ||
name: "Ifunanya Adedapo", | ||
email: "[email protected]", | ||
phone: "09123456789", | ||
date: "02/07/2024", | ||
status: "inactive", | ||
}, | ||
{ | ||
id: "728ed52f", | ||
img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_oG6bIjXDj7SK7Oa0TfC4ERFx274A_puT8obuMz-k8MYeUIdkeemDybaytw&s", | ||
name: "Busola Igwe", | ||
email: "[email protected]", | ||
phone: "09123456789", | ||
date: "02/07/2024", | ||
status: "inactive", | ||
}, | ||
{ | ||
id: "728ed52f", | ||
img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_oG6bIjXDj7SK7Oa0TfC4ERFx274A_puT8obuMz-k8MYeUIdkeemDybaytw&s", | ||
name: "Moshood Adedayo", | ||
email: "[email protected]", | ||
phone: "09123456789", | ||
date: "02/07/2024", | ||
status: "active", | ||
}, | ||
]; | ||
export default function UsersTable({ client = "" }) { | ||
return ( | ||
<div> | ||
<DataTable columns={columns({ client })} data={data} /> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import { MoveUpRight, Package, User } from "lucide-react"; | ||
|
||
export default function UsersCard() { | ||
return ( | ||
<> | ||
<div className="grid gap-6 md:grid-cols-3 lg:gap-4 md:gap-2 lg:px-0 md:px-2"> | ||
<div className="rounded-xl bg-white px-6 md:px-4 py-10 shadow-md border"> | ||
<div className="flex justify-between"> | ||
<h6 className="text-sm font-semibold">Total Users</h6> | ||
|
||
<User className="h-5 w-5" /> | ||
</div> | ||
<div className="space-y-1"> | ||
<h4 className="text-[20px] font-bold text-neutral-800">4,000</h4> | ||
<div className="flex items-center "> | ||
<span className="text-xs text-muted-foreground"> | ||
+10% from last month | ||
</span> | ||
</div> | ||
</div> | ||
</div> | ||
<div className="rounded-xl bg-white px-6 py-8 md:px-4 shadow-md border"> | ||
<div className="flex justify-between"> | ||
<h6 className="text-sm font-semibold">Active Users</h6> | ||
|
||
<Package className="h-5 w-5" /> | ||
</div> | ||
<div className="space-y-1"> | ||
<h4 className="text-[20px] font-bold text-neutral-800">1500</h4> | ||
<div className="flex items-center "> | ||
<span className="text-xs text-muted-foreground"> | ||
+20% from last month | ||
</span> | ||
</div> | ||
</div> | ||
</div> | ||
<div className="rounded-xl bg-white px-6 py-10 md:px-4 shadow-md border"> | ||
<div className="flex justify-between"> | ||
<h6 className="text-sm font-semibold">Deleted Users</h6> | ||
|
||
<MoveUpRight className="h-5 w-5" /> | ||
</div> | ||
<div className="space-y-1"> | ||
<h4 className="text-[20px] font-bold text-neutral-800">4,000</h4> | ||
<div className="flex items-center "> | ||
<span className="text-xs text-muted-foreground"> | ||
+150% from last month | ||
</span> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,125 @@ | ||
import { ColumnDef } from "@tanstack/react-table"; | ||
import { DotIcon, EllipsisVertical } from "lucide-react"; | ||
import { Button } from "~/components/ui/button"; | ||
import { | ||
DropdownMenu, | ||
DropdownMenuContent, | ||
DropdownMenuItem, | ||
DropdownMenuLabel, | ||
DropdownMenuSeparator, | ||
DropdownMenuTrigger, | ||
} from "~/components/ui/dropdown-menu"; | ||
|
||
// interface for your data | ||
export interface Payment { | ||
id: string; | ||
phone: string; | ||
status: "active" | "inactive"; | ||
name: string; | ||
email: string; | ||
img: string; | ||
date: string; | ||
} | ||
|
||
// props interface for the columns | ||
interface PaymentColumnsProps { | ||
client: string; | ||
} | ||
|
||
// column definitions | ||
export const columns = ({ | ||
client, | ||
}: PaymentColumnsProps): ColumnDef<Payment>[] => [ | ||
{ | ||
accessorKey: "name", | ||
header: "Name", | ||
cell: ({ row }) => { | ||
const { name, email, img } = row.original; | ||
|
||
return ( | ||
<div className="flex items-center lg:pr-0 pr-5"> | ||
{img && ( | ||
<img src={img} alt={name} className="w-8 h-8 rounded-full mr-2" /> | ||
)} | ||
<div> | ||
<div>{name}</div> | ||
<div className="text-gray-500 md:text-sm text-xs">{email}</div> | ||
</div> | ||
</div> | ||
); | ||
}, | ||
}, | ||
{ | ||
accessorKey: "phone", | ||
header: "Phone Number", | ||
}, | ||
{ | ||
accessorKey: "date", | ||
header: "Date Created", | ||
}, | ||
{ | ||
accessorKey: "status", | ||
header: "Status", | ||
cell: ({ row }) => { | ||
const payment = row.original; | ||
|
||
return ( | ||
<> | ||
<div className="flex items-center pr-14"> | ||
<DotIcon | ||
className={`text-center mr-2 h-12 w-12 ${ | ||
payment.status === "active" | ||
? "text-[#6DC347]" | ||
: "text-[#F97316]" | ||
}`} | ||
/> | ||
<span className="font-medium text-sm"> | ||
{payment.status === "active" ? "Active" : "Inactive"} | ||
</span> | ||
</div> | ||
</> | ||
); | ||
}, | ||
}, | ||
|
||
{ | ||
id: "actions", | ||
header: "Action", | ||
cell: ({ row }) => { | ||
const payment = row.original; | ||
|
||
const editData = () => { | ||
// Implement edit functionality here | ||
// Prompt user for new values and update payment data | ||
}; | ||
|
||
const deleteData = () => { | ||
// Implement delete functionality here | ||
// Delete the payment entry | ||
}; | ||
|
||
return ( | ||
<DropdownMenu> | ||
<DropdownMenuTrigger asChild> | ||
<Button variant="ghost" className="h-8 w-8 p-0"> | ||
<span className="sr-only">Open menu</span> | ||
<EllipsisVertical className="h-4 w-4" /> | ||
</Button> | ||
</DropdownMenuTrigger> | ||
<DropdownMenuContent align="end" className="shadow-md border-[#E4E4E7]"> | ||
<DropdownMenuLabel>Actions</DropdownMenuLabel> | ||
<DropdownMenuItem onClick={editData}>Update</DropdownMenuItem> | ||
<DropdownMenuItem onClick={deleteData}>Delete</DropdownMenuItem> | ||
<DropdownMenuSeparator /> | ||
{client === "premium" && ( | ||
<> | ||
<DropdownMenuItem>Edit</DropdownMenuItem> | ||
<DropdownMenuItem>Delete</DropdownMenuItem> | ||
</> | ||
)} | ||
</DropdownMenuContent> | ||
</DropdownMenu> | ||
); | ||
}, | ||
}, | ||
]; |
Oops, something went wrong.