Skip to content

Commit

Permalink
Merge pull request #21 from Vizzuality/AF-dashboard
Browse files Browse the repository at this point in the history
[FE]: dashboard
  • Loading branch information
anamontiaga authored Feb 16, 2024
2 parents 4f2592a + 1c168aa commit cd902c2
Show file tree
Hide file tree
Showing 10 changed files with 170 additions and 31 deletions.
1 change: 1 addition & 0 deletions client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
"tailwindcss": "3.3.2",
"tailwindcss-animate": "^1.0.6",
"typescript": "5.1.3",
"vaul": "0.9.0",
"zod": "^3.21.4"
},
"devDependencies": {
Expand Down
7 changes: 6 additions & 1 deletion client/src/app/countries/[slug]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
import { Metadata } from 'next';

import CountryDetailPanel from '@/containers/countries/detail/panel';
import Panel from '@/containers/panel';

export const metadata: Metadata = {
title: 'AFoCO | Country detail',
description: '',
};

export default function CountryPage() {
return <CountryDetailPanel />;
return (
<Panel>
<CountryDetailPanel />
</Panel>
);
}
11 changes: 7 additions & 4 deletions client/src/app/countries/page.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Metadata } from 'next';

import CountriesList from '@/containers/countries/list';
import Panel from '@/containers/panel';

export const metadata: Metadata = {
title: 'AFoCO | Countries',
Expand All @@ -9,9 +10,11 @@ export const metadata: Metadata = {

export default function Countries() {
return (
<div className="space-y-5 p-5">
<h2 className="text-3xl font-normal">Country Profile</h2>
<CountriesList />
</div>
<Panel>
<div className="space-y-5 p-5">
<h2 className="text-3xl font-normal">Countries</h2>
<CountriesList />
</div>
</Panel>
);
}
7 changes: 6 additions & 1 deletion client/src/app/datasets/page.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
import { Metadata } from 'next';

import Datasets from '@/containers/datasets';
import Panel from '@/containers/panel';

export const metadata: Metadata = {
title: 'AFoCO | Datasets',
description: '',
};

export default function DatasetsPage() {
return <Datasets />;
return (
<Panel>
<Datasets />
</Panel>
);
}
2 changes: 1 addition & 1 deletion client/src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<body className={`${bricolage.variable} font-sans`}>
<div className="relative h-screen w-screen">
<Sidebar />
<Panel>{children}</Panel>
<Map />
{children}
</div>
</body>
</html>
Expand Down
9 changes: 8 additions & 1 deletion client/src/app/projects/[slug]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,15 @@ export const metadata: Metadata = {
description: '',
};

import Panel from '@/containers/panel';
import ProjectDetailPanel from '@/containers/projects/detail/panel';

export default function ProjectDetailPage() {
return <ProjectDetailPanel />;
return (
<>
<Panel>
<ProjectDetailPanel />
</Panel>
</>
);
}
11 changes: 7 additions & 4 deletions client/src/app/projects/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,16 @@ export const metadata: Metadata = {
description: '',
};

import Panel from '@/containers/panel';
import ProjectsList from '@/containers/projects/list';

export default function Projects() {
return (
<div className="space-y-5 p-5">
<h2 className="text-3xl font-normal">Projects</h2>
<ProjectsList />
</div>
<Panel>
<div className="space-y-5 p-5">
<h2 className="text-3xl font-normal">Projects</h2>
<ProjectsList />
</div>
</Panel>
);
}
105 changes: 105 additions & 0 deletions client/src/components/ui/drawer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
'use client';

import * as React from 'react';

import { Drawer as DrawerPrimitive } from 'vaul';

import { cn } from '@/lib/classnames';

const Drawer = ({
shouldScaleBackground = true,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
<DrawerPrimitive.Root
shouldScaleBackground={shouldScaleBackground}
modal={false}
direction="left"
{...props}
/>
);
Drawer.displayName = 'Drawer';

const DrawerTrigger = DrawerPrimitive.Trigger;

const DrawerPortal = DrawerPrimitive.Portal;

const DrawerClose = DrawerPrimitive.Close;

const DrawerOverlay = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DrawerPrimitive.Overlay
ref={ref}
className={cn('fixed inset-0 z-50 bg-black/80', className)}
{...props}
/>
));
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;

const DrawerContent = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DrawerPortal>
<DrawerOverlay />
<DrawerPrimitive.Content
ref={ref}
className={cn(
'top-inset pointer-events-auto fixed inset-x-0 bottom-2 right-6 flex h-[calc(100vh-16px)] flex-col bg-none',
className
)}
{...props}
>
{children}
</DrawerPrimitive.Content>
</DrawerPortal>
));
DrawerContent.displayName = 'DrawerContent';

const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)} {...props} />
);
DrawerHeader.displayName = 'DrawerHeader';

const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />
);
DrawerFooter.displayName = 'DrawerFooter';

const DrawerTitle = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
>(({ className, ...props }, ref) => (
<DrawerPrimitive.Title
ref={ref}
className={cn('text-lg font-semibold leading-none tracking-tight', className)}
{...props}
/>
));
DrawerTitle.displayName = DrawerPrimitive.Title.displayName;

const DrawerDescription = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
>(({ className, ...props }, ref) => (
<DrawerPrimitive.Description
ref={ref}
className={cn('text-muted-foreground text-sm', className)}
{...props}
/>
));
DrawerDescription.displayName = DrawerPrimitive.Description.displayName;

export {
Drawer,
DrawerPortal,
DrawerOverlay,
DrawerTrigger,
DrawerClose,
DrawerContent,
DrawerHeader,
DrawerFooter,
DrawerTitle,
DrawerDescription,
};
11 changes: 6 additions & 5 deletions client/src/containers/projects/detail/dashboard.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
import { useState } from 'react';

import Image from 'next/image';
Expand All @@ -17,7 +18,7 @@ export default function ProjectDashboard() {
const setDashboard = useSetAtom(dashboardAtom);

return (
<div className="absolute bottom-0 left-[405px] top-0 z-10 box-content rounded-3xl bg-neutral-50 px-6 py-8 shadow-md">
<div className="z-50 box-content h-full w-full rounded-3xl bg-neutral-50 px-6 py-8 shadow-md">
<div>
<h3 className="mb-4 text-xl font-extrabold text-gray-400">Overview</h3>
<button
Expand Down Expand Up @@ -48,7 +49,7 @@ export default function ProjectDashboard() {
))}
</div>
<div className="grid grid-cols-2 grid-rows-2 gap-6">
<div className="rounded-xl bg-white bg-white p-4 shadow-sm">
<div className="rounded-xl bg-white p-4 shadow-sm">
<div className="flex items-center justify-between">
<h3 className="text-lg text-green-800">Project funding infrastructure</h3>
<Dialog>
Expand Down Expand Up @@ -88,19 +89,19 @@ export default function ProjectDashboard() {
</Dialog>
</div>
</div>
<div className="rounded-xl bg-white bg-white p-4 shadow-sm">
<div className="rounded-xl bg-white p-4 shadow-sm">
<div className="flex items-center justify-between">
<h3 className="text-lg text-green-800">Funding in USD</h3>
<Info className="h-5 w-5 text-green-800" />
</div>
</div>
<div className="rounded-xl bg-white bg-white p-4 shadow-sm">
<div className="rounded-xl bg-white p-4 shadow-sm">
<div className="flex items-center justify-between">
<h3 className="text-lg text-green-800">Trained people per year</h3>
<Info className="h-5 w-5 text-green-800" />
</div>
</div>
<div className="rounded-xl bg-white bg-white p-4 shadow-sm">
<div className="rounded-xl bg-white p-4 shadow-sm">
<div className="flex items-center justify-between">
<h3 className="text-xl text-green-800">Community beneficiaries</h3>
<Info className="h-5 w-5 text-green-800" />
Expand Down
37 changes: 23 additions & 14 deletions client/src/containers/projects/detail/panel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,21 @@
import Image from 'next/image';
import Link from 'next/link';

import { ArrowLeft } from 'lucide-react';
import { useAtom } from 'jotai';
import { ArrowLeft, ChevronRight } from 'lucide-react';

import { dashboardAtom } from '@/store';

import { PANEL_OVERVIEW_ITEMS } from '@/containers/projects/detail/constants';

import { Button } from '@/components/ui/button';
import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer';

import ProjectDashboard from './dashboard';

export default function ProjectDetailPanel() {
const [dashboard, setDashboard] = useAtom(dashboardAtom);

return (
<div className="no-scrollbar h-full overflow-x-hidden rounded-3xl bg-neutral-50 p-6 pb-40">
<div className="absolute left-0 top-0 w-full">
Expand Down Expand Up @@ -96,23 +106,22 @@ export default function ProjectDetailPanel() {
</p>
</div>
</div>

{/* <Dialog>
<DialogTrigger
onClick={() => {
setDashboard(!dashboard);
}}
>
<Button variant="primary" className="group fixed bottom-6 right-6 space-x-2" size="base">
<Drawer>
<DrawerTrigger asChild>
<Button
variant="primary"
className="group fixed bottom-6 right-6 z-50 space-x-2"
size="base"
onClick={() => setDashboard(!dashboard)}
>
<p className="w-36">{dashboard ? 'Hide dashboard' : 'Show dashboard'}</p>
<ChevronRight className="h-4 w-4 text-yellow-900 group-hover:text-yellow-50" />
</Button>
</DialogTrigger>
<DialogContent>
</DrawerTrigger>
<DrawerContent className="left-[512px] w-[calc(100vw-584px)]">
<ProjectDashboard />
</DialogContent>
</Dialog> */}
</DrawerContent>
</Drawer>
</div>
);
}

0 comments on commit cd902c2

Please sign in to comment.