Enable Users to Select the appropriate sensor while creating a new Device

app/components/device/new/custom-device-config.tsx

@@ -1,6 +1,7 @@
 import { X } from 'lucide-react'
 import { useState, useEffect } from 'react'
 import { useFormContext } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
 import { type Sensor } from './sensors-info'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
@@ -20,6 +21,7 @@ export function CustomDeviceConfig() {
 		unit: '',
 		sensorType: '',
 	})
+	const { t } = useTranslation('newdevice');
 
 	// Sync state with form context on mount
 	useEffect(() => {
@@ -53,7 +55,7 @@ export function CustomDeviceConfig() {
 			<div>
 				<div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-3">
 					<div>
-						<Label htmlFor="phenomenon">Phenomenon</Label>
+						<Label htmlFor="phenomenon">{t('phenomenon')}</Label>
 						<Input
 							id="phenomenon"
 							value={newSensor.title}
@@ -62,7 +64,7 @@ export function CustomDeviceConfig() {
 						/>
 					</div>
 					<div>
-						<Label htmlFor="unit">Unit</Label>
+						<Label htmlFor="unit">{t('unit')}</Label>
 						<Input
 							id="unit"
 							value={newSensor.unit}
@@ -71,7 +73,7 @@ export function CustomDeviceConfig() {
 						/>
 					</div>
 					<div>
-						<Label htmlFor="type">Type</Label>
+						<Label htmlFor="type">{t('type')}</Label>
 						<Input
 							id="type"
 							value={newSensor.sensorType}
@@ -86,7 +88,7 @@ export function CustomDeviceConfig() {
 						!newSensor.title || !newSensor.unit || !newSensor.sensorType
 					}
 				>
-					Add Sensor
+					{t('Add Sensor')}
 				</Button>
 			</div>
 

app/components/device/new/general-info.tsx

@@ -1,6 +1,7 @@
 import { Plus, Cloud, Home, HelpCircle, Bike, X, Info } from 'lucide-react'
 import React, { useState } from 'react'
 import { useFormContext, useFieldArray } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Badge } from '~/components/ui/badge'
@@ -13,10 +14,12 @@ import {
 	TooltipTrigger,
 } from '~/components/ui/tooltip'
 
+
 type ExposureOption = 'outdoor' | 'indoor' | 'mobile' | 'unknown'
 
 export function GeneralInfoStep() {
 	const { register, control, setValue, getValues, watch } = useFormContext()
+	const {t} = useTranslation('newdevice')
 	const { fields, append, remove } = useFieldArray({
 		control,
 		name: 'tags', // Tags array
@@ -88,7 +91,7 @@ export function GeneralInfoStep() {
 				/>
 			</div>
 			<div>
-				<Label htmlFor="exposure">Exposure</Label>
+				<Label htmlFor="exposure">{t('exposure')}</Label>
 				<div className="mt-2 flex flex-wrap gap-2">
 					{exposureOptions.map((option) => (
 						<Button
@@ -103,7 +106,7 @@ export function GeneralInfoStep() {
 							}`}
 						>
 							{option.icon}
-							<span className="text-sm">{option.label}</span>
+							<span className="text-sm">{t(option.label)}</span>
 						</Button>
 					))}
 				</div>
@@ -117,7 +120,7 @@ export function GeneralInfoStep() {
 							onCheckedChange={handleTemporaryChange}
 						/>
 						<Label htmlFor="isTemporary" className="text-base font-medium">
-							Temporary Device
+							{t('temporary')}
 						</Label>
 						<TooltipProvider>
 							<Tooltip>
@@ -133,8 +136,7 @@ export function GeneralInfoStep() {
 								<TooltipContent>
 									{
 										<p className="text-sm text-gray-500">
-											Temporary devices will be automatically deleted after a
-											maximum of one month.
+											{t('temporary_info_text')}
 										</p>
 									}
 								</TooltipContent>
@@ -147,7 +149,7 @@ export function GeneralInfoStep() {
 								htmlFor="temporaryExpirationDate"
 								className="whitespace-nowrap text-sm font-medium"
 							>
-								Expiration Date:
+								{t('expiration_date')}
 							</Label>
 							<Input
 								type="date"
@@ -170,7 +172,7 @@ export function GeneralInfoStep() {
 					<Input
 						id="tag-input"
 						type="text"
-						placeholder="Add a tag"
+						placeholder={t('add_tag')}
 						onKeyDown={(e) => {
 							if (e.key === 'Enter') {
 								e.preventDefault()

app/components/device/new/location-info.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, useState, useEffect, useCallback } from 'react'
 import { useFormContext } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
 import {
 	Map,
 	Marker,
@@ -12,10 +13,11 @@ import { Input } from '@/components/ui/input'
 import { Label } from '~/components/ui/label'
 import 'mapbox-gl/dist/mapbox-gl.css'
 
+
 export function LocationStep() {
 	const mapRef = useRef<MapRef | null>(null)
 	const { register, setValue, watch } = useFormContext()
-
+	const { t } = useTranslation('newdevice')
 	const savedLatitude = watch('latitude')
 	const savedLongitude = watch('longitude')
 
@@ -129,7 +131,7 @@ export function LocationStep() {
 
 			<div className="flex w-full items-center justify-around bg-gray-50 p-4 dark:bg-gray-800">
 				<div>
-					<Label htmlFor="latitude">Latitude</Label>
+					<Label htmlFor="latitude">{t('latitude')}</Label>
 					<Input
 						id="latitude"
 						type="number"
@@ -142,13 +144,13 @@ export function LocationStep() {
 						})}
 						value={marker.latitude === '' ? '' : String(marker.latitude)}
 						onChange={handleLatitudeChange}
-						placeholder="Enter latitude (-90 to 90)"
+						placeholder={t('enter latitude')}
 						className="w-full rounded-md border p-2"
 					/>
 				</div>
 
 				<div>
-					<Label htmlFor="longitude">Longitude</Label>
+					<Label htmlFor="longitude">{t('longitude')}</Label>
 					<Input
 						id="longitude"
 						type="number"
@@ -161,7 +163,7 @@ export function LocationStep() {
 						})}
 						value={marker.longitude === '' ? '' : String(marker.longitude)}
 						onChange={handleLongitudeChange}
-						placeholder="Enter longitude (-180 to 180)"
+						placeholder={t('enter longitude')}
 						className="w-full rounded-md border p-2"
 					/>
 				</div>