@nexxtmove/ui 0.1.24 → 0.1.26

package/src/components/TimelineEvent/TimelineTypes.ts

@@ -0,0 +1,236 @@
+export interface TimelineEvent {
+  id: number
+  type: string
+  happened_at: string
+  medium_type: string | null
+  url: string | null
+  page_title: string | null
+  request_reason: string | null
+  agenda_item_type: string | null
+  source: string
+  direction: string
+  description: string | null
+}
+
+export interface TimelinePhase {
+  phase: {
+    value: number
+  }
+  entered_at: string | null
+  exited_at: string | null
+  events: TimelineEvent[]
+}
+
+export interface TimelineResponse {
+  data: {
+    current_phase: {
+      value: number
+      entered_at?: string
+    }
+    phases: TimelinePhase[]
+  }
+}
+
+export interface PhaseConfig {
+  label: string
+  color: string
+  bgColor: string
+  fromColor: string
+  toColor: string
+  textColor: string
+}
+
+export const EVENT_CONFIG_MAP: Record<string, { label: string; icon: string; color: string }> = {
+  // FieldResearch / Awareness
+  contact_created: { label: 'Contact aangemaakt', icon: 'user-plus', color: 'bg-pink-500' },
+  page_viewed: { label: 'Pagina bekeken', icon: 'eye', color: 'bg-blue-500' },
+  house_viewing_requested: {
+    label: 'Bezichtiging aangevraagd',
+    icon: 'house-chimney',
+    color: 'bg-orange-500',
+  },
+  automation_phase_opened: {
+    label: 'Automation e-mail geopend',
+    icon: 'envelope-open-text',
+    color: 'bg-indigo-500',
+  },
+  automation_whatsapp_button_clicked: {
+    label: 'WhatsApp knop geklikt',
+    icon: 'whatsapp',
+    color: 'bg-[#25D366]',
+  },
+  automation_button_mail_answered: {
+    label: 'Automation mail beantwoord',
+    icon: 'reply',
+    color: 'bg-indigo-600',
+  },
+  waiting_list_signup: {
+    label: 'Aangemeld voor wachtlijst',
+    icon: 'list-check',
+    color: 'bg-yellow-500',
+  },
+  viewing_created: {
+    label: 'Bezichtiging aangemaakt',
+    icon: 'house',
+    color: 'bg-orange-400',
+  },
+  viewing_agenda_item_scheduled: {
+    label: 'Bezichtiging gepland',
+    icon: 'calendar-check',
+    color: 'bg-orange-400',
+  },
+  general_agenda_item_scheduled: {
+    label: 'Afspraak gepland',
+    icon: 'calendar',
+    color: 'bg-gray-400',
+  },
+  sales_agenda_item_scheduled: {
+    label: 'Verkoopgesprek gepland',
+    icon: 'handshake',
+    color: 'bg-blue-500',
+  },
+  agenda_item_scheduled: {
+    label: 'Agenda-item gepland',
+    icon: 'calendar-plus',
+    color: 'bg-gray-500',
+  },
+  whatsapp_message_sent: {
+    label: 'WhatsApp-bericht verzonden',
+    icon: 'paper-plane',
+    color: 'bg-[#25D366]',
+  },
+  whatsapp_message_received: {
+    label: 'WhatsApp-bericht ontvangen',
+    icon: 'whatsapp',
+    color: 'bg-[#25D366]',
+  },
+
+  // Transaction
+  appraisal_agenda_item_scheduled: {
+    label: 'Taxatie gepland',
+    icon: 'file-invoice-dollar',
+    color: 'bg-teal-500',
+  },
+  purchase_agenda_item_scheduled: {
+    label: 'Aankoopgesprek gepland',
+    icon: 'cart-shopping',
+    color: 'bg-emerald-600',
+  },
+  structural_inspection_agenda_item_scheduled: {
+    label: 'Bouwkundige keuring gepland',
+    icon: 'hard-hat',
+    color: 'bg-amber-600',
+  },
+  valuation_agenda_item_scheduled: {
+    label: 'Waardebepaling gepland',
+    icon: 'calculator',
+    color: 'bg-teal-600',
+  },
+  mortgage_agenda_item_scheduled: {
+    label: 'Hypotheekgesprek gepland',
+    icon: 'money-check-dollar-pen',
+    color: 'bg-blue-600',
+  },
+  purchase_deed_signing_agenda_item_scheduled: {
+    label: 'Koopovereenkomst tekenen',
+    icon: 'pen-fancy',
+    color: 'bg-emerald-500',
+  },
+  proposal_sent: { label: 'Voorstel verzonden', icon: 'paper-plane-top', color: 'bg-blue-400' },
+  proposal_opened: { label: 'Voorstel geopend', icon: 'envelope-open', color: 'bg-blue-300' },
+  proposal_accepted: { label: 'Voorstel geaccepteerd', icon: 'check', color: 'bg-emerald-500' },
+
+  // Aftercare
+  final_inspection_agenda_item_scheduled: {
+    label: 'Eindinspectie gepland',
+    icon: 'clipboard-check',
+    color: 'bg-green-400',
+  },
+  key_handover_agenda_item_scheduled: {
+    label: 'Sleuteloverdracht gepland',
+    icon: 'key',
+    color: 'bg-green-500',
+  },
+  transport_agenda_item_scheduled: {
+    label: 'Transport bij notaris',
+    icon: 'file-signature',
+    color: 'bg-green-600',
+  },
+
+  // Other / Awareness
+  newsletter_opened: {
+    label: 'Nieuwsbrief geopend',
+    icon: 'envelope-open',
+    color: 'bg-indigo-400',
+  },
+  contact_requested: { label: 'Contactaanvraag', icon: 'user', color: 'bg-indigo-500' },
+  house_valuation_requested: {
+    label: 'Waardebepaling aangevraagd',
+    icon: 'search',
+    color: 'bg-teal-500',
+  },
+  unsubscribed: {
+    label: 'Afgemeld',
+    icon: 'user-slash',
+    color: 'bg-red-500',
+  },
+}
+
+export const PHASE_MAP: Record<number, PhaseConfig> = {
+  0: {
+    label: 'Inactief',
+    color: 'border-slate-300',
+    bgColor: 'bg-slate-300',
+    fromColor: 'from-slate-300',
+    toColor: 'to-slate-300',
+    textColor: 'text-gray-700',
+  },
+  1: {
+    label: 'Latente woonfase',
+    color: 'border-amber-500',
+    bgColor: 'bg-amber-500',
+    fromColor: 'from-amber-500',
+    toColor: 'to-amber-500',
+    textColor: 'text-white',
+  },
+  2: {
+    label: 'Oriëntatie',
+    color: 'border-purple-500',
+    bgColor: 'bg-purple-500',
+    fromColor: 'from-purple-500',
+    toColor: 'to-purple-500',
+    textColor: 'text-white',
+  },
+  3: {
+    label: 'Actieve zoektocht',
+    color: 'border-yellow-500',
+    bgColor: 'bg-yellow-500',
+    fromColor: 'from-yellow-500',
+    toColor: 'to-yellow-500',
+    textColor: 'text-white',
+  },
+  4: {
+    label: 'Selectie',
+    color: 'border-blue-500',
+    bgColor: 'bg-blue-500',
+    fromColor: 'from-blue-500',
+    toColor: 'to-blue-500',
+    textColor: 'text-white',
+  },
+  5: {
+    label: 'Transactie',
+    color: 'border-emerald-500',
+    bgColor: 'bg-emerald-500',
+    fromColor: 'from-emerald-500',
+    toColor: 'to-emerald-500',
+    textColor: 'text-white',
+  },
+  6: {
+    label: 'Wonen',
+    color: 'border-green-500',
+    bgColor: 'bg-green-500',
+    fromColor: 'from-green-500',
+    toColor: 'to-green-500',
+    textColor: 'text-white',
+  },
+}

package/src/components/TimelinePhaseblock/TimelinePhaseblock.stories.ts

@@ -0,0 +1,198 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import TimelinePhaseblock from './TimelinePhaseblock.vue'
+import type { TimelinePhase } from '../TimelineEvent/TimelineTypes'
+
+export default {
+  title: 'Components/Molecules/Timeline Phaseblock',
+  component: TimelinePhaseblock,
+} satisfies Meta<typeof TimelinePhaseblock>
+
+type Story = StoryObj<typeof TimelinePhaseblock>
+
+const makePhase = (
+  value: number,
+  entered_at: string | null = '2024-06-01T09:00:00.000Z',
+  exited_at: string | null = '2024-07-01T09:00:00.000Z',
+  events: TimelinePhase['events'] = [],
+): TimelinePhase => ({
+  phase: { value },
+  entered_at,
+  exited_at,
+  events,
+})
+
+const sampleEvent = {
+  id: 1,
+  type: 'contact_created',
+  happened_at: '2024-06-10T10:30:00.000Z',
+  medium_type: null,
+  url: null,
+  page_title: null,
+  request_reason: null,
+  agenda_item_type: null,
+  source: 'system',
+  direction: 'outbound',
+  description: null,
+}
+
+// Single phase at the end of the timeline (no separator shown)
+export const SinglePhase: Story = {
+  args: {
+    phase: makePhase(1),
+    index: 0,
+    phases: [makePhase(1)],
+    isSplitView: true,
+    isLast: true,
+  },
+}
+
+// First phase (index 0) in split view — shows the Outbound/Inbound header
+export const FirstPhaseWithHeader: Story = {
+  args: {
+    phase: makePhase(4),
+    index: 0,
+    phases: [makePhase(4), makePhase(2)],
+    isSplitView: true,
+    isLast: false,
+  },
+}
+
+// Phase separator visible — phase progressed upward (arrow up)
+export const PhaseProgressedUp: Story = {
+  args: {
+    phase: makePhase(4),
+    index: 0,
+    phases: [makePhase(4), makePhase(2)],
+    isSplitView: true,
+    isLast: false,
+  },
+}
+
+// Phase separator visible — phase regressed downward (arrow down)
+export const PhaseRegressedDown: Story = {
+  args: {
+    phase: makePhase(2),
+    index: 0,
+    phases: [makePhase(2), makePhase(4)],
+    isSplitView: true,
+    isLast: false,
+  },
+}
+
+// Last item in a multi-phase list — no separator shown
+export const LastInList: Story = {
+  args: {
+    phase: makePhase(1),
+    index: 1,
+    phases: [makePhase(4), makePhase(1)],
+    isSplitView: true,
+    isLast: true,
+  },
+}
+
+// Non-split view — with phase separator
+export const NonSplitView: Story = {
+  args: {
+    phase: makePhase(3),
+    index: 0,
+    phases: [makePhase(3), makePhase(1)],
+    isSplitView: false,
+    isLast: false,
+  },
+}
+
+// Non-split view — single/last phase (no separator)
+export const NonSplitViewLast: Story = {
+  args: {
+    phase: makePhase(3),
+    index: 0,
+    phases: [makePhase(3)],
+    isSplitView: false,
+    isLast: true,
+  },
+}
+
+// Non-split view — with events
+export const NonSplitViewWithEvents: Story = {
+  args: {
+    phase: makePhase(4, '2024-06-01T09:00:00.000Z', '2024-07-01T09:00:00.000Z', [
+      sampleEvent,
+      { ...sampleEvent, id: 2, type: 'page_viewed', happened_at: '2024-06-12T14:00:00.000Z' },
+    ]),
+    index: 0,
+    phases: [makePhase(4), makePhase(2)],
+    isSplitView: false,
+    isLast: false,
+  },
+}
+
+// Phase with events
+export const WithEvents: Story = {
+  args: {
+    phase: makePhase(4, '2024-06-01T09:00:00.000Z', '2024-07-01T09:00:00.000Z', [
+      sampleEvent,
+      { ...sampleEvent, id: 2, type: 'page_viewed', happened_at: '2024-06-12T14:00:00.000Z' },
+      {
+        ...sampleEvent,
+        id: 3,
+        type: 'whatsapp_message_received',
+        direction: 'inbound',
+        happened_at: '2024-06-15T11:00:00.000Z',
+      },
+    ]),
+    index: 0,
+    phases: [makePhase(4), makePhase(2)],
+    isSplitView: true,
+    isLast: false,
+  },
+}
+
+// All phases shown together (newest first)
+export const FullTimeline: Story = {
+  args: {
+    phase: makePhase(5, '2024-08-01T09:00:00.000Z', null, [
+      { ...sampleEvent, id: 4, type: 'proposal_accepted', happened_at: '2024-08-05T10:00:00.000Z' },
+    ]),
+    index: 0,
+    phases: [
+      makePhase(5, '2024-08-01T09:00:00.000Z', null),
+      makePhase(4, '2024-06-01T09:00:00.000Z', '2024-08-01T09:00:00.000Z'),
+      makePhase(1, '2024-01-01T09:00:00.000Z', '2024-06-01T09:00:00.000Z'),
+    ],
+    isSplitView: true,
+    isLast: false,
+  },
+}
+
+// Phase with no entered_at or exited_at dates
+export const NoDates: Story = {
+  args: {
+    phase: makePhase(2, null, null),
+    index: 0,
+    phases: [makePhase(2, null, null), makePhase(1, null, null)],
+    isSplitView: true,
+    isLast: false,
+  },
+}
+
+// Inactive phase (value 0)
+export const InactivePhase: Story = {
+  args: {
+    phase: makePhase(0),
+    index: 0,
+    phases: [makePhase(0)],
+    isSplitView: true,
+    isLast: true,
+  },
+}
+
+// Wonen phase (value 6 — highest)
+export const WonenPhase: Story = {
+  args: {
+    phase: makePhase(6),
+    index: 0,
+    phases: [makePhase(6), makePhase(5)],
+    isSplitView: true,
+    isLast: false,
+  },
+}