+
+
+
+ {isMqttEnabled && (
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isTtnEnabled && (
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+ );
+}
diff --git a/app/components/device/new/device-info.tsx b/app/components/device/new/device-info.tsx
new file mode 100644
index 00000000..d1485c73
--- /dev/null
+++ b/app/components/device/new/device-info.tsx
@@ -0,0 +1,188 @@
+import { X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useFormContext } from "react-hook-form";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent } from "~/components/ui/card";
+import { Label } from "~/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";
+import { Separator } from "~/components/ui/separator";
+import { cn } from "~/lib/utils";
+
+const devices = [
+ {
+ name: "senseBox:Home",
+ image:
+ "https://sensebox.kaufen/api//public/uploads/thumbs/thumb--1525013086964-mcu_one_top.png",
+ },
+ {
+ name: "senseBox:Edu",
+ image:
+ "https://sensebox.kaufen/api//public/uploads/thumbs/thumb--1524084284270-mcu%20top.png",
+ },
+ {
+ name: "luftdaten.info",
+ image:
+ "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXdpbmQiPjxwYXRoIGQ9Ik0xMi44IDE5LjZBMiAyIDAgMSAwIDE0IDE2SDIiLz48cGF0aCBkPSJNMTcuNSA4YTIuNSAyLjUgMCAxIDEgMiA0SDIiLz48cGF0aCBkPSJNOS44IDQuNEEyIDIgMCAxIDEgMTEgOEgyIi8+PC9zdmc+",
+ },
+ {
+ name: "Custom",
+ image:
+ "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXdyZW5jaCI+PHBhdGggZD0iTTE0LjcgNi4zYTEgMSAwIDAgMCAwIDEuNGwxLjYgMS42YTEgMSAwIDAgMCAxLjQgMGwzLjc3LTMuNzdhNiA2IDAgMCAxLTcuOTQgNy45NGwtNi45MSA2LjkxYTIuMTIgMi4xMiAwIDAgMS0zLTNsNi45MS02LjkxYTYgNiAwIDAgMSA3Ljk0LTcuOTRsLTMuNzYgMy43NnoiLz48L3N2Zz4=",
+ },
+];
+
+const connectionTypes = ["Wifi", "Lora", "Ethernet"];
+
+export function DeviceSelectionStep() {
+ const { setValue, watch } = useFormContext();
+
+ // Watch the existing values from the form state
+ const model = watch("model");
+
+ // Initialize component state with form values
+ const [selectedDevice, setSelectedDevice] = useState(model || null);
+ const [selectedConnectionType, setSelectedConnectionType] = useState("");
+
+ useEffect(() => {
+ if (
+ model === "homeV2Wifi" ||
+ model === "homeV2Ethernet" ||
+ model === "homeV2Lora"
+ ) {
+ setSelectedDevice("senseBox:Home");
+ const connectionMap: Record
+
+
+ {sensors.length > 0 &&
+
+
+
+
+ updateNewSensor("title", e.target.value)}
+ placeholder="e.g., Temperature"
+ />
+
+
+
+ updateNewSensor("unit", e.target.value)}
+ placeholder="e.g., °C"
+ />
+
+
+
+ updateNewSensor("sensorType", e.target.value)}
+ placeholder="e.g., HDC1080"
+ />
+
+
+ {sensor.title} ({sensor.unit}
+ ) - {sensor.sensorType}
+
+
+
+
+ );
+}
diff --git a/app/components/device/new/general-info.tsx b/app/components/device/new/general-info.tsx
new file mode 100644
index 00000000..ce4e2247
--- /dev/null
+++ b/app/components/device/new/general-info.tsx
@@ -0,0 +1,200 @@
+import React, { useState } from "react";
+import { useFormContext, useFieldArray } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "~/components/ui/label";
+import { Plus, Cloud, Home, HelpCircle, Bike, X, Info } from "lucide-react";
+import { Badge } from "~/components/ui/badge";
+import { Checkbox } from "~/components/ui/checkbox";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "~/components/ui/tooltip";
+
+type ExposureOption = "outdoor" | "indoor" | "mobile" | "unknown";
+
+export function GeneralInfoStep() {
+ const { register, control, setValue, getValues, watch } = useFormContext();
+ const { fields, append, remove } = useFieldArray({
+ control,
+ name: "tags", // Tags array
+ });
+
+ const currentExposure = watch("exposure"); // Watch exposure value
+
+ // State for temporary expiration date
+ const [temporaryExpirationDate, setTemporaryExpirationDate] = useState<
+ string | null
+ >(watch("temporaryExpirationDate") || null);
+
+ const maxExpirationDate = new Date();
+ maxExpirationDate.setMonth(maxExpirationDate.getMonth() + 1);
+
+ const handleTemporaryChange = (checked: boolean) => {
+ if (checked) {
+ const newDate = maxExpirationDate.toISOString().split("T")[0];
+ setTemporaryExpirationDate(newDate); // Update local state
+ setValue("temporaryExpirationDate", newDate); // Update form value
+ } else {
+ setTemporaryExpirationDate(null); // Clear local state
+ setValue("temporaryExpirationDate", ""); // Clear form value
+ }
+ };
+
+ const handleExpirationDateChange = (date: string) => {
+ setTemporaryExpirationDate(date); // Update local state
+ setValue("temporaryExpirationDate", date); // Update form value
+ };
+
+ const addTag = (event: React.FormEvent) => {
+ event.preventDefault();
+ const tagInput = document.getElementById("tag-input") as HTMLInputElement;
+ if (tagInput?.value.trim()) {
+ append({ value: tagInput.value.trim() }); // Append a new tag object
+ tagInput.value = ""; // Clear input
+ }
+ };
+
+ const exposureOptions: {
+ value: ExposureOption;
+ icon: React.ReactNode;
+ label: string;
+ }[] = [
+ { value: "outdoor", icon:
+ {devices.map((device) => {
+ if (
+ selectedDevice === "senseBox:Home" &&
+ device.name !== selectedDevice
+ )
+ return null;
+
+ return (
+ {
+ if (selectedDevice === "senseBox:Home") {
+ return;
+ }
+ handleDeviceChange(device.name);
+ }}
+ >
+
+ {selectedDevice === "senseBox:Home" && (
+
+ )}
+ 
+
+
+ );
+ })}
+
+ {device.name}
+ {device.name === "senseBox:Home" && + selectedDevice === "senseBox:Home" && ( + <> +
+
+ handleConnectionTypeChange(value)
+ }
+ className="flex flex-col space-y-1"
+ >
+ {connectionTypes.map((type) => (
+
+
+
+ )}
+ + Connection Type: +
+
+
+ ))}
+
+
+ );
+}
diff --git a/app/components/device/new/location-info.tsx b/app/components/device/new/location-info.tsx
new file mode 100644
index 00000000..2ffc8015
--- /dev/null
+++ b/app/components/device/new/location-info.tsx
@@ -0,0 +1,171 @@
+import React, { useRef, useState, useEffect, useCallback } from "react";
+import { useFormContext } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { Label } from "~/components/ui/label";
+import "mapbox-gl/dist/mapbox-gl.css";
+import {
+ Map,
+ Marker,
+ NavigationControl,
+ GeolocateControl,
+ type MapRef,
+ type MarkerDragEvent,
+} from "react-map-gl";
+
+export function LocationStep() {
+ const mapRef = useRef
+
+
+
+
+
+
+
+ {exposureOptions.map((option) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ {
+
+
+
+
+ {temporaryExpirationDate && (
+ + Temporary devices will be automatically deleted after a + maximum of one month. +
+ } +
+
+ handleExpirationDateChange(e.target.value)}
+ min={new Date().toISOString().split("T")[0]}
+ max={maxExpirationDate.toISOString().split("T")[0]}
+ className="flex-grow p-2 border rounded-md"
+ />
+
+ )}
+
+
+
+
+ {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ addTag(e); // Call addTag on Enter key
+ }
+ }}
+ />
+
+
+
+ {fields.map((field, index) => (
+
+ {getValues(`tags.${index}.value`)}
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/app/components/device/new/new-device-stepper.tsx b/app/components/device/new/new-device-stepper.tsx
new file mode 100644
index 00000000..359c4edc
--- /dev/null
+++ b/app/components/device/new/new-device-stepper.tsx
@@ -0,0 +1,356 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { defineStepper } from "@stepperize/react";
+import type { FieldErrors } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
+import { z } from "zod";
+import { GeneralInfoStep } from "./general-info";
+import { LocationStep } from "./location-info";
+import { SummaryInfo } from "./summary-info";
+import { DeviceSelectionStep } from "./device-info";
+import { Button } from "~/components/ui/button";
+import { useEffect, useState } from "react";
+import { sensorSchema, SensorSelectionStep } from "./sensors-info";
+import { DeviceModelEnum } from "~/schema/enum";
+import { useToast } from "~/components/ui/use-toast";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "~/components/ui/tooltip";
+import { Info, Slash } from "lucide-react";
+import {
+ Breadcrumb,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbList,
+ BreadcrumbSeparator,
+} from "~/components/ui/breadcrumb";
+import { AdvancedStep } from "./advanced-info";
+import { Form, useSubmit } from "@remix-run/react";
+
+const generalInfoSchema = z.object({
+ name: z
+ .string()
+ .min(2, "Name must be at least 2 characters")
+ .min(1, "Name is required"),
+ exposure: z.enum(["indoor", "outdoor", "mobile", "unknown"], {
+ errorMap: () => ({ message: "Exposure is required" }),
+ }),
+ temporaryExpirationDate: z
+ .string()
+ .optional()
+ .transform((date) => (date ? new Date(date) : undefined)) // Transform string to Date
+ .refine(
+ (date) =>
+ !date || date <= new Date(Date.now() + 31 * 24 * 60 * 60 * 1000),
+ {
+ message: "Temporary expiration date must be within 1 month from now",
+ },
+ ),
+ tags: z
+ .array(
+ z.object({
+ value: z.string(),
+ }),
+ )
+ .optional(),
+});
+
+const locationSchema = z.object({
+ latitude: z.coerce
+ .number({
+ invalid_type_error: "Latitude must be a valid number",
+ required_error: "Latitude is required",
+ })
+ .min(-90, "Latitude must be greater than or equal to -90")
+ .max(90, "Latitude must be less than or equal to 90"),
+ longitude: z.coerce
+ .number({
+ invalid_type_error: "Longitude must be a valid number",
+ required_error: "Longitude is required",
+ })
+ .min(-180, "Longitude must be greater than or equal to -180")
+ .max(180, "Longitude must be less than or equal to 180"),
+});
+
+const deviceSchema = z.object({
+ model: z.enum(DeviceModelEnum.enumValues, {
+ errorMap: () => ({ message: "Please select a device." }),
+ }),
+});
+
+// selectedSensors can be an array of sensors
+const sensorsSchema = z.object({
+ selectedSensors: z
+ .array(sensorSchema)
+ .min(1, "Please select at least one sensor"),
+});
+
+const mqttSchema = z
+ .object({
+ mqttEnabled: z.boolean().default(false),
+ url: z.string().optional(),
+ topic: z.string().optional(),
+ messageFormat: z.enum(["json", "csv"]).optional(),
+ decodeOptions: z.string().optional(),
+ connectionOptions: z.string().optional(),
+ })
+ .superRefine((data, ctx) => {
+ if (data.mqttEnabled) {
+ // Check required fields when enabled is true
+ if (!data.url) {
+ ctx.addIssue({
+ path: ["url"],
+ message: "URL is required when MQTT is enabled.",
+ code: "custom",
+ });
+ }
+ if (!data.topic) {
+ ctx.addIssue({
+ path: ["topic"],
+ message: "Topic is required when MQTT is enabled.",
+ code: "custom",
+ });
+ }
+ if (!data.messageFormat) {
+ ctx.addIssue({
+ path: ["messageFormat"],
+ message: "Message format is required when MQTT is enabled.",
+ code: "custom",
+ });
+ }
+ }
+ });
+
+const ttnSchema = z
+ .object({
+ ttnEnabled: z.boolean().default(false),
+ dev_id: z.string().optional(),
+ app_id: z.string().optional(),
+ profile: z
+ .enum([
+ "lora-serialization",
+ "sensebox/home",
+ "json",
+ "debug",
+ "cayenne-lpp",
+ ])
+ .optional(),
+ decodeOptions: z.string().optional(),
+ port: z.number().optional(),
+ })
+ .superRefine((data, ctx) => {
+ if (data.ttnEnabled) {
+ if (!data.dev_id) {
+ ctx.addIssue({
+ path: ["dev_id"],
+ message: "Device ID is required when TTN is enabled.",
+ code: "custom",
+ });
+ }
+
+ if (!data.app_id) {
+ ctx.addIssue({
+ path: ["app_id"],
+ message: "Application ID is required when TTN is enabled.",
+ code: "custom",
+ });
+ }
+
+ if (!data.profile) {
+ ctx.addIssue({
+ path: ["profile"],
+ message: "Profile is required when TTN is enabled.",
+ code: "custom",
+ });
+ }
+ }
+ });
+
+const advancedSchema = z.intersection(mqttSchema, ttnSchema);
+
+export const Stepper = defineStepper(
+ {
+ id: "general-info",
+ label: "General Info",
+ info: "Provide a unique name for your device, select its operating environment (outdoor, indoor, mobile, or unknown), and add relevant tags (optional).",
+ schema: generalInfoSchema,
+ },
+ {
+ id: "location",
+ label: "Location",
+ info: "Select the device's location by clicking on the map or entering latitude and longitude coordinates manually. Drag the marker on the map to adjust the location if needed.",
+ schema: locationSchema,
+ },
+ {
+ id: "device-selection",
+ label: "Device Selection",
+ info: "Select a device model from the available options",
+ schema: deviceSchema,
+ },
+ {
+ id: "sensor-selection",
+ label: "Sensor Selection",
+ info: "Select sensors for your device by choosing from predefined groups or individual sensors based on your device model. If using a custom device, configure sensors manually.",
+ schema: sensorsSchema,
+ },
+ { id: "advanced", label: "Advanced", info: null, schema: advancedSchema },
+ { id: "summary", label: "Summary", info: null, schema: z.object({}) },
+);
+
+type GeneralInfoData = z.infer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Please select a device first.
; + } + + if (selectedDevice === "Custom") { + return
+
+ );
+}
diff --git a/app/components/device/new/summary-info.tsx b/app/components/device/new/summary-info.tsx
new file mode 100644
index 00000000..7aec6055
--- /dev/null
+++ b/app/components/device/new/summary-info.tsx
@@ -0,0 +1,84 @@
+import { useFormContext } from "react-hook-form";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { MapPin, Tag, Smartphone, Cpu, Cog } from "lucide-react";
+
+export function SummaryInfo() {
+ const { getValues } = useFormContext();
+ const formData = getValues();
+
+ const sections = [
+ {
+ title: "General Info",
+ icon:
+
+
+ {sensorGroups.map((group) => {
+ const isGroupSelected = group.sensors.every((sensor) =>
+ selectedSensors.some(
+ (s) =>
+ s.title === sensor.title &&
+ s.sensorType === sensor.sensorType,
+ ),
+ );
+
+ return (
+ handleGroupToggle(group)
+ : undefined
+ }
+ >
+
+
+
+ );
+ })}
+
+ + {group.sensorType} +
+ +-
+ {group.sensors.map((sensor) => {
+ const isSelected = selectedSensors.some(
+ (s) =>
+ s.title === sensor.title &&
+ s.sensorType === sensor.sensorType,
+ );
+
+ return (
+
- { + e.stopPropagation(); + handleSensorToggle(sensor); + } + : undefined + } + > + {sensor.title} ({sensor.unit}) + + ); + })} +
+ {group.image && (
+ 
+ )}
+
+
+
+ );
+}
diff --git a/app/components/mydevices/dt/columns.tsx b/app/components/mydevices/dt/columns.tsx
index 9a47d35e..2d873f40 100644
--- a/app/components/mydevices/dt/columns.tsx
+++ b/app/components/mydevices/dt/columns.tsx
@@ -115,10 +115,10 @@ export const columns: ColumnDef
+ {sections.map((section, index) => (
+
+
+
+
+ ))}
+
+
+ {section.icon}
+
+ + {section.title} +
+
+ {section.data.map((item: any, idx: any) => (
+
+
+ {item.label}:
+
+ {item.value}
+
+
+ ))}
+