diff --git a/apps/goat/.env.example b/apps/goat/.env.example deleted file mode 100644 index 43ff0738..00000000 --- a/apps/goat/.env.example +++ /dev/null @@ -1,34 +0,0 @@ -######################################################################## -# ------------ MANDATORY (CHANGE ACCORDING TO YOUR SETUP) ------------# -######################################################################## -# Since .env is gitignored, you can use .env.example to build a new ` -# .env` file when you clone the repo. This file will be committed -# to version control, so make sure not to have any secrets in it. -# If you are cloning this repo, create a copy of this file named `.env` -# and populate it with your secrets. -######################################################################## - -############ -# BASICS # -############ -NEXT_PUBLIC_APP_URL= -NEXT_PUBLIC_API_URL= - -######### -# MAP # -######### -NEXT_PUBLIC_MAP_TOKEN= -ANALYSIS_API_URL= -GEOAPI_URL= -ACCOUNTS_API_URL= - -############### -# NEXT AUTH # -############### -# @see: https://next-auth.js.org/providers/keycloak -NEXTAUTH_URL= -NEXTAUTH_SECRET= -KEYCLOAK_ISSUER= -KEYCLOAK_CLIENT_ID= -KEYCLOAK_CLIENT_SECRET= - diff --git a/apps/goat/.escheckrc b/apps/goat/.escheckrc deleted file mode 100644 index f5c01ac6..00000000 --- a/apps/goat/.escheckrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "ecmaVersion": "es2019", - "module": false, - "files": "./.next/static/chunks/**/*.js" -} \ No newline at end of file diff --git a/apps/goat/.eslintignore b/apps/goat/.eslintignore deleted file mode 100644 index 3c3629e6..00000000 --- a/apps/goat/.eslintignore +++ /dev/null @@ -1 +0,0 @@ -node_modules diff --git a/apps/goat/.eslintrc.js b/apps/goat/.eslintrc.js deleted file mode 100644 index b858ca80..00000000 --- a/apps/goat/.eslintrc.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - root: true, - extends: ["p4b"], -}; diff --git a/apps/goat/.gitignore b/apps/goat/.gitignore deleted file mode 100644 index 3acab6b5..00000000 --- a/apps/goat/.gitignore +++ /dev/null @@ -1,41 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build -tsconfig.tsbuildinfo - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# local env files -.env.local -.env.development.local -.env.test.local -.env.production.local - -# vercel -.vercel -/test-results/ -/playwright-report/ -/playwright/.cache/ - -#other -/.idea diff --git a/apps/goat/.nvmrc b/apps/goat/.nvmrc deleted file mode 100644 index 3f430af8..00000000 --- a/apps/goat/.nvmrc +++ /dev/null @@ -1 +0,0 @@ -v18 diff --git a/apps/goat/.size-limit.cjs b/apps/goat/.size-limit.cjs deleted file mode 100644 index 83aba704..00000000 --- a/apps/goat/.size-limit.cjs +++ /dev/null @@ -1,39 +0,0 @@ -// Just a basic example for size limit with simple file preset -// @link https://github.com/ai/size-limit - -let manifest; -try { - manifest = require('./.next/build-manifest.json'); -} catch (e) { - throw new Error( - 'Cannot find a NextJs build folder, did you forget to build ?' - ); -} -const pages = manifest.pages; - -const limitCfg = { - defaultSize: '150kb', -}; - - - -const getPageLimits = () => { - let pageLimits = []; - for (const [uri, paths] of Object.entries(pages)) { - pageLimits.push({ - name: `Page '${uri}'`, - limit: limitCfg.pages?.[uri] ?? limitCfg.defaultSize, - path: paths.map((p) => `.next/${p}`), - }); - } - return pageLimits; -}; - -module.exports = [ - ...getPageLimits(), - { - name: 'CSS', - path: ['.next/static/css/**/*.css'], - limit: '15 kB', - }, -]; \ No newline at end of file diff --git a/apps/goat/.vscode/settings.json b/apps/goat/.vscode/settings.json deleted file mode 100644 index b0ef59cf..00000000 --- a/apps/goat/.vscode/settings.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "typescript.tsdk": "../../node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/lib", - "typescript.enablePromptUseWorkspaceTsdk": true -} \ No newline at end of file diff --git a/apps/goat/Dockerfile b/apps/goat/Dockerfile deleted file mode 100644 index 2270feed..00000000 --- a/apps/goat/Dockerfile +++ /dev/null @@ -1,48 +0,0 @@ -FROM node:18-alpine AS base - -FROM base AS builder -RUN apk add --no-cache libc6-compat -RUN apk update -# Set working directory -WORKDIR /app -RUN npm install -g turbo -COPY . . -COPY .env.docker /app/apps/goat/.env -RUN turbo prune --scope=@p4b/web --docker - -# Add lockfile and package.json's of isolated subworkspace -FROM base AS installer -RUN apk add --no-cache libc6-compat -RUN apk update -WORKDIR /app - -# First install the dependencies (as they change less often) -COPY --from=builder /app/out/json/ . -COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml -RUN corepack enable -RUN pnpm install --frozen-lockfile - -# Build the project -COPY --from=builder /app/out/full/ . -RUN pnpm dlx turbo run build --filter=goat - -FROM base AS runner -WORKDIR /app - -# Don't run production as root -RUN addgroup --system --gid 1001 nodejs -RUN adduser --system --uid 1001 nextjs -USER nextjs - -COPY --from=installer /app/apps/goat/next.config.js . -COPY --from=installer /app/apps/goat/package.json . - -# Automatically leverage output traces to reduce image size -# https://nextjs.org/docs/advanced-features/output-file-tracing -COPY --from=installer --chown=nextjs:nodejs /app/apps/goat/.next/standalone ./ -COPY --from=installer --chown=nextjs:nodejs /app/apps/goat/.next/static ./apps/goat/.next/static -COPY --from=installer --chown=nextjs:nodejs /app/apps/goat/public ./apps/goat/public - -ENV HOSTNAME localhost - -CMD node apps/goat/server.js diff --git a/apps/goat/README.md b/apps/goat/README.md deleted file mode 100644 index 3fc016f4..00000000 --- a/apps/goat/README.md +++ /dev/null @@ -1,30 +0,0 @@ -## Getting Started - -First, run the development server: - -```bash -yarn dev -``` - -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `pages/index.ts`. The page auto-updates as you edit the file. - -[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. - -The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn/foundations/about-nextjs) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_source=github.com&utm_medium=referral&utm_campaign=turborepo-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/apps/goat/app/[lng]/(dashboard)/DashboardSidebar.tsx b/apps/goat/app/[lng]/(dashboard)/DashboardSidebar.tsx deleted file mode 100644 index fa5853e3..00000000 --- a/apps/goat/app/[lng]/(dashboard)/DashboardSidebar.tsx +++ /dev/null @@ -1,110 +0,0 @@ -"use client"; - -import { makeStyles } from "@/lib/theme"; -import { List, ListItem, ListItemButton, ListItemIcon } from "@mui/material"; -import Link from "next/link"; -import { usePathname } from "next/navigation"; -import { useState } from "react"; -import { v4 } from "uuid"; -import { Text, useTheme } from "@p4b/ui/components/theme"; -import { Icon } from "@p4b/ui/components/Icon"; -import type { ICON_NAME } from "@p4b/ui/components/Icon"; - -export type DashboardSidebarProps = { - items: { link: string; icon: ICON_NAME; placeholder: string }[]; - width: number; - extended_width: number; - children: React.ReactNode; - lng: string; -}; - -/** - * A functional component that renders a dashboard sidebar. - * @param {DashboardSidebarProps} props - The props object containing the items and children. - * @returns The rendered dashboard sidebar component. - */ - -export function DashboardSidebar(props: DashboardSidebarProps) { - const { items, children, lng } = props; - - const pathname = usePathname(); - - // styling - const { classes, cx } = useStyles(props)(); - const theme = useTheme(); - - // Component States - const [hover, setHover] = useState(false); - const [_, setActive] = useState(items[0].placeholder); - - function activeColor(path) { - if (pathname.includes(`/${lng}${path}`)) { - return theme.colors.palette.focus.main; - } else { - return theme.colors.palette.light.greyVariant4; - } - } - - return ( - <> - - {children} - - ); -} - -const useStyles = (props: DashboardSidebarProps) => - makeStyles({ name: { DashboardSidebar } })((theme) => ({ - root: { - zIndex: "20", - paddingTop: "52px", - backgroundColor: theme.colors.useCases.surfaces.background, - cursor: "pointer", - width: props.width, - left: 0, - top: 0, - bottom: 0, - position: "fixed", - transition: "width 0.4s ease", - display: "flex", - overflow: "hidden", - flexDirection: "column", - boxShadow: "0px 1px 5px 0px #0000001F, 0px 2px 2px 0px #00000024, 0px 3px 1px -2px #00000033", - "&:hover": { - width: props.extended_width, - }, - }, - itemList: { - "&:hover": { - backgroundColor: `${theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant2}aa`, - }, - }, - textName: { - textDecoration: "none", - }, - })); diff --git a/apps/goat/app/[lng]/(dashboard)/content/AccessSettings.tsx b/apps/goat/app/[lng]/(dashboard)/content/AccessSettings.tsx deleted file mode 100644 index b53f31f1..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/AccessSettings.tsx +++ /dev/null @@ -1,214 +0,0 @@ -import React from "react"; -import { useState } from "react"; -import { v4 } from "uuid"; - -import { Avatar } from "@p4b/ui/components/Avatar"; -import { Divider } from "@p4b/ui/components/DataDisplay"; -import { RadioInput, SelectField } from "@p4b/ui/components/Inputs"; -import { Text, Icon, Button } from "@p4b/ui/components/theme"; -import type { IconId } from "@p4b/ui/components/theme"; -import { makeStyles } from "@p4b/ui/lib/ThemeProvider"; - -interface AccessSettingsProps { - changeState: (value: { name: string; icon: React.ReactNode; value: string } | null) => void; - setModalView: (value: number) => void; -} - -const AccessSettings = (props: AccessSettingsProps) => { - const { changeState, setModalView } = props; - - const { classes } = useStyles(); - - // Component States - const [settingChecked, setSettingChecked] = useState("private"); - - //dumb data - const organizationPermissions = [ - { - name:
View
, - value: "view", - }, - { - name:
Edit
, - value: "edit", - }, - { - name:
Download
, - value: "download", - }, - ]; - - const teams = [ - { - name: ( -
- {" "} - - Team 1 -
- ), - value: "team1", - permission: "", - }, - { - name: ( -
- - Team 2 -
- ), - value: "team2", - permission: "", - }, - { - name: ( -
- - Team 3 -
- ), - value: "team3", - permission: "", - }, - ]; - - const accessSettings: { - name: string; - value: string; - icon: IconId; - description: string; - child: React.ReactNode; - }[] = [ - { - name: "Private", - value: "private", - icon: "lock", - description: "Only you have access", - child: <>, - }, - { - name: "Organization", - value: "organization", - icon: "coorperate", - description: "Everyone within your organization have access", - child: ( -
- @Organization_name - -
- ), - }, - { - name: "Teams", - value: "teams", - icon: "team", - description: "Set permission by teams", - child: ( -
- - {teams.map((team) => ( - <> -
- {team.name} - -
- - - ))} -
- ), - }, - ]; - - return ( -
-
- {accessSettings.map((setting, index) => ( - <> -
-
- -
- {setting.name} - {settingChecked === setting.value ? ( - - {setting.description} - - ) : null} -
-
- -
- {settingChecked === setting.value ? setting.child : null} - {index !== accessSettings.length - 1 ? : null} - - ))} -
-
- - -
-
- ); -}; - -const useStyles = makeStyles({ name: { AccessSettings } })((theme) => ({ - italic: { - fontStyle: "italic", - }, - buttons: { - display: "flex", - alignItems: "center", - justifyContent: "end", - gap: theme.spacing(2), - marginTop: theme.spacing(3), - }, - visibilitySettings: { - display: "flex", - marginTop: theme.spacing(3), - justifyContent: "space-between", - alignItems: "center", - }, - visibility: { - display: "flex", - gap: theme.spacing(1), - }, - SettingInputWrapper: { - display: "flex", - alignItems: "center", - justifyContent: "space-between", - gap: theme.spacing(3), - marginTop: theme.spacing(3), - }, - teamName: { - display: "flex", - alignItems: "center", - gap: theme.spacing(3), - }, - selectField: { - flexGrow: "1", - }, - divider: { - padding: "0", - }, -})); - -export default AccessSettings; diff --git a/apps/goat/app/[lng]/(dashboard)/content/AddLayerManagement.tsx b/apps/goat/app/[lng]/(dashboard)/content/AddLayerManagement.tsx deleted file mode 100644 index a97e9d54..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/AddLayerManagement.tsx +++ /dev/null @@ -1,304 +0,0 @@ -import FileUploadView from "@/app/[lng]/(dashboard)/content/FileUploadView"; -import { loadLayerService } from "@/lib/services/dashboard"; -import { supportedFileTypes } from "@/lib/utils/helpers"; -import UploadFileIcon from "@mui/icons-material/UploadFile"; -import { Button } from "@mui/material"; -import Avatar from "@mui/material/Avatar"; -import Box from "@mui/material/Box"; -import Tab from "@mui/material/Tab"; -import Tabs from "@mui/material/Tabs"; -import Typography from "@mui/material/Typography"; -import * as React from "react"; -import { useState } from "react"; -import { FileUploader } from "react-drag-drop-files"; - -import { CircularProgress } from "@p4b/ui/components/CircularProgress"; -import { CollapseAlert } from "@p4b/ui/components/CollapseAlert"; -import { Divider } from "@p4b/ui/components/DataDisplay"; -import { TextField } from "@p4b/ui/components/Inputs"; -import Link from "@p4b/ui/components/Link"; -import RadioButtonsGroup from "@p4b/ui/components/RadioButtonsGroup"; -import { makeStyles } from "@p4b/ui/lib/ThemeProvider"; -import type {ISelectedFolder} from "@/types/dashboard/content"; - -interface TabPanelProps { - children?: React.ReactNode; - index: number; - value: number; -} - -// todo: check this if it's correct - -interface LoadedLayerDataProps { - link: string; -} - -interface FileProps { - name: string; -} - -interface AddLayerManagementProps { - selectedFolder: ISelectedFolder | null; - setAddLayerMode: (value: boolean) => void; - addLayer: (value: object) => void; -} - -function CustomTabPanel(props: TabPanelProps) { - const { children, value, index, ...other } = props; - const { classes } = useStyles(); - - return ( - - ); -} - -function a11yProps(index: number) { - return { - id: `simple-tab-${index}`, - "aria-controls": `simple-tabpanel-${index}`, - }; -} - -const radioButtonLabels = [ - { - value: "Imagery", - desc: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis ", - }, - { - value: "Vector", - desc: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis ", - }, -]; - -export default function AddLayerManagement(props: AddLayerManagementProps) { - const { selectedFolder, setAddLayerMode, addLayer } = props; - - const [tabValue, setTabValue] = useState(0); - const [radioButtonValue, setRadioButtonValue] = useState("Imagery"); - const [url, setUrl] = useState(""); - const [loadedLayerData, setLoadedLayerData] = useState(null); - const [errorOpen, setErrorOpen] = useState(false); - const [uploadErrorOpen, setUploadErrorOpen] = useState(false); - const [loading, setLoading] = useState(false); - const [selectedFile, setSelectedFile] = useState(null); - - const { classes } = useStyles(); - - const handleChange = (event: React.SyntheticEvent, newValue: number) => { - console.log('handleChange event', event) - setTabValue(newValue); - }; - - const resetAddLayerHandler = () => { - setLoadedLayerData(null); - setUploadErrorOpen(false); - setSelectedFile(null); - setUrl(""); - setRadioButtonValue("Imagery"); - }; - - const addLayerHandler = async () => { - //todo change - const body = { - folder_id: selectedFolder?.id, - name: "Layer name", - description: "Layer description", - tags: ["tag1", "tag2"], - thumbnail_url: url, - data_source: "data_source plan4better example", - data_reference_year: 2020, - type: "table", - }; - - addLayer(body); - resetAddLayerHandler(); - setAddLayerMode(false); - }; - - const loadUrlHandler = async () => { - setLoading(true); - - //todo check and add validations - const res = await loadLayerService(url); - - if (!res) { - setErrorOpen(true); - } else { - setLoadedLayerData(res); - } - - setLoading(false); - }; - - const dragDropHandler = (file: React.SetStateAction) => { - setLoading(true); - - const fileNameParts = file.name.split("."); - const fileExtension = fileNameParts[fileNameParts.length - 1].toLowerCase(); - - if (!supportedFileTypes.includes(fileExtension)) { - setUploadErrorOpen(true); - setLoading(false); - return; - } else { - setSelectedFile(file); - } - setTimeout(() => setLoading(false), 2000); - }; - - return ( - - - - - - - - - {loading ? ( - - - - ) : selectedFile ? ( - - - - - - {selectedFile.name} - - - - - - - - ) : ( - } - /> - )} - - - - - - - {loadedLayerData ? ( - - - {loadedLayerData?.link} - - - - - - - - ) : ( - <> - {loading ? ( - - - - ) : ( - <> - Paste the URL here: - - - - - - )} - - )} - - - - ); -} - -const useStyles = makeStyles()(() => ({ - root: { - width: "100%", - }, - tabsContainer: { - borderBottom: 1, - borderColor: "divider", - }, - tab: { - width: "50%", - }, - fileInfo: { - display: "flex", - alignItems: "center", - overflow: "hidden", - gap: "20px", - }, - loading: { - display: "flex", - justifyContent: "center", - }, - loadUrlWrapper: { - display: "flex", - alignItems: "center", - justifyContent: "space-between", - width: "100%", - gap: "10px", - margin: "10px 0", - }, - buttonsWrapper: { - display: "flex", - justifyContent: "flex-end", - marginY: "10px", - }, - width100: { - width: "100%", - }, - dropzone: { - textAlign: "center", - padding: "24px 5px", - border: "3px dashed #eeeeee", - backgroundColor: "#fafafa", - color: "#bdbdbd", - cursor: "pointer", - marginBottom: "20px", - height: "185px", - display: "flex", - flexDirection: "column", - }, -})); diff --git a/apps/goat/app/[lng]/(dashboard)/content/ContentInfoModal.tsx b/apps/goat/app/[lng]/(dashboard)/content/ContentInfoModal.tsx deleted file mode 100644 index b6395b3b..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/ContentInfoModal.tsx +++ /dev/null @@ -1,144 +0,0 @@ -import React, { useState } from "react"; -import { v4 } from "uuid"; - -import { Divider } from "@p4b/ui/components/DataDisplay"; -import { TextField } from "@p4b/ui/components/Inputs"; -import { Text, IconButton } from "@p4b/ui/components/theme"; -import { makeStyles } from "@p4b/ui/lib/ThemeProvider"; - -interface ContentInfoModalProps { - sampleModalData: { - tag: string; - data: string; - }[]; -} - -const ContentInfoModal = (props: ContentInfoModalProps) => { - const { sampleModalData } = props; - - const { classes } = useStyles(); - - // Component States - const [editMode, setEditMode] = useState(false); - - return ( -
-
- {editMode ? ( - <> - - - .xml - - - setEditMode(!editMode)} - type="submit" - iconId="noBgCheck" - size="small" - className={classes.icon} - iconVariant="focus" - /> - setEditMode(!editMode)} - type="submit" - iconId="close" - size="small" - iconVariant="error" - /> - - - ) : ( - <> - - Study1_3994.xml{" "} - - setEditMode(!editMode)} type="submit" iconId="edit" size="small" /> - - )} -
- - {sampleModalData?.map((data) => ( -
- - {data.tag}:{" "} - - - {data.data} - -
- ))} - -
- ); -}; - -const useStyles = makeStyles({ name: { ContentInfoModal } })((theme) => ({ - modalHeader: { - display: "flex", - justifyContent: "space-between", - alignItems: "center", - }, - modalListItem: { - display: "flex", - alignItems: "center", - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, - modalListItemTitle: { - fontWeight: "800", - width: "100%", - maxWidth: "35%", - }, - modalListItemData: { - width: "100%", - maxWidth: "60%", - overflow: "hidden", - textOverflow: "ellipsis", - whiteSpace: "nowrap", - color: `${theme.colors.palette[theme.isDarkModeEnabled ? "light" : "dark"].main}80`, - }, - modalSectionTitle: { - fontWeight: "800", - paddingBottom: theme.spacing(3), - }, - divider: { - margin: `0px 0px ${theme.spacing(3)}px 0px`, - }, - projectText: { - padding: `0px ${theme.spacing(3)}px`, - paddingBottom: theme.spacing(3), - display: "flex", - justifyContent: "space-between", - alignItems: "center", - }, - openLink: { - textDecoration: "none", - display: "flex", - alignItems: "center", - gap: theme.spacing(2), - }, - inputModal: { - "&.MuiInputBase-input": { - padding: `0px ${theme.spacing(2)}px`, - }, - width: "150px", - }, - inputWrapper: { - marginRight: theme.spacing(1), - }, - icon: { - color: "green", - }, - iconWrapper: {}, -})); - -export default ContentInfoModal; diff --git a/apps/goat/app/[lng]/(dashboard)/content/ContentManagement.tsx b/apps/goat/app/[lng]/(dashboard)/content/ContentManagement.tsx deleted file mode 100644 index a2940180..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/ContentManagement.tsx +++ /dev/null @@ -1,606 +0,0 @@ -"use client"; - -import EditFolderMenu from "@/app/[lng]/(dashboard)/content/EditFolderMenu"; -import HeaderCard from "@/app/[lng]/(dashboard)/content/HeaderCard"; -import MoreMenu from "@/app/[lng]/(dashboard)/content/MoreMenu"; -import TreeViewFilter from "@/app/[lng]/(dashboard)/content/TreeViewFilter"; -import GridContainer from "@/components/grid/GridContainer"; -import SingleGrid from "@/components/grid/SingleGrid"; -import ContentInfoModal from "@/components/modals/ContentInfoModal"; -import { API } from "@/lib/api/apiConstants"; -import { - addFolderService, - addLayerService, - contentFoldersFetcher, - contentLayersFetcher, - contentProjectsFetcher, - contentReportsFetcher, - deleteFolderService, - deleteLayerService, - updateFolderService, -} from "@/lib/services/dashboard"; -import { formatDate } from "@/lib/utils/helpers"; -import FolderIcon from "@mui/icons-material/Folder"; -import { useRouter } from "next/navigation"; -import React, {useCallback, useEffect, useState} from "react"; -import useSWR from "swr"; -import useSWRMutation from "swr/mutation"; - -import { FileManagementTable, Chip } from "@p4b/ui/components/DataDisplay"; -import Dialog from "@p4b/ui/components/Dialog"; -import { TextField } from "@p4b/ui/components/Inputs"; -import Modal from "@p4b/ui/components/Modal"; -import { Card } from "@p4b/ui/components/Surfaces"; -import { Text, IconButton, Button } from "@p4b/ui/components/theme"; -import { makeStyles } from "@p4b/ui/lib/ThemeProvider"; -import type {ISelectedFolder} from "@/types/dashboard/content"; -import type {IDashboardTableRowInfo} from "@/types/dashboard/content"; - -const columnNames = [ - { - id: "name", - label: "", - numeric: false, - isSortable: false, - icon: FolderIcon, - }, - { - id: "type", - label: "Type", - numeric: false, - isSortable: true, - }, - { - id: "modified", - label: "Modified", - numeric: false, - isSortable: true, - }, - { - id: "size", - label: "Size", - numeric: false, - isSortable: true, - }, -]; - -interface ModalContent { - id: string; - name: string; - chip: React.ReactNode; - modified: string, - path: string[], - size: string, - label: string, - info: { - tag: string; - data: string; - }[]; -} - -interface IRow { - id: string, - name: string, - chip: React.ReactNode, - modified: string, - path: string[], - size: string, - label: string, - info: object[], - feature_layer_type?: string, - type?: string -} - - -const ContentManagement = () => { - const { - data: folderData, - mutate: getFoldersMutation, - } = useSWR(API.folder, contentFoldersFetcher); - const { data: layerData, trigger: layerTrigger } = useSWRMutation(API.layer, contentLayersFetcher); - const { data: reportData, trigger: reportTrigger } = useSWRMutation(API.report, contentReportsFetcher); - const { data: projectData, trigger: projectTrigger } = useSWRMutation(API.project, contentProjectsFetcher); - - const [modalContent, setModalContent] = useState(null); - const [anchorEl, setAnchorEl] = useState(null); - const [folderAnchorData, setFolderAnchorData] = useState<({ anchorEl: EventTarget & HTMLButtonElement; folder: ISelectedFolder }) | null>(null); - const [path, setPath] = useState(["home"]); - const [selectedFilters, setSelectedFilters] = useState([]); - const [selectedFolder, setSelectedFolder] = useState(null); - const [openEditFolderModal, setOpenEditFolderModal] = useState(false); - const [openAddFolderModal, setOpenAddFolderModal] = useState(false); - const [editedFolderName, setEditedFolderName] = useState(""); - const [addedFolderName, setAddedFolderName] = useState(""); - const [rows, setRows] = useState([]); - const [dialogContent, setDialogContent] = useState(null); - - const { classes } = useStyles(); - const router = useRouter(); - - // this is the Info Modal - const modal = modalContent - ? { - header: ( -
- - Info - - setModalContent(null)} iconId="close" /> -
- ), - body: , - action: ( -
- {modalContent.label === "layer" ? ( - - ) : null} - -
- ), - } - : null; - - // this is the Edit folder Modal - const editModalContent = openEditFolderModal - ? { - header: ( -
- - Edit - - -
- ), - body: ( - { - setEditedFolderName(value); - }} - /> - ), - action: ( -
- - -
- ), - } - : null; - - const addFolderModalContent = openAddFolderModal - ? { - header: ( -
- - Add new folder - - -
- ), - body: ( - { - setAddedFolderName(value); - }} - /> - ), - action: ( -
- - -
- ), - } - : null; - - const getContentByFolder = useCallback((id: string) => { - layerTrigger(id); - projectTrigger(id); - reportTrigger(id); - }, [layerTrigger, projectTrigger, reportTrigger]); - - function closeTablePopover() { - setAnchorEl(null); - setDialogContent(null); - } - - function closeFolderPopover() { - setFolderAnchorData(null); - } - - function handleSelectFolder(folder) { - setSelectedFolder(folder); - getContentByFolder(folder.id); - } - - async function deleteFolderHandler() { - if (folderAnchorData?.folder?.id) { - await deleteFolderService(API.folder, folderAnchorData.folder.id); - closeFolderPopover(); - await getFoldersMutation(); - setSelectedFolder(null); - } - } - - async function updateFolderHandler() { - if (folderAnchorData?.folder?.id) { - await updateFolderService(API.folder, folderAnchorData.folder.id, {name: editedFolderName}); - closeFolderPopover(); - setOpenEditFolderModal(false); - await getFoldersMutation(); - } - } - - async function addFolderHandler() { - await addFolderService(API.folder, { name: addedFolderName }); - setOpenAddFolderModal(false); - await getFoldersMutation(); - } - - function closeEditeModal() { - setOpenEditFolderModal(false); - setEditedFolderName(""); - closeFolderPopover(); - } - - function closeAddFolderModal() { - setOpenAddFolderModal(false); - setAddedFolderName(""); - } - - async function addLayer(body) { - const res = await addLayerService(API.layer, body); - await layerTrigger(res.folder_id); - } - - async function handleDeleteItem(data) { - await deleteLayerService(API[data.label], data.id); - getContentByFolder(data.folder_id); - } - - useEffect(() => { - let filteredRows: IRow[] = []; - - if (layerData?.items) { - filteredRows.push( - ...layerData.items.map((item) => { - return { - ...item, - id: item.id, - name: item?.name, - chip: , - modified: formatDate(item?.metadata?.updated_at, "DD MMM YY"), - path: ["home"], - size: `${item?.metadata?.size || ""} kb`, - label: "layer", - info: [ - { - tag: "Name", - data: item?.name, - }, - { - tag: "Description", - data: item?.description, - }, - { - tag: "Type", - data: item?.type, - }, - { - tag: "Modified", - data: item?.updated_at, - }, - { - tag: "Size", - data: `${item?.metadata?.size || ""} kb`, - }, - ], - }; - }) - ); - } - - if (projectData?.items) { - filteredRows.push( - ...projectData?.items?.map((item) => { - return { - ...item, - id: item.id, - name: item?.name, - chip: , - modified: formatDate(item?.metadata?.updated_at, "DD MMM YY"), - path: ["home"], - size: `${item?.metadata?.size || ""} kb`, - label: "project", - info: [ - { - tag: "Name", - data: item?.name, - }, - { - tag: "Description", - data: item?.description, - }, - { - tag: "Type", - data: item?.type, - }, - { - tag: "Modified", - data: item?.updated_at, - }, - { - tag: "Size", - data: `${item?.metadata?.size || ""} kb`, - }, - ], - }; - }) - ); - } - - if (reportData?.items) { - filteredRows.push( - ...reportData?.items?.map((item) => { - return { - ...item, - id: item.id, - name: item?.name, - chip: , - modified: formatDate(item?.metadata?.updated_at, "DD MMM YY"), - path: ["home"], - size: `${item?.metadata?.size || ""} kb`, - label: "report", - info: [ - { - tag: "Name", - data: item?.name, - }, - { - tag: "Description", - data: item?.description, - }, - { - tag: "Type", - data: item?.type, - }, - { - tag: "Modified", - data: item?.updated_at, - }, - { - tag: "Size", - data: `${item?.metadata?.size || ""} kb`, - }, - ], - }; - }) - ); - } - - if (selectedFilters.length > 0) { - filteredRows = filteredRows.filter( - (item) => - selectedFilters.includes(item.label) || - (item.feature_layer_type && selectedFilters.includes(item.feature_layer_type)) || - (item.type && selectedFilters.includes(item.type)) - ); - } - - setRows(filteredRows); - }, [selectedFilters, projectData, layerData, reportData, classes.chip]); - - useEffect(() => { - if (folderData?.items[0] && selectedFolder === null) { - setSelectedFolder(folderData.items[0]); - getContentByFolder(folderData.items[0].id); - } - }, [folderData?.items, selectedFolder, getContentByFolder]); - - return ( - <> - - - - - - - - - setOpenAddFolderModal(true)} - setFolderAnchorData={setFolderAnchorData} - setSelectedFolder={setSelectedFolder} - /> - {folderAnchorData ? ( - - setOpenEditFolderModal(true)} - deleteFolderHandler={deleteFolderHandler} - /> - - ) : null} - - - - - - {anchorEl ? ( - - - - ) : null} - {modal ? ( - setModalContent(null)} - header={modal.header} - action={modal.action}> - {modal.body} - - ) : null} - {editModalContent ? ( - - {editModalContent.body} - - ) : null} - {addFolderModalContent ? ( - - {addFolderModalContent.body} - - ) : null} - - - - - ); -}; - -const useStyles = makeStyles({ name: { ContentManagement } })((theme) => ({ - container: { - display: "flex", - gap: theme.spacing(3), - }, - buttonTable: { - fontSize: "12px", - padding: "2px", - }, - treeView: { - padding: theme.spacing(3), - }, - tableCard: { - padding: theme.spacing(3), - }, - folder: { - display: "flex", - gap: theme.spacing(2), - }, - icon: { - opacity: 0.5, - }, - modalHeader: { - display: "flex", - justifyContent: "space-between", - alignItems: "center", - }, - modalHeaderText: { - fontWeight: "500", - }, - modalListItem: { - display: "flex", - alignItems: "center", - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, - modalListItemTitle: { - fontWeight: "800", - }, - modalListItemData: { - color: `${theme.colors.palette[theme.isDarkModeEnabled ? "light" : "dark"].main}80`, - }, - modalSectionTitle: { - fontWeight: "800", - paddingBottom: theme.spacing(3), - }, - divider: { - margin: `0px 0px ${theme.spacing(3)}px 0px`, - }, - projectText: { - padding: `0px ${theme.spacing(3)}px`, - paddingBottom: theme.spacing(3), - display: "flex", - justifyContent: "space-between", - alignItems: "center", - }, - openLink: { - textDecoration: "none", - display: "flex", - alignItems: "center", - gap: theme.spacing(2), - }, - inputModal: { - "&.css-1umu3ji-MuiInputBase-input-MuiOutlinedInput-input": { - padding: "0px", - }, - }, - buttons: { - display: "flex", - alignItems: "center", - justifyContent: "end", - gap: theme.spacing(2), - }, - moreInfoDialog: { - padding: "0px", - }, - chip: { - height: "auto", - fontSize: "12px", - "& .css-6od3lo-MuiChip-label": { - padding: "3px 0px", - }, - "& .mui-6od3lo-MuiChip-label": { - padding: "0px 10px", - }, - margin: "12px 0px", - padding: "3px 0px", - }, - width100: { - width: "100%", - }, -})); - -export default ContentManagement; diff --git a/apps/goat/app/[lng]/(dashboard)/content/CreateContent.tsx b/apps/goat/app/[lng]/(dashboard)/content/CreateContent.tsx deleted file mode 100644 index d5e7be83..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/CreateContent.tsx +++ /dev/null @@ -1,277 +0,0 @@ -import React, { useEffect, useRef, useState } from "react"; - -import { Divider } from "@p4b/ui/components/DataDisplay"; -import { FileUploadProgress } from "@p4b/ui/components/DataDisplay"; -import DropFieldFileInput from "@p4b/ui/components/DropFieldFileInput"; -import { SelectField, TextField } from "@p4b/ui/components/Inputs"; -import Stepper from "@p4b/ui/components/Stepper"; -import { Button, Text } from "@p4b/ui/components/theme"; -import { makeStyles } from "@p4b/ui/lib/ThemeProvider"; -import Image from "next/image"; - -interface CreateContentProps { - modalState: (value: boolean) => void; -} - -const CreateContent = (props: CreateContentProps) => { - const { modalState } = props; - - const { classes } = useStyles(); - - // refs - const stepperElem = useRef<{ handleComplete: () => void } | null>(null); - - // Input related - const [uploadType, setUploadType] = useState(""); - const [urlValue, setUrlValue] = useState(""); - const [saveFormat, setSaveFormat] = useState(""); - const [, setUploadFile] = useState(); - const [progressUpload, setProgressUpload] = useState(false); - - // dumb data - const layerTypes = [ - { - name: "URL", - value: "url", - }, - { - name: "Shapefile", - value: "shapefile", - }, - { - name: "Geopackage", - value: "geopackage", - }, - { - name: "Geobuf", - value: "geobuf", - }, - { - name: "CSV", - value: "csv", - }, - { - name: "XLSX", - value: "xlsx", - }, - { - name: "KML", - value: "kml", - }, - ]; - - // Add Content steps in case the chosen layer type is URL - let steps = [ - { - label: "Choose format", - status: "active", - child: ( -
- Chose Layer Type: - - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean - massa. Cum sociis natoque penatibus et magnis{" "} - -
- ), - }, - { - label: "Load content", - status: "active", - child: ( -
- Paste the URL here: -
- setUrlValue(value)} - size="small" - label="" - className={classes.FormInput} - /> - -
- - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean - massa. Cum sociis natoque penatibus et magnis{" "} - -
- ), - }, - { - label: "Store", - status: "active", - child: ( -
-
- geoportal - GeoPortal Title XYZ - - {urlValue} - -
- -
- Choose a storing format: - - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. - Aenean massa. Cum sociis natoque penatibus et magnis{" "} - -
-
- ), - }, - ]; - - // Add content steps in case we chose to import via local types (type !== url) - const uploadLocallySteps = [ - { - label: "Choose format", - status: "active", - child: ( -
- Chose Layer Type: - - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean - massa. Cum sociis natoque penatibus et magnis{" "} - -
- ), - }, - { - label: "Load content", - status: "active", - child: ( -
- setProgressUpload(true)} /> -
- ), - }, - { - label: "Store", - status: "active", - child: ( -
- console.log("finished")} finished={true} /> -
- ), - }, - ]; - - useEffect(() => { - if (uploadType) { - if (uploadType !== "url") { - const newSteps = steps.slice(0, -2); - // eslint-disable-next-line react-hooks/exhaustive-deps - steps = [...newSteps, ...uploadLocallySteps]; - } - completeStep(); - } - }, [uploadType, progressUpload]); - - //functions - const simpleActions = ( -
- - {saveFormat.length || progressUpload ? ( - - ) : null} -
- ); - - function loadUrl() { - if (urlValue) { - completeStep(); - } - } - - function completeStep() { - if (stepperElem.current !== null && stepperElem.current !== undefined) { - stepperElem.current.handleComplete(); - } - } - - return ( -
- -
- ); -}; - -const useStyles = makeStyles({ name: { Stepper } })((theme) => ({ - stepper: { - paddingBottom: theme.spacing(3), - }, - buttons: { - display: "flex", - alignItems: "center", - justifyContent: "end", - gap: theme.spacing(2), - }, - selectInput: { - margin: `${theme.spacing(3)}px 0px`, - }, - stepText: { - fontSize: "14px", - }, - descriptionText: { - fontStyle: "italic", - }, - FormInputWrapper: { - display: "flex", - alignItems: "center", - gap: theme.spacing(2), - }, - FormInput: { - flexGrow: "1", - margin: `${theme.spacing(3)}px 0px`, - }, - image: { - boxShadow: theme.shadows[2], - }, - textLink: { - fontStyle: "italic", - }, - urlPreview: { - display: "flex", - flexDirection: "column", - gap: theme.spacing(3), - }, -})); - -export default CreateContent; diff --git a/apps/goat/app/[lng]/(dashboard)/content/DownloadModal.tsx b/apps/goat/app/[lng]/(dashboard)/content/DownloadModal.tsx deleted file mode 100644 index c15827a3..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/DownloadModal.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { SelectField } from "@p4b/ui/components/Inputs"; -import { Text, Button } from "@p4b/ui/components/theme"; -import { makeStyles } from "@p4b/ui/lib/ThemeProvider"; - -interface DownloadModalProps { - name: React.ReactNode; - changeState: (value: { name: string; icon: React.ReactNode; value: string } | null) => void; -} - -const DownloadModal = (props: DownloadModalProps) => { - const { name, changeState } = props; - - const { classes } = useStyles(); - - // Dumb Data - // options to put in the select - const staticData = [ - { - name: "URL", - value: "url", - }, - { - name: "Shapefile", - value: "shapefile", - }, - { - name: "Geopackage", - value: "geopackage", - }, - { - name: "Geobuf", - value: "geobuf", - }, - { - name: "CSV", - value: "csv", - }, - { - name: "XLSX", - value: "xlsx", - }, - { - name: "KML", - value: "kml", - }, - ]; - - return ( -
- - {name ? name : ""} - - - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean - massa. Cum sociis natoque penatibus et magnis{" "} - -
- - -
-
- ); -}; -const useStyles = makeStyles({ name: { DownloadModal } })((theme) => ({ - selectInput: { - margin: `${theme.spacing(3)}px 0px`, - }, - bold: { - fontWeight: 800, - }, - italic: { - fontStyle: "italic", - }, - buttons: { - display: "flex", - alignItems: "center", - justifyContent: "end", - gap: theme.spacing(2), - marginTop: theme.spacing(3), - }, -})); -export default DownloadModal; diff --git a/apps/goat/app/[lng]/(dashboard)/content/EditFolderMenu.tsx b/apps/goat/app/[lng]/(dashboard)/content/EditFolderMenu.tsx deleted file mode 100644 index 6d584e1c..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/EditFolderMenu.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React from "react"; - -import Box from "@p4b/ui/components/Box"; -import { Icon, Text } from "@p4b/ui/components/theme"; -import { makeStyles } from "@p4b/ui/lib/ThemeProvider"; - -interface IEditFolderMenuProps { - openEditModal: () => void; - deleteFolderHandler: () => void; -} - -const EditFolderMenu = (props: IEditFolderMenuProps) => { - const { openEditModal, deleteFolderHandler } = props; - - const { classes } = useStyles(); - - return ( - - - - Edit - - - - Delete - - - ); -}; - -const useStyles = makeStyles({ name: { EditFolderMenu } })((theme) => ({ - container: { - padding: "5px", - }, - row: { - display: "flex", - alignItems: "center", - gap: theme.spacing(2), - padding: `${theme.spacing(1)}px ${theme.spacing(3)}px`, - cursor: "pointer", - "&:hover": { - backgroundColor: `${theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant1}80`, - }, - }, - icon: { - opacity: 0.5, - }, -})); - -export default EditFolderMenu; \ No newline at end of file diff --git a/apps/goat/app/[lng]/(dashboard)/content/FileUploadView.tsx b/apps/goat/app/[lng]/(dashboard)/content/FileUploadView.tsx deleted file mode 100644 index 748a2147..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/FileUploadView.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import UploadFileIcon from "@mui/icons-material/UploadFile"; -import { Typography } from "@mui/material"; -import Avatar from "@mui/material/Avatar"; -import * as React from "react"; - -import Box from "@p4b/ui/components/Box"; -import Link from "@p4b/ui/components/Link"; -import { makeStyles } from "@p4b/ui/lib/ThemeProvider"; - -export default function FileUploadView() { - const { classes } = useStyles(); - return ( - - - - - - Click to upload or drag and drop - - - Supported formats: geojson, shapefile, geopackage, geobuf, csv, xlsx, kml, mvt, wfs, binary, wms, xyz, - wmts, mvt, csv, xlsx, json - - - ); -} - -const useStyles = makeStyles({ name: { FileUploadView } })(() => ({ - root: { - display: "flex", - flexDirection: "column", - alignItems: "center", - }, - supportedFormats: { - fontSize: "12px", - marginTop: "10px", - }, - avatar: { - marginBottom: "16px", - backgroundColor: "#2BB3811F", - }, -})); diff --git a/apps/goat/app/[lng]/(dashboard)/content/HeaderCard.tsx b/apps/goat/app/[lng]/(dashboard)/content/HeaderCard.tsx deleted file mode 100644 index e06570b9..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/HeaderCard.tsx +++ /dev/null @@ -1,162 +0,0 @@ -import AddLayerManagement from "@/app/[lng]/(dashboard)/content/AddLayerManagement"; -import CreateContent from "@/app/[lng]/(dashboard)/content/CreateContent"; -import { useState } from "react"; -import { v4 } from "uuid"; - -import Modal from "@p4b/ui/components/Modal"; -import { Card } from "@p4b/ui/components/Surfaces"; -import { Button, Text, IconButton, Icon } from "@p4b/ui/components/theme"; -import { makeStyles } from "@p4b/ui/lib/ThemeProvider"; -import type { ISelectedFolder } from "@/types/dashboard/content"; - -interface HeaderCardProps { - selectedFolder: ISelectedFolder | null; - path: string[]; - setPath: (value: string[]) => void; - addLayer: (value: object) => void; -} - -const HeaderCard = (props: HeaderCardProps) => { - const { path, setPath, selectedFolder, addLayer } = props; - - const { classes } = useStyles(); - const [addContent, setAddContent] = useState(false); - const [addLayerMode, setAddLayerMode] = useState(false); - - function handlePathChange(indx: number) { - const newPath = [...path]; - setPath(newPath.slice(0, indx + 1)); - } - - return ( - -
-
- - Library - - - - {path.map((singlePath, indx) => ( - - {indx === 0 ? : null} - - handlePathChange(indx)}>{singlePath} - - {indx !== path.length - 1 ? / : null} - - ))} - - -
-
-
- - -
-
-
- setAddContent(false)} - header={ -
- - Add content - - setAddContent(false)} iconId="close" /> -
- }> - - - - {/*Add Layer Modal*/} - setAddLayerMode(false)} - header={ -
- - Add Layer - - setAddLayerMode(false)} iconId="close" /> -
- }> - - - - ); -}; - -const useStyles = makeStyles({ name: { HeaderCard } })((theme) => ({ - headerCard: { - marginBottom: theme.spacing(3), - }, - headerContainer: { - padding: `${theme.spacing(2)}px ${theme.spacing(3)}px`, - display: "flex", - justifyContent: "space-between", - alignItems: "center", - }, - headerText: { - fontWeight: 800, - width: "29%", - // width: "fit-content", - }, - headerPath: { - width: "60%", - display: "flex", - alignItems: "center", - gap: "100px", - }, - path: { - display: "flex", - alignItems: "center", - gap: theme.spacing(2), - }, - pathFile: { - cursor: "pointer", - }, - headerActions: { - width: "40%", - display: "flex", - alignItems: "center", - justifyContent: "end", - gap: theme.spacing(5) + theme.spacing(3), - }, - icon: { - marginRight: "10px", - }, - modalHeaderText: { - fontWeight: "500", - fontSize: "20px", - }, - modalHeader: { - display: "flex", - justifyContent: "space-between", - alignItems: "center", - }, -})); - -export default HeaderCard; diff --git a/apps/goat/app/[lng]/(dashboard)/content/MoreMenu.tsx b/apps/goat/app/[lng]/(dashboard)/content/MoreMenu.tsx deleted file mode 100644 index ebd0640a..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/MoreMenu.tsx +++ /dev/null @@ -1,171 +0,0 @@ -import DownloadModal from "@/components/modals/DownloadModal"; -import MoveModal from "@/components/modals/MoveModal"; -import ShareModal from "@/components/modals/ShareModal"; -import { useRouter } from "next/navigation"; -import React, { useState } from "react"; -import { v4 } from "uuid"; - -import Modal from "@p4b/ui/components/Modal"; -import { Icon, Text, IconButton } from "@p4b/ui/components/theme"; -import { makeStyles } from "@p4b/ui/lib/ThemeProvider"; -import type {IDashboardTableRowInfo} from "@/types/dashboard/content"; - -interface MoreMenuProps { - rowInfo: IDashboardTableRowInfo | null; - handleDeleteItem: (object: IDashboardTableRowInfo | null) => void; -} - -interface IComponentOptions { - [key: string]: React.ReactElement; -} - -const MoreMenu = (props: MoreMenuProps) => { - const { rowInfo, handleDeleteItem } = props; - - // Component States - const [selectedOption, setSelectedOption] = useState<{ - name: string; - icon: React.ReactNode; - value: string; - } | null>(null); - - const { classes } = useStyles(); - const router = useRouter(); - - const defaultOptions = [ - [ - { - value: "Info", - name: "Info", - icon: , - }, - ], - [ - { - value: "Duplicate", - name: "Duplicate", - icon: , - }, - { - value: "Move", - name: "Move", - icon: , - }, - { - value: "Delete", - name: "Delete", - icon: , - }, - ], - [ - { - value: "Share", - name: "Share", - icon: , - }, - { - value: "Download", - name: "Download", - icon: , - }, - ], - ]; - - if (rowInfo?.label === "layer") { - defaultOptions[0].push({ - value: "View", - name: "View", - icon: , - }); - } - - const componentOptions: IComponentOptions = { - Download: , - Share: ( - - ), - Move: , - }; - - const handleSelectOption = (item) => { - setSelectedOption(item); - - if (item.name === "View") { - router.push(`/content/preview/${rowInfo?.id}`); - } - - if (item.name === "Delete") { - handleDeleteItem(rowInfo); - } - }; - - const handleCloseModal = () => { - setSelectedOption(null); - }; - - return ( -
- {defaultOptions.map((options) => ( -
- {options.map((option) => ( -
handleSelectOption(option)}> - {option.icon} - {option.name} -
- ))} -
- ))} - - - {selectedOption?.name || ""} - - -
- } - open={selectedOption?.name === "Download"} - changeOpen={handleCloseModal}> - {selectedOption ? componentOptions[selectedOption.value] : "Download"} - - - ); -}; - -const useStyles = makeStyles({ name: { MoreMenu } })((theme) => ({ - option: { - display: "flex", - alignItems: "center", - gap: theme.spacing(2), - padding: `${theme.spacing(1)}px ${theme.spacing(3)}px`, - cursor: "pointer", - "&:hover": { - backgroundColor: `${theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant1}80`, - }, - }, - icon: { - opacity: 0.5, - }, - section: { - margin: `${theme.spacing(2)}px 0px`, - }, - goatIconSize: { - width: "20px", - height: "20px", - }, - modalHeader: { - display: "flex", - justifyContent: "space-between", - alignItems: "center", - }, - headerText: { - fontWeight: "normal", - }, -})); - -export default MoreMenu; diff --git a/apps/goat/app/[lng]/(dashboard)/content/MoveModal.tsx b/apps/goat/app/[lng]/(dashboard)/content/MoveModal.tsx deleted file mode 100644 index b2f6e103..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/MoveModal.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import React from "react"; - -import { TreeView } from "@p4b/ui/components/DataDisplay"; -import { Icon } from "@p4b/ui/components/theme"; -import { Button } from "@mui/material"; -import { makeStyles } from "@p4b/ui/lib/ThemeProvider"; - -interface MoveModalProps { - changeState: (value: { name: string; icon: React.ReactNode; value: string } | null) => void; -} - -const MoveModal = (props: MoveModalProps) => { - const { changeState } = props; - - const { classes } = useStyles(); - - // Dumb Temporary Data - const treeData = [ - { - id: "node_1", - name: ( -
- - Report_Final_Version -
- ), - }, - { - id: "node_2", - name: ( -
- - plan_4_better -
- ), - }, - { - id: "node_3", - name: ( -
- - example_proj -
- ), - children: [ - { - id: "node_3_1", - name: ( -
- - april_2023 -
- ), - }, - ], - }, - { - id: "node_4", - name: ( -
- - Report_Final_Version -
- ), - }, - { - id: "node_5", - name: ( -
- - plan_4_better -
- ), - }, - { - id: "node_6", - name: ( -
- - example_proj -
- ), - children: [ - { - id: "node_6_1", - name: ( -
- - april_2023 -
- ), - }, - ], - }, - ]; - - return ( -
- -
- - -
-
- ); -}; - -const useStyles = makeStyles({ name: { TreeView } })((theme) => ({ - folder: { - display: "flex", - gap: theme.spacing(2), - padding: `6px 0px`, - }, - buttons: { - display: "flex", - alignItems: "center", - justifyContent: "end", - gap: theme.spacing(2), - marginTop: theme.spacing(3), - }, - treeView: { - maxHeight: "150px", - }, -})); - -export default MoveModal; diff --git a/apps/goat/app/[lng]/(dashboard)/content/ShareModal.tsx b/apps/goat/app/[lng]/(dashboard)/content/ShareModal.tsx deleted file mode 100644 index 73487c1d..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/ShareModal.tsx +++ /dev/null @@ -1,184 +0,0 @@ -import AccessSettings from "@/app/[lng]/(dashboard)/content/AccessSettings"; -import type { Dayjs } from "dayjs"; -import React from "react"; -import { useState } from "react"; - -import { Divider } from "@p4b/ui/components/DataDisplay"; -import { Switch, DatePicker, TextField } from "@p4b/ui/components/Inputs"; -import { Text, Icon, IconButton, Button } from "@p4b/ui/components/theme"; -import { makeStyles } from "@p4b/ui/lib/ThemeProvider"; - -interface ShareModalProps { - name?: React.ReactNode; - changeState: (value: { name: string; icon: React.ReactNode; value: string } | null) => void; - modalState: { name: string; icon: React.ReactNode; value: string } | null; -} - -const ShareModal = (props: ShareModalProps) => { - const { name, changeState, modalState } = props; - - const { classes } = useStyles(); - - // Component States - const [checked, setChecked] = useState(false); - const [checkedExpirationDate, setCheckedExpirationDate] = useState(false); - const [linkShareStatus, setLinkShareStatus] = useState(true); - const [date, setDate] = useState(null); - const [, setPassword] = useState(null); - const [modalView, setModalView] = useState(0); - - // Functions - function handleSwitch(_: React.ChangeEvent, checked: boolean) { - setChecked(checked); - } - - function handleLinkSHareStatus(_: React.ChangeEvent, checked: boolean) { - setLinkShareStatus(checked); - } - - function handleExpirationStatus(_: React.ChangeEvent, checked: boolean) { - setCheckedExpirationDate(checked); - } - - function enterAccessSettings() { - setModalView(1); - if (modalState) { - const newState = modalState; - newState.name = "Access Settings"; - changeState({ - name: "Access Settings", - icon: newState.icon, - value: newState.value, - }); - } - } - - return ( -
- {modalView === 0 ? ( -
- - {name ? name : ""} - -
-
- -
- Private - - Only you have access - -
-
- -
- -
- - Allow link sharing -
-
- - Protected by password -
- {checked ? ( -
- setPassword(value)} - /> -
- ) : null} -
- - Expiration date -
- {checkedExpirationDate ? ( - <> - -
- Set expiration date: - -
- - ) : null} - -
- - -
-
- - -
-
- ) : ( - - )} -
- ); -}; - -const useStyles = makeStyles({ name: { ShareModal } })((theme) => ({ - selectInput: { - margin: `${theme.spacing(3)}px 0px`, - }, - bold: { - fontWeight: 800, - }, - italic: { - fontStyle: "italic", - }, - buttons: { - display: "flex", - alignItems: "center", - justifyContent: "end", - gap: theme.spacing(2), - marginTop: theme.spacing(3), - }, - visibilitySettings: { - display: "flex", - marginTop: theme.spacing(3), - justifyContent: "space-between", - }, - visibility: { - display: "flex", - gap: theme.spacing(1), - }, - switcher: { - display: "flex", - alignItems: "center", - // gap: theme.spacing(1), - }, - dateInput: { - width: "100%", - }, - shareInput: { - width: "100%", - }, - shareInputWrapper: { - display: "flex", - alignItems: "center", - justifyContent: "space-between", - gap: theme.spacing(3), - paddingBottom: "23px", - }, -})); - -export default ShareModal; diff --git a/apps/goat/app/[lng]/(dashboard)/content/TreeViewFilter.tsx b/apps/goat/app/[lng]/(dashboard)/content/TreeViewFilter.tsx deleted file mode 100644 index 09298c6c..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/TreeViewFilter.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import { calculateLayersCountByKey, calculateLayersCountByKeyAndValue } from "@/lib/utils/helpers"; -import React from "react"; - -import { TreeViewWithCheckboxes, Divider } from "@p4b/ui/components/DataDisplay"; -import TreeViewWithIcons from "@p4b/ui/components/DataDisplay/TreeViewWithIcons"; -import { Button } from "@p4b/ui/components/theme"; -import { makeStyles } from "@p4b/ui/lib/ThemeProvider"; -import type {ISelectedFolder} from "@/types/dashboard/content"; - -interface ITreeViewFilterProps { - selectedFilters: string[]; - setSelectedFilters: (value: string[]) => void; - handleSelectFolder: (value: ISelectedFolder) => void; - handleAddFolder: () => void; - folderData: [] | undefined; - projectData: [] | undefined; - reportData: [] | undefined; - layerData: [] | undefined; - setFolderAnchorData: (args: { anchorEl: EventTarget & HTMLButtonElement; folder: ISelectedFolder }) => void; - setSelectedFolder: (object) => void; -} - -const TreeViewFilter = (props: ITreeViewFilterProps) => { - const { - selectedFilters, - setSelectedFilters, - projectData, - reportData, - layerData, - folderData, - handleSelectFolder, - handleAddFolder, - setFolderAnchorData, - setSelectedFolder, - } = props; - const { classes } = useStyles(); - - const treeData = [ - { - id: "layers", - name: "Layers", - count: `(${layerData?.length || 0})`, - children: [ - { - id: "feature", - name: "Feature", - count: `(${calculateLayersCountByKey(layerData, "feature_layer_type")})`, - children: [ - { - id: "standard", - name: "Standard", - count: `(${calculateLayersCountByKeyAndValue(layerData, "feature_layer_type", "standard")})`, - }, - { - id: "indicator", - name: "Indicator", - count: `(${calculateLayersCountByKeyAndValue(layerData, "feature_layer_type", "indicator")})`, - }, - { - id: "scenario", - name: "Scenario", - count: `(${calculateLayersCountByKeyAndValue(layerData, "feature_layer_type", "scenario")})`, - }, - ], - }, - { - id: "imagery_layer", - name: "Imagery", - count: `(${calculateLayersCountByKeyAndValue(layerData, "type", "imagery_layer")})`, - }, - { - id: "tile_layer", - name: "Tile", - count: `(${calculateLayersCountByKeyAndValue(layerData, "type", "tile_layer")})`, - }, - { - id: "table", - name: "Table", - count: `(${calculateLayersCountByKeyAndValue(layerData, "type", "table")})`, - }, - ], - }, - { - id: "project", - name: "Projects", - count: `(${projectData?.length || 0})`, - // children: projectData ?? [], - }, - { - id: "report", - name: "Reports", - count: `(${reportData?.length || 0})`, - // children: reportData ?? [], - }, - ]; - - // Functions - function clearFilters() { - setSelectedFilters([]); - } - - return ( - <> -
-
- -
- -
- -
- {selectedFilters.length ? : null} -
- - ); -}; - -const useStyles = makeStyles({ name: { TreeViewFilter } })(() => ({ - wrapper: { - display: "flex", - flexDirection: "column", - justifyContent: "space-between", - height: "100%", - }, - - folderWrapper: { - ul: { - display: "flex", - flexDirection: "column", - justifyContent: "space-between", - height: "100%", - gap: "20px", - }, - }, - filtersWrapper: { - backgroundColor: "#2BB3810A", - }, -})); - -export default TreeViewFilter; diff --git a/apps/goat/app/[lng]/(dashboard)/content/layout.tsx b/apps/goat/app/[lng]/(dashboard)/content/layout.tsx deleted file mode 100644 index 6ec64c19..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/layout.tsx +++ /dev/null @@ -1,25 +0,0 @@ -"use client"; - -import { makeStyles } from "@/lib/theme"; - -import Box from "@p4b/ui/components/Box"; - -interface ContentLayoutProps { - children: React.ReactNode; -} - -const ContentLayout = (props: ContentLayoutProps) => { - const { children } = props; - - const { classes } = useStyles(); - - return {children}; -}; - -const useStyles = makeStyles({ name: { ContentLayout } })(() => ({ - root: { - marginTop: "100px", - }, -})); - -export default ContentLayout; diff --git a/apps/goat/app/[lng]/(dashboard)/content/page.tsx b/apps/goat/app/[lng]/(dashboard)/content/page.tsx deleted file mode 100644 index d9c30b07..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/page.tsx +++ /dev/null @@ -1,7 +0,0 @@ -"use client"; - -import ContentManagement from "@/app/[lng]/(dashboard)/content/ContentManagement"; - -export default function ContentPage() { - return ; -} diff --git a/apps/goat/app/[lng]/(dashboard)/content/preview/(previewData)/PreviewData.tsx b/apps/goat/app/[lng]/(dashboard)/content/preview/(previewData)/PreviewData.tsx deleted file mode 100644 index 0e4c0680..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/preview/(previewData)/PreviewData.tsx +++ /dev/null @@ -1,17 +0,0 @@ -"use client"; - -import { makeStyles } from "@/lib/theme"; -import "mapbox-gl/dist/mapbox-gl.css"; -import React from "react"; - -const useStyles = makeStyles({ name: { PreviewData } })(() => ({ - root: { - display: "flex", - }, -})); - -export default function PreviewData() { - const { classes, cx } = useStyles(); - - return
Preview data
; -} diff --git a/apps/goat/app/[lng]/(dashboard)/content/preview/(previewMap)/PreviewMap.tsx b/apps/goat/app/[lng]/(dashboard)/content/preview/(previewMap)/PreviewMap.tsx deleted file mode 100644 index 194ecc7d..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/preview/(previewMap)/PreviewMap.tsx +++ /dev/null @@ -1,71 +0,0 @@ -"use client"; - -import { makeStyles } from "@/lib/theme"; -import { TextField } from "@mui/material"; -import "mapbox-gl/dist/mapbox-gl.css"; -import React from "react"; -import Map, { ScaleControl, NavigationControl } from "react-map-gl"; - -import BasicAccordion from "@p4b/ui/components/BasicAccordion"; - -const useStyles = makeStyles({ name: { PreviewMap } })(() => ({ - root: { - padding: "18px 0", - display: "flex", - justifyContent: "space-between", - gap: "16px", - height: "732px", - }, - mapContainer: { - width: "100%", - height: "100%", - border: "1px solid var(--light-primary-shades-8-p, rgba(43, 179, 129, 0.08))", - boxShadow: "0px 2px 4px -1px rgba(0, 0, 0, 0.12)", - background: "#FAFAFA", - padding: "16px", - }, - menuContainer: { - width: "280px", - borderRadius: "4px", - border: "1px solid rgba(43, 179, 129, 0.08)", - boxShadow: "0px 2px 4px -1px rgba(0, 0, 0, 0.12)", - background: "#FAFAFA", - padding: "16px", - display: "flex", - flexDirection: "column", - gap: "16px", - }, -})); - -export default function PreviewMap(props) { - const { initial_view_state, map_style, scale_show, navigation_control, children } = props; - - const { classes, cx } = useStyles(); - - return ( -
-
- - -
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, rem.
- - -
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, rem.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, rem.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, rem.
- -
-
- - {scale_show && } - {navigation_control && } - {children} - -
-
- ); -} diff --git a/apps/goat/app/[lng]/(dashboard)/content/preview/HeaderStack.tsx b/apps/goat/app/[lng]/(dashboard)/content/preview/HeaderStack.tsx deleted file mode 100644 index a7b0928d..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/preview/HeaderStack.tsx +++ /dev/null @@ -1,94 +0,0 @@ -"use client"; - -import { setPreviewMode } from "@/lib/store/content/slice"; -import { makeStyles } from "@/lib/theme"; -import ArrowBackIcon from "@mui/icons-material/ArrowBack"; -import BackupTableIcon from "@mui/icons-material/BackupTable"; -import MapIcon from "@mui/icons-material/Map"; -import { Button, Stack, Typography } from "@mui/material"; -import { useRouter } from "next/navigation"; -import { useDispatch, useSelector } from "react-redux"; - -import Box from "@p4b/ui/components/Box"; -import BasicBreadcrumbs from "@p4b/ui/components/BreadCrumbs"; -import ToggleButtons from "@p4b/ui/components/ToggleButtons"; -import type {IStore} from "@/types/store"; - -function HeaderStack() { - const { previewMode } = useSelector((state: IStore) => state.content); - - const router = useRouter(); - const dispatch = useDispatch(); - const { classes, cx } = useStyles(); - - const buttons = [ - { - icon: , - value: "map", - }, - { - icon: , - value: "table", - }, - // { - // icon: , - // value: "styling", - // }, - ]; - - const handleChangeBreadCrumb = (event: React.MouseEvent) => { - event.preventDefault(); - console.info("You clicked a breadcrumb."); - }; - - const returnHandler = () => { - router.push("/content"); - }; - - const setModeHandler = (val: string) => { - dispatch(setPreviewMode(val)); - }; - - return ( - - - Preview - - - - - - - - ); -} - -const useStyles = makeStyles({ name: { HeaderStack } })((theme) => ({ - header: { - backgroundColor: theme.muiTheme.palette.background.paper, - height: "56px", - padding: theme.spacing(4), - zIndex: "100", - boxShadow: "0px 2px 4px -1px rgba(0, 0, 0, 0.12)", - }, - title: { - fontSize: "24px", - fontStyle: "normal", - fontWeight: 800, - lineHeight: "133.4%", - color: "#09241A", - }, - breadcrumbsWrapper: { - display: "flex", - alignItems: "center", - gap: "16px", - }, -})); - -export default HeaderStack; diff --git a/apps/goat/app/[lng]/(dashboard)/content/preview/PreviewManagement.tsx b/apps/goat/app/[lng]/(dashboard)/content/preview/PreviewManagement.tsx deleted file mode 100644 index 4578323e..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/preview/PreviewManagement.tsx +++ /dev/null @@ -1,62 +0,0 @@ -"use client"; - -import PreviewData from "@/app/[lng]/(dashboard)/content/preview/(previewData)/PreviewData"; -import PreviewMap from "@/app/[lng]/(dashboard)/content/preview/(previewMap)/PreviewMap"; -import HeaderStack from "@/app/[lng]/(dashboard)/content/preview/HeaderStack"; -import { API } from "@/lib/api/apiConstants"; -import { layerFetcher, mapDataFetcher } from "@/lib/services/dashboard"; -import { makeStyles } from "@/lib/theme"; -import React, { useEffect } from "react"; -import { useSelector } from "react-redux"; -import useSWR from "swr"; -import useSWRMutation from "swr/mutation"; -import type {IStore} from "@/types/store"; - -const useStyles = makeStyles({ name: { PreviewManagement } })(() => ({ - root: { - position: "relative", - width: "100%", - minHeight: "100vh", - marginTop: "100px", - }, -})); - -interface PreviewManagementProps { - id: string; -} - -export default function PreviewManagement(props: PreviewManagementProps) { - const { id } = props; - const { previewMode } = useSelector((state: IStore) => state.content); - - const { data, error } = useSWR("map", mapDataFetcher); - const { data: layerData, trigger: layerTrigger } = useSWRMutation(API.layer, layerFetcher); - - const { classes, cx } = useStyles(); - - console.log("layerData", layerData); - - useEffect(() => { - if (id) layerTrigger(id); - }, [id, layerTrigger]); - - if (error) { - return
Error fetching data
; - } - - if (!data) { - return
Loading...
; - } - - const previewObj = { - map: , - table: , - }; - - return ( -
- - {previewObj[previewMode]} -
- ); -} diff --git a/apps/goat/app/[lng]/(dashboard)/content/preview/[id]/layout.tsx b/apps/goat/app/[lng]/(dashboard)/content/preview/[id]/layout.tsx deleted file mode 100644 index 6780840c..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/preview/[id]/layout.tsx +++ /dev/null @@ -1,27 +0,0 @@ -"use client"; - -import { makeStyles } from "@/lib/theme"; - -import Box from "@p4b/ui/components/Box"; - -interface ContentLayoutProps { - children: React.ReactNode; -} - -const ContentLayout = (props: ContentLayoutProps) => { - const { children } = props; - - const { classes } = useStyles(); - - return {children}; -}; - -const useStyles = makeStyles({ name: { ContentLayout } })(() => ({ - root: { - margin: "0 auto", - maxWidth: "1168px", - width: "100%", - }, -})); - -export default ContentLayout; diff --git a/apps/goat/app/[lng]/(dashboard)/content/preview/[id]/page.tsx b/apps/goat/app/[lng]/(dashboard)/content/preview/[id]/page.tsx deleted file mode 100644 index 1c30cb00..00000000 --- a/apps/goat/app/[lng]/(dashboard)/content/preview/[id]/page.tsx +++ /dev/null @@ -1,13 +0,0 @@ -"use client"; - -import PreviewManagement from "@/app/[lng]/(dashboard)/content/preview/PreviewManagement"; - -interface IParams { - params: { - id: string; - }; -} - -export default function PreviewPage({ params: { id } }: IParams) { - return ; -} diff --git a/apps/goat/app/[lng]/(dashboard)/help/page.tsx b/apps/goat/app/[lng]/(dashboard)/help/page.tsx deleted file mode 100644 index c58d62fb..00000000 --- a/apps/goat/app/[lng]/(dashboard)/help/page.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function HelpPage() { - return
Contents Page
; -} diff --git a/apps/goat/app/[lng]/(dashboard)/home/CardList.tsx b/apps/goat/app/[lng]/(dashboard)/home/CardList.tsx deleted file mode 100644 index 993270a2..00000000 --- a/apps/goat/app/[lng]/(dashboard)/home/CardList.tsx +++ /dev/null @@ -1,121 +0,0 @@ -"use client"; - -import { makeStyles } from "@/lib/theme"; -import { v4 } from "uuid"; - -import { Divider } from "@p4b/ui/components/DataDisplay/Divider"; -import { CardContent, CardMedia, Card } from "@p4b/ui/components/Surfaces"; -import { Button } from "@p4b/ui/components/theme"; -import { Text } from "@p4b/ui/components/theme"; - -export interface CardType { - title: string; - description?: string; - chips: string[]; - info?: { - author: string; - date: string; - }; - icon?: IconId; -} - -interface CardsDataArray { - content: CardType<"file">; - media: false | { image: string }; -} - -export interface CardListProps { - title: string; - buttons: string[]; - cards?: CardsDataArray[]; -} - -const CardList = (props: CardListProps) => { - const { title, buttons, cards } = props; - - const { classes } = useStyles(); - - return ( - <> -
-
{title}
-
- {buttons.map((button) => ( - - {button} - - ))} -
-
- -
- {cards?.map((card) => ( - : false}> - - - ))} - {cards?.length && cards.length < 4 ? ( - -
- -
- - ) : null} -
- - ); -}; - -const useStyles = makeStyles({ name: { CardList } })((theme) => ({ - cardList: { - display: "flex", - gap: theme.spacing(4), - // justifyContent: "space-between", - marginBottom: "57px", - }, - headerTitles: { - display: "flex", - justifyContent: "space-between", - }, - buttons: { - display: "flex", - gap: theme.spacing(3), - }, - button: { - border: "none", - color: theme.colors.palette.focus.main, - textDecoration: "none", - }, - addButtonContainer: { - width: "100%", - display: "flex", - alignItems: "center", - height: "100%", - }, - addButton: { - display: "flex", - alignItems: "center", - justifyContent: "center", - gap: "3px", - width: "100%", - backgroundColor: theme.colors.useCases.surfaces.background, - "&:hover": { - backgroundColor: theme.isDarkModeEnabled - ? theme.colors.palette.dark.greyVariant1 - : theme.colors.palette.light.greyVariant1, - }, - }, - addButtonText: { - // color: 'blue' - }, -})); - -export default CardList; diff --git a/apps/goat/app/[lng]/(dashboard)/home/NewsLetterSection.tsx b/apps/goat/app/[lng]/(dashboard)/home/NewsLetterSection.tsx deleted file mode 100644 index fa793ee7..00000000 --- a/apps/goat/app/[lng]/(dashboard)/home/NewsLetterSection.tsx +++ /dev/null @@ -1,64 +0,0 @@ -"use client"; - -import { makeStyles } from "@/lib/theme"; - -import { TextField } from "@p4b/ui/components/Inputs"; -import { Card } from "@p4b/ui/components/Surfaces"; -import { Text } from "@p4b/ui/components/theme"; -import { Button } from "@p4b/ui/components/theme"; - -const NewsLetterSection = () => { - const { classes, cx } = useStyles(); - - return ( - -
- - Keep up with GOAT & Plan4Better latest updates, join our Newsletter - -
-
- {" "} - {" "} - -
-
- - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus - et magnis dis parturient montes{" "} - -
- - ); -}; - -const useStyles = makeStyles({ name: { NewsLetterSection } })((theme) => ({ - card: { - width: "100%", - padding: theme.spacing(6) + theme.spacing(3), - border: `1px solid ${theme.colors.palette.dark.greyVariant2}10`, - }, - textField: { - width: "400px", - }, - formSection: { - display: "flex", - justifyContent: "center", - gap: "12px", - alignItems: "center", - margin: `${theme.spacing(4)}px 0`, - }, - text: { - textAlign: "center", - }, - header: { - fontWeight: "bolder", - }, - button: { - padding: "8px 24px", - }, -})); - -export default NewsLetterSection; diff --git a/apps/goat/app/[lng]/(dashboard)/home/page.tsx b/apps/goat/app/[lng]/(dashboard)/home/page.tsx deleted file mode 100644 index 95157112..00000000 --- a/apps/goat/app/[lng]/(dashboard)/home/page.tsx +++ /dev/null @@ -1,249 +0,0 @@ -"use client"; - -import GridContainer from "@/components/grid/GridContainer"; -import SingleGrid from "@/components/grid/SingleGrid"; -import { makeStyles } from "@/lib/theme"; -import { v4 } from "uuid"; - -import Box from "@p4b/ui/components/Box"; -import { SlideShow } from "@p4b/ui/components/SlideShow"; - -import CardList, { type CardType } from "./CardList"; -import NewsLetterSection from "./NewsLetterSection"; - -interface CardsDataArray { - content: CardType<"file">; - media: false | { image: string }; -} - -interface CardDataType { - title: string; - cards: CardsDataArray[]; - buttons: string[]; -} - -const Home = () => { - const { classes } = useStyles(); - - // Project Dumb Data - const tempCardInfo: CardDataType[] = [ - { - buttons: ["See all"], - title: "Recent Projects", - cards: [ - { - content: { - info: { - author: "John Doe", - date: "4 Feb 2022", - }, - title: "Project title", - chips: ["Chip", "Chip", "Chip", "Chip", "Chip"], - }, - media: { - image: - "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQy9x3wyV5OWYWA8XxBJKMlH2QvuSSOIdOItRK1jgXSQ&s", - }, - }, - { - content: { - info: { - author: "John Doe", - date: "4 Feb 2022", - }, - title: "Project title", - chips: ["Chip", "Chip", "Chip", "Chip", "Chip"], - }, - media: { - image: - "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQy9x3wyV5OWYWA8XxBJKMlH2QvuSSOIdOItRK1jgXSQ&s", - }, - }, - { - content: { - info: { - author: "John Doe", - date: "4 Feb 2022", - }, - title: "Project title", - chips: ["Chip", "Chip", "Chip", "Chip", "Chip"], - }, - media: { - image: - "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQy9x3wyV5OWYWA8XxBJKMlH2QvuSSOIdOItRK1jgXSQ&s", - }, - }, - ], - }, - { - buttons: ["See all"], - title: "Recent Contents", - cards: [ - { - content: { - icon: "file", - title: "Content title", - description: "content_file_title.extension", - chips: ["Chip", "Chip", "Chip", "Chip", "Chip"], - }, - media: false, - }, - { - content: { - icon: "file", - title: "Content title", - description: "content_file_title.extension", - chips: ["Chip", "Chip", "Chip", "Chip", "Chip"], - }, - media: false, - }, - { - content: { - icon: "file", - title: "Content title", - description: "content_file_title.extension", - chips: ["Chip", "Chip", "Chip", "Chip", "Chip"], - }, - media: false, - }, - { - content: { - icon: "file", - title: "Content title", - description: "content_file_title.extension", - chips: ["Chip", "Chip", "Chip", "Chip", "Chip"], - }, - media: false, - }, - ], - }, - { - title: "Explore", - buttons: ["BLOG", "DOCUMENTATION", "TUTORIALS", "USE CASES", "NEWS"], - cards: [ - { - content: { - info: { - author: "John Doe", - date: "4 Feb 2022", - }, - title: "Label", - description: - "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.", - chips: ["Chip", "Chip", "Chip", "Chip", "Chip"], - }, - media: { - image: - "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQy9x3wyV5OWYWA8XxBJKMlH2QvuSSOIdOItRK1jgXSQ&s", - }, - }, - { - content: { - info: { - author: "John Doe", - date: "4 Feb 2022", - }, - title: "Label", - description: - "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.", - chips: ["Chip", "Chip", "Chip", "Chip", "Chip"], - }, - media: { - image: - "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQy9x3wyV5OWYWA8XxBJKMlH2QvuSSOIdOItRK1jgXSQ&s", - }, - }, - { - content: { - info: { - author: "John Doe", - date: "4 Feb 2022", - }, - title: "Label", - description: - "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.", - chips: ["Chip", "Chip", "Chip", "Chip", "Chip"], - }, - media: { - image: - "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQy9x3wyV5OWYWA8XxBJKMlH2QvuSSOIdOItRK1jgXSQ&s", - }, - }, - { - content: { - info: { - author: "John Doe", - date: "4 Feb 2022", - }, - title: "Label", - description: - "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.", - chips: ["Chip", "Chip", "Chip", "Chip", "Chip"], - }, - media: { - image: - "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQy9x3wyV5OWYWA8XxBJKMlH2QvuSSOIdOItRK1jgXSQ&s", - }, - }, - ], - }, - ]; - - const slideShowImages = [ - { - imgPath: - "https://s3-alpha-sig.figma.com/img/780f/4ef5/c934bfac69cba006cec203491b616d85?Expires=1685923200&Signature=IhTpFXcdFrI7Xx9wBP2mnRbKsYiKP2c-r~lwmayIrxsWscWQ0eo7WzG0J5rhY~291iaTghdizAq3qTqkSnov4kvqAPL6YCdslajCk2r7wFZXabXTQnxtDYHGui~bDFp5gu5bFIztlA4ClUWikpjdDu54eT1VBGUID68mt6t~UnLXUVOV-D6S526gcJKMDUt~8bJeCl3knMQrr27-9520~-FNebfh7qI37hScTL9z1ugXKHr2ndqngGsdfAaGQR-iPaXqC2l1W5xEALtFX6KB8HMbLV88hGddnQIVSodwgFKgznxIcWPf48i5DUpebZuq08zMo0~CtvJ44O1QBWQH9g__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4", - label: "Lorem ipsum CTA1", - description: - "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.", - }, - { - imgPath: - "https://s3-alpha-sig.figma.com/img/780f/4ef5/c934bfac69cba006cec203491b616d85?Expires=1685923200&Signature=IhTpFXcdFrI7Xx9wBP2mnRbKsYiKP2c-r~lwmayIrxsWscWQ0eo7WzG0J5rhY~291iaTghdizAq3qTqkSnov4kvqAPL6YCdslajCk2r7wFZXabXTQnxtDYHGui~bDFp5gu5bFIztlA4ClUWikpjdDu54eT1VBGUID68mt6t~UnLXUVOV-D6S526gcJKMDUt~8bJeCl3knMQrr27-9520~-FNebfh7qI37hScTL9z1ugXKHr2ndqngGsdfAaGQR-iPaXqC2l1W5xEALtFX6KB8HMbLV88hGddnQIVSodwgFKgznxIcWPf48i5DUpebZuq08zMo0~CtvJ44O1QBWQH9g__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4", - label: "Lorem ipsum CTA2", - description: - "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.", - }, - { - imgPath: - "https://s3-alpha-sig.figma.com/img/780f/4ef5/c934bfac69cba006cec203491b616d85?Expires=1685923200&Signature=IhTpFXcdFrI7Xx9wBP2mnRbKsYiKP2c-r~lwmayIrxsWscWQ0eo7WzG0J5rhY~291iaTghdizAq3qTqkSnov4kvqAPL6YCdslajCk2r7wFZXabXTQnxtDYHGui~bDFp5gu5bFIztlA4ClUWikpjdDu54eT1VBGUID68mt6t~UnLXUVOV-D6S526gcJKMDUt~8bJeCl3knMQrr27-9520~-FNebfh7qI37hScTL9z1ugXKHr2ndqngGsdfAaGQR-iPaXqC2l1W5xEALtFX6KB8HMbLV88hGddnQIVSodwgFKgznxIcWPf48i5DUpebZuq08zMo0~CtvJ44O1QBWQH9g__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4", - label: "Lorem ipsum CTA3", - description: - "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.", - }, - ]; - - return ( - - - - - {tempCardInfo.map((cardSection: CardDataType) => ( - - ))} - - - - - ); -}; - -const useStyles = makeStyles({ name: { Home } })(() => ({ - root: { - marginTop: "100px", - }, - media: { - width: "100%", - height: "100px", - borderTopRightRadius: 4, - borderTopLeftRadius: 4, - objectFit: "cover", - }, -})); - -export default Home; diff --git a/apps/goat/app/[lng]/(dashboard)/layout.tsx b/apps/goat/app/[lng]/(dashboard)/layout.tsx deleted file mode 100644 index b3b8f026..00000000 --- a/apps/goat/app/[lng]/(dashboard)/layout.tsx +++ /dev/null @@ -1,142 +0,0 @@ -"use client"; - -import { DashboardSidebar } from "@/app/[lng]/(dashboard)/DashboardSidebar"; -import { TranslationSwitcher } from "@/app/[lng]/components/TranslationSwitcher"; -// import { useTranslation } from "@/app/i18/client"; -import { makeStyles } from "@/lib/theme"; -import { signOut } from "next-auth/react"; -import { useState, useRef } from "react"; - -import { InfoMenu } from "@p4b/ui/components/InfoMenu"; -import Footer from "@p4b/ui/components/Navigation/Footer"; -import { Toolbar } from "@p4b/ui/components/Navigation/Toolbar"; -import { Text, Button } from "@p4b/ui/components/theme"; -import CorporateFareIcon from '@mui/icons-material/CorporateFare'; -import PersonIcon from '@mui/icons-material/Person'; -import HelpIcon from '@mui/icons-material/Help'; -import { ICON_NAME } from "@p4b/ui/components/Icon"; - -interface DashboardLayoutProps { - children: React.ReactNode; - params: { lng: string }; -} - -const DashboardLayout = ({ children, params: { lng } }: DashboardLayoutProps) => { - const { classes, cx } = useStyles(); - const [isVisible, setIsVisible] = useState(false); - const ButtonElement = useRef(null); - // const { t } = useTranslation(lng); - - const handleClick = () => { - setIsVisible(true); - }; - const handleClose = () => { - setIsVisible(false); - }; - - const menuHeader = ( - - - - {" "} - GOAT - - ); - - const actionHeader = ( - // - - ); - - const items = [ - { - link: "", - icon: () => , - }, - { - link: "https://google.com", - icon: () => ( - <> -
- {/* */} - -
- - randomuser@outlook.com - Admin - - - ), - }, - { - link: "https://google.com", - icon: () => ( -
- -
- ), - }, - ]; - - const sidebarItems: { link: string; icon: ICON_NAME; placeholder: string }[] = [ - { - link: "/home", - icon: ICON_NAME.HOUSE, - placeholder: "Home", - }, - { - link: "/content", - icon: ICON_NAME.FOLDER, - placeholder: "Content", - }, - { - link: "/settings", - icon: ICON_NAME.SETTINGS, - placeholder: "Settings", - }, - { - //todo change test to id logic - link: "/map/test", - icon: ICON_NAME.STYLE, - placeholder: "Styling", - }, - { - link: "/help", - icon: ICON_NAME.HELP, - placeholder: "Help", - }, - ]; - - return ( - <> - - -
{children}
- -