chore(ui): improve ui

ARAFarm-Lab · Apr 1, 2024 · 4ef292e · 4ef292e
1 parent edf03c0
commit 4ef292e
Show file tree

Hide file tree

Showing 26 changed files with 285 additions and 275 deletions.
diff --git a/src/apis/action.ts b/src/apis/action.ts
@@ -1,10 +1,6 @@
-import network from "@/utils/network";
-import {
-    Action,
-    ActionHistory,
-    DispatchActionRequest,
-    LastActionResponse
-} from './action.types'
+import network from '@/utils/network';
+
+import { Action, ActionHistory, DispatchActionRequest, LastActionResponse } from './action.types';
 
 const dispatchAction = (request: DispatchActionRequest) => network.post("/action/dispatch", JSON.stringify(request))
 const getActions = (device_id: number): Promise<Action[]> => network.get(`/action/available?device_id=${device_id}`)

diff --git a/src/apis/action.types.ts b/src/apis/action.types.ts
@@ -1,4 +1,4 @@
-import { ActionIcon, ActionSource, ActionType, ActionValue } from "@/constants/action"
+import { ActionIcon, ActionSource, ActionType, ActionValue } from '@/constants/action';
 
 export type Action = {
     id: number,

diff --git a/src/apis/report.ts b/src/apis/report.ts
@@ -1,5 +1,6 @@
-import network from "@/utils/network";
-import { GetSensorReportRequest, SensorReport } from "./report.types";
+import network from '@/utils/network';
+
+import { GetSensorReportRequest, SensorReport } from './report.types';
 
 const getSensorReport = (request: GetSensorReportRequest): Promise<SensorReport> => network.post(`/chart`, JSON.stringify(request))
 

diff --git a/src/apis/report.types.ts b/src/apis/report.types.ts
@@ -1,4 +1,4 @@
-import { SensorType } from "@/constants/sensor"
+import { SensorType } from '@/constants/sensor';
 
 export type GetSensorReportRequest = {
     start_time: string

diff --git a/src/apis/scheduler.ts b/src/apis/scheduler.ts
@@ -1,5 +1,6 @@
-import network from "@/utils/network";
-import { CreateSchedulerRequest, ScheduledTask } from "./scheduler.types";
+import network from '@/utils/network';
+
+import { CreateSchedulerRequest, ScheduledTask } from './scheduler.types';
 
 const createSchedule = (request: CreateSchedulerRequest) => network.post("/schedule", JSON.stringify(request))
 const deleteSchedule = (id: number) => network.delete(`/schedule?id=${id}`)

diff --git a/src/apis/scheduler.types.ts b/src/apis/scheduler.types.ts
@@ -1,6 +1,7 @@
-import { SchedulerRecurringMode } from "@/constants/scheduler"
-import { DispatchActionRequest } from "./action.types"
-import { ScheduleStatus } from "@/constants/action"
+import { ScheduleStatus } from '@/constants/action';
+import { SchedulerRecurringMode } from '@/constants/scheduler';
+
+import { DispatchActionRequest } from './action.types';
 
 export type CreateSchedulerRequest = {
     name: string

diff --git a/src/apis/setting.ts b/src/apis/setting.ts
@@ -1,5 +1,6 @@
-import network from "@/utils/network";
-import { Actuator } from "./setting.types";
+import network from '@/utils/network';
+
+import { Actuator } from './setting.types';
 
 const getActuators = (device_id: number): Promise<Actuator[]> => network.get(`/actuators?device_id=${device_id}`)
 const updateActuator = (actuator: Actuator) => network.patch('/actuator', JSON.stringify(actuator))

diff --git a/src/apis/setting.types.ts b/src/apis/setting.types.ts
@@ -1,4 +1,4 @@
-import { ActionIcon, ActionType } from "@/constants/action"
+import { ActionIcon, ActionType } from '@/constants/action';
 
 export type Actuator = {
     id: number,

diff --git a/src/apis/user.ts b/src/apis/user.ts
@@ -1,6 +1,7 @@
-import network from "@/utils/network";
-import { AuthRequest, AuthResponse } from "./user.types";
-import { UserInfo } from "@/stores/auh.types";
+import { UserInfo } from '@/stores/auh.types';
+import network from '@/utils/network';
+
+import { AuthRequest, AuthResponse } from './user.types';
 
 const getUserInfo = async (): Promise<UserInfo> => network.get('/users/info')
 const getUserList = async (): Promise<UserInfo[]> => network.get('/users')

diff --git a/src/components/confirmation-dialog/index.tsx b/src/components/confirmation-dialog/index.tsx
@@ -1,5 +1,8 @@
-import { Button, DialogContent, DialogTitle, Modal as JoyModal, ModalDialog, Typography } from "@mui/joy";
-import { Transition, TransitionStatus } from "react-transition-group";
+import { Transition, TransitionStatus } from 'react-transition-group';
+
+import {
+    Button, DialogContent, DialogTitle, Modal as JoyModal, ModalDialog, Typography
+} from '@mui/joy';
 
 type ModalTransition = {
     [key in TransitionStatus]: React.CSSProperties;

diff --git a/src/components/loading/index.tsx b/src/components/loading/index.tsx
@@ -0,0 +1,16 @@
+import { LinearProgress } from '@mui/joy';
+
+const Loading = ({ loading, children }: LoadingProps) => {
+    if (loading) {
+        return <LinearProgress sx={{ mt: 2 }} />
+    }
+
+    return <>{children}</>
+}
+
+type LoadingProps = {
+    loading: boolean,
+    children: any
+}
+
+export default Loading
diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
@@ -1,7 +1,9 @@
-import { Button, ColorPaletteProp, DialogContent, DialogTitle, Modal as JoyModal, ModalDialog, VariantProp } from "@mui/joy";
-import { Box } from "@mui/system";
-import { Transition, TransitionStatus } from "react-transition-group";
+import { Transition, TransitionStatus } from 'react-transition-group';
 
+import {
+    Button, ColorPaletteProp, DialogContent, DialogTitle, Modal as JoyModal, ModalDialog,
+    VariantProp, Box
+} from '@mui/joy';
 
 type ModalTransition = {
     [key in TransitionStatus]: React.CSSProperties;

diff --git a/src/constants/action.ts b/src/constants/action.ts
@@ -1,8 +1,8 @@
+import BoltIcon from '@mui/icons-material/Bolt';
 import FluorescentIcon from '@mui/icons-material/Fluorescent';
+import ForestIcon from '@mui/icons-material/Forest';
 import WaterDropIcon from '@mui/icons-material/WaterDrop';
 import WbIncandescentIcon from '@mui/icons-material/WbIncandescent';
-import BoltIcon from '@mui/icons-material/Bolt';
-import ForestIcon from '@mui/icons-material/Forest';
 
 export enum ActionSource {
     User = 1,

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,23 +1,24 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { initializeApp } from "firebase/app";
-import { getAnalytics } from "firebase/analytics";
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
-import dayjs from 'dayjs';
-import timezone from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
-import App from './pages/App.tsx'
-import 'dayjs/locale/id'
-
+import 'dayjs/locale/id';
 import '@fontsource/inter/400.css';
 import '@fontsource/inter/500.css';
 import '@fontsource/inter/600.css';
 import '@fontsource/inter/700.css';
+import './index.css';
+
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { getAnalytics } from 'firebase/analytics';
+import { initializeApp } from 'firebase/app';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 
-import './index.css'
 import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+import App from '@/pages/App.tsx';
 
 const firebaseConfig = {
   apiKey: "AIzaSyDybZITMkE7sCujRU-MlJlSmwmg9agdBbA",

diff --git a/src/pages/App.tsx b/src/pages/App.tsx
@@ -1,10 +1,12 @@
-import { Box, Button, LinearProgress, Snackbar, Typography } from '@mui/joy';
 import './App.css';
 
-import { Outlet, RouterProvider, createRootRoute, createRoute, createRouter, redirect } from '@tanstack/react-router';
 import useAuthStore from '@/stores/auth';
 import useNotification from '@/stores/notification';
+import { Box, Button, LinearProgress, Snackbar, Typography } from '@mui/joy';
 import { useQueryClient } from '@tanstack/react-query';
+import {
+    createRootRoute, createRoute, createRouter, Outlet, redirect, RouterProvider
+} from '@tanstack/react-router';
 
 const Root = () => {
   const notification = useNotification()

diff --git a/src/pages/auth/index.tsx b/src/pages/auth/index.tsx
@@ -1,14 +1,14 @@
-import { Button, CircularProgress, Link, Typography } from "@mui/joy"
-import { Grid, TextField } from "@mui/material"
-import { createLazyRoute, useNavigate } from "@tanstack/react-router"
+import { useEffect, useState } from 'react';
 
-import icon from '@/assets/icon.png'
-import { useEffect, useState } from "react"
-import userAPI from '@/apis/user'
-import { useMutation, useQuery } from "@tanstack/react-query"
-import { AuthRequest } from "@/apis/user.types"
-import useAuthStore from "@/stores/auth"
-import useNotification from "@/stores/notification"
+import userAPI from '@/apis/user';
+import { AuthRequest } from '@/apis/user.types';
+import icon from '@/assets/icon.png';
+import useAuthStore from '@/stores/auth';
+import useNotification from '@/stores/notification';
+import { Button, CircularProgress, Link, Typography } from '@mui/joy';
+import { Grid, TextField } from '@mui/material';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { createLazyRoute, useNavigate } from '@tanstack/react-router';
 
 const Auth = () => {
     const [isLoginState, setIsLoginState] = useState(true)

diff --git a/src/pages/home/admin/index.tsx b/src/pages/home/admin/index.tsx
@@ -1,15 +1,16 @@
-import Modal from "@/components/modal"
-import { Card, Chip, Grid, Option, Select, Typography } from "@mui/joy"
-import { Box, TextField } from "@mui/material"
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import { createLazyRoute } from "@tanstack/react-router"
-
-import settingAPI from '@/apis/setting'
-import userAPI from '@/apis/user'
-import { useState } from "react"
-import { Actuator } from "@/apis/setting.types"
-import { UserInfo } from "@/stores/auh.types"
-import useNotification from "@/stores/notification"
+import { useState } from 'react';
+
+import settingAPI from '@/apis/setting';
+import { Actuator } from '@/apis/setting.types';
+import userAPI from '@/apis/user';
+import Loading from '@/components/loading';
+import Modal from '@/components/modal';
+import { UserInfo } from '@/stores/auh.types';
+import useNotification from '@/stores/notification';
+import { Card, Chip, Grid, Option, Select, Typography } from '@mui/joy';
+import { Box, TextField } from '@mui/material';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { createLazyRoute } from '@tanstack/react-router';
 
 type itemState = Actuator | UserInfo | null
 
@@ -44,9 +45,9 @@ const renderModalBody = (item: itemState, mutator: (item: itemState) => void): J
     return (
         <Grid container flexDirection='column' gap={2}>
             <TextField label="Name" value={actuator.name} onChange={e => mutator({ ...item, name: e.target.value })} />
-            <Grid container justifyContent='space-between' direction='row' >
-                <TextField label="Pin Number" value={actuator.pin_number} onChange={e => mutator({ ...item, pin_number: Number(e.target.value) })} />
-                <TextField label="Terminal Number" value={actuator.terminal_number} onChange={e => mutator({ ...item, terminal_number: Number(e.target.value) })} />
+            <Grid container justifyContent='space-between' direction='row' gap={2}>
+                <TextField sx={{ flex: 1 }} label="Pin Number" value={actuator.pin_number} onChange={e => mutator({ ...item, pin_number: Number(e.target.value) })} />
+                <TextField sx={{ flex: 1 }} label="Terminal Number" value={actuator.terminal_number} onChange={e => mutator({ ...item, terminal_number: Number(e.target.value) })} />
             </Grid>
         </Grid >
     )
@@ -109,33 +110,37 @@ const Admin = () => {
             <Box sx={{ px: 2 }} className="fade">
                 <Typography sx={{ mt: 4 }} level="h2" fontWeight='500'>Admin Panel</Typography>
                 <Typography sx={{ mt: 2 }} level="h4">Users</Typography>
-                <Grid container sx={{ mt: 1 }} flexDirection='column' gap={2}>
-                    {usersQuery.data?.map(user => (
-                        <Card key={user.user_id} onClick={() => handleCardClick(user)}>
-                            <Box display='flex' justifyContent='space-between'>
-                                <Box>
-                                    {user.name}
-                                    {user.role == 99 && <Chip sx={{ ml: 2 }} color="danger">Admin</Chip>}
+                <Loading loading={usersQuery.isLoading}>
+                    <Grid container sx={{ mt: 1 }} flexDirection='column' gap={2}>
+                        {usersQuery.data?.map(user => (
+                            <Card key={user.user_id} onClick={() => handleCardClick(user)}>
+                                <Box display='flex' justifyContent='space-between'>
+                                    <Box>
+                                        {user.name}
+                                        {user.role == 99 && <Chip sx={{ ml: 2 }} size="sm" color="danger">Admin</Chip>}
+                                    </Box>
+                                    <Chip color={user.is_active ? 'success' : 'danger'}>{user.is_active ? "Active" : "Not Active"}</Chip>
                                 </Box>
-                                <Chip color={user.is_active ? 'success' : 'danger'}>{user.is_active ? "Active" : "Not Active"}</Chip>
-                            </Box>
-                        </Card>
-                    ))}
-                </Grid>
+                            </Card>
+                        ))}
+                    </Grid>
+                </Loading>
                 <Typography sx={{ mt: 2 }} level="h4">Panels</Typography>
-                <Grid container sx={{ mt: 1 }} flexDirection='column' gap={2}>
-                    {actuatorsQuery.data?.map(actuator => (
-                        <Card key={actuator.id} onClick={() => handleCardClick(actuator)}>
-                            <Box display='flex' justifyContent='space-between'>
-                                {actuator.name}
-                                <Grid container gap={1}>
-                                    <Chip color="primary">Pin: {actuator.pin_number}</Chip>
-                                    <Chip color="warning">{actuator.terminal_number}</Chip>
-                                </Grid>
-                            </Box>
-                        </Card>
-                    ))}
-                </Grid>
+                <Loading loading={actuatorsQuery.isLoading}>
+                    <Grid container sx={{ mt: 1 }} flexDirection='column' gap={2}>
+                        {actuatorsQuery.data?.map(actuator => (
+                            <Card key={actuator.id} onClick={() => handleCardClick(actuator)}>
+                                <Box display='flex' justifyContent='space-between'>
+                                    {actuator.name}
+                                    <Grid container gap={1}>
+                                        <Chip color="primary">Pin: {actuator.pin_number}</Chip>
+                                        <Chip color="warning">{actuator.terminal_number}</Chip>
+                                    </Grid>
+                                </Box>
+                            </Card>
+                        ))}
+                    </Grid>
+                </Loading>
             </Box >
             <Modal
                 title={renderModalTitle(selectedItem)}