humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

little update admin page

This commit is contained in:
Rama Priyanto 2024-12-23 09:25:59 +07:00
parent a4f94e1c3a
commit da1b0ff839
2 changed files with 216 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/(admin)/admin/dashboard/page.tsx
View File

@ -2,10 +2,10 @@ import DashboardContainer from "@/components/main/dashboard/dashboard-container"
export default function AdminPage() { export default function AdminPage() {
return ( return (
<div className="flex h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4"> <div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small">
<div className="px-4"> <div className="px-4">
<DashboardContainer /> <DashboardContainer />
</div> </div>
</div> </div>
) );
} }

87
components/main/dashboard/dashboard-container.tsx
View File

@ -1,5 +1,14 @@
'use client' "use client";
import { DashboardBookmarkIcon, DashboardBriefcaseIcon, DashboardConnectIcon, DashboardMailboxIcon, DashboardRightDownPointIcon, DashboardSpeecIcon, DashboardTopLeftPointIcon, DashboardUserIcon } from "@/components/icons/dashboard-icon"; import {
DashboardBookmarkIcon,
DashboardBriefcaseIcon,
DashboardConnectIcon,
DashboardMailboxIcon,
DashboardRightDownPointIcon,
DashboardSpeecIcon,
DashboardTopLeftPointIcon,
DashboardUserIcon,
} from "@/components/icons/dashboard-icon";
import { Submenu1Icon } from "@/components/icons/sidebar-icon"; import { Submenu1Icon } from "@/components/icons/sidebar-icon";
import { Button, Select, SelectItem, SelectSection } from "@nextui-org/react"; import { Button, Select, SelectItem, SelectSection } from "@nextui-org/react";
import ApexChartColumn from "./chart/column-chart"; import ApexChartColumn from "./chart/column-chart";
@ -12,32 +21,44 @@ export default function DashboardContainer() {
<div className="w-full flex flex-col gap-6"> <div className="w-full flex flex-col gap-6">
<div className="w-full flex flex-col md:flex-row gap-6 justify-center"> <div className="w-full flex flex-col md:flex-row gap-6 justify-center">
<div className="w-full md:w-[160px] h-[160px] bg-[#ecf2ff] flex flex-col justify-center items-center rounded-lg"> <div className="w-full md:w-[160px] h-[160px] bg-[#ecf2ff] flex flex-col justify-center items-center rounded-lg">
<div className="h-1/2 flex items-center justify-center"><DashboardUserIcon className="w-[50px]" /></div> <div className="h-1/2 flex items-center justify-center">
<DashboardUserIcon className="w-[50px]" />
</div>
<div className="text-[#6484fd] font-semibold">Employees</div> <div className="text-[#6484fd] font-semibold">Employees</div>
<div className="text-[#6484fd] font-semibold text-lg">96</div> <div className="text-[#6484fd] font-semibold text-lg">96</div>
</div> </div>
<div className="w-full md:w-[160px] h-[160px] bg-[#fef5e5] flex flex-col justify-center items-center rounded-lg"> <div className="w-full md:w-[160px] h-[160px] bg-[#fef5e5] flex flex-col justify-center items-center rounded-lg">
<div className="h-1/2 flex items-center justify-center"><DashboardBriefcaseIcon className="w-[50px]" /></div> <div className="h-1/2 flex items-center justify-center">
<DashboardBriefcaseIcon className="w-[50px]" />
</div>
<div className="text-[#feaf2d] font-semibold">Clients</div> <div className="text-[#feaf2d] font-semibold">Clients</div>
<div className="text-[#feaf2d] font-semibold text-lg">3650</div> <div className="text-[#feaf2d] font-semibold text-lg">3650</div>
</div> </div>
<div className="w-full md:w-[160px] h-[160px] bg-[#e8f7ff] flex flex-col justify-center items-center rounded-lg"> <div className="w-full md:w-[160px] h-[160px] bg-[#e8f7ff] flex flex-col justify-center items-center rounded-lg">
<div className="h-1/2 flex items-center justify-center"><DashboardMailboxIcon className="w-[50px]" /></div> <div className="h-1/2 flex items-center justify-center">
<DashboardMailboxIcon className="w-[50px]" />
</div>
<div className="text-[#57c0fd] font-semibold">Projects</div> <div className="text-[#57c0fd] font-semibold">Projects</div>
<div className="text-[#57c0fd] font-semibold text-lg">356</div> <div className="text-[#57c0fd] font-semibold text-lg">356</div>
</div> </div>
<div className="w-full md:w-[160px] h-[160px] bg-[#fdede8] flex flex-col justify-center items-center rounded-lg"> <div className="w-full md:w-[160px] h-[160px] bg-[#fdede8] flex flex-col justify-center items-center rounded-lg">
<div className="h-1/2 flex items-center justify-center"><DashboardBookmarkIcon className="w-[50px]" /></div> <div className="h-1/2 flex items-center justify-center">
<DashboardBookmarkIcon className="w-[50px]" />
</div>
<div className="text-[#f98e75] font-semibold">Events</div> <div className="text-[#f98e75] font-semibold">Events</div>
<div className="text-[#f98e75] font-semibold text-lg">696</div> <div className="text-[#f98e75] font-semibold text-lg">696</div>
</div> </div>
<div className="w-full md:w-[160px] h-[160px] bg-[#e6fffa] flex flex-col justify-center items-center rounded-lg"> <div className="w-full md:w-[160px] h-[160px] bg-[#e6fffa] flex flex-col justify-center items-center rounded-lg">
<div className="h-1/2 flex items-center justify-center"><DashboardSpeecIcon className="w-[50px]" /></div> <div className="h-1/2 flex items-center justify-center">
<DashboardSpeecIcon className="w-[50px]" />
</div>
<div className="text-[#29e2be] font-semibold">Payroll</div> <div className="text-[#29e2be] font-semibold">Payroll</div>
<div className="text-[#29e2be] font-semibold text-lg">$96k</div> <div className="text-[#29e2be] font-semibold text-lg">$96k</div>
</div> </div>
<div className="w-full md:w-[160px] h-[160px] bg-[#ebf3fe] flex flex-col justify-center items-center rounded-lg"> <div className="w-full md:w-[160px] h-[160px] bg-[#ebf3fe] flex flex-col justify-center items-center rounded-lg">
<div className="h-1/2 flex items-center justify-center"><DashboardConnectIcon className="w-[50px]" /></div> <div className="h-1/2 flex items-center justify-center">
<DashboardConnectIcon className="w-[50px]" />
</div>
<div className="text-[#5797fd] font-semibold">Reports</div> <div className="text-[#5797fd] font-semibold">Reports</div>
<div className="text-[#5797fd] font-semibold text-lg">56</div> <div className="text-[#5797fd] font-semibold text-lg">56</div>
</div> </div>
@ -45,8 +66,11 @@ export default function DashboardContainer() {
<div className="w-full flex flex-row gap-6 justify-center"> <div className="w-full flex flex-row gap-6 justify-center">
<div className="border-1 shadow-sm w-full rounded-lg md:w-[712px] p-6 flex flex-col"> <div className="border-1 shadow-sm w-full rounded-lg md:w-[712px] p-6 flex flex-col">
<div className="flex justify-between mb-3"> <div className="flex justify-between mb-3">
<div className="font-semibold flex flex-col">Revenue Update <div className="font-semibold flex flex-col">
<span className="font-normal text-xs text-gray-600">Overview of Profit</span> Revenue Update
<span className="font-normal text-xs text-gray-600">
Overview of Profit
</span>
</div> </div>
<div className="w-auto md:w-[140px]"> <div className="w-auto md:w-[140px]">
<Select <Select
@ -80,7 +104,10 @@ export default function DashboardContainer() {
// onChange={onChangeFilterStatus} // onChange={onChangeFilterStatus}
renderValue={(items) => { renderValue={(items) => {
return items.map((item) => ( return items.map((item) => (
<span key={item.props?.value} className="text-black text-xs"> <span
key={item.props?.value}
className="text-black text-xs"
>
{item.textValue} {item.textValue}
</span> </span>
)); ));
@ -122,7 +149,13 @@ export default function DashboardContainer() {
<p className="font-semibold text-md">$26,498</p> <p className="font-semibold text-md">$26,498</p>
</div> </div>
</div> </div>
<Button className="w-full h-[35px] rounded-md" color="primary" variant="solid">View Full Report</Button> <Button
className="w-full h-[35px] rounded-md"
color="primary"
variant="solid"
>
View Full Report
</Button>
</div> </div>
</div> </div>
</div> </div>
@ -133,8 +166,11 @@ export default function DashboardContainer() {
<div className="lflex flex-col"> <div className="lflex flex-col">
<p className="font-semibold text-xl ">$36,358</p> <p className="font-semibold text-xl ">$36,358</p>
<div className="flex flex-row text-xs item-center"> <div className="flex flex-row text-xs item-center">
<div className="rounded-full w-6 h-6 bg-[#e6fffa] p-[2px] flex items-center justify-center"><DashboardTopLeftPointIcon className="text-[#29e2be]" /></div> <div className="rounded-full w-6 h-6 bg-[#e6fffa] p-[2px] flex items-center justify-center">
<p className="pt-[3px]"> +9% last year</p></div> <DashboardTopLeftPointIcon className="text-[#29e2be]" />
</div>
<p className="pt-[3px]"> +9% last year</p>
</div>
</div> </div>
<p className="font-semibold flex flex-row gap-3"> <p className="font-semibold flex flex-row gap-3">
<div className="flex flex-row text-tiny items-center gap-2"> <div className="flex flex-row text-tiny items-center gap-2">
@ -146,15 +182,18 @@ export default function DashboardContainer() {
2020 2020
</div> </div>
</p> </p>
</div> </div>
<div className="w-1/2 h-full flex items-center"><ApexChartDonut /></div> <div className="w-1/2 h-full flex items-center">
<ApexChartDonut />
</div>
</div> </div>
<div className="h-1/2 border-1 shadow-sm w-full rounded-lg flex flex-col justify-between"> <div className="h-1/2 border-1 shadow-sm w-full rounded-lg flex flex-col justify-between">
<div className="p-6 flex flex-col"> <div className="p-6 flex flex-col">
<div className="flex justify-between items-center font-semibold"> <div className="flex justify-between items-center font-semibold">
Monthly Earning Monthly Earning
<a className="cursor-pointer w-10 h-10 bg-blue-300 flex justify-center items-center rounded-full text-white text-xl">$</a> <a className="cursor-pointer w-10 h-10 bg-blue-300 flex justify-center items-center rounded-full text-white text-xl">
$
</a>
</div> </div>
<div className="lflex flex-col"> <div className="lflex flex-col">
<p className="font-semibold text-xl ">$6,820</p> <p className="font-semibold text-xl ">$6,820</p>
@ -162,15 +201,17 @@ export default function DashboardContainer() {
<div className="rounded-full w-6 h-6 bg-[#fdede8] p-[2px] flex items-center justify-center"> <div className="rounded-full w-6 h-6 bg-[#fdede8] p-[2px] flex items-center justify-center">
<DashboardRightDownPointIcon className="text-[#f98e75]" /> <DashboardRightDownPointIcon className="text-[#f98e75]" />
</div> </div>
<p className="pt-[3px]"> -6% last year</p></div> <p className="pt-[3px]"> -6% last year</p>
</div>
</div>
<div className="w-auto object-cover"><ApexChartLineArea /></div>
</div> </div>
</div> </div>
</div> </div>
<div>bawah</div> <div className="w-auto object-cover">
<ApexChartLineArea />
</div> </div>
</div> </div>
) </div>
</div>
</div>
</div>
);
} }