Add Sensor Hub tab to account settings, integrating new SensorHubTab and related components for sensor management. Updated layout and added error handling in the sensor form.

2026-02-19 15:07:21 +03:30
parent 48bf0921c7
commit 3871ec89f7
5 changed files with 122 additions and 11 deletions
@@ -0,0 +1,79 @@
+'use client'
+
+// React Imports
+import { useState } from 'react'
+
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Fade from '@mui/material/Fade'
+
+// Hook Imports
+import { useSensorHub } from '@/hooks/useSensorHub'
+
+// API Imports
+import type { Sensor } from '@/libs/api/services/sensorHubService'
+
+// Component Imports
+import SensorHubTable from '@views/sensorHub/SensorHubTable'
+import OptionSensorHub from '@views/sensorHub/OptionSensorHub'
+import FormSensorHub from '@views/sensorHub/FormSensorHub'
+
+const transitionTimeout = { enter: 300, exit: 200 }
+
+const SensorHubTabContent = () => {
+  const [showAddForm, setShowAddForm] = useState(false)
+  const { setSensorHub } = useSensorHub()
+
+  const handleBack = () => setShowAddForm(false)
+
+  const handleConfirm = (sensor: Sensor) => {
+    setSensorHub({ id: sensor.uuid_sensor, ...sensor })
+  }
+
+  return (
+    <Grid container spacing={6}>
+
+      <Grid size={{ xs: 12 }}>
+        <Card>
+          <CardContent>
+            <Fade key={showAddForm ? 'form' : 'options'} in timeout={transitionTimeout}>
+              <div>
+                {showAddForm ? (
+                  <FormSensorHub onBack={handleBack} />
+                ) : (
+                  <div className='flex flex-col gap-4'>
+                    <div className='grid grid-cols-1 sm:grid-cols-[1fr_auto] items-center gap-4'>
+                      <div className='flex flex-col gap-0.5'>
+                        <Typography variant='h6' fontWeight={600}>
+                          انتخاب سنسور
+                        </Typography>
+                        <Typography variant='body2' color='text.secondary' sx={{ lineHeight: 1.5 }}>
+                          سنسور مورد نظر را انتخاب کنید یا سنسور جدید اضافه کنید
+                        </Typography>
+                      </div>
+                      <Button
+                        variant='contained'
+                        color='primary'
+                        startIcon={<i className='tabler-plus text-xl' />}
+                        onClick={() => setShowAddForm(true)}
+                      >
+                        اضافه کردن سنسور
+                      </Button>
+                    </div>
+                    <OptionSensorHub onConfirm={handleConfirm} />
+                  </div>
+                )}
+              </div>
+            </Fade>
+          </CardContent>
+        </Card>
+      </Grid>
+    </Grid>
+  )
+}
+
+export default SensorHubTabContent