modified hour choice interface

src/shared/sections/lives/add-edit-live/add-live-view.tsx

@@ -11,6 +11,7 @@ import Stack from '@mui/material/Stack';
 import CardHeader from '@mui/material/CardHeader';
 import Typography from '@mui/material/Typography';
 import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import LoadingButton from '@mui/lab/LoadingButton';
 import { Container } from '@mui/material';
@@ -26,7 +27,7 @@ import AddProduct from './add-products';
 import CustomBreadcrumbs from '@/components/custom-breadcrumbs';
 import { paths } from '@/routes/paths';
 import { useSettingsContext } from '@/shared/components/settings';
-import {  ILiveProduct } from '@/shared/types/live';
+import { ILiveProduct } from '@/shared/types/live';
 import { addLive } from '@/shared/api/live';
 
 export default function AddLiveView() {
@@ -88,7 +89,7 @@ export default function AddLiveView() {
     };
 
     const onSubmit = handleSubmit((data) => {
-        const formData = { ...data, image: image as File, products: products.map((product) => product.id)}
+        const formData = { ...data, image: image as File, products: products.map((product) => product.id) }
         addLive(formData)
             .then(() => {
                 enqueueSnackbar('Live created successfully', { variant: 'success' });
@@ -148,6 +149,11 @@ export default function AddLiveView() {
                                     <TimePicker
                                         label="heure de debut"
                                         value={field.value}
+                                        viewRenderers={{
+                                            hours: renderTimeViewClock,
+                                            minutes: renderTimeViewClock,
+                                            seconds: renderTimeViewClock,
+                                        }}
                                         onChange={(newValue) => field.onChange(newValue)}
                                         slotProps={{
                                             textField: {