feat: add date range

Signed-off-by: Matt Krick <[email protected]>

packages/client/components/MeetingDatePicker.tsx

@@ -0,0 +1,46 @@
+import type {NodeViewProps} from '@tiptap/core'
+import dayjs from 'dayjs'
+import {DayPicker} from 'react-day-picker'
+import type {InsightsBlockAttrs} from '../tiptap/extensions/imageBlock/InsightsBlock'
+import {Menu} from '../ui/Menu/Menu'
+import {MenuContent} from '../ui/Menu/MenuContent'
+
+interface Props {
+  updateAttributes: NodeViewProps['updateAttributes']
+  attrs: InsightsBlockAttrs
+}
+
+export const MeetingDatePicker = (props: Props) => {
+  const {updateAttributes, attrs} = props
+  const {startAt, endAt} = attrs
+  const dateRangeLabel = `${dayjs(startAt).format('MMM D, YYYY')} - ${dayjs(endAt).format('MMM D, YYYY')}`
+
+  return (
+    <Menu
+      className='data-[side=bottom]:animate-slide-down data-[side=top]:animate-slide-up'
+      trigger={
+        <div className='group flex cursor-pointer items-center justify-between rounded-md bg-white'>
+          <div className='p-2 leading-4'>{dateRangeLabel}</div>
+        </div>
+      }
+    >
+      <MenuContent>
+        <div className='z-10 overflow-auto rounded-md bg-white py-1 shadow-lg outline-hidden in-data-[placement="bottom-start"]:animate-slide-down in-data-[placement="top-start"]:animate-slide-up'>
+          <div className='py-2'>
+            <DayPicker
+              mode='range'
+              selected={{from: new Date(startAt), to: new Date(endAt)}}
+              disabled={{after: new Date()}}
+              onSelect={(newSelected) => {
+                updateAttributes({
+                  startAt: newSelected?.from?.toISOString(),
+                  endAt: newSelected?.to?.toISOString()
+                })
+              }}
+            />
+          </div>
+        </div>
+      </MenuContent>
+    </Menu>
+  )
+}

packages/client/components/promptResponse/StandardBubbleMenu.tsx

@@ -9,7 +9,7 @@ interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 export const StandardBubbleMenu = (props: Props) => {
   const {editor} = props
   const shouldShowBubbleMenu = () => {
-    if (!editor || editor.isActive('link')) return false
+    if (!editor || editor.isActive('link') || editor.isActive('insightsBlock')) return false
     return isTextSelected(editor)
   }
 

packages/client/modules/userDashboard/components/GcalModal/DateTimePickers.tsx

@@ -5,7 +5,7 @@ import {Dayjs} from 'dayjs'
 import * as React from 'react'
 import {PALETTE} from '../../../../styles/paletteV3'
 
-export const customStyles = {
+const customStyles = {
   width: '100%',
   '& .MuiOutlinedInput-root': {
     '&:hover .MuiOutlinedInput-notchedOutline, &.Mui-focused .MuiOutlinedInput-notchedOutline, &.focus-within .MuiOutlinedInput-notchedOutline':

packages/client/tiptap/extensions/imageBlock/InsightsBlock.ts

@@ -7,8 +7,8 @@ import {InsightsBlockView} from '../imageUpload/InsightsBlockView'
 export interface InsightsBlockAttrs {
   teamIds: string[]
   meetingTypes: MeetingTypeEnum[]
-  startAt: Date
-  endAt: Date
+  startAt: string
+  endAt: string
   meetingIds: string[]
   title: string
 }

packages/client/tiptap/extensions/imageUpload/InsightsBlockView.tsx

@@ -1,7 +1,8 @@
-// import {DatePicker} from '@mui/x-date-pickers'
 import {NodeViewWrapper, type NodeViewProps} from '@tiptap/react'
+import {MeetingDatePicker} from '../../../components/MeetingDatePicker'
 import {MeetingTypePickerCombobox} from '../../../components/MeetingTypePickerCombobox'
 import {TeamPickerComboboxRoot} from '../../../components/TeamPickerComboboxRoot'
+import {Button} from '../../../ui/Button/Button'
 import type {InsightsBlockAttrs} from '../imageBlock/InsightsBlock'
 export const InsightsBlockView = (props: NodeViewProps) => {
   const {node, updateAttributes} = props
@@ -10,36 +11,30 @@ export const InsightsBlockView = (props: NodeViewProps) => {
   return (
     <NodeViewWrapper>
       <div className='m-0 p-0 text-slate-900'>
-        <div className='flex cursor-pointer flex-col rounded-sm bg-slate-200 p-4'>
+        <div className='flex max-w-fit cursor-pointer flex-col rounded-sm bg-slate-200 p-4'>
           <input
             className='bg-inherit p-4 text-lg ring-0 outline-0'
             onChange={(e) => {
               updateAttributes({title: e.target.value})
             }}
             value={title}
           />
-          <div className='grid w-96 grid-cols-[repeat(2,minmax(256px,1fr))] gap-4 p-4'>
+          <div className='grid grid-cols-[repeat(2,minmax(256px,1fr))] gap-4 p-4'>
             {/* Row 1 */}
             <label className='self-center font-semibold'>Teams</label>
             <TeamPickerComboboxRoot updateAttributes={updateAttributes} attrs={attrs} />
             {/* Row 2 */}
             <label className='self-center font-semibold'>Type</label>
             <MeetingTypePickerCombobox updateAttributes={updateAttributes} attrs={attrs} />
-
             {/* Row 3 */}
             <label className='self-center font-semibold'>Meetings started between</label>
-            {/* <DatePicker
-              label={`Meeting Start Date`}
-              value={startValue}
-              onChange={(date) => handleChangeStart(date, startValue)}
-              format='MMMM D, YYYY'
-              sx={customStyles}
-            /> */}
-            <select className='rounded border p-2'>
-              <option>Yes</option>
-              <option>No</option>
-              <option>Maybe</option>
-            </select>
+            <MeetingDatePicker updateAttributes={updateAttributes} attrs={attrs} />
+            <div></div>
+            <div className='flex justify-end'>
+              <Button variant='secondary' shape='pill' size='md'>
+                Generate Insights
+              </Button>
+            </div>
           </div>
         </div>
       </div>