Skip to content

Commit

Permalink
Added useTable React Hook > Updated Report Pages > Fixed UI/UX
Browse files Browse the repository at this point in the history
  • Loading branch information
@lenn0n13
lenn0n13 committed Jul 28, 2024
1 parent 630b398 commit 3965b46
Show file tree
Hide file tree
Showing 16 changed files with 704 additions and 57 deletions.
75 changes: 72 additions & 3 deletions app/(pages)/agents/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,78 @@
import React from 'react'
import MainWrapper from '@/app/components/PageWrapper/MainWrapper'
'use client';
import { useEffect } from 'react'
import { useAxios } from "@hooks/all"
import useTable from '@/app/hooks/useTable';

const Page = () => {
const { get } = useAxios()
const {
setTableHeader,
setTableData,
setTablePagination,
setTablePayload,
setTableDataRetriever,
RenderTable
} = useTable({
showPagination: true,
placeholderCount: 4
})

const getAgents = async (tablePayload: any) => {
const response = await get({
url: "/agent",
payload: tablePayload,
objectPayloadToURLParams: true,
requiresAuth: true,
authPrefix: 'Bearer'
})

if (response.result) {
const tableData: any = []
response.data.map((agent: any) => {

const updatedAt =
new Date(agent.updatedAt)
.toLocaleDateString("en-US", { year: 'numeric', month: 'long', day: 'numeric' })

tableData.push({
rows: [
{ key: 'name', value: agent.agent_name },
{ key: 'date', value: updatedAt, className: 'mt-4' },
{
key: 'actions',
jsx: <div className='flex gap-2'>
<div className='text-blue-700 font-bold'>Update</div>
</div>
}
]
})
})

setTableData(tableData)
setTablePagination({
max: 1,
display: 5,
})
}
}

useEffect(() => {
setTableHeader([
{ title: 'Name', className: 'text-start', colSpan: 1 },
{ title: 'Added Date', className: 'text-start', colSpan: 1 },
{ title: 'Actions', className: 'text-start', colSpan: 1 },
])

setTablePayload({ search: 'highest' })
setTableDataRetriever(getAgents)
}, [])

return (
<div>Agents Page</div>
<div>
<div className="bg-slate-500 bg-opacity-5 rounded-lg p-5">
<RenderTable/>
</div>
</div>
)
}

Expand Down
10 changes: 0 additions & 10 deletions app/(pages)/branches/page.tsx
View file

This file was deleted.

75 changes: 72 additions & 3 deletions app/(pages)/clients/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,78 @@
import React from 'react'
import MainWrapper from '@/app/components/PageWrapper/MainWrapper'
'use client';
import { useEffect } from 'react'
import { useAxios } from "@hooks/all"
import useTable from '@/app/hooks/useTable';

const Page = () => {
const { get } = useAxios()
const {
setTableHeader,
setTableData,
setTablePagination,
setTablePayload,
setTableDataRetriever,
RenderTable
} = useTable({
showPagination: true,
placeholderCount: 4
})

const getClients = async (tablePayload: any) => {
const response = await get({
url: "/client",
payload: tablePayload,
objectPayloadToURLParams: true,
requiresAuth: true,
authPrefix: 'Bearer'
})

if (response.result) {
const tableData: any = []
response.data.map((client: any) => {

const updatedAt =
new Date(client.updatedAt)
.toLocaleDateString("en-US", { year: 'numeric', month: 'long', day: 'numeric' })

tableData.push({
rows: [
{ key: 'name', value: client.client_name },
{ key: 'date', value: updatedAt, className: 'mt-4' },
{
key: 'actions',
jsx: <div className='flex gap-2'>
<div className='text-blue-700 font-bold'>Update</div>
</div>
}
]
})
})

setTableData(tableData)
setTablePagination({
max: 1,
display: 5,
})
}
}

useEffect(() => {
setTableHeader([
{ title: 'Name', className: 'text-start', colSpan: 1 },
{ title: 'Added Date', className: 'text-start', colSpan: 1 },
{ title: 'Actions', className: 'text-start', colSpan: 1 },
])

setTablePayload({ search: 'highest' })
setTableDataRetriever(getClients)
}, [])

return (
<div>Clients Page</div>
<div>
<div className="bg-slate-500 bg-opacity-5 rounded-lg p-5">
<RenderTable />
</div>
</div>
)
}

Expand Down
28 changes: 13 additions & 15 deletions app/(pages)/dashboard/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const Page = () => {
authPrefix: 'Bearer'
})
if (response.result) {
setData(response)
setData(response.data)
}
}

Expand All @@ -55,52 +55,50 @@ const Page = () => {
}, [])


if (!data) {
return (<>Loading....</>)
} else {

return (
<>
<div className='grid grid-cols-2 md:grid-cols-3 gap-4'>
<Item title="Total Collectibles" className='my-3' icon={CollectMoneyIcon as HTMLImageElement}>
<span className='text-green-700 dark:text-green-500 font-bold'>
{formatNumber(data.overall_lot.collectibles)}
{formatNumber(data?.overall_lot.collectibles?? 0)}
</span>
</Item>
<Item title="Total Receivables" className='my-3' icon={ReceiveMoneyIcon as HTMLImageElement}>
<span className='text-red-700 dark:text-red-500 font-bold '>
{formatNumber(data.overall_lot.receivables)}
{formatNumber(data?.overall_lot.receivables?? 0)}
</span>
</Item>
<Item title="Units" className='my-3' icon={AvailableUnitIcon as HTMLImageElement}>
<span className='text-slate-500 font-bold dark:text-white'>
{formatNumber(data.available_units, 0, '')}
{formatNumber(data?.available_units?? 0, 0, '')}
</span>
</Item>
<Item title="Total Client" className='my-3' icon={TotalClientIcon as HTMLImageElement}>
<span className='text-slate-500 font-bold dark:text-white'>
{formatNumber(data.client_count, 0, '')}
{formatNumber(data?.client_count?? 0, 0, '')}
</span>
</Item>
<Item title="Total Agent" className='my-3' icon={TotalAgentIcon as HTMLImageElement}>
<span className='text-slate-500 font-bold dark:text-white'>
{formatNumber(data.agent_count, 0, '')}
{formatNumber(data?.agent_count?? 0, 0, '')}
</span>
</Item>
<Item title="Top Agent" className='my-3' icon={TopAgentIcon as HTMLImageElement}>
<span className='text-slate-500 font-bold dark:text-white'>
{data.top_agent[0].agent_name}
{data?.top_agent[0].agent_name}
</span>
</Item>
<Item title="Top Agent Collectibles" className='my-3' icon={TopAgentCollectible as HTMLImageElement}>
<span className='text-orange-700 dark:text-orange-500 font-bold'>
{formatNumber(data.top_agent[0].collectibles)}
<Item title="Top Agent Collectibles" className='my-3' icon={TopAgentCollectible as HTMLImageElement}>
<span className='text-orange-700 dark:text-orange-500 font-bold'>
{formatNumber(data?.top_agent[0].collectibles)}
</span>
</Item>
</div>

</>
)
}



}
Expand Down
5 changes: 3 additions & 2 deletions app/(pages)/login/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,12 @@ export default function Login() {
payload: { password }
})

if (response.result) {
if (response.result && response.data.access) {
// Set token to browser's cookies

setCookie({
name: 'user_token',
value: encode(response.access),
value: encode(response.data.access),
days: 7
})
// Redirect to dashboard
Expand Down
86 changes: 86 additions & 0 deletions app/(pages)/lot/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
'use client';
import { useEffect } from 'react'
import { useAxios } from "@hooks/all"
import useTable from '@/app/hooks/useTable';
import { formatRawNumber } from "@utils/validator"
const Page = () => {
const { get } = useAxios()
const {
setTableHeader,
setTableData,
setTablePagination,
setTablePayload,
setTableDataRetriever,
RenderTable
} = useTable({
showPagination: true,
placeholderCount: 4
})

const getLotInfo = async (tablePayload: any) => {
const response = await get({
url: "/lot",
payload: tablePayload,
objectPayloadToURLParams: true,
requiresAuth: true,
authPrefix: 'Bearer'
})

if (response.result) {
const tableData: any = []
response.data.map((lot: any) => {
tableData.push({
rows: [
{ key: 'project_name', value: lot.project_name },
{ key: 'category', value: lot.category },
{ key: 'area', value: lot.area },
{ key: 'sqm', value: lot.sqm },
{ key: 'price_per_sqm', value: formatRawNumber(lot.price_per_sqm, 0, "₱") },
{ key: 'net_tcp', value: formatRawNumber(lot.net_tcp, 0, "₱") },
{ key: 'collectibles', value: formatRawNumber(lot.collectibles, 0, "₱") },
{ key: 'receivables', value: formatRawNumber(lot.receivables, 0, "₱") },
{
key: 'actions',
jsx: <div className='flex gap-2'>
<div className='text-blue-700 font-bold'>Update</div>
</div>
}
]
})
})

setTableData(tableData)
setTablePagination({
max: 1,
display: 5,
})
}
}

useEffect(() => {
setTableHeader([
{ title: 'Project', className: 'text-start', colSpan: 1 },
{ title: 'Category', className: 'text-start', colSpan: 1 },
{ title: 'Area', className: 'text-start', colSpan: 1 },
{ title: 'SQM', className: 'text-start', colSpan: 1 },
{ title: 'Price', className: 'text-start', colSpan: 1 },
{ title: 'Net TCP', className: 'text-start', colSpan: 1 },
{ title: 'Collectibles', className: 'text-start', colSpan: 1 },
{ title: 'Receivables', className: 'text-start', colSpan: 1 },
{ title: 'Actions', className: 'text-start', colSpan: 1 },
])

setTablePayload({ search: 'highest' })
setTableDataRetriever(getLotInfo)
}, [])

return (
<div>
<div className="bg-slate-500 bg-opacity-5 rounded-lg p-5">
<RenderTable />
</div>
</div>
)
}

export default Page
Loading

0 comments on commit 3965b46

Please sign in to comment.