-
Notifications
You must be signed in to change notification settings - Fork 0
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
Showing
17 changed files
with
444 additions
and
105 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 |
|---|---|---|
|
|
@@ -34,3 +34,4 @@ yarn-error.log* | |
| # typescript | ||
| *.tsbuildinfo | ||
| next-env.d.ts | ||
| .env | ||
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 |
|---|---|---|
| @@ -1,54 +1,102 @@ | ||
| import React from 'react' | ||
| import Card from '../../components/Card/Card' | ||
| import { HomeModernIcon, CreditCardIcon, UserGroupIcon, UsersIcon, BuildingOffice2Icon } from '@heroicons/react/24/solid' | ||
| import Logout from './logout' | ||
| 'use client' | ||
| import React, { useEffect, useState } from 'react' | ||
| import Image from 'next/image' | ||
| import MainWrapper from '@/app/components/PageWrapper/MainWrapper' | ||
| import { useAxios } from "@hooks/all" | ||
| import { formatRawNumber } from '@/app/utils/validator' | ||
| import ReceiveMoneyIcon from "@/public/receive-money.svg" | ||
| import CollectMoneyIcon from "@/public/collect-money.svg" | ||
| import AvailableUnitIcon from "@/public/available-unit.svg" | ||
| import TotalClientIcon from "@/public/total-client.svg" | ||
| import TotalAgentIcon from "@/public/total-agent.svg" | ||
| import TopAgentIcon from "@/public/top-agent.svg" | ||
| import TopAgentCollectible from "@/public/agent-collectible.svg" | ||
|
|
||
| type dataProps = { | ||
| overall_lot: { | ||
| collectibles: number, | ||
| receivables: number | ||
| }, | ||
| available_units: number, | ||
| client_count: number, | ||
| agent_count: number, | ||
| top_agent: any | ||
| } | ||
| const Dashboard = () => { | ||
| const { get } = useAxios() | ||
| const [data, setData] = useState<dataProps>() | ||
|
|
||
| return ( | ||
| <div className=""> | ||
| <div className="h-[100vh]"> | ||
| <div className=" flex items-center justify-center h-[100%]"> | ||
| <div className="grid grid-cols-12 gap-4 mx-4"> | ||
| <div className="col-span-3 w-[300px] py-5"> | ||
| <Card> | ||
| <div className="font-bold text-xl">Admin Panel</div> | ||
| <div className="border-b border-slate-400 mb-5 mt-3 opacity-30"></div> | ||
| <div className="flex flex-row gap-2 mb-4 hover:text-slate-400 text-green-600 dark:text-green-500" role="button"> | ||
| <HomeModernIcon className="h-6 w-6" /> | ||
| <div className="font-bold">Dashboard</div> | ||
| </div> | ||
| <div className="flex flex-row gap-2 mb-4 hover:text-slate-400 text-slate-700 dark:text-slate-200" role="button"> | ||
| <CreditCardIcon className="h-6 w-6" /> | ||
| <div className="">Payments</div> | ||
| </div> | ||
| <div className="flex flex-row gap-2 mb-4 hover:text-slate-400 text-slate-700 dark:text-slate-200" role="button"> | ||
| <UserGroupIcon className="h-6 w-6" /> | ||
| <div className="">Client</div> | ||
| </div> | ||
| <div className="flex flex-row gap-2 mb-4 hover:text-slate-400 text-slate-700 dark:text-slate-200" role="button"> | ||
| <UsersIcon className="h-6 w-6" /> | ||
| <div className="">Agent</div> | ||
| </div> | ||
| <div className="flex flex-row gap-2 mb-4 hover:text-slate-400 text-slate-700 dark:text-slate-200" role="button"> | ||
| <BuildingOffice2Icon className="h-6 w-6" /> | ||
| <div className="">Branch</div> | ||
| </div> | ||
| <div className="border-b border-slate-400 mb-5 mt-3 opacity-30"></div> | ||
| <Logout/> | ||
| </Card> | ||
| </div> | ||
| <div className="col-span-9 max-h-[80vh] overflow-hidden py-5"> | ||
| <div className=""> | ||
| <Card> | ||
| <div className="font-bold">Contents</div> | ||
| </Card> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| const handleGetStatistics = async () => { | ||
| const response = await get({ | ||
| url: "/statistics", | ||
| requiresAuth: true, | ||
| authPrefix: 'Bearer' | ||
| }) | ||
| if (response.result) { | ||
| setData(response) | ||
| } | ||
| } | ||
|
|
||
| const formatNumber = (num: number, dec: number = 2, lead: string = '₱') => { | ||
| return formatRawNumber(num, dec, lead) | ||
| } | ||
|
|
||
| const Item = ({ children, title, className, icon }: { children: React.ReactNode, title: string, className?: string, icon: HTMLImageElement }) => { | ||
| return <div className={`flex gap-3 items-center justi ${className}`}> | ||
| <Image src={icon} className='hidden sm:block h-[30px] w-[30px] md:h-[50px] md:w-[50px] ' alt="icon" /> | ||
| <div className={`flex flex-col`}> | ||
| <div className="font-bold text-[16px] lg:text-[17px]">{title}</div> | ||
| <div className="text-[14px] md:text-[20px] ">{children}</div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| handleGetStatistics() | ||
| }, []) | ||
|
|
||
|
|
||
| if (!data) { | ||
| return (<>Loading....</>) | ||
| } else { | ||
| return ( | ||
| <MainWrapper> | ||
| <div className='flex items-center gap-2' > | ||
| <div className="font-bold text-xl dark:text-white mt-3 pb-3">My Dashboard</div> | ||
| </div> | ||
| <div className="border-b border-slate-400 mb-5 mt-3 opacity-30"></div> | ||
| <div className='grid grid-cols-2 md:grid-cols-3'> | ||
| <Item title="Total Collectibles" className='mb-12' icon={CollectMoneyIcon}> | ||
| <span className='text-green-700 dark:text-green-500 font-bold'>{formatNumber(data.overall_lot.collectibles)}</span> | ||
| </Item> | ||
| <Item title="Total Receivables" className='mb-12' icon={ReceiveMoneyIcon}> | ||
| <span className='text-orange-600 dark:text-orange-500 font-bold'>{formatNumber(data.overall_lot.receivables)}</span> | ||
| </Item> | ||
| <Item title="Units" className='mb-12' icon={AvailableUnitIcon}> | ||
| <span className={`font-bold ${data.available_units === 0 ? 'text-red-700 dark:text-red-500' : ''}`}> | ||
| {formatNumber(data.available_units, 0, '')}</span> | ||
| </Item> | ||
| <Item title="Total Client" className='mb-12' icon={TotalClientIcon}> | ||
| <span className='dark:text-white'>{formatNumber(data.client_count, 0, '')}</span> | ||
| </Item> | ||
| <Item title="Total Agent" className='mb-12' icon={TotalAgentIcon}> | ||
| <span className='dark:text-white'>{formatNumber(data.agent_count, 0, '')}</span> | ||
| </Item> | ||
|
|
||
| </div> | ||
| <div className='grid grid-cols-2 md:grid-cols-3'> | ||
| <Item title="Top Agent" icon={TopAgentIcon}> | ||
| <span className='dark:text-white'>{data.top_agent[0].agent_name}</span> | ||
| </Item> | ||
| <Item title="Collectibles" icon={TopAgentCollectible}> | ||
| <span className='dark:text-white'> {formatNumber(data.top_agent[0].collectibles)}</span> | ||
| </Item> | ||
| </div> | ||
| </MainWrapper> | ||
| ) | ||
| } | ||
|
|
||
|
|
||
| } | ||
|
|
||
| export default Dashboard |
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
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
File renamed without changes.
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,62 @@ | ||
|
|
||
| import Card from '@/app/components/Card/Card' | ||
| import Logout from '@/app/components/PageWrapper/Logout' | ||
| import Image from "next/image" | ||
| import { HomeModernIcon, CreditCardIcon, UserGroupIcon, UsersIcon, BuildingOffice2Icon } from '@heroicons/react/24/solid' | ||
|
|
||
| import NRLogo from "@/public/nr.png" | ||
|
|
||
| type MainWrapperProps = { | ||
| children: React.ReactNode | ||
| } | ||
| const MainWrapper = ({ children }: MainWrapperProps) => { | ||
|
|
||
| return ( | ||
| <> | ||
| <div className=" flex lg:items-center pt-12 lg:pt-0 justify-center h-[100%] lg:h-[100vh]"> | ||
| <div className="flex flex-row flex-wrap justify-center w-full gap-4 mx-4"> | ||
| <div className="basis-full lg:basis-1/5 py-5"> | ||
| <Card> | ||
| <div className='flex items-center gap-2' > | ||
| <Image className="object-cover w-[50px] h-[50px] opacity-90" src={NRLogo} alt="" /> | ||
| <div className="font-bold text-xl dark:text-white"> NR Realty</div> | ||
| </div> | ||
| <div className="border-b border-slate-400 mb-5 mt-3 opacity-30"></div> | ||
| <div className="flex flex-row lg:flex-col justify-between"> | ||
| <div className="flex flex-row gap-2 mb-4 hover:text-slate-400 text-green-600 dark:text-green-500" role="button"> | ||
| <HomeModernIcon className="h-6 w-6" /> | ||
| <div className="font-bold hidden md:block">Dashboard</div> | ||
| </div> | ||
| <div className="flex flex-row gap-2 mb-4 hover:text-slate-400 text-slate-700 dark:text-slate-200" role="button"> | ||
| <CreditCardIcon className="h-6 w-6" /> | ||
| <div className="font-bold hidden md:block">Payments</div> | ||
| </div> | ||
| <div className="flex flex-row gap-2 mb-4 hover:text-slate-400 text-slate-700 dark:text-slate-200" role="button"> | ||
| <UserGroupIcon className="h-6 w-6" /> | ||
| <div className="font-bold hidden md:block">Client</div> | ||
| </div> | ||
| <div className="flex flex-row gap-2 mb-4 hover:text-slate-400 text-slate-700 dark:text-slate-200" role="button"> | ||
| <UsersIcon className="h-6 w-6" /> | ||
| <div className="font-bold hidden md:block">Agent</div> | ||
| </div> | ||
| <div className="flex flex-row gap-2 mb-4 hover:text-slate-400 text-slate-700 dark:text-slate-200" role="button"> | ||
| <BuildingOffice2Icon className="h-6 w-6" /> | ||
| <div className="font-bold hidden md:block">Branch</div> | ||
| </div> | ||
| </div> | ||
| <div className="border-b border-slate-400 mb-5 mt-3 opacity-30"></div> | ||
| <Logout /> | ||
| </Card> | ||
| </div> | ||
| <div className="basis-full lg:basis-3/4 xl:basis-2/4 overflow-hidden py-5"> | ||
| <Card> | ||
| {children} | ||
| </Card> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default MainWrapper |
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
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
Oops, something went wrong.