Skip to content

Commit

Permalink
feat: ini reference page
Browse files Browse the repository at this point in the history
  • Loading branch information
@zekhoi
zekhoi committed Aug 31, 2024
1 parent af2dfa6 commit fd18df6
Show file tree
Hide file tree
Showing 10 changed files with 459 additions and 72 deletions.
156 changes: 156 additions & 0 deletions src/app/(private)/dashboard/(admin)/references/all-reference-table.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
import { ArrowUpRight } from 'lucide-react';
import Link from 'next/link';

import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table';

export default function AllReferenceTable() {
return (
<Card className='col-span-2' x-chunk='dashboard-01-chunk-4'>
<CardHeader className='flex flex-row items-center'>
<div className='grid gap-2'>
<CardTitle>References</CardTitle>
<CardDescription>Recent added</CardDescription>
</div>
<Button asChild size='sm' className='ml-auto gap-1'>
<Link href='#'>
Add New
<ArrowUpRight className='h-4 w-4' />
</Link>
</Button>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Title</TableHead>
<TableHead>Tags</TableHead>
<TableHead>Status</TableHead>
<TableHead>Date</TableHead>
<TableHead className='text-right'>Link</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>
<div className='font-medium'>Liam Johnson</div>
<div className='text-sm text-muted-foreground md:inline'>
[email protected]
</div>
</TableCell>
<TableCell className='table-cell'>Sale</TableCell>
<TableCell className='table-cell'>
<Badge className='text-xs' variant='outline'>
Approved
</Badge>
</TableCell>
<TableCell className='table-cell'>
2023-06-23
</TableCell>
<TableCell className='text-right'>
$250.00
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className='font-medium'>Olivia Smith</div>
<div className='text-sm text-muted-foreground md:inline'>
[email protected]
</div>
</TableCell>
<TableCell className='table-cell'>Refund</TableCell>
<TableCell className='table-cell'>
<Badge className='text-xs' variant='outline'>
Declined
</Badge>
</TableCell>
<TableCell className='table-cell'>
2023-06-24
</TableCell>
<TableCell className='text-right'>
$150.00
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className='font-medium'>Noah Williams</div>
<div className='text-sm text-muted-foreground md:inline'>
[email protected]
</div>
</TableCell>
<TableCell className='table-cell'>
Subscription
</TableCell>
<TableCell className='table-cell'>
<Badge className='text-xs' variant='outline'>
Approved
</Badge>
</TableCell>
<TableCell className='table-cell'>
2023-06-25
</TableCell>
<TableCell className='text-right'>
$350.00
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className='font-medium'>Emma Brown</div>
<div className='text-sm text-muted-foreground md:inline'>
[email protected]
</div>
</TableCell>
<TableCell className='table-cell'>Sale</TableCell>
<TableCell className='table-cell'>
<Badge className='text-xs' variant='outline'>
Approved
</Badge>
</TableCell>
<TableCell className='table-cell'>
2023-06-26
</TableCell>
<TableCell className='text-right'>
$450.00
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className='font-medium'>Liam Johnson</div>
<div className='text-sm text-muted-foreground md:inline'>
[email protected]
</div>
</TableCell>
<TableCell className='table-cell'>Sale</TableCell>
<TableCell className='table-cell'>
<Badge className='text-xs' variant='outline'>
Approved
</Badge>
</TableCell>
<TableCell className='table-cell'>
2023-06-27
</TableCell>
<TableCell className='text-right'>
$550.00
</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
</Card>
);
}
67 changes: 67 additions & 0 deletions src/app/(private)/dashboard/(admin)/references/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import { Scroll, ScrollText } from 'lucide-react';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

import AllReferenceTable from './all-reference-table';
import PendingReferenceTable from './pending-reference-table';

export default function ReferencesPage() {
return (
<>
<div className='flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8'>
<div className='grid gap-4 md:gap-8 lg:grid-cols-3'>
<Card x-chunk='dashboard-01-chunk-0'>
<CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
<CardTitle className='text-sm font-medium'>
Total
</CardTitle>
<ScrollText className='h-4 w-4 text-muted-foreground' />
</CardHeader>
<CardContent>
<div className='text-2xl font-bold'>$45,231.89</div>
<p className='text-xs text-muted-foreground'>
+20.1% from last month
</p>
</CardContent>
</Card>
<Card x-chunk='dashboard-01-chunk-1'>
<CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
<CardTitle className='text-sm font-medium'>
Total Draft (Pending)
</CardTitle>
<Scroll className='h-4 w-4 text-muted-foreground' />
</CardHeader>
<CardContent>
<div className='text-2xl font-bold text-yellow-400'>
+2350
</div>
<p className='text-xs text-muted-foreground'>
+180.1% from last month
</p>
</CardContent>
</Card>
<Card x-chunk='dashboard-01-chunk-2'>
<CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
<CardTitle className='text-sm font-medium'>
Total Rejected
</CardTitle>
<Scroll className='h-4 w-4 text-muted-foreground' />
</CardHeader>
<CardContent>
<div className='text-2xl font-bold text-red-500'>
+2350
</div>
<p className='text-xs text-muted-foreground'>
+180.1% from last month
</p>
</CardContent>
</Card>
</div>
<div className='grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3'>
<AllReferenceTable />
<PendingReferenceTable />
</div>
</div>
</>
);
}
89 changes: 89 additions & 0 deletions src/app/(private)/dashboard/(admin)/references/pending-reference-table.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

export default function PendingReferenceTable() {
return (
<Card x-chunk='dashboard-01-chunk-5'>
<CardHeader>
<CardTitle>Pending</CardTitle>
</CardHeader>
<CardContent className='grid gap-8'>
<div className='flex items-center gap-4'>
<Avatar className='hidden h-9 w-9 sm:flex'>
<AvatarImage src='/avatars/01.png' alt='Avatar' />
<AvatarFallback>OM</AvatarFallback>
</Avatar>
<div className='grid gap-1'>
<p className='text-sm font-medium leading-none'>
Olivia Martin
</p>
<p className='text-sm text-muted-foreground'>
[email protected]
</p>
</div>
<div className='ml-auto font-medium'>+$1,999.00</div>
</div>
<div className='flex items-center gap-4'>
<Avatar className='hidden h-9 w-9 sm:flex'>
<AvatarImage src='/avatars/02.png' alt='Avatar' />
<AvatarFallback>JL</AvatarFallback>
</Avatar>
<div className='grid gap-1'>
<p className='text-sm font-medium leading-none'>
Jackson Lee
</p>
<p className='text-sm text-muted-foreground'>
[email protected]
</p>
</div>
<div className='ml-auto font-medium'>+$39.00</div>
</div>
<div className='flex items-center gap-4'>
<Avatar className='hidden h-9 w-9 sm:flex'>
<AvatarImage src='/avatars/03.png' alt='Avatar' />
<AvatarFallback>IN</AvatarFallback>
</Avatar>
<div className='grid gap-1'>
<p className='text-sm font-medium leading-none'>
Isabella Nguyen
</p>
<p className='text-sm text-muted-foreground'>
[email protected]
</p>
</div>
<div className='ml-auto font-medium'>+$299.00</div>
</div>
<div className='flex items-center gap-4'>
<Avatar className='hidden h-9 w-9 sm:flex'>
<AvatarImage src='/avatars/04.png' alt='Avatar' />
<AvatarFallback>WK</AvatarFallback>
</Avatar>
<div className='grid gap-1'>
<p className='text-sm font-medium leading-none'>
William Kim
</p>
<p className='text-sm text-muted-foreground'>
[email protected]
</p>
</div>
<div className='ml-auto font-medium'>+$99.00</div>
</div>
<div className='flex items-center gap-4'>
<Avatar className='hidden h-9 w-9 sm:flex'>
<AvatarImage src='/avatars/05.png' alt='Avatar' />
<AvatarFallback>SD</AvatarFallback>
</Avatar>
<div className='grid gap-1'>
<p className='text-sm font-medium leading-none'>
Sofia Davis
</p>
<p className='text-sm text-muted-foreground'>
[email protected]
</p>
</div>
<div className='ml-auto font-medium'>+$39.00</div>
</div>
</CardContent>
</Card>
);
}
Loading

0 comments on commit fd18df6

Please sign in to comment.