Skip to content

Commit

Permalink
WIP display info on dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
Guillaume_Bernier committed May 9, 2024
1 parent 4842281 commit 41c32a6
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 140 deletions.
16 changes: 16 additions & 0 deletions app/src/lib/utils/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,20 @@ export function convertStringToNumber(input: string): number {
throw new Error('Input is not a valid number');
}
return result;
}

export function formatDate(dateString: string) {
// Split the dateString by the space to ignore the time part
const datePart = dateString.split(' ')[0];

// Create a date object from the date part
const date = new Date(datePart);

// Extract the day, month, and year components
const day = date.getUTCDate().toString().padStart(2, '0');
const month = (date.getUTCMonth() + 1).toString().padStart(2, '0'); // January is 0
const year = date.getUTCFullYear();

// Return the formatted string
return `${day}/${month}/${year}`;
}
36 changes: 36 additions & 0 deletions app/src/routes/(app)/admin/dashboard/+page.server.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import type { PageServerLoad } from "./$types.js";


export const load: PageServerLoad = async ({ locals }) => {

const [revenueList, expenseList, lastTransaction] = await Promise.all([
locals.pb.collection('transactions').getFullList({
sort: '-created',
fields: 'amount',
filter: 'type = "revenue"',
requestKey: null
}),
locals.pb.collection('transactions').getFullList({
sort: '-created',
fields: 'amount',
filter: 'type = "expense"',
requestKey: null
}),
locals.pb.collection('transactions').getList(1, 5,{
sort: '-created',
fields: 'amount, title, date',
requestKey: null
})
]);

const totalRevenue = revenueList.reduce((sum, item) => sum + item.amount, 0);
const totalExpense = expenseList.reduce((sum, item) => sum + item.amount, 0);

return {
props: {
totalRevenue: totalRevenue,
totalExpense: totalExpense,
lastTransaction: lastTransaction
}
};
};
160 changes: 20 additions & 140 deletions app/src/routes/(app)/admin/dashboard/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,18 @@
import ArrowUpRight from 'lucide-svelte/icons/arrow-up-right';
import CreditCard from 'lucide-svelte/icons/credit-card';
import DollarSign from 'lucide-svelte/icons/dollar-sign';
import * as Avatar from '$lib/components/ui/avatar/index.js';
import { Badge } from '$lib/components/ui/badge/index.js';
import { Button } from '$lib/components/ui/button/index.js';
import * as Card from '$lib/components/ui/card/index.js';
import * as Table from '$lib/components/ui/table/index.js';
import type { PageData } from './$types.js';
import { formatDate } from '$lib/utils/utils.js';
export let data: PageData;
const totalRevenue = data.props.totalRevenue;
const totalExpense = data.props.totalExpense;
const lastTransactions = data.props.lastTransaction.items;
</script>

<main class="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
Expand All @@ -19,8 +25,8 @@
<DollarSign class="text-muted-foreground h-4 w-4" />
</Card.Header>
<Card.Content>
<div class="text-2xl font-bold">$45,231.89</div>
<p class="text-muted-foreground text-xs">+20.1% from last month</p>
<div class="text-3xl font-bold">${totalRevenue}</div>
<!--<p class="text-muted-foreground text-xs">+20.1% from last month</p>-->
</Card.Content>
</Card.Root>
<Card.Root>
Expand All @@ -29,8 +35,8 @@
<Receipt class="text-muted-foreground h-4 w-4" />
</Card.Header>
<Card.Content>
<div class="text-2xl font-bold">$100,231.89</div>
<p class="text-muted-foreground text-xs">+180.1% from last month</p>
<div class="text-3xl font-bold">${totalExpense}</div>
<!--<p class="text-muted-foreground text-xs">+180.1% from last month</p>-->
</Card.Content>
</Card.Root>
<Card.Root>
Expand All @@ -49,7 +55,7 @@
<Card.Header class="flex flex-row items-center">
<div class="grid gap-2">
<Card.Title>Transactions</Card.Title>
<Card.Description>Recent transactions.</Card.Description>
<Card.Description>Recently created transactions.</Card.Description>
</div>
<Button href="/admin/transactions" size="sm" class="ml-auto gap-1">
View All
Expand All @@ -60,149 +66,23 @@
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head>Customer</Table.Head>
<Table.Head class="xl:table.-column hidden">Type</Table.Head>
<Table.Head class="xl:table.-column hidden">Status</Table.Head>
<Table.Head class="xl:table.-column hidden">Date</Table.Head>
<Table.Head>Transaction Name</Table.Head>
<Table.Head class="text-right">Amount</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{#each lastTransactions as transaction}
<Table.Row>
<Table.Cell>
<div class="font-medium">Liam Johnson</div>
<div class="text-muted-foreground hidden text-sm md:inline">[email protected]</div>
</Table.Cell>
<Table.Cell class="xl:table.-column hidden">Sale</Table.Cell>
<Table.Cell class="xl:table.-column hidden">
<Badge class="text-xs" variant="outline">Approved</Badge>
</Table.Cell>
<Table.Cell class="md:table.-cell xl:table.-column hidden lg:hidden">
2023-06-23
</Table.Cell>
<Table.Cell class="text-right">$250.00</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<div class="font-medium">Olivia Smith</div>
<div class="text-muted-foreground hidden text-sm md:inline">[email protected]</div>
</Table.Cell>
<Table.Cell class="xl:table.-column hidden">Refund</Table.Cell>
<Table.Cell class="xl:table.-column hidden">
<Badge class="text-xs" variant="outline">Declined</Badge>
</Table.Cell>
<Table.Cell class="md:table.-cell xl:table.-column hidden lg:hidden">
2023-06-24
</Table.Cell>
<Table.Cell class="text-right">$150.00</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<div class="font-medium">Noah Williams</div>
<div class="text-muted-foreground hidden text-sm md:inline">[email protected]</div>
</Table.Cell>
<Table.Cell class="xl:table.-column hidden">Subscription</Table.Cell>
<Table.Cell class="xl:table.-column hidden">
<Badge class="text-xs" variant="outline">Approved</Badge>
</Table.Cell>
<Table.Cell class="md:table.-cell xl:table.-column hidden lg:hidden">
2023-06-25
</Table.Cell>
<Table.Cell class="text-right">$350.00</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<div class="font-medium">Emma Brown</div>
<div class="text-muted-foreground hidden text-sm md:inline">[email protected]</div>
</Table.Cell>
<Table.Cell class="xl:table.-column hidden">Sale</Table.Cell>
<Table.Cell class="xl:table.-column hidden">
<Badge class="text-xs" variant="outline">Approved</Badge>
</Table.Cell>
<Table.Cell class="md:table.-cell xl:table.-column hidden lg:hidden">
2023-06-26
</Table.Cell>
<Table.Cell class="text-right">$450.00</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<div class="font-medium">Liam Johnson</div>
<div class="text-muted-foreground hidden text-sm md:inline">[email protected]</div>
</Table.Cell>
<Table.Cell class="xl:table.-column hidden">Sale</Table.Cell>
<Table.Cell class="xl:table.-column hidden">
<Badge class="text-xs" variant="outline">Approved</Badge>
</Table.Cell>
<Table.Cell class="md:table.-cell xl:table.-column hidden lg:hidden">
2023-06-27
<div class="font-medium">{transaction.title}</div>
<div class="text-muted-foreground hidden text-sm md:inline">{formatDate(transaction.date)}</div>
</Table.Cell>
<Table.Cell class="text-right">$550.00</Table.Cell>
<Table.Cell class="text-right">${transaction.amount}</Table.Cell>
</Table.Row>
{/each}
</Table.Body>
</Table.Root>
</Card.Content>
</Card.Root>
<Card.Root>
<Card.Header>
<Card.Title>Recent Sales</Card.Title>
</Card.Header>
<Card.Content class="grid gap-8">
<div class="flex items-center gap-4">
<Avatar.Root class="hidden h-9 w-9 sm:flex">
<Avatar.Image src="/avatars/01.png" alt="Avatar" />
<Avatar.Fallback>OM</Avatar.Fallback>
</Avatar.Root>
<div class="grid gap-1">
<p class="text-sm font-medium leading-none">Olivia Martin</p>
<p class="text-muted-foreground text-sm">[email protected]</p>
</div>
<div class="ml-auto font-medium">+$1,999.00</div>
</div>
<div class="flex items-center gap-4">
<Avatar.Root class="hidden h-9 w-9 sm:flex">
<Avatar.Image src="/avatars/02.png" alt="Avatar" />
<Avatar.Fallback>JL</Avatar.Fallback>
</Avatar.Root>
<div class="grid gap-1">
<p class="text-sm font-medium leading-none">Jackson Lee</p>
<p class="text-muted-foreground text-sm">[email protected]</p>
</div>
<div class="ml-auto font-medium">+$39.00</div>
</div>
<div class="flex items-center gap-4">
<Avatar.Root class="hidden h-9 w-9 sm:flex">
<Avatar.Image src="/avatars/03.png" alt="Avatar" />
<Avatar.Fallback>IN</Avatar.Fallback>
</Avatar.Root>
<div class="grid gap-1">
<p class="text-sm font-medium leading-none">Isabella Nguyen</p>
<p class="text-muted-foreground text-sm">[email protected]</p>
</div>
<div class="ml-auto font-medium">+$299.00</div>
</div>
<div class="flex items-center gap-4">
<Avatar.Root class="hidden h-9 w-9 sm:flex">
<Avatar.Image src="/avatars/04.png" alt="Avatar" />
<Avatar.Fallback>WK</Avatar.Fallback>
</Avatar.Root>
<div class="grid gap-1">
<p class="text-sm font-medium leading-none">William Kim</p>
<p class="text-muted-foreground text-sm">[email protected]</p>
</div>
<div class="ml-auto font-medium">+$99.00</div>
</div>
<div class="flex items-center gap-4">
<Avatar.Root class="hidden h-9 w-9 sm:flex">
<Avatar.Image src="/avatars/05.png" alt="Avatar" />
<Avatar.Fallback>SD</Avatar.Fallback>
</Avatar.Root>
<div class="grid gap-1">
<p class="text-sm font-medium leading-none">Sofia Davis</p>
<p class="text-muted-foreground text-sm">[email protected]</p>
</div>
<div class="ml-auto font-medium">+$39.00</div>
</div>
</Card.Content>
</Card.Root>
</div>
</main>

0 comments on commit 41c32a6

Please sign in to comment.