robobyte-front-builder 1.0.17 → 1.0.21

package/src/pages/viewBuilder/index.jsx

@@ -1,17 +1,86 @@
-import { Box } from '@mui/material'
-import BlankLayout from 'src/@core/layouts/BlankLayout'
+import { Box, IconButton, Tooltip } from '@mui/material'
+import { ThemeProvider, CssBaseline } from '@mui/material'
+import BlankLayout from '../../lib/layouts/BlankLayout'
 import Sidebar from 'views/builder/sidebar/Sidebar'
 import Viewer from 'views/builder/viewer/Viewer'
-import { BuilderProvider, useBuilder } from 'src/context/BuilderContext'
+import { BuilderProvider, useBuilder } from 'context/BuilderContext'
 import Inspector from 'views/builder/inspector/Inspector'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import { Endpoints, Services } from 'services/Endpoints'
+import { ChevronLeft, ChevronRight } from '@mui/icons-material'
+import { createTheme } from '@mui/material/styles'
 
-function ViewBuilderContent() {
+// ── Builder themes (inlined to avoid cross-package path resolution issues) ────
+const _STORAGE_KEY = 'rbb:builderThemeMode'
+const BUILDER_THEMES = {
+  dark: createTheme({
+    palette: {
+      mode: 'dark',
+      primary:    { main: '#9c27b0' },
+      secondary:  { main: '#f5a623' },
+      background: { default: '#141618', paper: '#1e2227' },
+      divider:    '#3a3f45',
+      text:       { primary: '#e8eaed', secondary: '#9aa0aa' },
+    },
+  }),
+  light: createTheme({
+    palette: {
+      mode: 'light',
+      primary:   { main: '#9c27b0' },
+      secondary: { main: '#f5a623' },
+      background: { default: '#f0f2f5', paper: '#ffffff' },
+      divider:   '#dde1e7',
+    },
+  }),
+}
+function getBuilderThemeMode() {
+  try { return localStorage.getItem(_STORAGE_KEY) === 'light' ? 'light' : 'dark' } catch { return 'dark' }
+}
+function saveBuilderThemeMode(mode) {
+  try { localStorage.setItem(_STORAGE_KEY, mode) } catch {}
+}
+
+const SIDEBAR_WIDTH = 300
+const COLLAPSED_WIDTH = 32
+
+function CollapseToggle({ collapsed, onClick, side }) {
+  const Icon = side === 'left'
+    ? (collapsed ? ChevronRight : ChevronLeft)
+    : (collapsed ? ChevronLeft : ChevronRight)
+  const label = collapsed ? 'Expand' : 'Collapse'
+  return (
+    <Tooltip title={label} placement={side === 'left' ? 'right' : 'left'}>
+      <IconButton
+        size='small'
+        onClick={onClick}
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          [side === 'left' ? 'right' : 'left']: -14,
+          zIndex: 10,
+          width: 28,
+          height: 28,
+          bgcolor: 'background.paper',
+          border: '1px solid',
+          borderColor: 'divider',
+          borderRadius: '50%',
+          '&:hover': { bgcolor: 'action.hover' },
+        }}
+      >
+        <Icon sx={{ fontSize: 16 }} />
+      </IconButton>
+    </Tooltip>
+  )
+}
+
+function ViewBuilderContent({ isDark, onToggleTheme }) {
   const router = useRouter()
   const { id } = router.query
-  const { setSchema,setViewMetaData } = useBuilder()
+  const { setSchema, setViewMetaData } = useBuilder()
+  const [leftCollapsed, setLeftCollapsed] = useState(false)
+  const [rightCollapsed, setRightCollapsed] = useState(false)
 
   const handleGetView = async id => {
     try {
@@ -19,7 +88,9 @@ function ViewBuilderContent() {
         id: id
       })
       if (response) {
-        setSchema(JSON.parse(response.data.value))
+        const parsed = JSON.parse(response.data.value)
+        // Backfill dialogs array for schemas saved before the dialogs feature
+        setSchema({ dialogs: [], ...parsed })
         setViewMetaData({
           id: response.data.id,
           title: response.data.title,
@@ -31,7 +102,6 @@ function ViewBuilderContent() {
       }
     } catch (error) {
       console.error(error)
-    } finally {
     }
   }
 
@@ -40,54 +110,69 @@ function ViewBuilderContent() {
   }, [id])
 
   return (
-    <Box
-      sx={{
-        height: '100vh',
-        display: 'flex',
-        overflow: 'hidden',
-      }}
-    >
+    <Box sx={{ height: '100vh', display: 'flex', overflow: 'hidden', bgcolor: 'background.default' }}>
+
       {/* LEFT SIDEBAR */}
       <Box
         sx={{
-          width: 300,
-          minWidth: 220,
-          borderRight: '1px solid #3a3f45'
+          position: 'relative',
+          width: leftCollapsed ? COLLAPSED_WIDTH : SIDEBAR_WIDTH,
+          minWidth: leftCollapsed ? COLLAPSED_WIDTH : SIDEBAR_WIDTH,
+          borderRight: '1px solid',
+          borderColor: 'divider',
+          transition: 'width 0.2s ease, min-width 0.2s ease',
+          overflow: 'hidden',
         }}
       >
-        <Sidebar />
+        <Box sx={{ width: SIDEBAR_WIDTH, height: '100%', opacity: leftCollapsed ? 0 : 1, transition: 'opacity 0.15s ease', pointerEvents: leftCollapsed ? 'none' : 'auto' }}>
+          <Sidebar />
+        </Box>
+        <CollapseToggle collapsed={leftCollapsed} onClick={() => setLeftCollapsed(v => !v)} side='left' />
       </Box>
 
       {/* CENTER VIEWER */}
-      <Box
-        sx={{
-          flex: 1,
-          overflow: 'auto'
-        }}
-      >
-        <Viewer />
+      <Box sx={{ flex: 1, overflow: 'auto', bgcolor: 'background.default' }}>
+        <Viewer isDark={isDark} onToggleTheme={onToggleTheme} />
       </Box>
 
       {/* RIGHT INSPECTOR */}
       <Box
         sx={{
-          width: 300,
-          minWidth: 260,
-          borderLeft: '1px solid #3a3f45',
+          position: 'relative',
+          width: rightCollapsed ? COLLAPSED_WIDTH : SIDEBAR_WIDTH,
+          minWidth: rightCollapsed ? COLLAPSED_WIDTH : SIDEBAR_WIDTH,
+          borderLeft: '1px solid',
+          borderColor: 'divider',
+          transition: 'width 0.2s ease, min-width 0.2s ease',
+          overflow: 'hidden',
         }}
       >
-        <Inspector />
+        <Box sx={{ width: SIDEBAR_WIDTH, height: '100%', opacity: rightCollapsed ? 0 : 1, transition: 'opacity 0.15s ease', pointerEvents: rightCollapsed ? 'none' : 'auto' }}>
+          <Inspector />
+        </Box>
+        <CollapseToggle collapsed={rightCollapsed} onClick={() => setRightCollapsed(v => !v)} side='right' />
       </Box>
+
     </Box>
   )
 }
 
 export default function ViewBuilder() {
+  const [themeMode, setThemeMode] = useState(() => getBuilderThemeMode())
+
+  const toggleTheme = () => {
+    const next = themeMode === 'dark' ? 'light' : 'dark'
+    setThemeMode(next)
+    saveBuilderThemeMode(next)
+  }
 
   return (
-    <BuilderProvider>
-      <ViewBuilderContent />
-    </BuilderProvider>
+    <ThemeProvider theme={BUILDER_THEMES[themeMode]}>
+      <CssBaseline />
+      <BuilderProvider>
+        <ViewBuilderContent isDark={themeMode === 'dark'} onToggleTheme={toggleTheme} />
+      </BuilderProvider>
+    </ThemeProvider>
   )
 }
 

package/src/pages/viewBuilder/views/index.js

@@ -59,7 +59,7 @@ const ViewsList = () => {
           </Grid>
           <Grid item size={4}>
             <Box sx={{ display: 'flex',justifyContent: 'flex-end' }}>
-              <Button variant='contained' sx={{ ml: 3 }} onClick={() => router.push('/viewBuilder/')}>
+              <Button variant='contained' sx={{ ml: 3 }} onClick={() => router.push('/builders/ui')}>
                 New
               </Button>
             </Box>
@@ -113,7 +113,7 @@ const ViewsList = () => {
                     <Button
                       size='small'
                       variant='outlined'
-                      onClick={() => router.push({ pathname: '/viewBuilder/viewPage', query: { viewId: view.viewId } })}
+                      onClick={() => router.push(`/viewer/${view.viewId}`)}
                       sx={{ flexGrow: 1 }} // <-- takes all remaining space
                     >
                       Open
@@ -121,7 +121,7 @@ const ViewsList = () => {
                     <IconButton
                       size='small'
                       variant='outlined'
-                      onClick={() => router.push({ pathname: '/viewBuilder', query: { id: view.id } })}
+                      onClick={() => router.push({ pathname: '/builders/ui', query: { id: view.id } })}
                     >
                       <EditOutlined color={'secondary'} fontSize='small' />
                     </IconButton>

package/src/pages/viewer/[id]/index.js

@@ -26,7 +26,8 @@ export default function ViewPage() {
       })
 
       if (response && response.data) {
-        setSchema(JSON.parse(response.data.value))
+        const parsed = JSON.parse(response.data.value)
+        setSchema({ dialogs: [], ...parsed })
         setViewMetaData({
           id: response.data.id,
           title: response.data.title,

package/src/services/DeleteService.js

@@ -4,71 +4,42 @@ import { resolveURL, getAccessToken } from './config'
 import toast from 'react-hot-toast'
 
 export default async function DeleteService(endpoint, showToast, data, params) {
-  const accessToken = getAccessToken()
-    let response = { status: 'Error', message: '' }
-  let result = null
-  let currentParams = {
-    ...params,
-    ...(endpoint.DataType == DataTypes.Params ? { ...data } : {})
-  }
-
-  if (!data) return
-  const url = resolveURL(endpoint)
+  try {
+    const accessToken = getAccessToken()
+    const url = resolveURL(endpoint)
 
-  const axiosConfig = {
-    method: 'delete',
-    headers: {
-      Authorization: `Bearer ${accessToken}`,
-      'Content-Type': endpoint.ContentType
-    },
-    params: {
-      ...currentParams
+    const currentParams = {
+      ...params,
+      ...(endpoint.DataType === DataTypes.Params ? { ...data } : {})
     }
-  }
-
-  try {
-    await Axios.delete(url, axiosConfig)
-      .then(r => {
-        result = r.data
-        response = {
-          status: 'Success',
-          message: r.data.message ? r.data.message : 'تم الحفظ بنجاح'
-        }
-      })
-      .catch(r => {
 
-        if (r.response && r.response.status == 400) {
-          response = {
-            status: 'Error',
-            message: typeof r.response.data == 'string' ? r.response.data : r.response.data.title
-            // message: "حدث خطأ اثناء الحفظ",
-          }
-        } else if (r.response && (r.response.status == 401 || r.response.status == 403)) {
-          response = {
-            status: 'Error',
-            message: 'غير مخول'
-          }
-        } else {
+    const r = await Axios.delete(url, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        'Content-Type': endpoint.ContentType
+      },
+      params: currentParams
+    })
 
-          response = {
-            status: 'Error',
-            message: 'حدث خطأ في الاتصال مع الخادم'
-          }
-        }
-      })
-  } catch (error) {
-    response = {
-      status: 'Error',
-      message: 'حدث خطأ في الخادم'
-    }
-  } finally {
     if (showToast) {
-      if (response.status == 'Success') {
-        toast.success(response.message)
-      } else {
-        toast.error(response.message)
-      }
+      toast.success(r.data?.message || 'تم الحذف بنجاح')
     }
+    return r.data
+  } catch (err) {
+    console.log(err)
+    const message = resolveErrorMessage(err)
+    toast.error(message)
+    return null
   }
-  return result
+}
+
+function resolveErrorMessage(err) {
+  const status = err?.response?.status
+  const data = err?.response?.data
+
+  if (status === 400) return typeof data === 'string' ? data : data?.title || 'طلب غير صحيح'
+  if (status === 401 || status === 403) return 'غير مخول'
+  if (status >= 500) return 'حدث خطأ في الخادم'
+  if (err?.message) return err.message
+  return 'حدث خطأ في الاتصال مع الخادم'
 }

package/src/services/Endpoints/PrintLayoutEndpoints.js

@@ -0,0 +1,42 @@
+import { ContentTypes, DataTypes } from '../ContentTypes'
+
+export const PrintLayoutEndpoints = {
+  Post: {
+    Add: {
+      group: 'PrintLayout', name: 'Add',
+      URL: 'UiBuilderModule/PrintLayout',
+      ContentType: ContentTypes.Json,
+      DataType: DataTypes.Body
+    }
+  },
+  Put: {
+    Update: {
+      group: 'PrintLayout', name: 'Update',
+      URL: 'UiBuilderModule/PrintLayout',
+      ContentType: ContentTypes.Json,
+      DataType: DataTypes.Body
+    }
+  },
+  Get: {
+    GetAll: {
+      group: 'PrintLayout', name: 'GetAll',
+      URL: 'UiBuilderModule/PrintLayout/GetAll',
+      ContentType: ContentTypes.Json,
+      DataType: DataTypes.Params
+    },
+    GetById: {
+      group: 'PrintLayout', name: 'GetById',
+      URL: 'UiBuilderModule/PrintLayout/GetById',
+      ContentType: ContentTypes.Json,
+      DataType: DataTypes.Params
+    }
+  },
+  Delete: {
+    Delete: {
+      group: 'PrintLayout', name: 'Delete',
+      URL: 'UiBuilderModule/PrintLayout',
+      ContentType: ContentTypes.Json,
+      DataType: DataTypes.Params
+    }
+  }
+}

package/src/services/Endpoints.js

@@ -22,6 +22,7 @@ import { NavigatorEndpoints } from 'services/Endpoints/NavigatorEndpoints'
 import { ViewEndpoints } from './Endpoints/ViewEndpoints'
 import { UiBuilderEndpoints } from 'services/Endpoints/UiBuilderEndpoints'
 import { WidgetEndpoints } from 'services/Endpoints/WidgetEndpoints'
+import { PrintLayoutEndpoints } from 'services/Endpoints/PrintLayoutEndpoints'
 
 // BaseURL and ApiURL are now sourced from the config singleton so that
 // host apps can override them via configureRoboByte() or the
@@ -47,6 +48,7 @@ export const Endpoints = {
   UiBuilder: { ...UiBuilderEndpoints },
   Navigator: { ...NavigatorEndpoints },
   Widget: { ...WidgetEndpoints },
+  PrintLayout: { ...PrintLayoutEndpoints },
   ViewPermission: { ...ViewPermissionEndpoints },
   ViewPermissionRole: { ...ViewPermissionRoleEndpoints },
   ViewPermissionRoleItems: { ...ViewPermissionRoleItemsEndpoints },

package/src/services/GetService.js

@@ -1,64 +1,43 @@
 import Axios from 'axios'
-import { DataTypes } from './ContentTypes'
 import { resolveURL, getAccessToken } from './config'
 import toast from 'react-hot-toast'
+
 export default async function GetService(endpoint, showToast, data, params) {
-  const accessToken = getAccessToken()
-  let response = { status: 'Error', message: '' }
-  let result = null
-  const url = resolveURL(endpoint)
+  try {
+    const accessToken = getAccessToken()
+    const url = resolveURL(endpoint)
+
+    const r = await Axios.get(url, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        'Content-Type': endpoint.ContentType,
+      },
+      params: {
+        ...params,
+        ...data,
+      },
+    })
 
-  const axiosConfig = {
-    method: 'post',
-    headers: {
-      Authorization: `Bearer ${accessToken}`,
-      'Content-Type': endpoint.ContentType
-    },
-    params: {
-      ...data
+    if (showToast) {
+      toast.success(r.data?.message || 'تم التحميل بنجاح')
     }
+    return r.data
+
+  } catch (err) {
+    console.log(err)
+    const message = resolveErrorMessage(err)
+    toast.error(message)
+    return null
   }
+}
 
-  try {
-    await Axios.get(url, axiosConfig)
-      .then(r => {
-        result = r.data
-        response = {
-          status: 'Success',
-          message: r.data.message ? r.data.message : 'تم الحفظ بنجاح'
-        }
-      })
-      .catch(r => {
+function resolveErrorMessage(err) {
+  const status = err?.response?.status
+  const data   = err?.response?.data
 
-        if (r.response && r.response.status == 400) {
-          response = {
-            status: 'Error',
-            message: typeof r.response.data == 'string' ? r.response.data : r.response.data.title
-            // message: "حدث خطأ اثناء الحفظ",
-          }
-        } else if (r.response && (r.response.status == 401 || r.response.status == 403)) {
-          response = {
-            status: 'Error',
-            message: 'غير مخول'
-          }
-        } else {
-          response = {
-            status: 'Error',
-            message: 'حدث خطأ في تحميل البيانات'
-          }
-        }
-      })
-  } catch (error) {
-    response = {
-      status: 'Error',
-      message: 'حدث خطأ في تحميل البيانات'
-    }
-  } finally {
-    if (response.status == 'Success') {
-      if (showToast) toast.success(response.message)
-    } else {
-      toast.error(response.message)
-    }
-  }
-  return result
+  if (status === 400) return typeof data === 'string' ? data : data?.title || 'طلب غير صحيح'
+  if (status === 401 || status === 403) return 'غير مخول'
+  if (status >= 500) return 'حدث خطأ في الخادم'
+  if (err?.message) return err.message
+  return 'حدث خطأ في تحميل البيانات'
 }

package/src/services/PatchService.js

@@ -4,77 +4,50 @@ import { resolveURL, getAccessToken } from './config'
 import toast from 'react-hot-toast'
 
 export default async function PatchService(endpoint, showToast, data, params) {
-  const accessToken = getAccessToken()
-    let response = { status: 'Error', message: '' }
-  let result = null
-  let currentParams = {
-    ...params,
-    ...(endpoint.DataType == DataTypes.Params ? { ...data } : {})
-  }
 
-  let currnetData =
-    endpoint.DataType == DataTypes.Form
-      ? data
-      : {
-          ...(endpoint.DataType == DataTypes.Body ? { ...data } : {})
-        }
-  if (!data) return
-  const url = resolveURL(endpoint)
+  try {
+    const accessToken = getAccessToken()
+    const url = resolveURL(endpoint)
 
-  const axiosConfig = {
-    method: 'patch',
-    headers: {
-      Authorization: `Bearer ${accessToken}`,
-      'Content-Type': endpoint.ContentType
-    },
-    params: {
-      ...currentParams
+    const currentParams = {
+      ...params,
+      ...(endpoint.DataType === DataTypes.Params ? { ...data } : {}),
     }
-  }
-
-  try {
-    await Axios.patch(url, currnetData, axiosConfig)
-      .then(r => {
-        result = r.data
-        response = {
-          status: 'Success',
-          message: r.data.message ? r.data.message : 'تم الحفظ بنجاح'
-        }
-      })
-      .catch(r => {
+    const requestData =
+      endpoint.DataType === DataTypes.Form
+        ? data
+        : endpoint.DataType === DataTypes.Body
+        ? { ...data }
+        : {}
 
-        if (r.response && r.response.status == 400) {
-          response = {
-            status: 'Error',
-            message: typeof r.response.data == 'string' ? r.response.data : r.response.data.title
-            // message: "حدث خطأ اثناء الحفظ",
-          }
-        } else if (r.response && (r.response.status == 401 || r.response.status == 403)) {
-          response = {
-            status: 'Error',
-            message: 'غير مخول'
-          }
-        } else {
+    const r = await Axios.patch(url, requestData, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        'Content-Type': endpoint.ContentType,
+      },
+      params: currentParams,
+    })
 
-          response = {
-            status: 'Error',
-            message: 'حدث خطأ في الاتصال مع الخادم'
-          }
-        }
-      })
-  } catch (error) {
-    response = {
-      status: 'Error',
-      message: 'حدث خطأ في الخادم'
-    }
-  } finally {
     if (showToast) {
-      if (response.status == 'Success') {
-        toast.success(response.message)
-      } else {
-        toast.error(response.message)
-      }
+      toast.success(r.data?.message || 'تم الحفظ بنجاح')
     }
+    return r.data
+
+  } catch (err) {
+    console.log(err)
+    const message = resolveErrorMessage(err)
+    toast.error(message)
+    return null
   }
-  return result
+}
+
+function resolveErrorMessage(err) {
+  const status = err?.response?.status
+  const data   = err?.response?.data
+
+  if (status === 400) return typeof data === 'string' ? data : data?.title || 'طلب غير صحيح'
+  if (status === 401 || status === 403) return 'غير مخول'
+  if (status >= 500) return 'حدث خطأ في الخادم'
+  if (err?.message) return err.message
+  return 'حدث خطأ في الاتصال مع الخادم'
 }