little update admin page
This commit is contained in:
Rama Priyanto
parent
a4f94e1c3a
commit
da1b0ff839
|
|
@ -1,11 +1,11 @@
|
|||
import DashboardContainer from "@/components/main/dashboard/dashboard-container";
|
||||
|
||||
export default function AdminPage() {
|
||||
return (
|
||||
<div className="flex h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
|
||||
<div className="px-4">
|
||||
<DashboardContainer />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small">
|
||||
<div className="px-4">
|
||||
<DashboardContainer />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,14 @@
|
|||
'use client'
|
||||
import { DashboardBookmarkIcon, DashboardBriefcaseIcon, DashboardConnectIcon, DashboardMailboxIcon, DashboardRightDownPointIcon, DashboardSpeecIcon, DashboardTopLeftPointIcon, DashboardUserIcon } from "@/components/icons/dashboard-icon";
|
||||
"use client";
|
||||
import {
|
||||
DashboardBookmarkIcon,
|
||||
DashboardBriefcaseIcon,
|
||||
DashboardConnectIcon,
|
||||
DashboardMailboxIcon,
|
||||
DashboardRightDownPointIcon,
|
||||
DashboardSpeecIcon,
|
||||
DashboardTopLeftPointIcon,
|
||||
DashboardUserIcon,
|
||||
} from "@/components/icons/dashboard-icon";
|
||||
import { Submenu1Icon } from "@/components/icons/sidebar-icon";
|
||||
import { Button, Select, SelectItem, SelectSection } from "@nextui-org/react";
|
||||
import ApexChartColumn from "./chart/column-chart";
|
||||
|
|
@ -7,170 +16,202 @@ import ApexChartDonut from "./chart/donut-chart";
|
|||
import ApexChartLineArea from "./chart/line-area-chart";
|
||||
|
||||
export default function DashboardContainer() {
|
||||
return (
|
||||
<div className="p-8 flex justify-center">
|
||||
<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 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="text-[#6484fd] font-semibold">Employees</div>
|
||||
<div className="text-[#6484fd] font-semibold text-lg">96</div>
|
||||
</div>
|
||||
<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="text-[#feaf2d] font-semibold">Clients</div>
|
||||
<div className="text-[#feaf2d] font-semibold text-lg">3650</div>
|
||||
</div>
|
||||
<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="text-[#57c0fd] font-semibold">Projects</div>
|
||||
<div className="text-[#57c0fd] font-semibold text-lg">356</div>
|
||||
</div>
|
||||
<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="text-[#f98e75] font-semibold">Events</div>
|
||||
<div className="text-[#f98e75] font-semibold text-lg">696</div>
|
||||
</div>
|
||||
<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="text-[#29e2be] font-semibold">Payroll</div>
|
||||
<div className="text-[#29e2be] font-semibold text-lg">$96k</div>
|
||||
</div>
|
||||
<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="text-[#5797fd] font-semibold">Reports</div>
|
||||
<div className="text-[#5797fd] font-semibold text-lg">56</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="flex justify-between mb-3">
|
||||
<div className="font-semibold flex flex-col">Revenue Update
|
||||
<span className="font-normal text-xs text-gray-600">Overview of Profit</span>
|
||||
</div>
|
||||
<div className="w-auto md:w-[140px]">
|
||||
<Select
|
||||
label=""
|
||||
labelPlacement="outside"
|
||||
placeholder=""
|
||||
className="w-full"
|
||||
variant="bordered"
|
||||
classNames={{
|
||||
mainWrapper: "rounded",
|
||||
listboxWrapper:
|
||||
"bg-white w-full !text-indigo-500 text-center font-bold",
|
||||
popoverContent: "bg-white !text-indigo-500",
|
||||
trigger:
|
||||
"border-1 border-gray-200 hover:!bg-gray-100 !text-black",
|
||||
}}
|
||||
listboxProps={{
|
||||
itemClasses: {
|
||||
base: [
|
||||
"!text-left",
|
||||
"!bg-white",
|
||||
"text-indigo-500 ",
|
||||
"data-[selectable=true]:!text-indigo-500",
|
||||
"data-[pressed=true]:text-indigo-500",
|
||||
"data-[hover=true]:!text-indigo-300",
|
||||
],
|
||||
wrapper: ["!bg-white border-none"],
|
||||
},
|
||||
}}
|
||||
defaultSelectedKeys={["march"]}
|
||||
// onChange={onChangeFilterStatus}
|
||||
renderValue={(items) => {
|
||||
return items.map((item) => (
|
||||
<span key={item.props?.value} className="text-black text-xs">
|
||||
{item.textValue}
|
||||
</span>
|
||||
));
|
||||
}}
|
||||
>
|
||||
<SelectSection>
|
||||
<SelectItem key="march">March 2023</SelectItem>
|
||||
<SelectItem key="april">April 2023</SelectItem>
|
||||
<SelectItem key="may">May 2023</SelectItem>
|
||||
</SelectSection>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row w-full">
|
||||
<div className="w-3/4">
|
||||
<ApexChartColumn />
|
||||
</div>
|
||||
<div className="w-1/4 flex flex-col px-2 justify-between">
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<div className="bg-[#e8f7ff] p-2 rounded-md">
|
||||
<Submenu1Icon className="h-full text-[#6484fd]" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<p className="font-semibold text-xl">$63,489.50</p>
|
||||
<p className="text-xs">Total Earnings</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row gap-3 items-center">
|
||||
<div className="w-2 h-2 bg-[#6484fd] rounded-full" />
|
||||
<div className="flex flex-col">
|
||||
<p className="text-xs">Earning this month</p>
|
||||
<p className="font-semibold text-md">$48,820</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row gap-3 items-center">
|
||||
<div className="w-2 h-2 bg-[#57c0fd] rounded-full" />
|
||||
<div className="flex flex-col">
|
||||
<p className="text-xs">Expense this month</p>
|
||||
<p className="font-semibold text-md">$26,498</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button className="w-full h-[35px] rounded-md" color="primary" variant="solid">View Full Report</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col w-[344px] gap-6">
|
||||
<div className="h-1/2 border-1 shadow-sm w-full rounded-lg p-6 flex flex-row gap-2">
|
||||
<div className="w-1/2 flex flex-col justify-between">
|
||||
<p className="font-semibold">Yearly Breakup</p>
|
||||
<div className="lflex flex-col">
|
||||
<p className="font-semibold text-xl ">$36,358</p>
|
||||
<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>
|
||||
<p className="pt-[3px]"> +9% last year</p></div>
|
||||
</div>
|
||||
<p className="font-semibold flex flex-row gap-3">
|
||||
<div className="flex flex-row text-tiny items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-[#5c6ac4]" />
|
||||
2020
|
||||
</div>
|
||||
<div className="flex flex-row text-tiny items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-[#d4d4d8]" />
|
||||
2020
|
||||
</div>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div className="w-1/2 h-full flex items-center"><ApexChartDonut /></div>
|
||||
</div>
|
||||
<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="flex justify-between items-center font-semibold">
|
||||
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>
|
||||
</div>
|
||||
<div className="lflex flex-col">
|
||||
<p className="font-semibold text-xl ">$6,820</p>
|
||||
<div className="flex flex-row text-xs item-center">
|
||||
<div className="rounded-full w-6 h-6 bg-[#fdede8] p-[2px] flex items-center justify-center">
|
||||
<DashboardRightDownPointIcon className="text-[#f98e75]" />
|
||||
</div>
|
||||
<p className="pt-[3px]"> -6% last year</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-auto object-cover"><ApexChartLineArea /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>bawah</div>
|
||||
return (
|
||||
<div className="p-8 flex justify-center">
|
||||
<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 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="text-[#6484fd] font-semibold">Employees</div>
|
||||
<div className="text-[#6484fd] font-semibold text-lg">96</div>
|
||||
</div>
|
||||
<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="text-[#feaf2d] font-semibold">Clients</div>
|
||||
<div className="text-[#feaf2d] font-semibold text-lg">3650</div>
|
||||
</div>
|
||||
<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="text-[#57c0fd] font-semibold">Projects</div>
|
||||
<div className="text-[#57c0fd] font-semibold text-lg">356</div>
|
||||
</div>
|
||||
<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="text-[#f98e75] font-semibold">Events</div>
|
||||
<div className="text-[#f98e75] font-semibold text-lg">696</div>
|
||||
</div>
|
||||
<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="text-[#29e2be] font-semibold">Payroll</div>
|
||||
<div className="text-[#29e2be] font-semibold text-lg">$96k</div>
|
||||
</div>
|
||||
<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="text-[#5797fd] font-semibold">Reports</div>
|
||||
<div className="text-[#5797fd] font-semibold text-lg">56</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<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="flex justify-between mb-3">
|
||||
<div className="font-semibold flex flex-col">
|
||||
Revenue Update
|
||||
<span className="font-normal text-xs text-gray-600">
|
||||
Overview of Profit
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-auto md:w-[140px]">
|
||||
<Select
|
||||
label=""
|
||||
labelPlacement="outside"
|
||||
placeholder=""
|
||||
className="w-full"
|
||||
variant="bordered"
|
||||
classNames={{
|
||||
mainWrapper: "rounded",
|
||||
listboxWrapper:
|
||||
"bg-white w-full !text-indigo-500 text-center font-bold",
|
||||
popoverContent: "bg-white !text-indigo-500",
|
||||
trigger:
|
||||
"border-1 border-gray-200 hover:!bg-gray-100 !text-black",
|
||||
}}
|
||||
listboxProps={{
|
||||
itemClasses: {
|
||||
base: [
|
||||
"!text-left",
|
||||
"!bg-white",
|
||||
"text-indigo-500 ",
|
||||
"data-[selectable=true]:!text-indigo-500",
|
||||
"data-[pressed=true]:text-indigo-500",
|
||||
"data-[hover=true]:!text-indigo-300",
|
||||
],
|
||||
wrapper: ["!bg-white border-none"],
|
||||
},
|
||||
}}
|
||||
defaultSelectedKeys={["march"]}
|
||||
// onChange={onChangeFilterStatus}
|
||||
renderValue={(items) => {
|
||||
return items.map((item) => (
|
||||
<span
|
||||
key={item.props?.value}
|
||||
className="text-black text-xs"
|
||||
>
|
||||
{item.textValue}
|
||||
</span>
|
||||
));
|
||||
}}
|
||||
>
|
||||
<SelectSection>
|
||||
<SelectItem key="march">March 2023</SelectItem>
|
||||
<SelectItem key="april">April 2023</SelectItem>
|
||||
<SelectItem key="may">May 2023</SelectItem>
|
||||
</SelectSection>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row w-full">
|
||||
<div className="w-3/4">
|
||||
<ApexChartColumn />
|
||||
</div>
|
||||
<div className="w-1/4 flex flex-col px-2 justify-between">
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<div className="bg-[#e8f7ff] p-2 rounded-md">
|
||||
<Submenu1Icon className="h-full text-[#6484fd]" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<p className="font-semibold text-xl">$63,489.50</p>
|
||||
<p className="text-xs">Total Earnings</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row gap-3 items-center">
|
||||
<div className="w-2 h-2 bg-[#6484fd] rounded-full" />
|
||||
<div className="flex flex-col">
|
||||
<p className="text-xs">Earning this month</p>
|
||||
<p className="font-semibold text-md">$48,820</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row gap-3 items-center">
|
||||
<div className="w-2 h-2 bg-[#57c0fd] rounded-full" />
|
||||
<div className="flex flex-col">
|
||||
<p className="text-xs">Expense this month</p>
|
||||
<p className="font-semibold text-md">$26,498</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full h-[35px] rounded-md"
|
||||
color="primary"
|
||||
variant="solid"
|
||||
>
|
||||
View Full Report
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col w-[344px] gap-6">
|
||||
<div className="h-1/2 border-1 shadow-sm w-full rounded-lg p-6 flex flex-row gap-2">
|
||||
<div className="w-1/2 flex flex-col justify-between">
|
||||
<p className="font-semibold">Yearly Breakup</p>
|
||||
<div className="lflex flex-col">
|
||||
<p className="font-semibold text-xl ">$36,358</p>
|
||||
<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>
|
||||
<p className="pt-[3px]"> +9% last year</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="font-semibold flex flex-row gap-3">
|
||||
<div className="flex flex-row text-tiny items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-[#5c6ac4]" />
|
||||
2020
|
||||
</div>
|
||||
<div className="flex flex-row text-tiny items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-[#d4d4d8]" />
|
||||
2020
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-1/2 h-full flex items-center">
|
||||
<ApexChartDonut />
|
||||
</div>
|
||||
</div>
|
||||
<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="flex justify-between items-center font-semibold">
|
||||
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>
|
||||
</div>
|
||||
<div className="lflex flex-col">
|
||||
<p className="font-semibold text-xl ">$6,820</p>
|
||||
<div className="flex flex-row text-xs item-center">
|
||||
<div className="rounded-full w-6 h-6 bg-[#fdede8] p-[2px] flex items-center justify-center">
|
||||
<DashboardRightDownPointIcon className="text-[#f98e75]" />
|
||||
</div>
|
||||
<p className="pt-[3px]"> -6% last year</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-auto object-cover">
|
||||
<ApexChartLineArea />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue