Lf 4747 create sensor readings kpi component

packages/webapp/src/components/Icons/icons.tsx

@@ -13,6 +13,8 @@
  *  GNU General Public License for more details, see <<https://www.gnu.org/licenses/>.>
  */
 
+import { FunctionComponent } from 'react';
+
 // Finances Carousel
 import { ReactComponent as ExpenseIcon } from '../../assets/images/finance/Expense-icn.svg';
 import { ReactComponent as CropIcon } from '../../assets/images/finance/Crop-icn.svg';
@@ -67,7 +69,7 @@ import { ReactComponent as PlusCircleIcon } from '../../assets/images/plus-circl
 import { ReactComponent as TrashIcon } from '../../assets/images/animals/trash_icon_new.svg';
 import { ReactComponent as EditIcon } from '../../assets/images/edit.svg';
 import { ReactComponent as ChevronLeft } from '../../assets/images/buttons/chevron-left.svg';
-import { FunctionComponent } from 'react';
+import { ReactComponent as Ruler } from '../../assets/images/ruler.svg';
 
 // Input
 import { ReactComponent as LockedIcon } from '../../assets/images/lock-03.svg';
@@ -139,6 +141,7 @@ export const iconMap = {
   TRASH: TrashIcon,
   EDIT: EditIcon,
   CHEVRON_LEFT: ChevronLeft,
+  RULER: Ruler,
   // Input
   LOCKED: LockedIcon,
 

packages/webapp/src/components/Layout/BentoLayout.tsx

@@ -0,0 +1,43 @@
+/*
+ *  Copyright 2025 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+import clsx from 'clsx';
+import { ReactNode } from 'react';
+import styles from './layout.module.scss';
+
+export type BentoLayoutProps = {
+  children: ReactNode;
+  gap?: number;
+  maxColumns?: number;
+  bentoOffMedium?: boolean;
+};
+
+export default function BentoLayout({
+  children,
+  gap = 8,
+  maxColumns = 3,
+  bentoOffMedium = true,
+}: BentoLayoutProps) {
+  const style = {
+    '--bentoGap': `${gap}px`,
+    '--bentoColumns': maxColumns,
+  } as React.CSSProperties;
+
+  return (
+    <div className={clsx(styles.bento, bentoOffMedium && styles.bentoOffMedium)} style={style}>
+      {children}
+    </div>
+  );
+}

packages/webapp/src/components/Layout/layout.module.scss

@@ -12,6 +12,7 @@
  *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
+ @import '@assets/mixin.scss';
 
 .container {
   width: 100%;
@@ -53,4 +54,25 @@
 
 .marginBottom {
   margin-bottom: 104px;
+}
+
+.bento {
+  display: flex;
+  gap: var(--bentoGap);
+  flex-wrap: wrap;
+
+  & > div {
+    flex: 1 1 calc((100% - var(--bentoGap) * (var(--bentoColumns) - 1)) / var(--bentoColumns));
+  }
+  // This overrides default flex responsiveness and jumps to single column of rows style below medium
+  // Currently this is based of design so making it the default behaviour here despite it being unusual
+  &.bentoOffMedium {
+    @include md-breakpoint {
+      flex-direction: column;
+
+      & > div {
+        flex: unset;
+      }
+    }
+  }
 }

packages/webapp/src/components/Tile/SensorTile/SensorKPI.tsx

@@ -0,0 +1,99 @@
+/*
+ *  Copyright 2025 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+import Icon, { IconName } from '../../Icons';
+import BentoLayout from '../../Layout/BentoLayout';
+import { StatusIndicatorPill, StatusIndicatorPillProps } from '../../StatusIndicatorPill';
+import styles from './styles.module.scss';
+import { TMeasurement } from './SensorReadingKPI';
+
+export interface SensorKPIprops extends React.HTMLAttributes<HTMLDivElement> {
+  sensor: {
+    id: string | number;
+    status: StatusIndicatorPillProps;
+  };
+  discriminator: TMeasurement;
+  measurements: TMeasurement[];
+  color?: string;
+}
+
+export interface MeasurementProps extends TMeasurement, React.HTMLAttributes<HTMLDivElement> {}
+
+const discriminatorIconName: { [key: string]: IconName } = {
+  depth_elevation: 'RULER',
+};
+
+const Measurement = ({ measurement, value, unit, ...rest }: MeasurementProps) => (
+  <div {...rest} className={styles.measurement}>
+    <div className={styles.measureText}>{measurement}</div>
+    <div className={styles.valueText}>
+      {value}
+      {unit}
+    </div>
+  </div>
+);
+
+/**
+ * A component that displays a sensor KPI.
+ * AI-assisted JsDoc
+ *
+ * @component
+ * @param props - The props for the component.
+ * @param props.sensor - The sensor details data.
+ * @param props.discriminator - The primary differntiator between sensors in a profile.
+ * @param props.measurements - An array of measurements for each sensor parameter.
+ * @param props.color - The primary color for styling - should be a six digit hex color.
+ * @param props.rest - Additional props to spread onto the root div.
+ * @returns The rendered SensorKPI component.
+ */
+export default function SensorKPI({
+  sensor,
+  discriminator,
+  measurements,
+  color = '#000000',
+  ...rest
+}: SensorKPIprops) {
+  const { measurement, value, unit } = discriminator;
+  const { status, id } = sensor;
+
+  // 0D is the code for 5% opacity, 95% transparency
+  const style = {
+    '--color': color,
+    '--colorWithOpacity': `${color}0D`,
+  } as React.CSSProperties;
+  return (
+    <div {...rest} className={styles.sensorKpi} style={style}>
+      <div className={styles.topDetails}>
+        <div className={styles.sensor}>
+          <Icon iconName="SENSOR" className={styles.icon} />
+          {id}
+        </div>
+        <div className={styles.discriminator}>
+          <Icon iconName={discriminatorIconName[measurement] || 'RULER'} className={styles.icon} />
+          <div className={styles.discriminatorText}>
+            {value}
+            {unit}
+          </div>
+        </div>
+        <StatusIndicatorPill {...status} />
+      </div>
+      <BentoLayout maxColumns={2} bentoOffMedium={false}>
+        {measurements.map((m, i) => (
+          <Measurement key={`${m.measurement}-${i}`} {...m} />
+        ))}
+      </BentoLayout>
+    </div>
+  );
+}

packages/webapp/src/components/Tile/SensorTile/SensorReadingKPI.tsx

@@ -0,0 +1,64 @@
+/*
+ *  Copyright 2025 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+import styles from './styles.module.scss';
+
+export type TMeasurement = {
+  measurement: string;
+  value: string | number;
+  unit: string;
+};
+
+export interface SensorReadingKPIprops extends TMeasurement, React.HTMLAttributes<HTMLDivElement> {
+  color?: string;
+}
+
+/**
+ * A component that displays a sensor reading KPI (Key Performance Indicator).
+ * AI-assisted JsDoc
+ *
+ * @component
+ * @param props - The props for the component.
+ * @param props.measurement - The name of the measurement (e.g., "Temperature").
+ * @param props.value - The value of the sensor reading.
+ * @param props.unit - The unit of measurement (e.g., "°C", "ppm").
+ * @param props.color - The primary color for styling - should be a six digit hex color.
+ * @param props.rest - Additional props to spread onto the root div.
+ * @returns The rendered SensorReadingKPI component.
+ */
+export default function SensorReadingKPI({
+  measurement,
+  value,
+  unit,
+  color = '#000000',
+  ...rest
+}: SensorReadingKPIprops) {
+  // 0D is the code for 5% opacity, 95% transparency
+  const style = {
+    '--color': color,
+    '--colorWithOpacity': `${color}0D`,
+  } as React.CSSProperties;
+  return (
+    <div {...rest} className={styles.sensorReadingKpi} style={style}>
+      <div className={styles.opaqueLayer}>
+        <div className={styles.measureText}>{measurement}</div>
+        <div className={styles.valueText}>
+          {value}
+          {unit}
+        </div>
+      </div>
+    </div>
+  );
+}

packages/webapp/src/components/Tile/SensorTile/styles.module.scss

@@ -0,0 +1,87 @@
+/*
+ *  Copyright 2025 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+@import '@assets/mixin.scss';
+
+.sensorReadingKpi, .sensorKpi {
+  border-radius: 4px;
+  display: flex;
+  // CSS trick to avoid the opacity layer: https://stackoverflow.com/a/77781112
+  background: linear-gradient(90deg, var(--colorWithOpacity) 0%, var(--colorWithOpacity) 100%) white;
+  color: var(--color);
+  padding: 8px 12px;
+  flex-direction: column;
+  flex: 1 0 0;
+  @include fontFamily();
+  font-style: normal;
+  gap: 8px;
+}
+
+.measureText {
+  white-space: nowrap;
+  align-self: stretch;
+  font-size: 14px;
+  font-weight: 300;
+  line-height: normal;
+}
+
+.valueText {
+  align-self: stretch;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 24px; /* 100% */
+}
+
+.measurement {
+  display: block;
+}
+
+.topDetails {
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+}
+
+.sensor {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  @include svgColorFill(var(--color));
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 30px; /* 187.5% */
+}
+
+.discriminator {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  @include svgColorFill(var(--color));
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 30px; /* 214.286% */
+}
+
+.icon {
+  padding: 0px;
+  background-color: transparent;
+}
+
+.discriminatorText {
+  position: relative;
+  left: -16px;
+}