@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/utils/GujaratTopoChart.jsx

@@ -0,0 +1,483 @@
+import React, { useState, useMemo } from 'react';
+import { Loader2 } from "lucide-react";
+import { ComposableMap, Geographies, Geography, Marker } from 'react-simple-maps';
+import topoData from '@/assets/Gujarat-Topo.json';
+import Grid from '@mui/material/Grid2';
+import { Paper, Typography } from '@mui/material';
+import * as topojson from 'topojson-client';
+import { colorMap, CORPORATION, stateData1 } from '@/common/constants/PerformanceDashboard';
+
+/**
+ * Returns the mapped name for a district if available, else returns the original name.
+ * @param {string} name - District name from topo data.
+ * @returns {string} - Mapped district name.
+ */
+const NAME_MAPPING_MAP = {
+  'Jam Kandorna': 'Jamkandorna',
+  Vinchhiya: 'Vinchchiya',
+  'Kotda Sangani': 'Kotada sangani',
+  'Gir Somnath': 'Gir Somnath',
+  Kachchh: 'Kutch',
+  Mahesana: 'mehsana',
+  'Chhota Udepur': 'Chhota udepur',
+  'Devbhumi Dwarka': 'Devbhumi Dwarka',
+  umerpada: 'Umarpada',
+  mandavi: 'Mandvi',
+  Baradoli: 'Bardoli',
+  UMARALA: 'Umrala',
+  GARIYADHAR: 'Gariadhar',
+  Kukavav: 'Kunkavav vadia',
+  Liliya: 'Lilia',
+  Savarkundla: 'Savar kundla',
+  Detroj: 'Detroj-rampura',
+  LAKHATAR: 'Lakhtar',
+  WADHVAN: 'Wadhwan',
+  mulee: 'Muli',
+  thanagadha: 'Thangadh',
+  DHRANGDHRA: 'Dhrangadhra',
+  Kaparada: 'Kaprada',
+  ANKLESHWAR: 'Anklesvar',
+  Dediyapada: 'Dediapada',
+  Dahegam: 'Dehgam',
+  Sarasvati: 'Sarsvati(Patan)',
+  Shankheshvar: 'Sankheswar',
+  Vansada: 'Bansda',
+  'Morva-Hadaf': 'Morwa hadaf',
+  GODHARA: 'Godhra',
+  Shahera: 'Shehera',
+  NAKHTRANA: 'Nakhatrana',
+  GALTESWAR: 'Galteshwar',
+  KAPDWANJ: 'Kapadvanj',
+  MAHEMDAWAD: 'Mehmedabad',
+  Nizer: 'Nizar',
+  botada: 'Botad',
+  ranapura: 'Ranpur',
+  baravala: 'Barwala',
+  Vankaner: 'Wankaner',
+  MEGHARAJ: 'Meghraj',
+  DANTIVADA: 'Dantiwada',
+  LAKHNI: 'Lakhani',
+  WAV: 'Vav',
+  Bhesan: 'Bhesana',
+  'Maliya hatina': 'Malia',
+  Mendarada: 'Mendarda',
+  SHINOR: 'Sinor',
+  WAGHODIA: 'Vaghodia',
+  Devgadhbariya: 'Devgadh baria',
+};
+
+/**
+ * Returns the mapped name for a location if available, else returns the original name.
+ * @param {string} name - Location name from topo data.
+ * @returns {string} - Mapped location name.
+ */
+const getMappingName = (name) => {
+  return NAME_MAPPING_MAP[name] || name;
+};
+
+const norm = (s) => (s || '').toString().trim().toLowerCase();
+
+/**
+ * GujaratTopoChart functional component
+ * @component
+ * @returns {JSX.Element} - A React component rendering Gujarat districts and corporations on a map.
+ */
+const GujaratTopoChart = ({
+  chartData = stateData1,
+  userLocationLevel = 1,
+  userLocationName = '',
+  topoData: externalTopoData,
+  onClick,
+  loading = false,
+  tooltipConfig = null,
+}) => {
+  const [tooltipContent, setTooltipContent] = useState(null);
+  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  const currentTopo = externalTopoData || topoData;
+
+  const resolveLayerPlan = (topo) => {
+    if (topo && topo.type === 'FeatureCollection') {
+      return {
+        objectKey: 'dynamic',
+        propertyName: 'english_name',
+        filterProperty: null,
+        filterValue: null,
+        labelProp: 'english_name',
+        layerType: userLocationLevel === 4 ? 'PHC' : userLocationLevel === 5 ? 'SC' : 'VILLAGE',
+        isDynamic: true,
+      };
+    }
+
+    const objects = (topo && topo.objects) || {};
+
+    try {
+      const dynObj = objects && objects.collection;
+      const g0 = dynObj && dynObj.geometries && dynObj.geometries[0];
+      const p0 = (g0 && g0.properties) || {};
+      if (dynObj && p0 && p0.area_type != null) {
+        return {
+          objectKey: 'collection',
+          propertyName: 'english_name',
+          filterProperty: null,
+          filterValue: null,
+          labelProp: 'english_name',
+          layerType: userLocationLevel === 4 ? 'PHC' : userLocationLevel === 5 ? 'SC' : 'VILLAGE',
+          isDynamic: true,
+        };
+      }
+    } catch (e) {}
+
+    const pickKey = (keys) => {
+      for (let i = 0; i < keys.length; i++) {
+        if (objects[keys[i]]) return keys[i];
+      }
+      return Object.keys(objects)[0];
+    };
+
+    const detectNameProp = (objectKey, fallbacks) => {
+      try {
+        const obj = objects[objectKey];
+        const g0 = obj && obj.geometries && obj.geometries[0];
+        const p = (g0 && g0.properties) || {};
+        for (let i = 0; i < fallbacks.length; i++) {
+          if (p[fallbacks[i]] != null) return fallbacks[i];
+        }
+      } catch (e) {}
+      return fallbacks[0];
+    };
+
+    if (userLocationLevel === 1 || userLocationLevel === 2) {
+      const dKey = pickKey(['District', 'districts', 'polygons', 'collection']);
+      const dNameProp = detectNameProp(dKey, ['District', 'district', 'english_name', 'name']);
+      return {
+        objectKey: dKey,
+        propertyName: dNameProp,
+        filterProperty: null,
+        filterValue: null,
+        labelProp: dNameProp,
+        layerType: 'DISTRICT',
+        isDynamic: false,
+      };
+    }
+
+    if (userLocationLevel === 3) {
+      const tKey = pickKey(['Taluka', 'taluka', 'Block', 'block', 'collection']);
+      const tNameProp = detectNameProp(tKey, ['Taluka', 'taluka', 'Block', 'block', 'english_name', 'name']);
+      return {
+        objectKey: tKey,
+        propertyName: tNameProp,
+        filterProperty: 'District',
+        filterValue: norm(getMappingName(userLocationName)),
+        labelProp: tNameProp,
+        layerType: 'TALUKA',
+        isDynamic: false,
+      };
+    }
+
+    if (userLocationLevel === 4) {
+      const pKey = pickKey(['PHC', 'phc', 'collection']);
+      const pNameProp = detectNameProp(pKey, ['english_name', 'PHC', 'phc', 'name']);
+      return {
+        objectKey: pKey,
+        propertyName: pNameProp,
+        filterProperty: 'Taluka',
+        filterValue: norm(getMappingName(userLocationName)),
+        labelProp: pNameProp,
+        layerType: 'PHC',
+        isDynamic: false,
+      };
+    }
+
+    if (userLocationLevel === 5) {
+      const scKey = pickKey(['SubCenter', 'Sub_Center', 'SC', 'subcenter', 'collection', 'sub']);
+      const scNameProp = detectNameProp(scKey, ['english_name', 'SC', 'SubCenter', 'name', 'sub']);
+      return {
+        objectKey: scKey,
+        propertyName: scNameProp,
+        filterProperty: 'PHC',
+        filterValue: norm(getMappingName(userLocationName)),
+        labelProp: scNameProp,
+        layerType: 'SC',
+        isDynamic: false,
+      };
+    }
+
+    const vKey = pickKey(['Village', 'village', 'collection']);
+    const vNameProp = detectNameProp(vKey, ['Village', 'village', 'english_name', 'name']);
+    return {
+      objectKey: vKey,
+      propertyName: vNameProp,
+      filterProperty: 'SC',
+      filterValue: norm(getMappingName(userLocationName)),
+      labelProp: vNameProp,
+      layerType: 'VILLAGE',
+      isDynamic: false,
+    };
+  };
+
+  const findChartRowByFeature = (feature, plan) => {
+    if (!feature || !feature.properties) return null;
+    if (plan && plan.isDynamic && feature.properties.area_type === 'main') return null;
+
+    const locId = feature.properties.loc_id || feature.properties.id || null;
+    if (locId != null) {
+      const byId = (chartData || []).find((row) => String(row.id) === String(locId));
+      if (byId) return byId;
+    }
+
+    const featureName = feature.properties[plan.propertyName];
+    if (!featureName) return null;
+
+    const mappedFeatureName = norm(getMappingName(featureName));
+    return (chartData || []).find((row) => norm(getMappingName(row.x_axis_label)) === mappedFeatureName);
+  };
+
+  const handleMouseMove = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    setTooltipPosition({
+      x: event.clientX - rect.left + 12,
+      y: event.clientY - rect.top + 12,
+    });
+  };
+
+  const plan = resolveLayerPlan(currentTopo);
+
+  const isGeoJson = currentTopo && currentTopo.type === 'FeatureCollection';
+  let features = [];
+
+  if (isGeoJson) {
+    features = currentTopo.features || [];
+  } else {
+    // Filter geographies if needed (for non-dynamic but filtered layers)
+    let topoToDraw = currentTopo;
+    if (!plan.isDynamic && plan.filterProperty && plan.filterValue) {
+      const obj = currentTopo.objects[plan.objectKey];
+      if (obj && obj.geometries) {
+        const filteredGeoms = obj.geometries.filter((g) => {
+          const p = g.properties || {};
+          return norm(p[plan.filterProperty]) === plan.filterValue;
+        });
+        topoToDraw = {
+          ...currentTopo,
+          objects: {
+            ...currentTopo.objects,
+            [plan.objectKey]: { ...obj, geometries: filteredGeoms },
+          },
+        };
+      }
+    }
+    const featureColl = topojson.feature(topoToDraw, topoToDraw.objects[plan.objectKey]);
+    features = featureColl && featureColl.features ? featureColl.features : [];
+  }
+
+  const getGeographyFill = (geo, plan) => {
+    const row = findChartRowByFeature(geo, plan);
+    if (!row) return 'white';
+    return colorMap[row.color] || row.color || 'white';
+  };
+
+  const getGeographyOpacity = (geo, plan) => {
+    const row = findChartRowByFeature(geo, plan);
+    return row ? 1 : 0.1;
+  };
+
+  const projectionConfig = useMemo(() => {
+    if (!features.length) {
+      return { scale: 5000, center: [71.4, 22.3] };
+    }
+
+    let minLng = 180, maxLng = -180, minLat = 90, maxLat = -90;
+    let found = false;
+
+    features.forEach(f => {
+      if (!f || !f.geometry) return;
+      const processCoords = (coords) => {
+        coords.forEach(p => {
+          const lng = p[0], lat = p[1];
+          if (lng < minLng) minLng = lng;
+          if (lng > maxLng) maxLng = lng;
+          if (lat < minLat) minLat = lat;
+          if (lat > maxLat) maxLat = lat;
+          found = true;
+        });
+      };
+
+      if (f.geometry.type === 'Polygon') {
+        f.geometry.coordinates.forEach(processCoords);
+      } else if (f.geometry.type === 'MultiPolygon') {
+        f.geometry.coordinates.forEach(poly => poly.forEach(processCoords));
+      }
+    });
+
+    if (!found) return { scale: 5000, center: [71.4, 22.3] };
+
+    const centerLng = (minLng + maxLng) / 2;
+    const centerLat = (minLat + maxLat) / 2;
+    const dLng = maxLng - minLng || 0.1;
+    const dLat = maxLat - minLat || 0.1;
+    
+    // Gujarat aspect ratio is roughly 7.5 deg wide (68-75.5) and 5.5 deg high (20-25.5).
+    // The scale heuristic: Gujarat state view (full width) fits at ~5000.
+    // We calculate based on both width and height constraints.
+    const scale = Math.min(7.5 / dLng, 5.5 / dLat) * 5000 * 0.7;
+
+    return { scale, center: [centerLng, centerLat] };
+  }, [features]);
+
+  return (
+    <Grid className="w-full relative" onMouseMove={handleMouseMove} data-testid="gujarat-topo-chart" sx={{ height: 400 }}>
+      {showTooltip && tooltipContent && (
+        <Paper
+          className="absolute px-2.5 py-1.5 text-sm pointer-events-none bg-[var(--color-background2)] text-[var(--color-text)] border-[var(--color-gray3)] z-[9999] shadow-md"
+          sx={{
+            top: tooltipPosition.y,
+            left: tooltipPosition.x,
+            backgroundColor: "rgba(255, 255, 255, 0.98)",
+            backdropFilter: "blur(4px)"
+          }}
+          data-testid="tooltip"
+        >
+          <Typography className="text-[13px] font-bold text-gray-800 mb-2 border-b border-gray-100 pb-1.5">{tooltipContent.name}</Typography>
+          {tooltipContent.data ? (
+            <div className="space-y-1.5">
+              {tooltipConfig ? (
+                tooltipConfig.map((configItem, idx) => {
+                  const val = tooltipContent.data[configItem.key];
+                  return (
+                    <div key={idx} className={`flex justify-between items-center gap-4 ${configItem.highlight ? 'pt-1.5 border-t border-gray-100 mt-1' : ''}`}>
+                      <span className={`text-[11px] ${configItem.highlight ? 'text-gray-600 font-bold uppercase tracking-wider' : 'text-gray-500 font-medium'}`}>{configItem.label}:</span>
+                      <span className={`text-[11px] font-bold`} style={{ color: configItem.valueColor || (configItem.highlight ? '#6961CE' : '#1f2937'), fontSize: configItem.highlight ? '13px' : '11px', fontWeight: configItem.highlight ? 900 : 700 }}>
+                        {val !== undefined ? val.toLocaleString() : 0}{configItem.suffix || ''}
+                      </span>
+                    </div>
+                  );
+                })
+              ) : (
+                <div className="flex justify-between items-center gap-4">
+                  <span className="text-[11px] text-gray-500 font-medium">Value:</span>
+                  <span className="text-[11px] text-gray-800 font-bold">{tooltipContent.data.series_label !== undefined ? tooltipContent.data.series_label : 'N/A'}</span>
+                </div>
+              )}
+            </div>
+          ) : (
+             <div className="text-[11px] text-gray-400 italic">No data available</div>
+          )}
+        </Paper>
+      )}
+
+      {loading && (
+        <div className="absolute inset-0 z-10 flex flex-col items-center justify-center bg-white/60 backdrop-blur-[1px] rounded-lg">
+          <Loader2 className="w-8 h-8 text-[#00546D] animate-spin mb-2" />
+          <span className="text-[10px] font-bold text-[#00546D] uppercase tracking-widest">Updating Map...</span>
+        </div>
+      )}
+
+      <ComposableMap
+        projectionConfig={projectionConfig}
+        height={400}
+        className="w-full h-full"
+        data-testid="composable-map"
+      >
+        <Geographies geography={features} data-testid="geographies">
+          {({ geographies }) =>
+            geographies.map((geo) => {
+              if (plan.isDynamic && geo.properties.area_type === 'main') {
+                return (
+                  <Geography
+                    key={geo.rsmKey}
+                    geography={geo}
+                    style={{
+                      default: { outline: 'none', fill: 'none', stroke: '#000', strokeWidth: 1.5 },
+                      hover: { outline: 'none', fill: 'none', stroke: '#000', strokeWidth: 1.5 },
+                      pressed: { outline: 'none', fill: 'none', stroke: '#000', strokeWidth: 1.5 },
+                    }}
+                  />
+                );
+              }
+
+              const row = findChartRowByFeature(geo, plan);
+              const name = geo.properties[plan.propertyName] || '';
+
+              return (
+                <Geography
+                  key={geo.rsmKey}
+                  geography={geo}
+                  style={{
+                    default: { outline: 'none', stroke: '#000', strokeWidth: plan.layerType === 'PHC' ? 0.4 : 0.2 },
+                    hover: { outline: 'none', stroke: '#000', strokeWidth: 0.8, cursor: row ? 'pointer' : 'default' },
+                    pressed: { outline: 'none', stroke: '#000', strokeWidth: 0.5 },
+                  }}
+                  fill={getGeographyFill(geo, plan)}
+                  fillOpacity={getGeographyOpacity(geo, plan)}
+                  onMouseEnter={() => {
+                    if (row) {
+                      setTooltipContent({
+                        name: row.x_axis_label || name,
+                        data: row
+                      });
+                    } else {
+                      setTooltipContent({ name });
+                    }
+                    setShowTooltip(true);
+                  }}
+                  onMouseLeave={() => {
+                    setShowTooltip(false);
+                    setTooltipContent(null);
+                  }}
+                  onClick={() => {
+                    if (row && onClick) {
+                      onClick(row);
+                    }
+                  }}
+                  data-testid={`geography-${name}`}
+                />
+              );
+            })
+          }
+        </Geographies>
+
+        {userLocationLevel <= 2 &&
+          CORPORATION.map((corp, i) => {
+            const corpData = chartData.find(
+              (item) => getMappingName(item.x_axis_label).toLowerCase() === corp.name.toLowerCase()
+            );
+            const color = corpData ? colorMap[corpData.color] || corpData.color || '#CCCCCC' : '#CCCCCC';
+
+            return (
+              <Marker
+                key={i}
+                coordinates={[corp.location.longitude, corp.location.latitude]}
+                data-testid={`marker-${corp.name}`}
+              >
+                <circle
+                  r={8}
+                  fill={color}
+                  className="stroke-white stroke-[1px] cursor-pointer"
+                  onMouseEnter={() => {
+                    setTooltipContent({
+                      name: corp.name,
+                      data: corpData || null
+                    });
+                    setShowTooltip(true);
+                  }}
+                  onMouseLeave={() => {
+                    setShowTooltip(false);
+                    setTooltipContent(null);
+                  }}
+                  onClick={() => {
+                    if (corpData && onClick) {
+                      onClick(corpData);
+                    }
+                  }}
+                />
+              </Marker>
+            );
+          })}
+      </ComposableMap>
+    </Grid>
+  );
+};
+
+export default GujaratTopoChart;

package/src/utils/UUIDgenerator.js

@@ -0,0 +1,8 @@
+export const generateUUID = () => {
+  function s4() {
+    return Math.floor((1 + Math.random()) * 0x10000)
+      .toString(16)
+      .substring(1);
+  }
+  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+};

package/src/utils/appointment-utils/appointment-utils.js

@@ -0,0 +1,123 @@
+import dayjs from 'dayjs';
+const CLINIC_VISIT = 'CLINIC_VISIT';
+const DATE_FORMAT = 'YYYY-MM-DD';
+// const MONTH_GRID_CALENDAR = 'dayGridMonth';
+const TELE_CONSULTATION = 'TELE_CONSULTATION';
+export const DAY_GRID_CALENDAR = 'timeGridDay';
+export const WEEK_GRID_CALENDAR = 'timeGridWeek';
+export const MONTH_GRID_CALENDAR = 'dayGridMonth';
+// export const DAY_GRID_CALENDAR = "timeGridDay";
+export const updateFilteredAppointment = (allEvents, viewInfo) => {
+  let filteredAppointments = [];
+  let monthViewEvents;
+  if (viewInfo) {
+    const selectedStartDate = dayjs(viewInfo.start).format(DATE_FORMAT);
+    const selectedEndDate = dayjs(viewInfo.end).format(DATE_FORMAT);
+
+    if (viewInfo.view.type === DAY_GRID_CALENDAR) {
+      filteredAppointments = allEvents.filter((event) => dayjs(event.start).format(DATE_FORMAT) === selectedStartDate);
+    } else if (viewInfo.view.type === WEEK_GRID_CALENDAR) {
+      filteredAppointments = allEvents.filter(
+        (event) =>
+          dayjs(event.start).format(DATE_FORMAT) >= selectedStartDate &&
+          dayjs(event.end).format(DATE_FORMAT) < selectedEndDate
+      );
+    } else if (viewInfo.view.type === MONTH_GRID_CALENDAR) {
+      const monthStartDate = dayjs(viewInfo.view.currentStart).format(DATE_FORMAT);
+      const monthEndDate = dayjs(viewInfo.view.currentEnd).format(DATE_FORMAT);
+
+      filteredAppointments = allEvents.filter(
+        (event) =>
+          dayjs(event.start).format(DATE_FORMAT) >= monthStartDate &&
+          dayjs(event.end).format(DATE_FORMAT) < monthEndDate
+      );
+      const monthEvents = [];
+
+      const events = filteredAppointments.reduce((acc, appointment) => {
+        const date = dayjs(appointment.start).format(DATE_FORMAT);
+
+        if (!acc[date]) {
+          acc[date] = {
+            clinicVisitCount: 0,
+            teleconsultationCount: 0,
+            start: appointment.start,
+            end: appointment.end,
+            teleAppointment: [],
+            clinicAppointment: [],
+          };
+        }
+
+        if (appointment.appointmentType === 'CLINIC_VISIT') {
+          acc[date].clinicVisitCount++;
+          acc[date].clinicAppointment.push({
+            id: appointment.appointmentId,
+            title: appointment.title,
+            patientId: appointment.patientId,
+          });
+        } else if (appointment.appointmentType === 'TELE_CONSULTATION') {
+          acc[date].teleconsultationCount++;
+          acc[date].teleAppointment.push({
+            ...appointment,
+          });
+        }
+
+        return acc;
+      }, {});
+
+      Object.keys(events).forEach((date) => {
+        monthEvents.push({
+          start: events[date].start,
+          end: events[date].end,
+          appointmentType: TELE_CONSULTATION,
+          count: events[date].teleconsultationCount,
+          teleAppointment: events[date].teleAppointment,
+        });
+        monthEvents.push({
+          start: events[date].start,
+          end: events[date].end,
+          appointmentType: CLINIC_VISIT,
+          count: events[date].clinicVisitCount,
+          clinicAppointment: events[date].clinicAppointment,
+        });
+      });
+      monthViewEvents = monthEvents;
+    } else {
+      const monthStartDate = dayjs(viewInfo.view.currentStart).format(DATE_FORMAT);
+      const monthEndDate = dayjs(viewInfo.view.currentEnd).format(DATE_FORMAT);
+      filteredAppointments = allEvents.filter(
+        (event) =>
+          dayjs(event.start).format(DATE_FORMAT) >= monthStartDate &&
+          dayjs(event.end).format(DATE_FORMAT) < monthEndDate
+      );
+    }
+  } else {
+    const today = dayjs();
+    const formattedToday = today.format(DATE_FORMAT);
+    filteredAppointments = allEvents.filter((event) => dayjs(event.start).format(DATE_FORMAT) === formattedToday);
+  }
+  return { filteredAppointments, monthViewEvents };
+};
+
+// when doctor click on appointment count on month view of calendar
+// export const handleMonthViewMoreClick = async (eventInfo, doctorAppointments) => {
+//   const selectedDate = eventInfo.event.start.toISOString().split("T")[0];
+//   const appointmentOnSelectedDate = doctorAppointments.filter((appointment) => {
+//     return (
+//       appointment.appointmentStatus !== CANCELLED &&
+//       appointment.appointmentStatus !== NO_SHOW &&
+//       appointment.appointmentDate === selectedDate &&
+//       appointment.type === eventInfo.event.extendedProps.appointmentType
+//     );
+//   });
+//   const appointmentDetails = await Promise.all(
+//     appointmentOnSelectedDate.map(async (appointment) => {
+//       try {
+//         const response = await getAppointmentById(appointment.id);
+//         return response.data;
+//       } catch (error) {
+//         console.error("error fetching patient appointments");
+//       }
+//     })
+//   );
+//   return appointmentDetails;
+// };

package/src/utils/feature.js

@@ -0,0 +1,42 @@
+import { getFeaturesV2 } from '@/common/services/AuthenticateService';
+import { simplifyMenu } from '@/views/feature-components/login/simplifyMenu';
+import { getAssignedFeature } from '@/common/getAssignedFeature/getAssignedFeature';
+import { execute } from '@/common/services/QueryBuilder';
+import GeneralUtil from '@/common/services/util/GeneralUtil';
+import store from '@/store';
+
+export const getAssignedFeatures2 = async (value) => {
+  try {
+    const { data: features } = await getFeaturesV2();
+    let linearMenuItems = {};
+    Object.entries(features || {}).forEach(([, element]) => {
+      simplifyMenu(element, linearMenuItems);
+    });
+    const response = await getAssignedFeature(value, linearMenuItems);
+    return { data: response?.featureJson };
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const getAssignedFeatures = async (value) => {
+  try {
+    if (GeneralUtil.isTecho) {
+      const user = store.getState().Authenticate.user;
+      let queryDto = {
+        code: 'FETCH_PERMISSIONS',
+        parameters: {
+          roleId: user?.roleId,
+          userId: user?.id,
+          navigationState: value
+        }
+      };
+      const res = await execute(queryDto);
+      return { data: res?.data?.result?.[0]?.featurejson };
+    } else {
+      return getAssignedFeatures2(value);
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};

package/src/utils/getThemeColor.js

@@ -0,0 +1,12 @@
+import { useTheme } from '@mui/material';
+
+export const getThemeColor = (colorKey) => {
+  const theme = useTheme();
+  if (!colorKey) return undefined;
+
+  if (theme.palette[colorKey]?.main) {
+    return theme.palette[colorKey].main;
+  }
+
+  return colorKey;
+};

package/src/utils/localStorageHelper.js

@@ -0,0 +1,11 @@
+/**
+ * Clears every entry in localStorage except the one named "pinnedFeatures".
+ * This function is safe to call on logout – it preserves the user's pinned UI state.
+ */
+export function clearAllExceptPinned() {
+  const pinned = localStorage.getItem('pinnedFeatures');
+  localStorage.clear();
+  if (pinned !== null) {
+    localStorage.setItem('pinnedFeatures', pinned);
+  }
+}