Feature/change style road patrol new

src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx

@@ -30,7 +30,7 @@ function MuiDatePicker({ label, value, setFieldValue, name, minDate, maxDate, he
                     maxDate={maxDate ? new Date(maxDate) : null}
                     slotProps={{
                         textField: {
-                            size: 'small',
+                            size: "small",
                             error: error,
                             placeholder: placeholder,
                             InputProps: {

src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx

@@ -2,10 +2,11 @@
 
 import { FormControl, InputLabel, MenuItem, OutlinedInput, Select } from "@mui/material";
 function CustomSelect({ column, filterParameters, handleChange }) {
-
     return (
         <FormControl fullWidth sx={{ marginY: 1 }} size="small">
-            <InputLabel id={`label${column.id}`} shrink>{column.header}</InputLabel>
+            <InputLabel id={`label${column.id}`} shrink>
+                {column.header}
+            </InputLabel>
             <Select
                 labelId={`label${column.id}`}
                 id={column.id}
@@ -17,7 +18,9 @@ function CustomSelect({ column, filterParameters, handleChange }) {
                 displayEmpty
             >
                 {column.columnSelectOption().map((option) => (
-                    <MenuItem key={option.value} value={option.value}>{option.label}</MenuItem>
+                    <MenuItem key={option.value} value={option.value}>
+                        {option.label}
+                    </MenuItem>
                 ))}
             </Select>
         </FormControl>

src/core/components/DataTable/filter/fieldsType/CustomSelectByDependency.jsx

@@ -13,7 +13,9 @@ function CustomSelectByDependency({
 }) {
     return (
         <FormControl fullWidth sx={{ my: 1 }} size="small">
-            <InputLabel id={`label${column.id}`} shrink>{column.header}</InputLabel>
+            <InputLabel id={`label${column.id}`} shrink>
+                {column.header}
+            </InputLabel>
             <Select
                 labelId={`label${column.id}`}
                 id={column.id}

src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx

@@ -24,7 +24,7 @@ function CustomTextFieldRange({
                 fullWidth
                 error={touched?.[`${column.id}`]?.value && Boolean(errors?.[`${column.id}`]?.value)}
                 helperText={
-                    <Typography variant="caption" sx={{ color: "#155175", fontWeight: 'bold' }}>
+                    <Typography variant="caption" sx={{ color: "#155175", fontWeight: "bold" }}>
                         نوع فیلتر: {defaultFilterTranslation}
                     </Typography>
                 }

src/core/components/ShowPlak.jsx

@@ -16,13 +16,14 @@ const ShowPlak = ({ plak_number }) => {
     const plakParts = processPlak(plak_number);
 
     return (
-        <Stack sx={{ border: 1, borderColor: "divider", borderRadius: 1, maxWidth: "150px" }} direction={"row"}>
+        <Stack sx={{ border: 1, borderColor: "divider", borderRadius: 1 }} direction={"row"}>
             <Stack
                 sx={{
                     borderRight: 1,
                     borderColor: "divider",
                     textAlign: "center",
                     width: "100%",
+                    px: 1,
                 }}
             >
                 {plakParts.region} {plakParts.mainNumber}

src/core/utils/formatSecondsToHHMMSS.js

@@ -0,0 +1,10 @@
+import moment from "jalali-moment";
+
+export const formatSecondsToHHMMSS = (seconds) => {
+    const duration = moment.duration(seconds, "seconds");
+    const hours = Math.floor(duration.asHours());
+    const minutes = duration.minutes();
+    const secs = duration.seconds();
+
+    return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+};