Add Chat Widget for support

added support chat widget to index.html
2026-03-09 13:31:17 -04:00
7 changed files with 57 additions and 68 deletions
--- a/backend/src/modules/organizations/organizations.service.ts
+++ b/backend/src/modules/organizations/organizations.service.ts
@@ -153,14 +153,6 @@ export class OrganizationsService {
        existing.role = data.role;
        return this.userOrgRepository.save(existing);
      }
-      // Update password for existing user being added to a new org
-      if (data.password) {
-        const passwordHash = await bcrypt.hash(data.password, 12);
-        await dataSource.query(
-          `UPDATE shared.users SET password_hash = $1 WHERE id = $2`,
-          [passwordHash, userId],
-        );
-      }
    } else {
      // Create new user
      const passwordHash = await bcrypt.hash(data.password, 12);
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -9,5 +9,20 @@
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
+    <script>
+  (function(d,t) {
+    var BASE_URL="https//chat.hoaledger.com";
+    var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
+    g.src=BASE_URL+"/packs/js/sdk.js";
+    g.async = true;
+    s.parentNode.insertBefore(g,s);
+    g.onload=function(){
+      window.chatwootSDK.run({
+        websiteToken: 'K6VXvTtKXvaCMvre4yK85SPb',
+        baseUrl: BASE_URL
+      })
+    }
+  })(document,"script");
+</script>
  </body>
 </html>
--- a/frontend/src/pages/accounts/AccountsPage.tsx
+++ b/frontend/src/pages/accounts/AccountsPage.tsx
@@ -587,7 +587,7 @@ export function AccountsPage() {
            {investments.filter(i => i.is_active).length > 0 && (
              <>
                <Divider label="Investment Accounts" labelPosition="center" my="xs" />
-                <InvestmentMiniTable investments={investments.filter(i => i.is_active)} onEdit={handleEditInvestment} isReadOnly={isReadOnly} />
+                <InvestmentMiniTable investments={investments.filter(i => i.is_active)} onEdit={handleEditInvestment} />
              </>
            )}
          </Stack>
@@ -605,7 +605,7 @@ export function AccountsPage() {
            {operatingInvestments.length > 0 && (
              <>
                <Divider label="Operating Investment Accounts" labelPosition="center" my="xs" />
-                <InvestmentMiniTable investments={operatingInvestments} onEdit={handleEditInvestment} isReadOnly={isReadOnly} />
+                <InvestmentMiniTable investments={operatingInvestments} onEdit={handleEditInvestment} />
              </>
            )}
          </Stack>
@@ -623,7 +623,7 @@ export function AccountsPage() {
            {reserveInvestments.length > 0 && (
              <>
                <Divider label="Reserve Investment Accounts" labelPosition="center" my="xs" />
-                <InvestmentMiniTable investments={reserveInvestments} onEdit={handleEditInvestment} isReadOnly={isReadOnly} />
+                <InvestmentMiniTable investments={reserveInvestments} onEdit={handleEditInvestment} />
              </>
            )}
          </Stack>
@@ -1087,11 +1087,9 @@ function AccountTable({
 function InvestmentMiniTable({
  investments,
  onEdit,
-  isReadOnly = false,
 }: {
  investments: Investment[];
  onEdit: (inv: Investment) => void;
-  isReadOnly?: boolean;
 }) {
  const totalPrincipal = investments.reduce((s, i) => s + parseFloat(i.principal || '0'), 0);
  const totalValue = investments.reduce(
@@ -1134,7 +1132,7 @@ function InvestmentMiniTable({
            <Table.Th ta="right">Maturity Value</Table.Th>
            <Table.Th>Maturity Date</Table.Th>
            <Table.Th ta="right">Days Remaining</Table.Th>
-            {!isReadOnly && <Table.Th></Table.Th>}
+            <Table.Th></Table.Th>
          </Table.Tr>
        </Table.Thead>
        <Table.Tbody>
@@ -1184,15 +1182,13 @@ function InvestmentMiniTable({
                  '-'
                )}
              </Table.Td>
-              {!isReadOnly && (
-                <Table.Td>
-                  <Tooltip label="Edit investment">
-                    <ActionIcon variant="subtle" onClick={() => onEdit(inv)}>
-                      <IconEdit size={16} />
-                    </ActionIcon>
-                  </Tooltip>
-                </Table.Td>
-              )}
+              <Table.Td>
+                <Tooltip label="Edit investment">
+                  <ActionIcon variant="subtle" onClick={() => onEdit(inv)}>
+                    <IconEdit size={16} />
+                  </ActionIcon>
+                </Tooltip>
+              </Table.Td>
            </Table.Tr>
          ))}
        </Table.Tbody>
--- a/frontend/src/pages/capital-projects/CapitalProjectsPage.tsx
+++ b/frontend/src/pages/capital-projects/CapitalProjectsPage.tsx
@@ -72,10 +72,9 @@ interface KanbanCardProps {
  project: Project;
  onEdit: (p: Project) => void;
  onDragStart: (e: DragEvent<HTMLDivElement>, project: Project) => void;
-  isReadOnly?: boolean;
 }

-function KanbanCard({ project, onEdit, onDragStart, isReadOnly }: KanbanCardProps) {
+function KanbanCard({ project, onEdit, onDragStart }: KanbanCardProps) {
  const plannedLabel = formatPlannedDate(project.planned_date);
  // For projects in the Future bucket with a specific year, show the year
  const currentYear = new Date().getFullYear();
@@ -87,23 +86,21 @@ function KanbanCard({ project, onEdit, onDragStart, isReadOnly }: KanbanCardProp
      padding="sm"
      radius="md"
      withBorder
-      draggable={!isReadOnly}
-      onDragStart={!isReadOnly ? (e) => onDragStart(e, project) : undefined}
-      style={{ cursor: isReadOnly ? 'default' : 'grab', userSelect: 'none' }}
+      draggable
+      onDragStart={(e) => onDragStart(e, project)}
+      style={{ cursor: 'grab', userSelect: 'none' }}
      mb="xs"
    >
      <Group justify="space-between" wrap="nowrap" mb={4}>
        <Group gap={6} wrap="nowrap" style={{ overflow: 'hidden' }}>
-          {!isReadOnly && <IconGripVertical size={14} style={{ flexShrink: 0, color: 'var(--mantine-color-dimmed)' }} />}
+          <IconGripVertical size={14} style={{ flexShrink: 0, color: 'var(--mantine-color-dimmed)' }} />
          <Text fw={600} size="sm" truncate>
            {project.name}
          </Text>
        </Group>
-        {!isReadOnly && (
-          <ActionIcon variant="subtle" size="sm" onClick={() => onEdit(project)}>
-            <IconEdit size={14} />
-          </ActionIcon>
-        )}
+        <ActionIcon variant="subtle" size="sm" onClick={() => onEdit(project)}>
+          <IconEdit size={14} />
+        </ActionIcon>
      </Group>

      <Group gap={6} mb={6}>
@@ -151,12 +148,11 @@ interface KanbanColumnProps {
  isDragOver: boolean;
  onDragOverHandler: (e: DragEvent<HTMLDivElement>, year: number) => void;
  onDragLeave: () => void;
-  isReadOnly?: boolean;
 }

 function KanbanColumn({
  year, projects, onEdit, onDragStart, onDrop,
-  isDragOver, onDragOverHandler, onDragLeave, isReadOnly,
+  isDragOver, onDragOverHandler, onDragLeave,
 }: KanbanColumnProps) {
  const totalEst = projects.reduce((s, p) => s + parseFloat(p.estimated_cost || '0'), 0);
  const isFuture = year === FUTURE_YEAR;
@@ -182,9 +178,9 @@ function KanbanColumn({
        border: isDragOver ? '2px dashed var(--mantine-color-blue-4)' : undefined,
        transition: 'background-color 150ms ease, border 150ms ease',
      }}
-      onDragOver={!isReadOnly ? (e) => onDragOverHandler(e, year) : undefined}
-      onDragLeave={!isReadOnly ? onDragLeave : undefined}
-      onDrop={!isReadOnly ? (e) => onDrop(e, year) : undefined}
+      onDragOver={(e) => onDragOverHandler(e, year)}
+      onDragLeave={onDragLeave}
+      onDrop={(e) => onDrop(e, year)}
    >
      <Group justify="space-between" mb="sm">
        <Title order={5}>{yearLabel(year)}</Title>
@@ -203,7 +199,7 @@ function KanbanColumn({
      <Box style={{ flex: 1, minHeight: 60 }}>
        {projects.length === 0 ? (
          <Text size="xs" c="dimmed" ta="center" py="lg">
-            {isReadOnly ? 'No projects' : 'Drop projects here'}
+            Drop projects here
          </Text>
        ) : useWideLayout ? (
          <div style={{
@@ -212,12 +208,12 @@ function KanbanColumn({
            gap: 'var(--mantine-spacing-xs)',
          }}>
            {projects.map((p) => (
-              <KanbanCard key={p.id} project={p} onEdit={onEdit} onDragStart={onDragStart} isReadOnly={isReadOnly} />
+              <KanbanCard key={p.id} project={p} onEdit={onEdit} onDragStart={onDragStart} />
            ))}
          </div>
        ) : (
          projects.map((p) => (
-            <KanbanCard key={p.id} project={p} onEdit={onEdit} onDragStart={onDragStart} isReadOnly={isReadOnly} />
+            <KanbanCard key={p.id} project={p} onEdit={onEdit} onDragStart={onDragStart} />
          ))
        )}
      </Box>
@@ -599,7 +595,6 @@ export function CapitalProjectsPage() {
              isDragOver={dragOverYear === year}
              onDragOverHandler={handleDragOver}
              onDragLeave={handleDragLeave}
-              isReadOnly={isReadOnly}
            />
          );
        })}
--- a/frontend/src/pages/dashboard/DashboardPage.tsx
+++ b/frontend/src/pages/dashboard/DashboardPage.tsx
@@ -18,7 +18,7 @@ import {
 } from '@tabler/icons-react';
 import { useState, useCallback } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { useAuthStore, useIsReadOnly } from '../../stores/authStore';
+import { useAuthStore } from '../../stores/authStore';
 import api from '../../services/api';

 interface HealthScore {
@@ -311,7 +311,6 @@ interface DashboardData {

 export function DashboardPage() {
  const currentOrg = useAuthStore((s) => s.currentOrg);
-  const isReadOnly = useIsReadOnly();
  const queryClient = useQueryClient();

  // Track whether a refresh is in progress (per score type) for async polling
@@ -425,7 +424,7 @@ export function DashboardPage() {
                </ThemeIcon>
              }
              isRefreshing={operatingRefreshing}
-              onRefresh={!isReadOnly ? handleRefreshOperating : undefined}
+              onRefresh={handleRefreshOperating}
              lastFailed={!!healthScores?.operating_last_failed}
            />
            <HealthScoreCard
@@ -437,7 +436,7 @@ export function DashboardPage() {
                </ThemeIcon>
              }
              isRefreshing={reserveRefreshing}
-              onRefresh={!isReadOnly ? handleRefreshReserve : undefined}
+              onRefresh={handleRefreshReserve}
              lastFailed={!!healthScores?.reserve_last_failed}
            />
          </SimpleGrid>
--- a/frontend/src/pages/investment-planning/InvestmentPlanningPage.tsx
+++ b/frontend/src/pages/investment-planning/InvestmentPlanningPage.tsx
@@ -36,7 +36,6 @@ import {
 import { useQuery } from '@tanstack/react-query';
 import { notifications } from '@mantine/notifications';
 import api from '../../services/api';
-import { useIsReadOnly } from '../../stores/authStore';

 // ── Types ──

@@ -348,7 +347,6 @@ function RecommendationsDisplay({
 export function InvestmentPlanningPage() {
  const [ratesExpanded, setRatesExpanded] = useState(true);
  const [isTriggering, setIsTriggering] = useState(false);
-  const isReadOnly = useIsReadOnly();

  // Load financial snapshot on mount
  const { data: snapshot, isLoading: snapshotLoading } = useQuery<FinancialSnapshot>({
@@ -698,17 +696,15 @@ export function InvestmentPlanningPage() {
              </Text>
            </div>
          </Group>
-          {!isReadOnly && (
-            <Button
-              leftSection={<IconSparkles size={16} />}
-              onClick={handleTriggerAI}
-              loading={isProcessing}
-              variant="gradient"
-              gradient={{ from: 'grape', to: 'violet' }}
-            >
-              {aiResult ? 'Refresh Recommendations' : 'Get AI Recommendations'}
-            </Button>
-          )}
+          <Button
+            leftSection={<IconSparkles size={16} />}
+            onClick={handleTriggerAI}
+            loading={isProcessing}
+            variant="gradient"
+            gradient={{ from: 'grape', to: 'violet' }}
+          >
+            {aiResult ? 'Refresh Recommendations' : 'Get AI Recommendations'}
+          </Button>
        </Group>

        {/* Processing State */}
--- a/frontend/src/pages/invoices/InvoicesPage.tsx
+++ b/frontend/src/pages/invoices/InvoicesPage.tsx
@@ -9,7 +9,6 @@ import { notifications } from '@mantine/notifications';
 import { IconSend, IconInfoCircle, IconCheck, IconX } from '@tabler/icons-react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import api from '../../services/api';
-import { useIsReadOnly } from '../../stores/authStore';

 interface Invoice {
  id: string; invoice_number: string; unit_number: string; unit_id: string;
@@ -65,7 +64,6 @@ export function InvoicesPage() {
  const [preview, setPreview] = useState<Preview | null>(null);
  const [previewLoading, setPreviewLoading] = useState(false);
  const queryClient = useQueryClient();
-  const isReadOnly = useIsReadOnly();

  const { data: invoices = [], isLoading } = useQuery<Invoice[]>({
    queryKey: ['invoices'],
@@ -126,12 +124,10 @@ export function InvoicesPage() {
    <Stack>
      <Group justify="space-between">
        <Title order={2}>Invoices</Title>
-        {!isReadOnly && (
-          <Group>
-            <Button variant="outline" onClick={() => lateFeesMutation.mutate()} loading={lateFeesMutation.isPending}>Apply Late Fees</Button>
-            <Button leftSection={<IconSend size={16} />} onClick={openBulk}>Generate Invoices</Button>
-          </Group>
-        )}
+        <Group>
+          <Button variant="outline" onClick={() => lateFeesMutation.mutate()} loading={lateFeesMutation.isPending}>Apply Late Fees</Button>
+          <Button leftSection={<IconSend size={16} />} onClick={openBulk}>Generate Invoices</Button>
+        </Group>
      </Group>
      <Group>
        <Card withBorder p="sm"><Text size="xs" c="dimmed">Total Invoices</Text><Text fw={700}>{invoices.length}</Text></Card>