diff --git a/app/[locale]/(user)/components/Content.tsx b/app/[locale]/(user)/components/Content.tsx index 446e7692..738b2e57 100644 --- a/app/[locale]/(user)/components/Content.tsx +++ b/app/[locale]/(user)/components/Content.tsx @@ -1,44 +1,58 @@ -'use client'; +'use client' -import { IconBrandTabler } from '@tabler/icons-react'; -import { useTranslations } from 'next-intl'; -import { Button, ButtonGroup, Icon, Text } from 'opub-ui'; +import Image from 'next/image'; +import { useRouter } from 'next/navigation'; +import { SearchInput, Text } from 'opub-ui'; -import { Icons } from '@/components/icons'; - -export function Content() { - const t = useTranslations('home'); +import { cn } from '@/lib/utils'; +import Styles from '../page.module.scss'; +export const Content = () => { + const router = useRouter(); + const handleSearch = (value: string) => { + if (value) { + router.push(`/datasets?query=${encodeURIComponent(value)}`); + } + }; return ( - <> - - - {t('title')} - - - {t('subtitle')} - - - - - - +
+
+
+
+ + Collaborate to advance + + + Data-driven Impact and Action + + + with CivicDataLab{' '} + +
+
+ +
+
+
+ illustartion +
+
+
); -} +}; diff --git a/app/[locale]/(user)/components/Datasets.tsx b/app/[locale]/(user)/components/Datasets.tsx new file mode 100644 index 00000000..10f8678e --- /dev/null +++ b/app/[locale]/(user)/components/Datasets.tsx @@ -0,0 +1,137 @@ +'use client'; + +import React, { useEffect, useState } from 'react'; +import { useRouter } from 'next/navigation'; +import { fetchDatasets } from '@/fetch'; +import { + Button, + Card, + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, + Spinner, + Text, +} from 'opub-ui'; + +import { cn } from '@/lib/utils'; +import { Icons } from '@/components/icons'; +import Styles from './datasets.module.scss'; + +interface Bucket { + key: string; + doc_count: number; +} +interface Aggregation { + buckets: Bucket[]; +} + +interface Aggregations { + [key: string]: Aggregation; +} + +const Datasets = () => { + const [facets, setFacets] = useState<{ + results: any[]; + total: number; + aggregations: Aggregations; + } | null>(null); + const [isLoading, setIsLoading] = useState(true); + useEffect(() => { + fetchDatasets('?sort=recent&size=5&page=1&sort=recent') + .then((res) => { + setFacets(res); + setIsLoading(false); + }) + .catch((err) => { + console.error(err); + }); + }, []); + + const router = useRouter(); + + return ( +
+
+ Recent Datasets +
+ + Recently updated and trending Datasets on CivicDataSpace + + +
+
+
+ + + + + {isLoading ? ( +
+ +
+ ) : ( + facets && + facets.results.map((item: any) => ( + + {' '} + + + )) + )} + + + +
+
+ ); +}; + +export default Datasets; diff --git a/app/[locale]/(user)/components/ListingComponent.tsx b/app/[locale]/(user)/components/ListingComponent.tsx index 11b2d4b0..c234c943 100644 --- a/app/[locale]/(user)/components/ListingComponent.tsx +++ b/app/[locale]/(user)/components/ListingComponent.tsx @@ -282,7 +282,7 @@ const ListingComponent: React.FC = ({ {categoryImage && (
{`${categoryName} = ({
{Object.values(queryParams.filters).filter( - (value) => Array.isArray(value) && value.length !== 0 + (value) => Array.isArray(value) ).length > 1 && (
{Object.entries(queryParams.filters).map(([category, values]) => @@ -467,8 +467,8 @@ const ListingComponent: React.FC = ({ tag: item.tags, formats: item.formats, footerContent: [ - { icon: '', label: 'Sectors' }, - { icon: '', label: 'Published by' }, + { icon: `/Sectors/${item.sectors[0]}.svg`, label: 'Sectors' }, + { icon: '/fallback.svg', label: 'Published by' }, ], }; diff --git a/app/[locale]/(user)/components/Sectors.tsx b/app/[locale]/(user)/components/Sectors.tsx new file mode 100644 index 00000000..783e6a8d --- /dev/null +++ b/app/[locale]/(user)/components/Sectors.tsx @@ -0,0 +1,105 @@ +'use client'; + +import React from 'react'; +import Image from 'next/image'; +import Link from 'next/link'; +import { useRouter } from 'next/navigation'; +import { graphql } from '@/gql'; +import { useQuery } from '@tanstack/react-query'; // ✅ Ensure this is correct + +import { Button, Divider, Spinner, Text } from 'opub-ui'; + +import { GraphQL } from '@/lib/api'; + +const sectorDetails = graphql(` + query SectorsList { + sectors { + id + name + description + slug + datasetCount + } + } +`); + +const Sectors = () => { + const { data, isLoading, error, isError } = useQuery({ + queryKey: ['sectors_list'], // ✅ Fix queryKey syntax + queryFn: () => GraphQL(sectorDetails, {}), + }); + const router = useRouter(); + function capitalizeWords(name: any) { + return name + .split('-') // Split by '-' + .map((word: any) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each word + .join('+'); // Join with '+' + } + return ( +
+
+ Explore Sectors +
+ + Classification of all Use Cases and Datasets on the Asia-Pacific + Climate Data Collaborative{' '} + + +
+
+ {isLoading ? ( +
+ +
+ ) : ( +
+ {data?.sectors.map((sectors: any) => ( + +
+
+ {'Sectors +
+
+
+ + {sectors.name} + + +
+
+ + {sectors.datasetCount} + + Datasets +
+
+
+ + ))} +
+ )} +
+ ); +}; + +export default Sectors; diff --git a/app/[locale]/(user)/components/datasets.module.scss b/app/[locale]/(user)/components/datasets.module.scss new file mode 100644 index 00000000..1d53d2fa --- /dev/null +++ b/app/[locale]/(user)/components/datasets.module.scss @@ -0,0 +1,10 @@ +.List { + a { + min-height: 280px; + max-height: 280px; + @media screen and (max-width: 1120px) { + min-height: 360px; + max-height: 360px; + } + } +} diff --git a/app/[locale]/(user)/page.tsx b/app/[locale]/(user)/page.tsx index b8297540..c4649f26 100644 --- a/app/[locale]/(user)/page.tsx +++ b/app/[locale]/(user)/page.tsx @@ -1,9 +1,13 @@ import { Content } from './components/Content'; +import Datasets from './components/Datasets'; +import Sectors from './components/Sectors'; export default async function Home() { return ( -
+
+ +
); } diff --git a/app/[locale]/(user)/sectors/[sectorSlug]/page.tsx b/app/[locale]/(user)/sectors/[sectorSlug]/page.tsx index a83cbbf7..a7f5e60a 100644 --- a/app/[locale]/(user)/sectors/[sectorSlug]/page.tsx +++ b/app/[locale]/(user)/sectors/[sectorSlug]/page.tsx @@ -1,10 +1,11 @@ 'use client'; import React from 'react'; +import { fetchDatasets } from '@/fetch'; +import { graphql } from '@/gql'; import { useQuery } from '@tanstack/react-query'; + import { GraphQL } from '@/lib/api'; -import { graphql } from '@/gql'; -import { fetchDatasets } from '@/fetch'; import { ErrorPage } from '@/components/error'; import { Loading } from '@/components/loading'; import ListingComponent from '../../components/ListingComponent'; @@ -20,15 +21,15 @@ const sectorQueryDoc = graphql(` } `); -const SectorDetailsPage = ({ params }: { params: { categorySlug: string } }) => { +const SectorDetailsPage = ({ + params, +}: { + params: { categorySlug: string }; +}) => { const { data, isLoading, isError } = useQuery( [`get_category_details_${params.categorySlug}`], () => - GraphQL( - sectorQueryDoc, - {}, - { filters: { slug: params.categorySlug } } - ) + GraphQL(sectorQueryDoc, {}, { filters: { slug: params.categorySlug } }) ); if (isError) return ; @@ -48,9 +49,10 @@ const SectorDetailsPage = ({ params }: { params: { categorySlug: string } }) => breadcrumbData={breadcrumbData} categoryName={sector?.name} categoryDescription={sector?.description ?? undefined} - categoryImage="/obi.jpg" + categoryImage={`/Sectors/${sector.name}.svg`} + /> ); }; -export default SectorDetailsPage; \ No newline at end of file +export default SectorDetailsPage; diff --git a/app/[locale]/(user)/sectors/page.tsx b/app/[locale]/(user)/sectors/page.tsx index a7fa731c..40c249f7 100644 --- a/app/[locale]/(user)/sectors/page.tsx +++ b/app/[locale]/(user)/sectors/page.tsx @@ -7,13 +7,12 @@ import { useQuery } from '@tanstack/react-query'; import { Divider, SearchInput, Select, Text } from 'opub-ui'; import { GraphQL } from '@/lib/api'; +import { cn } from '@/lib/utils'; import BreadCrumbs from '@/components/BreadCrumbs'; import { ErrorPage } from '@/components/error'; import { Loading } from '@/components/loading'; -import { cn } from '@/lib/utils'; import Styles from '../datasets/dataset.module.scss'; - const sectorsListQueryDoc: any = graphql(` query SectorsList { sectors { @@ -42,6 +41,13 @@ const SectorsListingPage = () => { ) ); + function capitalizeWords(name: any) { + return name + .split('-') // Split by '-' + .map((word: any) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each word + .join('+'); // Join with '+' + } + return (
{
@@ -139,22 +145,22 @@ const SectorsListingPage = () => {
{getSectorsList.data?.sectors.map((sectors: any) => ( - +
{'Sectors
-
- +
+ {sectors.name} diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/page.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/page.tsx index 1723fb91..680d67b5 100644 --- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/page.tsx +++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/page.tsx @@ -5,7 +5,7 @@ import { useRouter } from 'next/navigation'; import { graphql } from '@/gql'; import { useMutation, useQuery } from '@tanstack/react-query'; import { parseAsString, useQueryState } from 'next-usequerystate'; -import { DataTable, IconButton, toast } from 'opub-ui'; +import { Button, DataTable, IconButton, toast } from 'opub-ui'; import { GraphQL } from '@/lib/api'; import { Icons } from '@/components/icons'; @@ -50,6 +50,19 @@ const deleteDatasetMutationDoc: any = graphql(` } `); +const unPublishDataset: any = graphql(` + mutation unPublishDatasetMutation($datasetId: UUID!) { + unPublishDataset(datasetId: $datasetId) { + __typename + ... on TypeDataset { + id + title + created + } + } + } +`); + export default function DatasetPage({ params, }: { @@ -72,6 +85,7 @@ export default function DatasetPage({ }, ]; + const AllDatasetsQuery: { data: any; isLoading: boolean; refetch: any } = useQuery( [`fetch_datasets_org_dashboard`], @@ -124,7 +138,6 @@ export default function DatasetPage({ }, } ); - const CreateDatasetMutation: { mutate: any; isLoading: boolean; error: any } = useMutation( () => @@ -146,6 +159,30 @@ export default function DatasetPage({ }, } ); + const UnpublishDatasetMutation: { + mutate: any; + isLoading: boolean; + error: any; + } = useMutation( + [`unpublish_dataset`], + (data: { datasetId: string }) => + GraphQL( + unPublishDataset, + { + [params.entityType]: params.entitySlug, + }, + { datasetId: data.datasetId } + ), + { + onSuccess: () => { + toast(`Unpublished dataset successfully`); + AllDatasetsQuery.refetch(); + }, + onError: (err: any) => { + toast('Error: ' + err.message.split(':')[0]); + }, + } + ); const datasetsListColumns = [ { @@ -166,20 +203,33 @@ export default function DatasetPage({ { accessorKey: 'delete', header: 'Delete', - cell: ({ row }: any) => ( - { - DeleteDatasetMutation.mutate({ - datasetId: row.original?.id, - }); - }} - > - Delete - - ), + cell: ({ row }: any) => + navigationTab === 'published' ? ( + + ) : ( + { + DeleteDatasetMutation.mutate({ + datasetId: row.original?.id, + }); + }} + > + Delete + + ), }, ]; diff --git a/public/Sectors/Budgets.svg b/public/Sectors/Budgets.svg new file mode 100644 index 00000000..c6f7dfbc --- /dev/null +++ b/public/Sectors/Budgets.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/Sectors/Child Rights.svg b/public/Sectors/Child Rights.svg new file mode 100644 index 00000000..55ce6613 --- /dev/null +++ b/public/Sectors/Child Rights.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/Sectors/Climate Finance.svg b/public/Sectors/Climate Finance.svg new file mode 100644 index 00000000..b3b0521b --- /dev/null +++ b/public/Sectors/Climate Finance.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/Sectors/Disaster Risk Reduction.svg b/public/Sectors/Disaster Risk Reduction.svg new file mode 100644 index 00000000..fda5e50d --- /dev/null +++ b/public/Sectors/Disaster Risk Reduction.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/Sectors/Law & Justice.svg b/public/Sectors/Law & Justice.svg new file mode 100644 index 00000000..d3dc06da --- /dev/null +++ b/public/Sectors/Law & Justice.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/Sectors/Urban Development.svg b/public/Sectors/Urban Development.svg new file mode 100644 index 00000000..49a1a7fc --- /dev/null +++ b/public/Sectors/Urban Development.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/homepage_illustartion.png b/public/homepage_illustartion.png new file mode 100644 index 00000000..acf6500e Binary files /dev/null and b/public/homepage_illustartion.png differ