datastake-daf 0.6.803 → 0.6.804

package/src/@daf/core/components/Dashboard/Widget/InvasiveSpeciesWidget/index.jsx

@@ -0,0 +1,87 @@
+import Widget from "../index.jsx";
+import styled from "styled-components";
+import { getInvasiveSpeciesConfig } from "./config.js";
+import { Tooltip } from "antd";
+
+export default function InvasiveSpeciesWidget({
+	title = "Invasive Species",
+	invasiveSpecies = [],
+	hasInvasiveSpecies,
+	filterKeys = null,
+	columnsPerRow = 3,
+	itemWidth = 100,
+	itemHeight = 100,
+	t = (key) => key,
+	...props
+}) {
+	let invasiveSpeciesConfig = getInvasiveSpeciesConfig();
+	
+	// Filter to show only specific keys if filterKeys is provided
+	if (filterKeys && Array.isArray(filterKeys)) {
+		invasiveSpeciesConfig = invasiveSpeciesConfig.filter(item => filterKeys.includes(item.key));
+	}
+
+	return (
+		<Widget title={title} className={`with-border-header no-p-body`} {...props}>
+			<InvasiveSpeciesWrapper $columnsPerRow={columnsPerRow}>
+				<InvasiveSpeciesContainer 
+					$columnsPerRow={columnsPerRow}
+					$itemWidth={itemWidth}
+					$itemHeight={itemHeight}
+				>
+					{invasiveSpeciesConfig.map((item) => {
+						// If hasInvasiveSpecies is 'no', show all as inactive
+						// If hasInvasiveSpecies is 'yes', show present ones as active
+						const shouldShowAllAsNotPresent = hasInvasiveSpecies === 'no';
+						const isPresent = !shouldShowAllAsNotPresent && 
+						                 Array.isArray(invasiveSpecies) && 
+						                 invasiveSpecies.includes(item.key);
+						const shouldUseColored = isPresent;
+
+						return (
+							<Tooltip key={item.key} title={t(`straatos::${item.key}`)}>
+								<img
+									src={shouldUseColored ? item.img : item.disabled}
+									key={item.key}
+									className={`invasive-species-item`}
+									alt={item.key}
+								></img>
+							</Tooltip>
+						);
+					})}
+				</InvasiveSpeciesContainer>
+			</InvasiveSpeciesWrapper>
+		</Widget>
+	);
+}
+
+const InvasiveSpeciesWrapper = styled.div`
+	padding: 24px;
+	width: 100%;
+	${props => props.$columnsPerRow ? `
+		overflow-x: auto;
+	` : ''}
+`;
+
+const InvasiveSpeciesContainer = styled.div`
+	display: grid;
+	grid-template-columns: ${props => 
+		props.$columnsPerRow 
+			? `repeat(${props.$columnsPerRow}, 1fr)` 
+			: `repeat(auto-fit, minmax(${props.$itemWidth}px, 1fr))`
+	};
+	gap: 24px;
+	width: 100%;
+
+	.invasive-species-item {
+		width: 100%;
+		aspect-ratio: ${props => props.$itemWidth / props.$itemHeight};
+		border-radius: 7px;
+		flex-shrink: 0;
+		display: block;
+		margin: 0;
+		padding: 0;
+		object-fit: contain;
+	}
+`;
+

package/src/@daf/pages/Summary/Activities/Monitoring/components/BiodiversityAndHabitat/index.jsx

@@ -1,21 +1,27 @@
-import React, { useMemo } from 'react';
-import { ActivityIndicators, Widget } from '../../../../../../../../src/index.js';
+import React from 'react';
+import { Widget, FaunaWidget, InvasiveSpeciesWidget } from '../../../../../../../../src/index.js';
 import styled from 'styled-components';
-import { 
-    generateFaunaConfig, 
-    generateInvasiveSpeciesConfig 
-} from './helper';
 
-const Container = styled.div`
-    display: grid;
-    grid-template-columns: 70% 28.5%;
+const BiodiversityContainer = styled.div`
+    display: flex;
     gap: 24px;
     width: 100%;
+    
     @media (max-width: 768px) {
-        grid-template-columns: 1fr;
+        flex-direction: column;
     }
 `;
 
+const FaunaSection = styled.section`
+    width: 60%;
+    min-width: 0;
+`;
+
+const InvasiveSpeciesSection = styled.section`
+width: 38.5%;
+`;
+
+
 const BiodiversityAndHabitat = ({
     faunaPresent = [],
     invasiveSpecies = [],
@@ -23,40 +29,37 @@ const BiodiversityAndHabitat = ({
     loading = false,
     t = (s) => s
 }) => {
-    const observedFaunaConfig = useMemo(() => 
-        generateFaunaConfig(faunaPresent, t),
-        [faunaPresent, t]
-    );
-
-    const invasiveSpeciesConfig = useMemo(() => 
-        generateInvasiveSpeciesConfig(invasiveSpecies, hasInvasiveSpecies, t),
-        [invasiveSpecies, hasInvasiveSpecies, t]
-    );
-
     return (
         <Widget
             title={t("Biodiversity & Habitat")}
             className="with-border-header h-w-btn-header"
         >
-            <section>
-                <Container>
-                    <ActivityIndicators
+            <BiodiversityContainer>
+                <FaunaSection>
+                    <FaunaWidget
                         title={t("Observed Fauna")}
-                        config={observedFaunaConfig}
+                        faunaPresent={faunaPresent}
+                        columnsPerRow={5}
+                        itemWidth={120}
+                        itemHeight={120}
                         loading={loading}
-                        widgetClassName="h-w-btn-header"
                         t={t}
                     />
-                    <ActivityIndicators
+                </FaunaSection>
+
+                <InvasiveSpeciesSection>
+                    <InvasiveSpeciesWidget
                         title={t("Invasive Species")}
-                        config={invasiveSpeciesConfig}
+                        invasiveSpecies={invasiveSpecies}
+                        hasInvasiveSpecies={hasInvasiveSpecies}
+                        columnsPerRow={3}
+                        itemWidth={100}
+                        itemHeight={100}
                         loading={loading}
-                        className="single-column"
-                        widgetClassName="h-w-btn-header"
                         t={t}
                     />
-                </Container>
-            </section>
+                </InvasiveSpeciesSection>
+            </BiodiversityContainer>
         </Widget>
     );
 };

package/src/index.js

@@ -79,6 +79,8 @@ export { default as CarouselWidget } from "./@daf/core/components/Dashboard/Widg
 export { default as ImageCarousel } from "./@daf/core/components/Dashboard/Widget/ImageCarousel/index.jsx";
 export { default as StatCard } from "./@daf/core/components/Dashboard/Widget/StatCard/index.js";
 export { default as VegetationHealth } from "./@daf/core/components/Dashboard/Widget/VegetationWidget/index.jsx";
+export { default as FaunaWidget } from "./@daf/core/components/Dashboard/Widget/FaunaWidget/index.jsx";
+export { default as InvasiveSpeciesWidget } from "./@daf/core/components/Dashboard/Widget/InvasiveSpeciesWidget/index.jsx";
 // export { default as WidgetCatalogue } from "./@daf/core/components/Dashboard/Widget/WidgetCatalogue/index.jsx";
 
 // Forms