goobs-frontend 0.8.8 → 0.8.9

package/src/components/DataGrid/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 import React, { useState, useEffect } from 'react'
-import { Box, Alert, CircularProgress } from '@mui/material'
+import { Box, Alert } from '@mui/material'
 import { useAtom, useSetAtom } from 'jotai'
 import {
   columnVisibilityAtom,
@@ -28,11 +28,17 @@ export interface DatagridProps {
   error?: Error | null
   onDuplicate?: () => void
   onDelete?: () => void
+  onManage?: () => void
+  onShow?: () => void
   checkboxSelection?: boolean
   selectedRows?: string[]
   onSelectionChange?: (selectedIds: string[]) => void
 }
 
+interface ExtendedRowData extends RowData {
+  _id: string
+}
+
 function DataGrid({
   columns,
   rows: providedRows,
@@ -43,14 +49,23 @@ function DataGrid({
   error = null,
   onDuplicate,
   onDelete,
+  onManage,
+  onShow,
+  selectedRows: externalSelectedRows,
+  onSelectionChange: externalOnSelectionChange,
 }: DatagridProps) {
-  console.log('DataGrid render:', { columns, providedRows })
+  console.log('DataGrid render:', {
+    columns,
+    providedRows,
+    externalSelectedRows,
+  })
 
-  const [rows, setRows] = useState<RowData[]>(providedRows || [])
+  const [rows, setRows] = useState<ExtendedRowData[]>(
+    (providedRows as ExtendedRowData[]) || []
+  )
   const [page, setPage] = useState(0)
   const [pageSize, setPageSize] = useState(10)
-  const [selectedRows, setSelectedRows] = useState<string[]>([])
-  const [manageRowOpen, setManageRowOpen] = useState(false)
+  const [internalSelectedRows, setInternalSelectedRows] = useState<string[]>([])
   const [searchValue, setSearchValue] = useState('')
   const tableRef = React.useRef(null)
   const initialized = React.useRef(false)
@@ -72,7 +87,6 @@ function DataGrid({
     setSearchValue,
   })
 
-  // Update Jotai visibility state when search changes columns visibility
   useEffect(() => {
     if (tags.length > 0) {
       const newVisibility: { [key: string]: boolean } = {}
@@ -88,16 +102,14 @@ function DataGrid({
   }, [searchVisibleColumns, columns, updateVisibility, tags])
 
   useEffect(() => {
-    setRows(providedRows || [])
+    setRows((providedRows as ExtendedRowData[]) || [])
   }, [providedRows])
 
-  // Initialize columns and visibility in Jotai
   useEffect(() => {
     if (!initialized.current) {
       console.log('Initializing columns and visibility:', columns)
       setColumns(columns.map(col => col.field))
 
-      // Initialize visibility for new columns
       const initialVisibility: { [key: string]: boolean } = {}
       columns.forEach(column => {
         if (columnVisibility[column.field] === undefined) {
@@ -120,20 +132,42 @@ function DataGrid({
     }
   }, [columns, setColumns, columnVisibility, updateVisibility])
 
-  const handleRowClick = (row: RowData) => {
+  const selectedRows = externalSelectedRows || internalSelectedRows
+
+  const handleSelectionChange = (newSelectedIds: string[]) => {
+    console.log('Selection changed:', {
+      previous: selectedRows,
+      new: newSelectedIds,
+      timestamp: new Date().toISOString(),
+    })
+
+    if (externalOnSelectionChange) {
+      externalOnSelectionChange(newSelectedIds)
+    } else {
+      setInternalSelectedRows(newSelectedIds)
+    }
+  }
+
+  const handleRowClick = (row: ExtendedRowData) => {
     console.log('Row clicked:', row)
-    const newSelection = selectedRows.includes(row.id)
-      ? selectedRows.filter(id => id !== row.id)
-      : [...selectedRows, row.id]
+    const newSelection = selectedRows.includes(row._id)
+      ? selectedRows.filter(id => id !== row._id)
+      : [...selectedRows, row._id]
 
-    setSelectedRows(newSelection)
-    setManageRowOpen(newSelection.length > 0)
+    handleSelectionChange(newSelection)
+  }
+
+  const handleManageRowClose = () => {
+    if (!onManage) {
+      handleSelectionChange([])
+    }
   }
 
-  const handleSelectionChange = (selectedIds: string[]) => {
-    console.log('Selection changed:', selectedIds)
-    setSelectedRows(selectedIds)
-    setManageRowOpen(selectedIds.length > 0)
+  const handleManage = () => {
+    console.log('DataGrid handleManage called with selectedRows:', selectedRows)
+    if (onManage) {
+      onManage()
+    }
   }
 
   const updatedSearchbarProps = {
@@ -142,7 +176,6 @@ function DataGrid({
     onChange: handleSearchChange,
   }
 
-  // Get visible columns based on both Jotai state and search
   const visibleColumns = columns.filter(column => {
     const isVisibleInJotai = columnVisibility[column.field] !== false
     const isVisibleInSearch =
@@ -158,9 +191,11 @@ function DataGrid({
     return isVisible
   })
 
-  // Calculate visible rows based on current page and pageSize
   const startIndex = page * pageSize
-  const visibleRows = filteredRows.slice(startIndex, startIndex + pageSize)
+  const visibleRows = (filteredRows as ExtendedRowData[]).slice(
+    startIndex,
+    startIndex + pageSize
+  )
 
   console.log('DataGrid rendering with:', {
     visibleColumns,
@@ -170,24 +205,11 @@ function DataGrid({
     selectedRows,
   })
 
-  if (loading) {
-    return (
-      <Box
-        sx={{
-          position: 'relative',
-          marginTop: '60px',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          height: 'calc(100vh - 60px)',
-          width: 'calc(100vh)',
-          backgroundColor: woad.main,
-        }}
-      >
-        <CircularProgress />
-      </Box>
-    )
-  }
+  const updatedColumns = columns.map(column => ({
+    ...column,
+    headerName:
+      column.field === 'name' ? 'Administration Company' : column.headerName,
+  }))
 
   return (
     <>
@@ -216,6 +238,19 @@ function DataGrid({
           buttons={buttons}
           dropdowns={dropdowns}
           searchbarProps={updatedSearchbarProps}
+          middleComponent={
+            selectedRows.length > 0 ? (
+              <ManageRow
+                selectedRows={selectedRows}
+                rows={rows}
+                onDuplicate={onDuplicate}
+                onDelete={onDelete}
+                onManage={handleManage}
+                onShow={onShow}
+                handleClose={handleManageRowClose}
+              />
+            ) : null
+          }
         />
 
         <Box
@@ -225,11 +260,12 @@ function DataGrid({
             width: '100%',
             display: 'flex',
             flexDirection: 'column',
+            alignItems: 'flex-start',
           }}
         >
           <Table
             ref={tableRef}
-            columns={visibleColumns}
+            columns={updatedColumns}
             rows={visibleRows}
             loading={loading}
             page={page}
@@ -253,13 +289,6 @@ function DataGrid({
           />
         </Box>
       </Box>
-
-      <ManageRow
-        open={manageRowOpen}
-        handleClose={() => setManageRowOpen(false)}
-        onDuplicate={onDuplicate}
-        onDelete={onDelete}
-      />
     </>
   )
 }

package/src/components/Dropdown/index.tsx

@@ -34,6 +34,8 @@ export interface DropdownProps extends Omit<SelectProps, 'onChange'> {
   outlinecolor?: string
   fontcolor?: string
   shrunkfontcolor?: string
+  unshrunkfontcolor?: string
+  shrunklabelposition?: 'onNotch' | 'aboveNotch'
   onChange?: SelectProps['onChange']
   error?: boolean
   helperText?: string
@@ -46,7 +48,7 @@ export interface DropdownProps extends Omit<SelectProps, 'onChange'> {
 const StyledBox = styled(Box)(() => ({
   position: 'relative',
   width: '100%',
-  height: '50px',
+  height: '40px',
   marginTop: '5px',
 }))
 
@@ -74,18 +76,50 @@ const StyledFormControl = styled(FormControl)<{
   },
 }))
 
-const StyledInputLabel = styled(InputLabel)<{ shrunkfontcolor?: string }>(
-  () => ({
-    color: black.main,
-    '&.Mui-focused': {
-      color: black.main,
-    },
-    '&.MuiInputLabel-shrink': {
-      transform: 'translate(13px, -7px) scale(0.75)',
-      color: black.main,
-    },
-  })
-)
+const StyledInputLabel = styled(InputLabel, {
+  shouldForwardProp: prop =>
+    prop !== 'shrunkfontcolor' &&
+    prop !== 'unshrunkfontcolor' &&
+    prop !== 'shrunklabelposition' &&
+    prop !== 'hasvalue',
+})<{
+  shrunkfontcolor?: string
+  unshrunkfontcolor?: string
+  shrunklabelposition?: 'onNotch' | 'aboveNotch'
+  hasvalue: 'true' | 'false'
+}>(({ shrunkfontcolor, unshrunkfontcolor, shrunklabelposition, hasvalue }) => ({
+  color: unshrunkfontcolor || black.main,
+  transform:
+    hasvalue === 'true'
+      ? shrunklabelposition === 'aboveNotch'
+        ? 'translate(13px, -20px) scale(0.75)'
+        : 'translate(13px, -7px) scale(0.75)'
+      : 'translate(14px, 12px)',
+  '&.Mui-focused': {
+    transform:
+      hasvalue === 'true'
+        ? shrunklabelposition === 'aboveNotch'
+          ? 'translate(13px, -20px) scale(0.75)'
+          : 'translate(13px, -7px) scale(0.75)'
+        : 'translate(14px, 12px)',
+    color:
+      hasvalue === 'true'
+        ? shrunkfontcolor || black.main
+        : unshrunkfontcolor || black.main,
+  },
+  '&.MuiInputLabel-shrink': {
+    transform:
+      hasvalue === 'true'
+        ? shrunklabelposition === 'aboveNotch'
+          ? 'translate(0px, -20px) scale(0.75)'
+          : 'translate(13px, -7px) scale(0.75)'
+        : 'translate(14px, 12px)',
+    color:
+      hasvalue === 'true'
+        ? shrunkfontcolor || black.main
+        : unshrunkfontcolor || black.main,
+  },
+}))
 
 const StyledMenuItem = styled(MenuItem)(() => ({
   display: 'flex',
@@ -113,6 +147,8 @@ const Dropdown: React.FC<DropdownProps> = ({
   outlinecolor,
   fontcolor,
   shrunkfontcolor,
+  unshrunkfontcolor,
+  shrunklabelposition = 'onNotch',
   onChange,
   error = false,
   helperText,
@@ -124,16 +160,21 @@ const Dropdown: React.FC<DropdownProps> = ({
 }) => {
   const [selectedValue, setSelectedValue] = useState<string>('')
   const [isLoading, setIsLoading] = useState(true)
+  const [hasSelection, setHasSelection] = useState(false)
 
   useEffect(() => {
     const defaultOption = options.find(option => option.value === defaultValue)
-    setSelectedValue(defaultOption ? defaultOption.value : '')
+    if (defaultOption) {
+      setSelectedValue(defaultOption.value)
+      setHasSelection(true)
+    }
     setIsLoading(false)
   }, [defaultValue, options])
 
   const handleChange: SelectProps['onChange'] = (event, child) => {
     const newValue = event.target.value as string
     setSelectedValue(newValue)
+    setHasSelection(true)
     if (onChange) {
       onChange(event, child)
     }
@@ -193,6 +234,9 @@ const Dropdown: React.FC<DropdownProps> = ({
         <StyledInputLabel
           id={`${name}-label`}
           shrunkfontcolor={shrunkfontcolor}
+          unshrunkfontcolor={unshrunkfontcolor}
+          shrunklabelposition={shrunklabelposition}
+          hasvalue={hasSelection ? 'true' : 'false'}
         >
           {label}
         </StyledInputLabel>
@@ -216,6 +260,11 @@ const Dropdown: React.FC<DropdownProps> = ({
             },
             '& .MuiOutlinedInput-notchedOutline': {
               borderColor: black.main,
+              legend: {
+                width: hasSelection ? '0.01px' : 'auto',
+                display:
+                  shrunklabelposition === 'aboveNotch' ? 'none' : 'inherit',
+              },
             },
             '&:hover .MuiOutlinedInput-notchedOutline': {
               borderColor: black.main,

package/src/components/Form/DataGrid/index.tsx

@@ -11,6 +11,15 @@ export interface FormDataGridProps {
 }
 
 function FormDataGrid({ title, description, datagrid }: FormDataGridProps) {
+  console.log('FormDataGrid props:', {
+    title,
+    description,
+    datagridProps: {
+      onManage: datagrid.onManage,
+      selectedRows: datagrid.selectedRows,
+    },
+  })
+
   return (
     <Box
       sx={{

package/src/components/Form/Popup/index.tsx

@@ -7,48 +7,18 @@ import ContentSection, { ContentSectionProps } from '../../Content'
 import { formContainerStyle } from './../../../styles/Form'
 import { ExtendedTypographyProps } from '../../Content/Structure/typography/useGridTypography'
 
-/**
- * Props for the PopupForm component.
- * @interface PopupFormProps
- */
 export interface PopupFormProps {
-  /** The title of the popup form */
   title?: string
-  /** The description of the popup form */
   description?: string
-  /** The grid configuration for the form content */
   grids?: ContentSectionProps['grids']
-  /** Custom content to render inside the form */
   content?: React.ReactNode
-  /** The type of popup to render ('dialog' or 'modal') */
   popupType: 'dialog' | 'modal'
-  /** Whether the popup is open (only applicable for 'dialog' type) */
   open?: boolean
-  /** Callback function to handle closing the popup (only applicable for 'dialog' type) */
   onClose?: () => void
-  /** The width of the popup form in pixels */
   width?: number
 }
 
-/**
- * PopupForm Component
- *
- * A flexible popup form component that can be rendered as either a dialog or a modal.
- * It supports custom content, grids, and header configuration.
- *
- * @component
- * @example
- * <PopupForm
- *   title="Login"
- *   description="Please enter your credentials"
- *   popupType="dialog"
- *   open={isOpen}
- *   onClose={handleClose}
- *   content={<LoginForm />}
- *   width={400}
- * />
- */
-const PopupForm: React.FC<PopupFormProps> = ({
+function PopupForm({
   title,
   description,
   grids,
@@ -57,12 +27,9 @@ const PopupForm: React.FC<PopupFormProps> = ({
   open,
   onClose,
   width = 450,
-}) => {
-  /**
-   * Memoized header grid configuration
-   */
-  const headerGrid: ContentSectionProps['grids'][0] = useMemo(
-    () => ({
+}: PopupFormProps) {
+  const headerGrid = useMemo(
+    (): ContentSectionProps['grids'][0] => ({
       grid: {
         gridconfig: {
           gridname: 'formHeader',
@@ -101,29 +68,26 @@ const PopupForm: React.FC<PopupFormProps> = ({
     [title, description]
   )
 
-  /**
-   * Memoized header render function
-   */
   const renderHeader = useMemo(
     () => <ContentSection grids={[headerGrid]} />,
     [headerGrid]
   )
 
-  /**
-   * Memoized content render function
-   */
   const renderContent = useMemo(
     () => (
-      <Box
-        // @ts-ignore
-        sx={formContainerStyle}
-      >
+      <Box sx={formContainerStyle}>
         <Box mb={0}>{renderHeader}</Box>
         {React.isValidElement(content)
-          ? React.cloneElement(content as React.ReactElement, {
-              onClose: onClose,
-              open: open,
-            })
+          ? React.cloneElement(
+              content as React.ReactElement<{
+                onClose?: () => void
+                open?: boolean
+              }>,
+              {
+                onClose,
+                open,
+              }
+            )
           : content || (grids && <ContentSection grids={grids} />)}
       </Box>
     ),
@@ -131,7 +95,7 @@ const PopupForm: React.FC<PopupFormProps> = ({
   )
 
   const dialogProps: DialogProps = {
-    open: popupType === 'modal' ? true : open || false,
+    open: popupType === 'modal' ? true : (open ?? false),
     onClose: popupType === 'modal' ? undefined : onClose,
     fullWidth: true,
     maxWidth: false,
@@ -142,16 +106,8 @@ const PopupForm: React.FC<PopupFormProps> = ({
     },
   }
 
-  if (popupType === 'modal') {
-    return (
-      <Dialog {...dialogProps} disableEscapeKeyDown hideBackdrop>
-        {renderContent}
-      </Dialog>
-    )
-  }
-
-  return (
-    <Dialog {...dialogProps}>
+  const modalContent = (
+    <>
       {onClose && (
         <IconButton
           size="small"
@@ -167,8 +123,19 @@ const PopupForm: React.FC<PopupFormProps> = ({
         </IconButton>
       )}
       {renderContent}
-    </Dialog>
+    </>
   )
+
+  if (popupType === 'modal') {
+    return (
+      <Dialog {...dialogProps} disableEscapeKeyDown hideBackdrop>
+        {modalContent}
+      </Dialog>
+    )
+  }
+
+  return <Dialog {...dialogProps}>{modalContent}</Dialog>
 }
 
+// Export the component directly
 export default PopupForm