goobs-frontend 0.9.16 → 0.9.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.9.16",
+  "version": "0.9.18",
   "type": "module",
   "description": "A comprehensive React-based libary that extends the functionality of Material-UI",
   "license": "MIT",
@@ -35,11 +35,11 @@
     "lodash": "^4",
     "next": "15",
     "otplib": "^12",
-    "react-datepicker": "^7",
-    "react-native": "^0.78.0",
+    "react-datepicker": "^8",
+    "react-native": "^0.78",
     "react-qr-code": "^2",
     "slate": "^0.112",
-    "slate-dom": "^0.111",
+    "slate-dom": "^0.112",
     "slate-history": "^0.110",
     "slate-react": "^0.112",
     "storybook": "^8",

package/src/components/DataGrid/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState } from 'react'
+import React, { useState, useMemo } from 'react'
 import { Box, Alert } from '@mui/material'
 import CustomToolbar from '../Toolbar'
 import Table from './Table'
@@ -24,7 +24,16 @@ function DataGrid({
   onManage,
   onShow,
   onSelectionChange,
+  showIdColumns = false,
 }: DatagridProps) {
+  // Filter columns to hide ID columns based on showIdColumns prop
+  const filteredColumns = useMemo(() => {
+    if (showIdColumns) {
+      return columns
+    }
+    return columns.filter(col => col.field !== 'id' && col.field !== '_id')
+  }, [columns, showIdColumns])
+
   // Local state
   const [rows, setRows] = useState<RowData[]>(providedRows || [])
   const [selectedRows, setSelectedRows] = useState<string[]>([])
@@ -32,7 +41,7 @@ function DataGrid({
   const [pageSize, setPageSize] = useState(10)
 
   // Initialize columns/rows if needed
-  useInitializeGrid({ columns, providedRows, setRows })
+  useInitializeGrid({ columns: filteredColumns, providedRows, setRows })
 
   // 1) When row selection changes
   const handleSelectionChange = (newSelectedIds: string[]) => {
@@ -60,7 +69,7 @@ function DataGrid({
 
   // 2) Search logic
   const { filteredRows, updatedSearchbarProps } = useSearchbar({
-    columns,
+    columns: filteredColumns,
     rows,
     searchbarProps,
   })
@@ -138,7 +147,7 @@ function DataGrid({
       >
         {/* Table component */}
         <Table
-          columns={columns}
+          columns={filteredColumns}
           rows={visibleRows}
           selectedRowIds={selectedRows}
           onRowClick={handleRowClick}
@@ -154,7 +163,7 @@ function DataGrid({
           rowCount={filteredRows.length}
           onPageChange={setPage}
           onPageSizeChange={setPageSize}
-          columns={columns}
+          columns={filteredColumns}
         />
       </Box>
     </Box>

package/src/components/DataGrid/types/index.ts

@@ -48,6 +48,9 @@ export interface DatagridProps {
   searchbarProps?: SearchbarProps
   error?: Error | null
 
+  // Controls whether ID columns (id/_id) are visible
+  showIdColumns?: boolean
+
   // Single or multi selection callbacks:
   onManage?: () => void
   onShow?: () => void

package/src/components/Field/Dropdown/Regular/index.tsx

@@ -53,6 +53,8 @@ export interface DropdownProps extends Omit<FormControlProps, 'onChange'> {
   value?: string
   width?: string
   disabled?: boolean
+  // Controls whether ID columns (containing 'id' or '_id') are visible by default
+  showIdColumns?: boolean
 }
 
 const StyledFormControl = styled(FormControl)<{ width?: string }>(
@@ -173,10 +175,28 @@ const Dropdown: React.FC<DropdownProps> = ({
   value: externalValue,
   width,
   disabled = false,
+  showIdColumns = false, // Default to hiding ID columns for security
 }) => {
   const [selectedValue, setSelectedValue] = useState<string>('')
   const [focused, setFocused] = useState(false)
 
+  // Filter out options with id values if showIdColumns is false
+  const filteredOptions = React.useMemo(() => {
+    if (showIdColumns) {
+      return options
+    }
+    // Hide options where the value is exactly 'id' or '_id', or looks like a database ID
+    return options.filter(opt => {
+      const value = opt.value.toLowerCase()
+      // Check if value is an ID field or looks like an ObjectId
+      return !(
+        value === 'id' ||
+        value === '_id' ||
+        /^[0-9a-f]{24}$/.test(value) // MongoDB ObjectId format
+      )
+    })
+  }, [options, showIdColumns])
+
   useEffect(() => {
     if (externalValue !== undefined) {
       setSelectedValue(externalValue)
@@ -351,7 +371,7 @@ const Dropdown: React.FC<DropdownProps> = ({
         fontcolor={fontcolor}
         disabled={disabled}
       >
-        {options.map(renderMenuItem)}
+        {filteredOptions.map(renderMenuItem)}
       </StyledSelect>
       {helperText && (
         <FormHelperText error={error}>{helperText}</FormHelperText>

package/src/components/Field/Dropdown/Searchable/index.tsx

@@ -66,6 +66,8 @@ export interface SearchableDropdownProps {
   searchHistory?: HistoryItem[] | string[]
   onSearch?: (searchTerm: string, timestamp?: Date) => void
   maxHistoryItems?: number
+  // Controls whether ID columns (containing 'id' or '_id') are visible by default
+  showIdColumns?: boolean
 }
 
 const StyledFormControl = styled(FormControl)<{ width?: string }>(
@@ -277,6 +279,7 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
   searchHistory = [], // Default to empty array
   onSearch,
   maxHistoryItems = 5, // Default to showing 5 history items
+  showIdColumns = false, // Default to hiding ID columns for security
 }) => {
   const [value, setValue] = useState<DropdownOption | string | null>(null)
   const [inputValue, setInputValue] = useState('')
@@ -561,6 +564,23 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
     return localHistory
   }, [searchHistory, localHistory])
 
+  // Filter out options with id values if showIdColumns is false
+  const filteredBaseOptions = React.useMemo(() => {
+    if (showIdColumns) {
+      return options
+    }
+    // Hide options where the value is exactly 'id' or '_id', or looks like a database ID
+    return options.filter(opt => {
+      const value = opt.value.toLowerCase()
+      // Check if value is an ID field or looks like an ObjectId (MongoDB ID format)
+      return !(
+        value === 'id' ||
+        value === '_id' ||
+        /^[0-9a-f]{24}$/.test(value)
+      )
+    })
+  }, [options, showIdColumns])
+
   // Create a combined options array based on active tab and input value
   const getFilteredOptions = React.useCallback(() => {
     const currentInputVal = inputValue.trim()
@@ -581,7 +601,7 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
       // Map history items to dropdown options
       return combinedHistory.map(item => {
         // Check if this history item matches any of the original options
-        const matchingOption = options.find(
+        const matchingOption = filteredBaseOptions.find(
           opt =>
             opt.value.toLowerCase() === item.text.toLowerCase() ||
             (
@@ -617,11 +637,11 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
     // ALL OPTIONS TAB (activeTab === 0)
     // If input is empty, return all options
     if (!currentInputVal) {
-      return options
+      return filteredBaseOptions
     }
 
     // Filter options based on current input
-    const filteredOpts = options.filter(opt =>
+    const filteredOpts = filteredBaseOptions.filter(opt =>
       opt.value.toLowerCase().includes(currentInputVal.toLowerCase())
     )
 
@@ -654,7 +674,7 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
     }
 
     return filteredOpts
-  }, [inputValue, combinedHistory, options, activeTab, variant])
+  }, [inputValue, combinedHistory, filteredBaseOptions, activeTab, variant])
 
   // Create the footer component for the dropdown with tabs
   const ListboxFooter = React.forwardRef<HTMLDivElement>((_, ref) => (

package/src/components/ProjectBoard/forms/AddTask/administrator/companyDropdown/index.tsx

@@ -4,7 +4,7 @@ import React, { useState, useCallback } from 'react'
 import { Close } from '@mui/icons-material'
 import { Dialog, IconButton, Box, useMediaQuery, useTheme } from '@mui/material'
 import Typography from '../../../../../Typography'
-import Dropdown from '../../../../../Field/Dropdown/Regular'
+import SearchableDropdown from '../../../../../Field/Dropdown/Searchable'
 import MultiSelect from '../../../../../Field/Dropdown/MultiSelect'
 import ComplexTextEditor from '../../../../../ComplexTextEditor'
 import CustomButton from '../../../../../Button'
@@ -64,39 +64,116 @@ const AdministratorAddTaskCompanyDropdown: React.FC<
   const [taskTitle, setTaskTitle] = useState('')
   const [taskDescription, setTaskDescription] = useState('')
 
+  // Debug logging for incoming props
+  console.log('AdministratorAddTaskCompanyDropdown - Props received:', {
+    statusesCount: statuses?.length || 0,
+    subStatusesCount: subStatuses?.length || 0,
+    statusesData: statuses,
+    topicsData: topics,
+  })
+
   // ------------------ DROPDOWN OPTIONS ------------------
   const companyOptions = rawCompanies.map(c => ({
-    value: c._id,
-    label: c.companyName,
+    value: c.companyName,
   }))
+
   const severityOptions = severityLevels.map(sl => ({
     value: String(sl.severityLevel),
-    attribute1: sl._id,
+    attribute1: sl.description || '',
   }))
+
   const statusOptions = statuses.map(s => ({
     value: s.status,
-    attribute1: s._id,
-  }))
-  const subStatusOptions = subStatuses.map(s => ({
-    value: s.subStatus,
-    attribute1: s._id,
   }))
+
+  // Filter substatuses based on the selected status
+  const filteredSubStatusOptions = subStatuses
+    .filter(s => {
+      // If no status is selected, hide all substatuses
+      if (!selectedStatus) return false
+
+      // Get the ID of the selected status
+      const selectedStatusId = statuses.find(
+        status => status.status === selectedStatus
+      )?._id
+      console.log('Filtering substatuses by status:', {
+        selectedStatus,
+        selectedStatusId,
+        substatus: s.subStatus,
+        substatusStatusId: s.statusId,
+        isMatch: s.statusId === selectedStatusId,
+      })
+
+      // Only include substatuses with the matching statusId
+      return s.statusId === selectedStatusId
+    })
+    .map(s => {
+      const associatedStatus =
+        statuses.find(status => status._id === s.statusId)?.status || ''
+
+      return {
+        value: s.subStatus,
+        attribute1: associatedStatus,
+      }
+    })
+
+  // Add a "no substatuses" option if none are available for the selected status
+  const finalSubStatusOptions =
+    filteredSubStatusOptions.length > 0
+      ? filteredSubStatusOptions
+      : selectedStatus
+        ? [
+            {
+              value: 'No substatuses available for this status',
+              attribute1: '',
+            },
+          ]
+        : []
+
+  console.log('Filtered substatus options:', finalSubStatusOptions)
+
   const queueOptions = schedulingQueues.map(q => ({
     value: q.queueName,
-    attribute1: q._id,
   }))
 
+  // Effect to reset substatus when status changes
+  React.useEffect(() => {
+    // Clear the selected substatus when the status changes
+    setSelectedSubStatus('')
+  }, [selectedStatus])
+
   // ------------------ SUBMIT HANDLER ------------------
   const handleSubmit = useCallback(() => {
+    // Find the IDs from the selected values
+    const selectedStatusId =
+      statuses.find(s => s.status === selectedStatus)?._id || ''
+    const selectedSubStatusId =
+      subStatuses.find(s => s.subStatus === selectedSubStatus)?._id || ''
+    const selectedQueueId =
+      schedulingQueues.find(q => q.queueName === selectedQueue)?._id || ''
+    const selectedCompanyId =
+      rawCompanies.find(c => c.companyName === selectedCompany)?._id || ''
+
+    console.log('Submitting task with mapped IDs:', {
+      statusValue: selectedStatus,
+      statusId: selectedStatusId,
+      subStatusValue: selectedSubStatus,
+      subStatusId: selectedSubStatusId,
+      queueValue: selectedQueue,
+      queueId: selectedQueueId,
+      companyValue: selectedCompany,
+      companyId: selectedCompanyId,
+    })
+
     const newTaskData: Omit<Task, '_id'> = {
       title: taskTitle,
       description: taskDescription,
       topicIds: selectedTopicIds,
       articleIds: selectedArticleIds,
       severityId: selectedSeverity || '',
-      schedulingQueueId: selectedQueue || '',
-      statusId: selectedStatus || '',
-      substatusId: selectedSubStatus || '',
+      schedulingQueueId: selectedQueueId,
+      statusId: selectedStatusId,
+      substatusId: selectedSubStatusId,
       employeeIds: [],
       createdAt: new Date(),
       updatedAt: new Date(),
@@ -113,14 +190,10 @@ const AdministratorAddTaskCompanyDropdown: React.FC<
       kbArticles: [],
       teamMember: '',
       nextActionDate: '',
-      companyId: '',
+      companyId: selectedCompanyId,
       customerId: '',
     }
 
-    newTaskData.companyId = selectedCompany
-    newTaskData.customerId = ''
-    newTaskData.employeeIds = []
-
     onAdd(newTaskData)
   }, [
     taskTitle,
@@ -134,6 +207,10 @@ const AdministratorAddTaskCompanyDropdown: React.FC<
     selectedCompany,
     createdUserId,
     onAdd,
+    statuses,
+    subStatuses,
+    schedulingQueues,
+    rawCompanies,
   ])
 
   // ------------------ RENDER ------------------
@@ -158,12 +235,10 @@ const AdministratorAddTaskCompanyDropdown: React.FC<
           position: 'absolute',
           right: 8,
           top: 8,
-          color: theme => theme.palette.grey[500],
-          zIndex: theme => theme.zIndex.modal + 1,
+          color: theme.palette.grey[500],
+          zIndex: theme.zIndex.modal + 1,
           cursor: 'pointer',
-          '&:hover': {
-            color: theme => theme.palette.grey[700],
-          },
+          '&:hover': { color: theme.palette.grey[700] },
         }}
       >
         <Close />
@@ -192,11 +267,16 @@ const AdministratorAddTaskCompanyDropdown: React.FC<
           />
 
           {/* Company Dropdown */}
-          <Dropdown
+          <SearchableDropdown
             label="Company"
             options={companyOptions}
-            value={selectedCompany}
-            onChange={e => setSelectedCompany(e.target.value)}
+            defaultValue={
+              companyOptions.find(opt => opt.value === selectedCompany)?.value
+            }
+            onChange={option => {
+              setSelectedCompany(option?.value || '')
+            }}
+            placeholder="Select a company"
           />
 
           {/* Top row of fields */}
@@ -216,44 +296,36 @@ const AdministratorAddTaskCompanyDropdown: React.FC<
                 gap: 1,
               }}
             >
-              <Dropdown
+              <SearchableDropdown
                 label="Severity Level"
                 options={severityOptions}
-                value={
+                defaultValue={
                   severityOptions.find(
                     opt => opt.attribute1 === selectedSeverity
-                  )?.value || ''
+                  )?.value
                 }
-                onChange={e => {
-                  const selectedValue = e.target.value
-                  const option = severityOptions.find(
-                    opt => opt.value === selectedValue
-                  )
-                  if (option) {
-                    setSelectedSeverity(option.attribute1)
-                  } else {
-                    setSelectedSeverity('')
-                  }
+                onChange={option => {
+                  setSelectedSeverity(option?.attribute1 || '')
                 }}
+                placeholder="Select severity level"
               />
-              <Dropdown
+              <SearchableDropdown
                 label="Status"
                 options={statusOptions}
-                value={
-                  statusOptions.find(opt => opt.attribute1 === selectedStatus)
-                    ?.value || ''
+                defaultValue={
+                  statusOptions.find(opt => opt.value === selectedStatus)?.value
                 }
-                onChange={e => {
-                  const selectedValue = e.target.value
-                  const option = statusOptions.find(
-                    opt => opt.value === selectedValue
-                  )
-                  if (option) {
-                    setSelectedStatus(option.attribute1)
-                  } else {
-                    setSelectedStatus('')
-                  }
+                onChange={option => {
+                  const newStatus = option?.value || ''
+                  console.log('Status selected:', newStatus)
+
+                  // Find the status ID for the selected status
+                  const statusObj = statuses.find(s => s.status === newStatus)
+                  console.log('Selected status object:', statusObj)
+
+                  setSelectedStatus(newStatus)
                 }}
+                placeholder="Select status"
               />
             </Box>
 
@@ -266,63 +338,127 @@ const AdministratorAddTaskCompanyDropdown: React.FC<
                 gap: 1,
               }}
             >
-              <Dropdown
+              <SearchableDropdown
                 label="Associated Product (Queue)"
                 options={queueOptions}
-                value={
-                  queueOptions.find(opt => opt.attribute1 === selectedQueue)
-                    ?.value || ''
+                defaultValue={
+                  queueOptions.find(opt => opt.value === selectedQueue)?.value
                 }
-                onChange={e => {
-                  const selectedValue = e.target.value
-                  const option = queueOptions.find(
-                    opt => opt.value === selectedValue
-                  )
-                  if (option) {
-                    setSelectedQueue(option.attribute1)
-                  } else {
-                    setSelectedQueue('')
-                  }
+                onChange={option => {
+                  setSelectedQueue(option?.value || '')
                 }}
+                placeholder="Select product queue"
               />
-              <Dropdown
+              <SearchableDropdown
                 label="Substatus"
-                options={subStatusOptions}
-                value={
-                  subStatusOptions.find(
-                    opt => opt.attribute1 === selectedSubStatus
-                  )?.value || ''
+                options={finalSubStatusOptions}
+                defaultValue={
+                  finalSubStatusOptions.find(
+                    opt => opt.value === selectedSubStatus
+                  )?.value
                 }
-                onChange={e => {
-                  const selectedValue = e.target.value
-                  const option = subStatusOptions.find(
-                    opt => opt.value === selectedValue
-                  )
-                  if (option) {
-                    setSelectedSubStatus(option.attribute1)
-                  } else {
-                    setSelectedSubStatus('')
-                  }
+                onChange={option => {
+                  setSelectedSubStatus(option?.value || '')
                 }}
+                placeholder={
+                  selectedStatus
+                    ? 'Select substatus'
+                    : 'Please select a status first'
+                }
+                disabled={!selectedStatus}
               />
             </Box>
           </Box>
 
-          {/* Topics multi-select – using raw topic IDs */}
-          <MultiSelect
-            label="Topics"
-            options={topics.map(t => t._id)}
-            defaultSelected={selectedTopicIds}
-            onChange={setSelectedTopicIds}
-          />
+          {/* Create a mapping from topic name to ID for lookup when submitting */}
+          {/* Also create a reverse mapping from ID to name for displaying selected values */}
+          {React.useMemo(() => {
+            console.log('Topics being mapped for dropdown:', topics)
 
-          {/* Knowledgebase Articles multi-select – using raw article IDs */}
-          <MultiSelect
-            label="Knowledgebase Articles"
-            options={knowledgebaseArticles.map(a => a._id)}
-            defaultSelected={selectedArticleIds}
-            onChange={setSelectedArticleIds}
-          />
+            // Create mappings for topic names to IDs and back
+            const topicNameToId: Record<string, string> = {}
+            const topicIdToName: Record<string, string> = {}
+
+            topics.forEach(t => {
+              const displayName = t.topic || `Topic ${t._id}`
+              topicNameToId[displayName] = t._id
+              topicIdToName[t._id] = displayName
+            })
+
+            console.log('Topic mappings created:', {
+              topicNameToId,
+              topicIdToName,
+            })
+
+            // Create user-friendly display options for topics
+            const topicOptions = topics.map(t => t.topic || `Topic ${t._id}`)
+
+            // Translate selected IDs to names for display
+            const selectedTopicNames = selectedTopicIds.map(
+              id => topicIdToName[id] || id
+            )
+
+            return (
+              <>
+                {/* Topics multi-select – using topic names with ID mapping */}
+                <MultiSelect
+                  label="Topics"
+                  options={topicOptions}
+                  defaultSelected={selectedTopicNames}
+                  onChange={selectedNames => {
+                    console.log('Selected topic names:', selectedNames)
+
+                    // Map the selected names back to IDs
+                    const newSelectedIds = selectedNames.map(
+                      name => topicNameToId[name] || name // Fallback to name if mapping not found
+                    )
+                    console.log('Mapped to topic IDs:', newSelectedIds)
+
+                    setSelectedTopicIds(newSelectedIds)
+                  }}
+                />
+              </>
+            )
+          }, [topics, selectedTopicIds])}
+
+          {/* Knowledgebase Articles multi-select – using article titles now instead of IDs */}
+          {React.useMemo(() => {
+            // Create mappings for article titles to IDs and back
+            const articleTitleToId: Record<string, string> = {}
+            const articleIdToTitle: Record<string, string> = {}
+
+            knowledgebaseArticles.forEach(a => {
+              const title = a.articleTitle || `Article ${a._id}`
+              articleTitleToId[title] = a._id
+              articleIdToTitle[a._id] = title
+            })
+
+            // Create user-friendly display options for articles
+            const articleOptions = knowledgebaseArticles.map(
+              a => a.articleTitle || `Article ${a._id}`
+            )
+
+            // Translate selected IDs to titles for display
+            const selectedArticleTitles = selectedArticleIds.map(
+              id => articleIdToTitle[id] || id
+            )
+
+            return (
+              <MultiSelect
+                label="Knowledgebase Articles"
+                options={articleOptions}
+                defaultSelected={selectedArticleTitles}
+                onChange={selectedTitles => {
+                  // Map the selected titles back to IDs
+                  const newSelectedIds = selectedTitles.map(
+                    title => articleTitleToId[title] || title // Fallback to title if mapping not found
+                  )
+
+                  setSelectedArticleIds(newSelectedIds)
+                }}
+              />
+            )
+          }, [knowledgebaseArticles, selectedArticleIds])}
 
           {/* Action Buttons */}
           <Box