diff --git a/apps/cms/@types/global.d.ts b/apps/cms/@types/global.d.ts
index 8b802b7d..ea9485ed 100644
--- a/apps/cms/@types/global.d.ts
+++ b/apps/cms/@types/global.d.ts
@@ -1,9 +1,9 @@
 declare global {
-    namespace NodeJS {
-        interface ProcessEnv {
-            GOOGLE_MAP_API_KEY: string
-        }
+  namespace NodeJS {
+    interface ProcessEnv {
+      GOOGLE_MAP_API_KEY: string;
     }
+  }
 }
 
-export {}
+export {};
diff --git a/apps/cms/@types/util.d.ts b/apps/cms/@types/util.d.ts
index dffc7ed5..ebb4d216 100644
--- a/apps/cms/@types/util.d.ts
+++ b/apps/cms/@types/util.d.ts
@@ -1,10 +1,10 @@
-type AxiosRequestConfig = import('axios').AxiosRequestConfig
+type AxiosRequestConfig = import('axios').AxiosRequestConfig;
 
 interface IAuthToken {
-    access_token?: string
-    refresh_token?: string
-    access_token_expires_in?: number
-    access_token_expires_at?: number
+  access_token?: string;
+  refresh_token?: string;
+  access_token_expires_in?: number;
+  access_token_expires_at?: number;
 }
 
-type Nullable<T> = T | null
+type Nullable<T> = T | null;
diff --git a/apps/cms/app/(dash)/orders/[orderId]/page.tsx b/apps/cms/app/(dash)/orders/[orderId]/page.tsx
index aa15800c..04c8dcf7 100644
--- a/apps/cms/app/(dash)/orders/[orderId]/page.tsx
+++ b/apps/cms/app/(dash)/orders/[orderId]/page.tsx
@@ -1,213 +1,205 @@
 /* eslint-disable react/no-children-prop */
-'use client'
+'use client';
 
-import { OrderStatus } from '@/features/order/order.types'
-import useGetOrder from '@/features/order/useGetOrder'
+import { OrderStatus } from '@/features/order/order.types';
+import useGetOrder from '@/features/order/useGetOrder';
 import {
-    Box,
-    Stack,
-    Button,
-    Input,
-    InputLabel,
-    FormControl,
-    Container,
-    Paper,
-    Typography,
-    Stepper,
-} from '@mui/material'
-import LocalShippingIcon from '@mui/icons-material/LocalShipping'
-import { useForm } from '@tanstack/react-form'
-import React from 'react'
-import { GoogleMap, useJsApiLoader } from '@react-google-maps/api'
-import _ from 'lodash'
-import useGetOrderHubsPath from '@/features/order/useGetOrderHubsPath'
+  Box,
+  Stack,
+  Button,
+  Input,
+  InputLabel,
+  FormControl,
+  Container,
+  Paper,
+  Typography,
+  Stepper,
+} from '@mui/material';
+import LocalShippingIcon from '@mui/icons-material/LocalShipping';
+import { useForm } from '@tanstack/react-form';
+import React from 'react';
+import { GoogleMap, useJsApiLoader } from '@react-google-maps/api';
+import _ from 'lodash';
+import useGetOrderHubsPath from '@/features/order/useGetOrderHubsPath';
 
 const containerStyle = {
-    width: '100%',
-    height: '400px',
-}
+  width: '100%',
+  height: '400px',
+};
 
 const center = {
-    lat: -3.745,
-    lng: -38.523,
-}
+  lat: -3.745,
+  lng: -38.523,
+};
 
 function Order({ params }: { params: { orderId: string } }) {
-    const {
-        data: orderApiRes,
-        isLoading: orderLoading,
-        isError: orderError,
-    } = useGetOrder(params.orderId)
+  const {
+    data: orderApiRes,
+    isLoading: orderLoading,
+    isError: orderError,
+  } = useGetOrder(params.orderId);
 
-    const {
-        data: orderHubsPathApiRes,
-        isLoading: hubsPathLoading,
-        isError: hubsPathError,
-    } = useGetOrderHubsPath(params.orderId)
+  const {
+    data: orderHubsPathApiRes,
+    isLoading: hubsPathLoading,
+    isError: hubsPathError,
+  } = useGetOrderHubsPath(params.orderId);
 
-    const form = useForm({
-        // Memoize your default values to prevent re-renders
-        defaultValues: {
-            ...orderApiRes?.data,
-        },
-        onSubmit: async (values) => {
-            // Do something with form data
-            console.log(values)
-        },
-    })
+  const form = useForm({
+    // Memoize your default values to prevent re-renders
+    defaultValues: {
+      ...orderApiRes?.data,
+    },
+    onSubmit: async (values) => {
+      // Do something with form data
+      console.log(values);
+    },
+  });
 
-    const { isLoaded } = useJsApiLoader({
-        id: 'google-map-script',
-        googleMapsApiKey: '',
-    })
+  const { isLoaded } = useJsApiLoader({
+    id: 'google-map-script',
+    googleMapsApiKey: '',
+  });
 
-    const [map, setMap] = React.useState(null)
+  const [map, setMap] = React.useState(null);
 
-    const onLoad = React.useCallback(function callback(map: any) {
-        // This is just an example of getting and using the map instance!!! don't just blindly copy!
-        const bounds = new window.google.maps.LatLngBounds(center)
-        map.fitBounds(bounds)
+  const onLoad = React.useCallback(function callback(map: any) {
+    // This is just an example of getting and using the map instance!!! don't just blindly copy!
+    const bounds = new window.google.maps.LatLngBounds(center);
+    map.fitBounds(bounds);
 
-        setMap(map)
-    }, [])
+    setMap(map);
+  }, []);
 
-    const onUnmount = React.useCallback(function callback(map: any) {
-        setMap(null)
-    }, [])
+  const onUnmount = React.useCallback(function callback(map: any) {
+    setMap(null);
+  }, []);
 
-    if (orderLoading) {
-        return 'Loading...'
-    }
+  if (orderLoading) {
+    return 'Loading...';
+  }
 
-    if (!orderApiRes || orderError) {
-        return 'There is an error occurred!'
-    }
+  if (!orderApiRes || orderError) {
+    return 'There is an error occurred!';
+  }
 
-    return (
-        <Container maxWidth="xl" sx={{ '& > :not(style)': { m: 2 } }}>
-            {
-                // isLoaded && (
-                //     <GoogleMap
-                //         mapContainerStyle={containerStyle}
-                //         center={center}
-                //         zoom={10}
-                //         onLoad={onLoad}
-                //         onUnmount={onUnmount}
-                //     >
-                //         {/* Child components, such as markers, info windows, etc. */}
-                //         <Box
-                //             sx={{
-                //                 zIndex: 99,
-                //             }}
-                //         >
-                //             <Typography variant="h1" component="h1">
-                //                 Hello
-                //             </Typography>
-                //         </Box>
-                //     </GoogleMap>
-                // )
-            }
-            <Box sx={{
-                width: "100%"
-            }}>
-                {orderHubsPathApiRes && (
-                    <iframe
-                        width="100%"
-                        height="500"
-                        frameBorder="0"
-                        style={{
-                            border: 0,
-                        }}
-                        allowFullScreen
-                        referrerPolicy="no-referrer-when-downgrade"
-                        src={`https://www.google.com/maps/embed/v1/directions?${new URLSearchParams(
-                            {
-                                region: 'VN',
-                                key: `AIzaSyDAW0v16XSZI3GdNte36gFHDynsed4-cz0`,
-                                origin: `${
-                                    orderHubsPathApiRes.data.items[0].location
-                                        ?.latitude ?? 0
-                                },${
-                                    orderHubsPathApiRes.data.items[0].location
-                                        ?.longitude ?? 0
-                                }`,
-                                destination: `${
-                                    orderHubsPathApiRes.data.items[1].location
-                                        ?.latitude ?? 0
-                                },${
-                                    orderHubsPathApiRes.data.items[1].location
-                                        ?.longitude ?? 0
-                                }`,
-                            }
-                        )}`}
-                    ></iframe>
-                )}
+  return (
+    <Container maxWidth="xl" sx={{ '& > :not(style)': { m: 2 } }}>
+      {
+        // isLoaded && (
+        //     <GoogleMap
+        //         mapContainerStyle={containerStyle}
+        //         center={center}
+        //         zoom={10}
+        //         onLoad={onLoad}
+        //         onUnmount={onUnmount}
+        //     >
+        //         {/* Child components, such as markers, info windows, etc. */}
+        //         <Box
+        //             sx={{
+        //                 zIndex: 99,
+        //             }}
+        //         >
+        //             <Typography variant="h1" component="h1">
+        //                 Hello
+        //             </Typography>
+        //         </Box>
+        //     </GoogleMap>
+        // )
+      }
+      <Box
+        sx={{
+          width: '100%',
+        }}
+      >
+        {orderHubsPathApiRes && (
+          <iframe
+            width="100%"
+            height="500"
+            frameBorder="0"
+            style={{
+              border: 0,
+            }}
+            allowFullScreen
+            referrerPolicy="no-referrer-when-downgrade"
+            src={`https://www.google.com/maps/embed/v1/directions?${new URLSearchParams(
+              {
+                region: 'VN',
+                key: `AIzaSyDAW0v16XSZI3GdNte36gFHDynsed4-cz0`,
+                origin: `${
+                  orderHubsPathApiRes.data.items[0].location?.latitude ?? 0
+                },${
+                  orderHubsPathApiRes.data.items[0].location?.longitude ?? 0
+                }`,
+                destination: `${
+                  orderHubsPathApiRes.data.items[1].location?.latitude ?? 0
+                },${
+                  orderHubsPathApiRes.data.items[1].location?.longitude ?? 0
+                }`,
+              },
+            )}`}
+          ></iframe>
+        )}
+      </Box>
+      <form.Provider>
+        <Paper
+          sx={{
+            paddingX: 4,
+            paddingY: 2,
+            width: '100%',
+          }}
+        >
+          {Object.keys(orderApiRes.data).map((k) => (
+            <Box
+              key={`formField_${k}`}
+              sx={{
+                marginY: 2,
+              }}
+            >
+              <form.Field
+                name={k}
+                onChange={(value: any) =>
+                  !value
+                    ? 'A first name is required'
+                    : value.length < 3
+                    ? 'First name must be at least 3 characters'
+                    : undefined
+                }
+                onChangeAsyncDebounceMs={500}
+                onChangeAsync={async (value: any) => {
+                  await new Promise((resolve) => setTimeout(resolve, 1000));
+                  return (
+                    value.includes('error') &&
+                    'No "error" allowed in first name'
+                  );
+                }}
+                children={(field) => {
+                  return (
+                    <FormControl fullWidth>
+                      <InputLabel htmlFor={field.name}>
+                        {_.startCase(field.name)}
+                      </InputLabel>
+                      <Input
+                        name={field.name}
+                        value={field.state.value as any}
+                        onBlur={field.handleBlur}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                      />
+                      {/* <FieldInfo field={field} /> */}
+                    </FormControl>
+                  );
+                }}
+              />
             </Box>
-            <form.Provider>
-                <Paper
-                    sx={{
-                        paddingX: 4,
-                        paddingY: 2,
-                        width: '100%',
-                    }}
-                >
-                    {Object.keys(orderApiRes.data).map((k) => (
-                        <Box
-                            key={`formField_${k}`}
-                            sx={{
-                                marginY: 2,
-                            }}
-                        >
-                            <form.Field
-                                name={k}
-                                onChange={(value: any) =>
-                                    !value
-                                        ? 'A first name is required'
-                                        : value.length < 3
-                                        ? 'First name must be at least 3 characters'
-                                        : undefined
-                                }
-                                onChangeAsyncDebounceMs={500}
-                                onChangeAsync={async (value: any) => {
-                                    await new Promise((resolve) =>
-                                        setTimeout(resolve, 1000)
-                                    )
-                                    return (
-                                        value.includes('error') &&
-                                        'No "error" allowed in first name'
-                                    )
-                                }}
-                                children={(field) => {
-                                    return (
-                                        <FormControl fullWidth>
-                                            <InputLabel htmlFor={field.name}>
-                                                {_.startCase(field.name)}
-                                            </InputLabel>
-                                            <Input
-                                                name={field.name}
-                                                value={field.state.value as any}
-                                                onBlur={field.handleBlur}
-                                                onChange={(e) =>
-                                                    field.handleChange(
-                                                        e.target.value
-                                                    )
-                                                }
-                                            />
-                                            {/* <FieldInfo field={field} /> */}
-                                        </FormControl>
-                                    )
-                                }}
-                            />
-                        </Box>
-                    ))}
-                </Paper>
-                <Stack direction="row" spacing={1} sx={{ mb: 1 }}>
-                    <Button>Update</Button>
-                    <Button>Delete</Button>
-                </Stack>
-            </form.Provider>
-        </Container>
-    )
+          ))}
+        </Paper>
+        <Stack direction="row" spacing={1} sx={{ mb: 1 }}>
+          <Button>Update</Button>
+          <Button>Delete</Button>
+        </Stack>
+      </form.Provider>
+    </Container>
+  );
 }
 
-export default Order
+export default Order;
diff --git a/apps/cms/app/api/maps/directions/route.ts b/apps/cms/app/api/maps/directions/route.ts
index baa1f5d9..106281db 100644
--- a/apps/cms/app/api/maps/directions/route.ts
+++ b/apps/cms/app/api/maps/directions/route.ts
@@ -1,12 +1,12 @@
-import { NextRequest } from 'next/server'
+import { NextRequest } from 'next/server';
 
 export async function GET(request: NextRequest) {
-    request.nextUrl.searchParams.append('key', process.env.GOOGLE_MAP_API_KEY)
-    console.log(request.nextUrl.searchParams)
-    const url = new URL(
-        `https://www.google.com/maps/embed/v1/directions?${request.nextUrl.searchParams}`
-    )
-    const res = await fetch(url)
+  request.nextUrl.searchParams.append('key', process.env.GOOGLE_MAP_API_KEY);
+  console.log(request.nextUrl.searchParams);
+  const url = new URL(
+    `https://www.google.com/maps/embed/v1/directions?${request.nextUrl.searchParams}`,
+  );
+  const res = await fetch(url);
 
-    return res
+  return res;
 }
diff --git a/apps/cms/common/utils/string.ts b/apps/cms/common/utils/string.ts
index ab1d9278..17712277 100644
--- a/apps/cms/common/utils/string.ts
+++ b/apps/cms/common/utils/string.ts
@@ -1,5 +1,5 @@
 export function getPagingQueryString(options: Partial<PagingOptions>): string {
-    return `?${Object.entries(options)
-        .map((value) => `${value[0]}=${value[1]}`)
-        .join('&')}`
+  return `?${Object.entries(options)
+    .map((value) => `${value[0]}=${value[1]}`)
+    .join('&')}`;
 }