BDMS-932: Add contact edit panel

src/components/WellEdit/WellEditPanel.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useCustomMutation, useList, useNotification } from '@refinedev/core'
 import { useQueryClient } from '@tanstack/react-query'
+import { captureEvent } from '@/analytics/posthog'
 import { Loader2, XIcon } from 'lucide-react'
 import { Button, buttonVariants } from '@/components/ui/button'
 import {
@@ -137,6 +138,10 @@ export function WellEditPanel({
   const isGroupsLoading = groupsQuery.isLoading
   const isLoading = isAssignedGroupsLoading || isGroupsLoading
 
+  useEffect(() => {
+    captureEvent('edit_panel_opened', { resource: 'well', well_id: wellId })
+  }, [wellId])
+
   useEffect(() => {
     wasLoadingRef.current = true
   }, [wellId])
@@ -221,6 +226,11 @@ export function WellEditPanel({
       ])
 
       await invalidateWellDetails(queryClient, wellId)
+      captureEvent('edit_saved', {
+        resource: 'well',
+        well_id: wellId,
+        fields_changed: ['groups'],
+      })
       onClose()
     } catch {
       notify?.({
@@ -245,6 +255,11 @@ export function WellEditPanel({
   }
 
   const handleDiscardChanges = () => {
+    captureEvent('edit_abandoned', {
+      resource: 'well',
+      well_id: wellId,
+      had_changes: isDirty,
+    })
     onClose()
   }
 

src/components/editing/EditPanel.tsx

@@ -29,7 +29,7 @@ export function EditPanel({
         </Button>
       </div>
 
-      <div className="flex-1 px-4 py-2 text-sm">{children}</div>
+      <div className="min-h-0 flex-1 overflow-y-auto px-4 py-2 text-sm">{children}</div>
 
       {footer ? (
         <div className="flex shrink-0 justify-end gap-2 border-t bg-background px-4 py-3">

src/components/ui/button.tsx

@@ -11,7 +11,7 @@ const buttonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/80",
         outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
         ghost:

src/hooks/useLexicon.ts

@@ -9,6 +9,7 @@ export const useLexicon = ({ category }: UseLexiconProps) => {
   const data = useList<ITerm>({
     resource: 'lexicon/term',
     dataProviderName: 'ocotillo',
+    pagination: { pageSize: 500 },
     queryOptions: {
       gcTime: 1000 * 60 * 5, // 5 minutes
       staleTime: 1000 * 60 * 2, // 2 minutes

src/pages/ocotillo/contact/index.tsx

@@ -1,4 +1,2 @@
 export * from './list'
-export * from './create'
-export * from './edit'
 export * from './show'

src/pages/ocotillo/contact/list.tsx

@@ -10,9 +10,7 @@ import {
 } from '@/interfaces/ocotillo/IContact'
 import { Card, CardHeader, SxProps } from '@mui/material'
 import { Email, Home, Phone } from '@mui/icons-material'
-import { Plus } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { useLink, useNavigation } from '@refinedev/core'
+import { useLink } from '@refinedev/core'
 import { settings } from '@/settings'
 import { formatAppDateTime, formatPhone } from '@/utils'
 import { getContactDisplayName } from '@/utils/contactDisplayName'
@@ -44,7 +42,6 @@ export const ContactList: React.FC = () => {
     [canViewConfidential, dataGridProps.rows]
   )
 
-  const { create } = useNavigation()
   const Link = useLink()
 
   const columns = useMemo<GridColDef<IContact>[]>(
@@ -193,23 +190,14 @@ export const ContactList: React.FC = () => {
     meta: { enabled: !!selectedContactId },
   })
 
-  const customHeaderButtons = () => (
-    <>
-      <Button onClick={() => create('contact')}>
-        <Plus />
-        Create
-      </Button>
-    </>
-  )
-
   return (
     <>
       <ListPage
         title="Contacts & Owners"
         columns={columns}
         dataGridProps={{ ...dataGridPropsWithAnalytics, rows: visibleContacts }}
         getRowId={(row) => row.id}
-        headerButtons={customHeaderButtons}
+        hideHeaderButtons
         onRowClick={(params) =>
           captureEvent('contacts_row_clicked', { contact_id: params.id })
         }