+ 
+
+ );
+}
diff --git a/src/components/RadixComponents/Popover.tsx b/src/components/RadixComponents/Popover.tsx
new file mode 100644
index 00000000..65c210d1
--- /dev/null
+++ b/src/components/RadixComponents/Popover.tsx
@@ -0,0 +1,52 @@
+import React, { ReactElement } from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '@Utils/index';
+
+interface IPopoverProps {
+ triggerContent?: ReactElement;
+ popoverContent?: ReactElement;
+ show: boolean;
+}
+
+const PopoverRoot = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+ React.ElementRef
+
+
+));
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+
+ );
+ }
+
+ return null;
+};
+
+export default function CustomBarChart({
+ data,
+ fills = ChartFills,
+ scrollable = false,
+ width = '150%',
+}: IChartProps) {
+ // const keys = Object.keys(data.length > 0 ? data[0] : {});
+ const dataObject = data.length > 0 ? data[0] : {};
+
+ const { name, ...datax } = dataObject;
+ const keys = Object.keys(datax);
+
+ return (
+ {label}
+ {payload?.map((item: any) => { + if (item.dataKey !== 'name') + return ( +
+
+ );
+ return <>;
+ })}
+
+
+ {item.dataKey}
+
+ {item.value}
+
+
+ )}
+
+ {yLabel && !(type === 'donut') ? (
+
+ {header({
+ chartTitle,
+ hasDownloadBtn,
+ downloadComponentRef: componentRef,
+ })}
+
+
+
+ ) : null}
+
+ + {yLabel} +
+
+ {chart && chart({ data, fills, scrollable })}
+
+ {xLabel && !(type === 'donut') ? (
+
+
+ ) : null}
+ {legend && (
+ {xLabel}
+
+ {legend({
+ data,
+ type,
+ fills,
+ })}
+
+ )}
+
+
+
+ )}
+
+ );
+}
diff --git a/src/components/common/Charts/ChartLegend/index.tsx b/src/components/common/Charts/ChartLegend/index.tsx
new file mode 100644
index 00000000..6800350f
--- /dev/null
+++ b/src/components/common/Charts/ChartLegend/index.tsx
@@ -0,0 +1,52 @@
+import LegendItem from '../LegendItem';
+import DonutLegendItem from '../DonutLegendItem';
+import { ILegendProps, PieChartDataItem } from '../types';
+import {
+ calculatePercentage,
+ removeKeyFromObject,
+ getSumOfKey,
+} from '../utils';
+
+export default function ChartLegend+ {chartTitle} +
+ +
+ {hasDownloadBtn && (
+
+ {toggle && (
+ }
+ onClick={handleToggle}
+ tabIndex={0}
+ role="button"
+ onKeyDown={() => {}}
+ className="actions naxatw-w-40px naxatw-flex naxatw-cursor-pointer
+ naxatw-rounded-lg naxatw-p-1 hover:naxatw-bg-primary-50"
+ >
+
+ )}
+ {}}
+ onClick={handleDownloadPng}
+ className="naxatw-py-3 hover:naxatw-bg-primary-50"
+ >
+ Export as PNG
+
+ {}}
+ onClick={handleDownloadCsv}
+ className="naxatw-py-3 hover:naxatw-bg-primary-50"
+ >
+ Export as CSV
+
+
+
+ );
+ }
+
+ const keys: string[] = Object.keys(
+ removeKeyFromObject(data[0], 'name' as keyof (typeof data)[0]),
+ );
+ return (
+
+ {data.map((key: any, index: any) => (
+
+
+
+ );
+}
diff --git a/src/components/common/Charts/DonutChart/index.tsx b/src/components/common/Charts/DonutChart/index.tsx
new file mode 100644
index 00000000..2f144717
--- /dev/null
+++ b/src/components/common/Charts/DonutChart/index.tsx
@@ -0,0 +1,56 @@
+/* eslint-disable react/no-array-index-key */
+import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
+import { IChartProps } from '../types';
+
+const CustomTooltip = ({ active, payload }: any) => {
+ if (active && payload && payload.length) {
+ const tooltipTextColor = payload[0].payload.fill; // dynamic => changes acc to fill
+ return (
+
+ {keys.map((key, index) => (
+
+
+
+ );
+ }
+ return null;
+};
+
+export default function CustomDonutChart({ data, fills }: IChartProps) {
+ return (
+ + {payload[0]?.name} :{' '} + {payload[0]?.value} +
+
+
+ );
+}
diff --git a/src/components/common/Charts/HorizontalBarChart/index.tsx b/src/components/common/Charts/HorizontalBarChart/index.tsx
new file mode 100644
index 00000000..b98c66cf
--- /dev/null
+++ b/src/components/common/Charts/HorizontalBarChart/index.tsx
@@ -0,0 +1,23 @@
+import { IChartProps } from '../types';
+import HorizontalBarLabel from '../HorizontalBarLabel';
+import { calculatePercentageAndInjectValue } from '../utils';
+
+export default function HorizontalBarChart({ data }: IChartProps) {
+ const finalData = data
+ ? calculatePercentageAndInjectValue(data, 'value')
+ : [];
+ return (
+
+
+
+
+ {name}
+
+
+
+
+ {Number(percentage)?.toFixed(1)} %
+
+
+
+ );
+}
diff --git a/src/components/common/Charts/HorizontalBarLabel/index.tsx b/src/components/common/Charts/HorizontalBarLabel/index.tsx
new file mode 100644
index 00000000..c55858f3
--- /dev/null
+++ b/src/components/common/Charts/HorizontalBarLabel/index.tsx
@@ -0,0 +1,31 @@
+interface IHorizontalLabelProps {
+ width: number;
+ value: string;
+ label: string;
+}
+
+export default function HorizontalBarLabel({
+ width,
+ value,
+ label,
+}: IHorizontalLabelProps) {
+ return (
+
+ {finalData?.map((item: any) => (
+
+
+
+
+ );
+}
diff --git a/src/components/common/Charts/LegendItem/index.tsx b/src/components/common/Charts/LegendItem/index.tsx
new file mode 100644
index 00000000..a467ce90
--- /dev/null
+++ b/src/components/common/Charts/LegendItem/index.tsx
@@ -0,0 +1,18 @@
+import { ILegendItemProps } from '../types';
+
+export default function LegendItem({ color, name }: ILegendItemProps) {
+ return (
+
+ );
+}
diff --git a/src/components/common/Charts/NoDataComponent/index.tsx b/src/components/common/Charts/NoDataComponent/index.tsx
new file mode 100644
index 00000000..0b6d1d1f
--- /dev/null
+++ b/src/components/common/Charts/NoDataComponent/index.tsx
@@ -0,0 +1,13 @@
+import { FlexColumn } from '@Components/common/Layouts';
+import NoDataImage from '@Assets/images/no-data.png';
+
+export default function NoDataComponent() {
+ return (
+
+
+
+
+ + {value} +
++ {label} +
+
+
+ 
+
+
+ );
+}
diff --git a/src/components/common/Charts/ScatterChart/index.tsx b/src/components/common/Charts/ScatterChart/index.tsx
new file mode 100644
index 00000000..c406b6fb
--- /dev/null
+++ b/src/components/common/Charts/ScatterChart/index.tsx
@@ -0,0 +1,66 @@
+import {
+ CartesianGrid,
+ ResponsiveContainer,
+ Scatter,
+ ScatterChart,
+ Tooltip,
+ XAxis,
+ YAxis,
+} from 'recharts';
+import { ChartFills } from '../constants';
+import { IChartProps } from '../types';
+
+export default function ScatterChartComponent({
+ data,
+ fills = ChartFills,
+ scrollable = false,
+ width = '150%',
+}: IChartProps) {
+ return (
+ No Data Available
+
+
+ )}
+ {isDataEmpty ? (
+
+ {header({
+ chartTitle,
+ hasDownloadBtn,
+ downloadComponentRef: componentRef,
+ data,
+ })}
+
+
+ {updatedData.map(({ name, value, color }) => (
+
+
+
+
+ {name}
+
+
+
+ ))}
+
+ + {formatNumberWithCommas(value)} +
+
+
+ );
+}
diff --git a/src/components/common/DataCard/index.tsx b/src/components/common/DataCard/index.tsx
new file mode 100644
index 00000000..bfb8716c
--- /dev/null
+++ b/src/components/common/DataCard/index.tsx
@@ -0,0 +1,39 @@
+import formatNumberWithCommas from '@Utils/formatNumberWithCommas';
+import Icon from '@Components/common/Icon';
+import { FlexColumn, FlexRow } from '@Components/common/Layouts';
+import { cn } from '@Utils/index';
+import RoundedContainer from '../RoundedContainer';
+
+interface DataCardProps {
+ title: string;
+ count: number;
+ iconName: string;
+ className?: string;
+}
+
+export default function DataCard({
+ title,
+ count,
+ iconName,
+ className,
+}: DataCardProps) {
+ return (
+ {capitalizeFirstLetter(label.toString())}
+{title}
+{formatNumberWithCommas(count)}
+ Page
+
+ {table.getState().pagination.pageIndex + 1} of
+ {table.getPageCount()}
+
+ {isError && Error: {(error as Error).message}}
+ );
+ }
+
+ return (
+
+
+ );
+ }
+ return this.props.children;
+ }
+}
+
+export default ErrorBoundary;
diff --git a/src/components/common/ErrorMessage/index.tsx b/src/components/common/ErrorMessage/index.tsx
new file mode 100644
index 00000000..9ec15d69
--- /dev/null
+++ b/src/components/common/ErrorMessage/index.tsx
@@ -0,0 +1,25 @@
+import { cn } from '@Utils/index';
+import { HTMLAttributes } from 'react';
+
+interface IErrorMessageProps extends HTMLAttributes
+
+
+ {fileName}
+
+ + {' '} + An Error Occurred ! +
++ {message} +
+ ); +} diff --git a/src/components/common/Fallback/index.tsx b/src/components/common/Fallback/index.tsx new file mode 100644 index 00000000..241e9e3c --- /dev/null +++ b/src/components/common/Fallback/index.tsx @@ -0,0 +1,3 @@ +export default function Fallback() { + returnSomething went wrong!
; +} diff --git a/src/components/common/FormUI/ErrorMessage/index.tsx b/src/components/common/FormUI/ErrorMessage/index.tsx new file mode 100644 index 00000000..667acaad --- /dev/null +++ b/src/components/common/FormUI/ErrorMessage/index.tsx @@ -0,0 +1,14 @@ +interface IErrorMessageProp { + message: string; +} + +export default function ErrorMessage({ message }: IErrorMessageProp) { + return ( + + {message} + + ); +} diff --git a/src/components/common/FormUI/FileUpload/index.tsx b/src/components/common/FormUI/FileUpload/index.tsx new file mode 100644 index 00000000..f454362b --- /dev/null +++ b/src/components/common/FormUI/FileUpload/index.tsx @@ -0,0 +1,169 @@ +import { ChangeEvent, useEffect, useState } from 'react'; +import type { + UseFormRegister, + UseFormSetValue, + FieldValues, +} from 'react-hook-form'; +import { v4 as uuidv4 } from 'uuid'; +import { format } from 'date-fns'; +import useCustomUpload from '@Hooks/useCustomUpload'; +import { FlexColumn, FlexRow } from '@Components/common/Layouts'; +import Icon from '@Components/common/Icon'; +import Image from '@Components/RadixComponents/Image'; +import Input from '../Input'; + +type FileType = File & { + lastModifiedDate: Date; +}; + +type UploadedFilesType = { + id: string; + previewUrl: string; + file: FileType; +}[]; + +type FileEvent = ChangeEvent+ {placeholder || 'Please upload picture (jpeg, png file format)'} +
+ +{file?.name}
+ {file && file?.lastModified && ( ++ Uploaded on + {format(new Date(file.lastModifiedDate), 'MMM dd yyyy')} +
+ )} +{children}
;
+}
diff --git a/src/components/common/FormUI/Input/index.tsx b/src/components/common/FormUI/Input/index.tsx
new file mode 100644
index 00000000..c7295533
--- /dev/null
+++ b/src/components/common/FormUI/Input/index.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { cn } from '@Utils/index';
+
+export interface IInputProps
+ extends React.InputHTMLAttributes {
+ setIsOpen(true);
+ }}
+ >
+ {
+ setIsOpen(true);
+ }}
+ onChange={e => {
+ setSearchText(e.target.value);
+ }}
+ />
+
+ {showClearIcon ? (
+ setSearchText('')}
+ />
+ ) : (
+
+ );
+}
diff --git a/src/components/common/FormUI/SearchInput/index.tsx b/src/components/common/FormUI/SearchInput/index.tsx
new file mode 100644
index 00000000..0745521b
--- /dev/null
+++ b/src/components/common/FormUI/SearchInput/index.tsx
@@ -0,0 +1,48 @@
+import { ChangeEventHandler } from 'react';
+import Icon from '@Components/common/Icon';
+import { FlexRow } from '@Components/common/Layouts';
+import Input from '../Input';
+
+interface ISearchInputProps {
+ inputValue: string;
+ onChange?: ChangeEventHandler-
+ {options && filterOptions.length > 0 ? (
+ filterOptions.map(option => (
+
- {
+ e.stopPropagation();
+ toggleOption(option[valueKey]);
+ }}
+ >
+ toggleOption(option[valueKey])}
+ />
+ {option[labelKey]}+
+ ))
+ ) : (
+
- + No options available + + )} +
+
+ );
+}
diff --git a/src/components/common/FormUI/index.ts b/src/components/common/FormUI/index.ts
new file mode 100644
index 00000000..53807195
--- /dev/null
+++ b/src/components/common/FormUI/index.ts
@@ -0,0 +1,8 @@
+import Label from './Label';
+import Input from './Input';
+import Select from './Select';
+import MultiSelect from './MultiSelect';
+import FormGroup from './FormGroup';
+import FormControl from './FormControl';
+
+export { Label, Input, Select, MultiSelect, FormControl, FormGroup };
diff --git a/src/components/common/Icon/index.tsx b/src/components/common/Icon/index.tsx
new file mode 100644
index 00000000..f4faff43
--- /dev/null
+++ b/src/components/common/Icon/index.tsx
@@ -0,0 +1,25 @@
+interface IIconProps extends React.HTMLAttributes
+ {withSearch ? (
+ {
+ setIsOpen(true);
+ }}
+ onChange={e => {
+ setSearchText(e.target.value);
+ }}
+ />
+ ) : (
+ setSearchText('')}
+ />
+ ) : (
+
+
+ {isOpen && (
+ + {getPlaceholderText()} +
+ )} + + {showClearIcon ? ( +-
+ {options && filterOptions.length > 0 ? (
+ filterOptions.map(option => (
+
- handleOptionClick(option[valueKey])}
+ >
+ {option[labelKey]}+
+ ))
+ ) : (
+
- + No options available + + )} +
+
+ );
+};
+
+export default InfoDialog;
diff --git a/src/components/common/Layouts/Flex/index.tsx b/src/components/common/Layouts/Flex/index.tsx
new file mode 100644
index 00000000..d03fcc3b
--- /dev/null
+++ b/src/components/common/Layouts/Flex/index.tsx
@@ -0,0 +1,30 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { cn } from '@Utils/index';
+import { IFlexContainerProps } from '../types';
+
+export default function Flex({
+ className = '',
+ children,
+ gap,
+ md,
+ row,
+ ...rest
+}: IFlexContainerProps) {
+ let newClassNames = '';
+ if (md) newClassNames += `md:naxatw-flex-row `;
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/common/Layouts/FlexColumn/index.tsx b/src/components/common/Layouts/FlexColumn/index.tsx
new file mode 100644
index 00000000..c8a11960
--- /dev/null
+++ b/src/components/common/Layouts/FlexColumn/index.tsx
@@ -0,0 +1,22 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { cn } from '@Utils/index';
+import { IFlexContainerProps } from '../types';
+
+export default function FlexColumn({
+ className = '',
+ children,
+ gap,
+ ...rest
+}: IFlexContainerProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/common/Layouts/FlexRow/index.tsx b/src/components/common/Layouts/FlexRow/index.tsx
new file mode 100644
index 00000000..cae4745a
--- /dev/null
+++ b/src/components/common/Layouts/FlexRow/index.tsx
@@ -0,0 +1,25 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { cn } from '@Utils/index';
+import { IFlexContainerProps } from '../types';
+
+export default function FlexRow({
+ className = '',
+ children,
+ gap,
+ ...rest
+}: IFlexContainerProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/common/Layouts/Grid/index.tsx b/src/components/common/Layouts/Grid/index.tsx
new file mode 100644
index 00000000..2cdb33f4
--- /dev/null
+++ b/src/components/common/Layouts/Grid/index.tsx
@@ -0,0 +1,28 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { cn } from '@Utils/index';
+import { IGridContainerProps } from '../types';
+
+export default function Grid({
+ className = '',
+ children,
+ cols,
+ gap,
+ ...rest
+}: IGridContainerProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/common/Layouts/index.tsx b/src/components/common/Layouts/index.tsx
new file mode 100644
index 00000000..29ce4825
--- /dev/null
+++ b/src/components/common/Layouts/index.tsx
@@ -0,0 +1,6 @@
+import Flex from './Flex';
+import FlexRow from './FlexRow';
+import FlexColumn from './FlexColumn';
+import Grid from './Grid';
+
+export { Flex, FlexRow, FlexColumn, Grid };
diff --git a/src/components/common/Layouts/types.ts b/src/components/common/Layouts/types.ts
new file mode 100644
index 00000000..d2e2ceab
--- /dev/null
+++ b/src/components/common/Layouts/types.ts
@@ -0,0 +1,19 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+
+type divPropsType = JSX.IntrinsicElements['div'];
+
+export interface IFlexContainerProps extends divPropsType {
+ className?: string;
+ children?: ReactNode;
+ gap?: number;
+ row?: string;
+ md?: string;
+ onClick?: MouseEventHandler
+
+ );
+}
diff --git a/src/components/common/MapLibreComponents/BaseLayerSwitcher/baseLayers.tsx b/src/components/common/MapLibreComponents/BaseLayerSwitcher/baseLayers.tsx
new file mode 100644
index 00000000..ec58c541
--- /dev/null
+++ b/src/components/common/MapLibreComponents/BaseLayerSwitcher/baseLayers.tsx
@@ -0,0 +1,103 @@
+const baseLayersData = {
+ osm: {
+ version: 8,
+ sources: {
+ osm: {
+ type: 'raster',
+ tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
+ tileSize: 256,
+ attribution:
+ 'Map tiles by OpenStreetMap tile servers, under the tile usage policy. Data by OpenStreetMap',
+ },
+ },
+ layers: [
+ {
+ id: 'osm',
+ type: 'raster',
+ source: 'osm',
+ },
+ ],
+ },
+ 'osm-light': {
+ version: 8,
+ sources: {
+ 'osm-light': {
+ type: 'raster',
+ tiles: [
+ 'https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
+ 'https://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
+ 'https://c.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
+ ],
+ tileSize: 256,
+ attribution: '',
+ maxzoom: 18,
+ },
+ },
+ layers: [
+ {
+ id: 'osm-light',
+ type: 'raster',
+ source: 'osm-light',
+ },
+ ],
+ },
+ satellite: {
+ version: 8,
+ sources: {
+ satellite: {
+ type: 'raster',
+ tiles: [
+ 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+ ],
+ tileSize: 256,
+ attribution: '',
+ maxzoom: 18,
+ },
+ },
+ layers: [
+ {
+ id: 'satellite',
+ type: 'raster',
+ source: 'satellite',
+ },
+ ],
+ },
+ topo: {
+ version: 8,
+ sources: {
+ topo: {
+ type: 'raster',
+ tiles: [
+ 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
+ ],
+ maxZoom: 18,
+ },
+ },
+ layers: [
+ {
+ id: 'topo',
+ type: 'raster',
+ source: 'topo',
+ },
+ ],
+ },
+ hybrid: {
+ version: 8,
+ sources: {
+ hybrid: {
+ type: 'raster',
+ tiles: ['https://mt1.google.com/vt/lyrs=p&x={x}&y={y}&z={z}'],
+ maxZoom: 18,
+ },
+ },
+ layers: [
+ {
+ id: 'hybrid',
+ type: 'raster',
+ source: 'hybrid',
+ },
+ ],
+ },
+};
+
+export default baseLayersData;
diff --git a/src/components/common/MapLibreComponents/BaseLayerSwitcher/index.tsx b/src/components/common/MapLibreComponents/BaseLayerSwitcher/index.tsx
new file mode 100644
index 00000000..f975667f
--- /dev/null
+++ b/src/components/common/MapLibreComponents/BaseLayerSwitcher/index.tsx
@@ -0,0 +1,47 @@
+import { useCallback, useEffect } from 'react';
+import { IBaseLayerSwitcher } from '../types';
+import baseLayersData from './baseLayers';
+
+let layersCache = {};
+
+export default function BaseLayerSwitcher({
+ map,
+ baseLayers = baseLayersData,
+ activeLayer = 'osm',
+}: IBaseLayerSwitcher) {
+ const changeStyle = useCallback(() => {
+ if (!map?.isStyleLoaded || !map.getStyle()) return;
+ const { sources, layers } = map.getStyle();
+ if (activeLayer in sources || !(activeLayer in baseLayers)) return;
+ layersCache = sources;
+ layers.forEach(layer => {
+ // @ts-ignore
+ if (!layersCache[layer.id]) return;
+ // @ts-ignore
+ layersCache[layer.id].layer = layer;
+ });
+ // @ts-ignore
+ map.setStyle(baseLayers[activeLayer]);
+ Object.keys(layersCache).forEach(key => {
+ // @ts-ignore
+ const { type, data, layer } = layersCache[key];
+ if (!data || !layer) return;
+ map.addSource(key, { type, data });
+ map.addLayer({ id: key, ...layer });
+ map.off('style.load', changeStyle);
+ });
+ }, [map, baseLayers, activeLayer]);
+
+ useEffect(() => {
+ if (!map) return () => {};
+ map.once('style.load', changeStyle);
+ return () => map.off('style.load', changeStyle);
+ }, [map, activeLayer, baseLayers, changeStyle]);
+
+ useEffect(() => {
+ if (!map || !map.isStyleLoaded) return;
+ changeStyle();
+ }, [map, activeLayer, changeStyle]);
+
+ return null;
+}
diff --git a/src/components/common/MapLibreComponents/Layers/SymbolLayer.ts b/src/components/common/MapLibreComponents/Layers/SymbolLayer.ts
new file mode 100644
index 00000000..fb03dec4
--- /dev/null
+++ b/src/components/common/MapLibreComponents/Layers/SymbolLayer.ts
@@ -0,0 +1,45 @@
+import { useEffect, useMemo } from 'react';
+import { IVectorTileLayer } from '../types';
+
+export default function SymbolLayer({
+ map,
+ id,
+ url,
+ isMapLoaded,
+ layerOptions,
+ visibleOnMap = true,
+}: IVectorTileLayer) {
+ const sourceId = useMemo(() => id.toString(), [id]);
+
+ useEffect(() => {
+ if (!map || !isMapLoaded) return;
+ map.setGlyphs(
+ 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf',
+ );
+ }, [isMapLoaded, map]);
+
+ useEffect(() => {
+ if (!map || !isMapLoaded) return;
+ map.addSource(sourceId, {
+ type: 'vector',
+ tiles: [url],
+ });
+ }, [isMapLoaded, map, url, sourceId]);
+
+ useEffect(() => {
+ if (!map || !isMapLoaded) return;
+ if (visibleOnMap) {
+ map.addLayer({
+ id: sourceId,
+ type: 'symbol',
+ source: sourceId,
+ 'source-layer': 'default',
+ ...layerOptions,
+ });
+ } else if (map.getLayer(sourceId)) {
+ map.removeLayer(sourceId);
+ }
+ }, [map, isMapLoaded, layerOptions, visibleOnMap, sourceId]);
+
+ return null;
+}
diff --git a/src/components/common/MapLibreComponents/Layers/VectorLayer.ts b/src/components/common/MapLibreComponents/Layers/VectorLayer.ts
new file mode 100644
index 00000000..a902b412
--- /dev/null
+++ b/src/components/common/MapLibreComponents/Layers/VectorLayer.ts
@@ -0,0 +1,50 @@
+import { useEffect, useMemo } from 'react';
+import { IVectorLayer } from '../types';
+
+export default function VectorLayer({
+ map,
+ id,
+ geojson,
+ isMapLoaded,
+ layerOptions,
+ visibleOnMap = true,
+}: IVectorLayer) {
+ const sourceId = useMemo(() => id.toString(), [id]);
+
+ useEffect(() => {
+ if (!map || !isMapLoaded) return;
+ if (map.getSource(sourceId)) {
+ map?.removeLayer(sourceId);
+ map?.removeSource(sourceId);
+ }
+ map.addSource(sourceId, {
+ type: 'geojson',
+ data: geojson,
+ });
+ }, [sourceId, isMapLoaded, map, geojson]);
+
+ useEffect(() => {
+ if (!map || !isMapLoaded) return;
+ if (visibleOnMap) {
+ map.addLayer({
+ id: sourceId,
+ type: 'line',
+ source: sourceId,
+ layout: {},
+ ...layerOptions,
+ });
+ } else if (map.getLayer(sourceId)) {
+ map.removeLayer(sourceId);
+ }
+ }, [map, isMapLoaded, visibleOnMap, sourceId, geojson]); // eslint-disable-line
+
+ useEffect(
+ () => () => {
+ map?.removeLayer(sourceId);
+ map?.removeSource(sourceId);
+ },
+ [map, sourceId],
+ );
+
+ return null;
+}
diff --git a/src/components/common/MapLibreComponents/Layers/VectorTileLayer.ts b/src/components/common/MapLibreComponents/Layers/VectorTileLayer.ts
new file mode 100644
index 00000000..b20c51ed
--- /dev/null
+++ b/src/components/common/MapLibreComponents/Layers/VectorTileLayer.ts
@@ -0,0 +1,82 @@
+/* eslint-disable no-param-reassign */
+import { useEffect, useMemo } from 'react';
+import type { MapMouseEvent } from 'maplibre-gl';
+import { IVectorTileLayer } from '../types';
+
+export default function VectorTileLayer({
+ map,
+ id,
+ url,
+ isMapLoaded,
+ layerOptions,
+ visibleOnMap = true,
+ interactions = [],
+ onFeatureSelect,
+}: IVectorTileLayer) {
+ const sourceId = useMemo(() => id.toString(), [id]);
+
+ // add source to map
+ useEffect(() => {
+ if (!map || !isMapLoaded) return;
+ map.addSource(sourceId, {
+ type: 'vector',
+ tiles: [url],
+ });
+ }, [isMapLoaded, map, url, sourceId]);
+
+ // add layer to map
+ useEffect(() => {
+ if (!map || !isMapLoaded) return;
+ if (visibleOnMap) {
+ map.addLayer({
+ id: sourceId,
+ type: 'fill',
+ source: sourceId,
+ 'source-layer': 'default',
+ layout: {},
+ ...layerOptions,
+ });
+ } else if (map.getLayer(sourceId)) {
+ map.removeLayer(sourceId);
+ }
+ }, [map, isMapLoaded, layerOptions, visibleOnMap, sourceId]);
+
+ // change cursor to pointer on feature hover
+ useEffect(() => {
+ if (!map) return () => {};
+ function onMouseOver() {
+ if (!map) return;
+ map.getCanvas().style.cursor = 'pointer';
+ }
+ function onMouseLeave() {
+ if (!map) return;
+ map.getCanvas().style.cursor = '';
+ }
+ map.on('mouseover', sourceId, onMouseOver);
+ map.on('mouseleave', sourceId, onMouseLeave);
+
+ // remove event handlers on unmount
+ return () => {
+ map.off('mouseover', onMouseOver);
+ map.off('mouseleave', onMouseLeave);
+ };
+ }, [map, sourceId]);
+
+ // add select interaction & return properties on feature select
+ useEffect(() => {
+ if (!map || !interactions.includes('select')) return () => {};
+ function handleSelectInteraction(event: MapMouseEvent) {
+ if (!map) return;
+ map.getCanvas().style.cursor = 'pointer';
+ // @ts-ignore
+ const { features } = event;
+ if (!features?.length) return;
+ const { properties } = features[0];
+ onFeatureSelect?.(properties);
+ }
+ map.on('click', sourceId, handleSelectInteraction);
+ return () => map.off('click', sourceId, handleSelectInteraction);
+ }, [map, interactions, sourceId]); // eslint-disable-line
+
+ return null;
+}
diff --git a/src/components/common/MapLibreComponents/MapContainer/index.tsx b/src/components/common/MapLibreComponents/MapContainer/index.tsx
new file mode 100644
index 00000000..fa11ae10
--- /dev/null
+++ b/src/components/common/MapLibreComponents/MapContainer/index.tsx
@@ -0,0 +1,39 @@
+/* eslint-disable react/display-name */
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable react/jsx-no-useless-fragment */
+import React, { ReactElement } from 'react';
+import { IMapContainer, MapInstanceType } from '../types';
+
+const { Children, cloneElement, forwardRef } = React;
+
+const MapContainer = forwardRef(
+ ({ children, map, isMapLoaded, ...rest }: IMapContainer, ref) => {
+ const childrenCount = Children.count(children);
+ const props = {
+ map,
+ isMapLoaded,
+ };
+ return (
+
+ {isLoading ? (
+
+
+ {!isLoading && (
+ {title}
+ )} + {}} + > + close + +
+
+
+ )}
+
+ {childrenCount < 1 ? (
+ <>
+ ) : childrenCount > 1 ? (
+ Children.map(children, child =>
+ child ? cloneElement(child, { ...props }) : <>,
+ )
+ ) : (
+ cloneElement(children as ReactElement, { ...props })
+ )}
+
+ );
+ },
+);
+
+export default MapContainer;
diff --git a/src/components/common/MapLibreComponents/PopupUI/index.tsx b/src/components/common/MapLibreComponents/PopupUI/index.tsx
new file mode 100644
index 00000000..06e1f56c
--- /dev/null
+++ b/src/components/common/MapLibreComponents/PopupUI/index.tsx
@@ -0,0 +1,56 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-console */
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { format } from 'date-fns';
+import capitalizeFirstLetter from '@Utils/capitalizeFirstLetter';
+// import { popupExceptionKeys } from '@src/constants/map';
+
+const exceptions: string[] = [];
+
+interface IPopupUIProps {
+ data: Record-
+ {popupData &&
+ Object.keys(popupData).map(key => (
+
-
+
{key}
++ {popupData[key]?.toString() || '-'} +
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ {headerContent || (
+
+
+
+ )}
+
+ {!hideCloseButton && (
+
+ )}
+ {title}
+{subtitle}
+
+
+
+ {children}
+
+
+ {children}
+
+ );
+ },
+);
+
+export default RoundedContainer;
diff --git a/src/components/common/Spinner/index.tsx b/src/components/common/Spinner/index.tsx
new file mode 100644
index 00000000..532e3956
--- /dev/null
+++ b/src/components/common/Spinner/index.tsx
@@ -0,0 +1,27 @@
+interface ISpinnnerProps {
+ className?: string;
+}
+
+export default function Spinner({ className }: ISpinnnerProps) {
+ return (
+
+
+
+ );
+}
diff --git a/src/constants/index.ts b/src/constants/index.ts
new file mode 100644
index 00000000..cb0ff5c3
--- /dev/null
+++ b/src/constants/index.ts
@@ -0,0 +1 @@
+export {};
diff --git a/src/constants/map.ts b/src/constants/map.ts
new file mode 100644
index 00000000..fb9ce8e0
--- /dev/null
+++ b/src/constants/map.ts
@@ -0,0 +1,323 @@
+export const buildingStyles = {
+ type: 'fill',
+ layout: {},
+ paint: {
+ 'fill-color': '#0098ff',
+ 'fill-opacity': 1,
+ },
+};
+
+export const roadStyles = {
+ type: 'line',
+ layout: {},
+ paint: {
+ 'line-color': [
+ 'match',
+ ['get', 'road_category'],
+ 'major',
+ '#0664D2',
+ 'minor',
+ '#42B4A2',
+ 'subsidiary',
+ '#333333',
+ '#333333',
+ ],
+ 'line-width': [
+ 'match',
+ ['get', 'road_category'],
+ 'major',
+ 4,
+ 'minor',
+ 3,
+ 'subsidiary',
+ 2,
+ 2,
+ ],
+ },
+};
+
+export const defaultLayersData = [
+ {
+ id: 'building',
+ endPoint: 'building-vector-tile',
+ checked: true,
+ styles: buildingStyles,
+ },
+ {
+ id: 'road',
+ endPoint: 'road-vector-tile',
+ checked: true,
+ styles: roadStyles,
+ },
+];
+
+export interface ILayerState {
+ id: string | number;
+ endPoint: string;
+ checked: boolean;
+ styles: Record