Thrive Sales Board

https://github.com/wirkancil/thrive-sales-board-main
Admin
This project is a web application, potentially a sales board, built using Vite, TypeScript, React,...
Tokens:8,715
Snippets:23
Trust Score:3.5
Update:11 months ago
Show doc for...
Tokens:
Raw
### Clone and Run Project with npm

Source: https://github.com/wirkancil/thrive-sales-board-main/blob/main/README.md

Instructions for cloning the repository, installing dependencies, and starting the development server using npm. Requires Node.js and npm to be installed.

```sh
# Step 1: Clone the repository using the project's Git URL.
git clone <YOUR_GIT_URL>

# Step 2: Navigate to the project directory.
cd <YOUR_PROJECT_NAME>

# Step 3: Install the necessary dependencies.
npm i

# Step 4: Start the development server with auto-reloading and an instant preview.
npm run dev
```

--------------------------------

### Convert Opportunity to Project with PO and Payment Management (TypeScript)

Source: https://context7.com/wirkancil/thrive-sales-board-main/llms.txt

This component converts a won sales opportunity into a project. It captures PO details, payment terms (CBD, TOP, Installments), and creates a new project entity. It requires an 'opportunity' object as input and utilizes a 'useProjects' hook for project creation. The output is a form to collect project and PO information.

```typescript
import { useProjects } from './hooks/useProjects';

// Converting won opportunity to project
function ConvertToProjectModal({ opportunity }) {
  const { createProject } = useProjects();

  const handleConvert = async (formData) => {
    await createProject({
      name: `${opportunity.name} - Implementation`,
      opportunity_id: opportunity.id,
      po_number: formData.po_number,
      po_date: formData.po_date,
      po_amount: formData.po_amount,
      currency: opportunity.currency || 'USD',
      payment_type: formData.payment_type, // 'CBD', 'TOP', or 'Installments'
      status: 'active',

      // Payment terms
      ...(formData.payment_type === 'CBD' && {
        cbd_percentage: formData.cbd_percentage,
        cbd_due_date: formData.cbd_due_date
      }),
      ...(formData.payment_type === 'TOP' && {
        top_days: formData.top_days
      }),
      ...(formData.payment_type === 'Installments' && {
        installments: formData.installments.map(inst => ({
          due_date: inst.due_date,
          amount: inst.amount,
          percentage: inst.percentage,
          status: 'pending'
        }))
      })
    });

    toast.success('Project created from opportunity');
  };

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      const formData = new FormData(e.target);
      handleConvert(Object.fromEntries(formData));
    }}>
      <input name="po_number" placeholder="PO Number" required />
      <input name="po_date" type="date" required />
      <input name="po_amount" type="number" required />

      <select name="payment_type">
        <option value="CBD">Cash Before Delivery</option>
        <option value="TOP">Terms of Payment</option>
        <option value="Installments">Installments</option>
      </select>

      <button type="submit">Create Project</button>
    </form>
  );
}

```

--------------------------------

### Project Dashboard with Status and Payment Tracking (TypeScript)

Source: https://context7.com/wirkancil/thrive-sales-board-main/llms.txt

This component displays a dashboard of projects, categorizing them into active and completed. It fetches project data using the 'useProjects' hook and allows users to mark projects as complete. It visualizes project details including PO number, amount, currency, and payment-specific information like due dates for TOP and installment details. Dependencies include a 'Skeleton' component for loading states and a 'formatCurrency' utility function.

```typescript
// Project dashboard
function ProjectDashboard() {
  const { projects, isLoading, updateProject } = useProjects();

  const handleCompleteProject = async (projectId) => {
    await updateProject(projectId, {
      status: 'completed',
      completed_at: new Date().toISOString()
    });
  };

  if (isLoading) return <Skeleton count={3} />;

  const activeProjects = projects.filter(p => p.status === 'active');
  const completedProjects = projects.filter(p => p.status === 'completed');

  return (
    <div>
      <h2>Active Projects ({activeProjects.length})</h2>
      {activeProjects.map(project => (
        <div key={project.id} className="project-card">
          <h3>{project.name}</h3>
          <p>PO: {project.po_number}</p>
          <p>Amount: {formatCurrency(project.po_amount, project.currency)}</p>
          <p>Payment: {project.payment_type}</p>

          {project.payment_type === 'TOP' && (
            <p>Due: {project.top_days} days from PO date</p>
          )}

          {project.installments && (
            <div>
              <h4>Installments</h4>
              {project.installments.map((inst, idx) => (
                <div key={idx}>
                  <span>{formatCurrency(inst.amount, project.currency)}</span>
                  <span> - Due: {inst.due_date}</span>
                  <span> - {inst.status}</span>
                </div>
              ))}
            </div>
          )}

          <button onClick={() => handleCompleteProject(project.id)}>
            Mark Complete
          </button>
        </div>
      ))}
    </div>
  );
}

```

--------------------------------

### Manage FX Rates with TypeScript Hooks

Source: https://context7.com/wirkancil/thrive-sales-board-main/llms.txt

This snippet demonstrates how to manage foreign exchange rates using custom TypeScript hooks. It covers creating, updating, and displaying FX rates, intended for administrative interfaces. Dependencies include `useFxRates` and `useCurrencyFormatter` hooks.

```typescript
import { useFxRates } from './hooks/useFxRates';
import { useCurrencyFormatter } from './hooks/useCurrencyFormatter';

// FX rate management (admin only)
function FxRateManagement() {
  const { fxRates, createFxRate, updateFxRate, loading } = useFxRates();

  const handleCreateRate = async () => {
    await createFxRate('USD', 'IDR', 15600);
    await createFxRate('EUR', 'IDR', 17200);
    await createFxRate('SGD', 'IDR', 11500);
  };

  const handleUpdateRate = async (rateId) => {
    await updateFxRate(rateId, {
      rate: 15750,
      is_active: true
    });
  };

  return (
    <div>
      <h2>FX Rate Management</h2>
      <button onClick={handleCreateRate}>Add New Rate</button>

      <table>
        <thead>
          <tr>
            <th>From</th>
            <th>To</th>
            <th>Rate</th>
            <th>Date</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {fxRates.map(rate => (
            <tr key={rate.id}>
              <td>{rate.from_currency}</td>
              <td>{rate.to_currency}</td>
              <td>{rate.rate.toFixed(2)}</td>
              <td>{rate.rate_date}</td>
              <td>{rate.is_active ? 'Active' : 'Inactive'}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// Currency conversion in components
function OpportunityAmountDisplay({ opportunity }) {
  const { convertAmount, getLatestRate } = useFxRates();
  const { profile } = useProfile();

  // Opportunity stored in USD, display in user's preferred currency
  const displayAmount = convertAmount(
    opportunity.amount,
    opportunity.currency || 'USD',
    profile?.currency_code || 'IDR'
  );

  const rate = getLatestRate('USD', 'IDR');

  return (
    <div>
      <p className="text-2xl font-bold">
        {formatCurrency(displayAmount, profile?.currency_code)}
      </p>
      <p className="text-sm text-gray-500">
        Original: {formatCurrency(opportunity.amount, opportunity.currency)}
      </p>
      {rate && (
        <p className="text-xs text-gray-400">
          Rate: 1 USD = {rate.toFixed(2)} IDR
        </p>
      )}
    </div>
  );
}

// Currency formatter hook usage
function DealValueInput() {
  const { formatAmount, parseAmount } = useCurrencyFormatter();

  const [value, setValue] = useState('');

  const handleChange = (e) => {
    const formatted = formatAmount(e.target.value, 'IDR');
    setValue(formatted);
  };

  const handleSubmit = () => {
    const numericValue = parseAmount(value);
    console.log('Numeric value:', numericValue); // 1000000
  };

  return (
    <div>
      <label>Deal Amount (IDR)</label>
      <input
        type="text"
        value={value}
        onChange={handleChange}
        placeholder="Rp 0"
      />
      {/* Input: "1000000" → Display: "Rp 1,000,000" */}
    </div>
  );
}

```

--------------------------------

### Create, Update, Delete Sales Targets in TypeScript

Source: https://context7.com/wirkancil/thrive-sales-board-main/llms.txt

This snippet demonstrates how to manage sales targets using the `useSalesTargets` hook. It includes functions to create, update, and delete targets, and displays them in a table. It also includes a dropdown for selecting account managers. Dependencies include `useSalesTargets`, `LoadingSpinner`, `formatCurrency`, and `calculateActualRevenue`.

```typescript
import { useSalesTargets } from './hooks/useSalesTargets';

// Creating sales targets
function TargetManagement() {
  const {
    targets,
    accountManagers,
    loading,
    createTarget,
    updateTarget,
    deleteTarget
  } = useSalesTargets();

  const handleCreateTarget = async () => {
    await createTarget({
      account_manager_id: 'user-123',
      measure: 'revenue', // or 'margin', 'deals'
      target_amount: 5000000, // 5M IDR
      period_start: '2025-01-01',
      period_end: '2025-03-31'
    });
  };

  const handleUpdateTarget = async (targetId) => {
    await updateTarget(targetId, {
      amount: 6000000,
      measure: 'margin'
    });
  };

  if (loading) return <LoadingSpinner />;

  return (
    <div>
      <h2>Sales Targets</h2>

      <select name="account_manager">
        {accountManagers.map(am => (
          <option key={am.id} value={am.id}>
            {am.full_name}
          </option>
        ))}
      </select>

      <button onClick={handleCreateTarget}>Create Target</button>

      <table>
        <thead>
          <tr>
            <th>Assigned To</th>
            <th>Measure</th>
            <th>Amount</th>
            <th>Period</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {targets.map(target => (
            <tr key={target.id}>
              <td>{target.assigned_user?.full_name}</td>
              <td>{target.measure}</td>
              <td>{formatCurrency(target.amount)}</td>
              <td>
                {target.period_start} to {target.period_end}
              </td>
              <td>
                <button onClick={() => deleteTarget(target.id)}>
                  Delete
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// Quarterly target tracking
function QuarterlyTargetsView() {
  const { targets, fetchTargets } = useSalesTargets();

  useEffect(() => {
    // Fetch Q1 2025 targets
    fetchTargets('Q1 2025');
  }, []);

  const getAchievement = (target) => {
    // Calculate actual vs target
    const actualRevenue = calculateActualRevenue(
      target.assigned_to,
      target.period_start,
      target.period_end
    );
    return (actualRevenue / target.amount) * 100;
  };

  return (
    <div>
      {targets.map(target => (
        <div key={target.id}>
          <h3>{target.assigned_user?.full_name}</h3>
          <p>Target: {formatCurrency(target.amount)}</p>
          <p>Achievement: {getAchievement(target).toFixed(1)}%</p>
        </div>
      ))}
    </div>
  );
}

```

--------------------------------

### Global Search Command Palette with Keyboard Shortcut (TypeScript)

Source: https://context7.com/wirkancil/thrive-sales-board-main/llms.txt

Implements a global search command palette that is triggered by a keyboard shortcut (Cmd+K or Ctrl+K). It utilizes the `useGlobalSearch` hook to fetch and display search results for opportunities, customers, and contacts. The component also manages the search query state, loading states, and displays recent searches.

```typescript
import { useGlobalSearch } from './hooks/useGlobalSearch';

// Global search command palette
function GlobalSearchCommand() {
  const {
    searchResults,
    loading,
    search,
    recentSearches
  } = useGlobalSearch();

  const [query, setQuery] = useState('');
  const [isOpen, setIsOpen] = useState(false);

  // Keyboard shortcut: Cmd+K / Ctrl+K
  useEffect(() => {
    const handleKeyDown = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
        e.preventDefault();
        setIsOpen(true);
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, []);

  const handleSearch = async (searchQuery) => {
    setQuery(searchQuery);
    await search(searchQuery);
  };

  return (
    <CommandDialog open={isOpen} onOpenChange={setIsOpen}>
      <CommandInput
        placeholder="Search opportunities, customers, contacts..."
        value={query}
        onValueChange={handleSearch}
      />

      <CommandList>
        {loading && <CommandLoading>Searching...</CommandLoading>}

        <CommandEmpty>No results found.</CommandEmpty>

        <CommandGroup heading="Opportunities">
          {searchResults.opportunities?.map(opp => (
            <CommandItem
              key={opp.id}
              onSelect={() => {
                navigate(`/opportunities/${opp.id}`);
                setIsOpen(false);
              }}
            >
              <FileIcon className="mr-2" />
              <span>{opp.name}</span>
              <span className="ml-auto text-sm text-gray-500">
                {formatCurrency(opp.amount)}
              </span>
            </CommandItem>
          ))}
        </CommandGroup>

        <CommandGroup heading="Customers">
          {searchResults.customers?.map(customer => (
            <CommandItem
              key={customer.id}
              onSelect={() => {
                navigate(`/customers/${customer.id}`);
                setIsOpen(false);
              }}
            >
              <BuildingIcon className="mr-2" />
              <span>{customer.name}</span>
            </CommandItem>
          ))}
        </CommandGroup>

        <CommandGroup heading="Contacts">
          {searchResults.contacts?.map(contact => (
            <CommandItem
              key={contact.id}
              onSelect={() => {
                navigate(`/contacts/${contact.id}`);
                setIsOpen(false);
              }}
            >
              <UserIcon className="mr-2" />
              <span>{contact.full_name}</span>
              <span className="ml-auto text-sm text-gray-500">
                {contact.organization_name}
              </span>
            </CommandItem>
          ))}
        </CommandGroup>

        {recentSearches.length > 0 && (
          <CommandGroup heading="Recent Searches">
            {recentSearches.map((recent, idx) => (
              <CommandItem
                key={idx}
                onSelect={() => handleSearch(recent)}
              >
                <ClockIcon className="mr-2" />
                <span>{recent}</span>
              </CommandItem>
            ))}
          </CommandGroup>
        )}
      </CommandList>
    </CommandDialog>
  );
}

```

--------------------------------

### TypeScript: Automatic Opportunity Activity Tracking

Source: https://context7.com/wirkancil/thrive-sales-board-main/llms.txt

Implements automatic logging for opportunity lifecycle events like creation and stage changes using the `useActivityTracker` hook. It interacts with Supabase for data persistence and uses toast notifications for user feedback. This snippet assumes the existence of `useAuth`, `supabase`, `getStageId`, and `toast` utilities.

```typescript
import { useActivityTracker } from './hooks/useActivityTracker';

// Enable automatic activity tracking
function OpportunityManagement() {
  const { trackStageChange, trackOpportunityCreated } = useActivityTracker({
    enabled: true
  });

  const { user } = useAuth();

  const handleCreateOpportunity = async (oppData) => {
    const { data, error } = await supabase
      .from('opportunities')
      .insert(oppData)
      .select()
      .single();

    if (!error) {
      // Track creation event
      trackOpportunityCreated(data.id, data.name, user.id);
      toast.success('Opportunity created');
    }
  };

  const handleStageChange = async (oppId, fromStage, toStage) => {
    const { error } = await supabase
      .from('opportunities')
      .update({
        stage_id: getStageId(toStage),
        stage: toStage
      })
      .eq('id', oppId);

    if (!error) {
      // Automatically log stage change
      trackStageChange(oppId, fromStage, toStage, user.id);
    }
  };

  return (
    <OpportunityKanban
      onStageChange={handleStageChange}
      onCreate={handleCreateOpportunity}
    />
  );
}

// Custom activity creation
function ActivityLogger() {
  const [activities, setActivities] = useState([]);

  const logCall = async (opportunityId, notes) => {
    const { data } = await supabase
      .from('activities')
      .insert({
        opportunity_id: opportunityId,
        activity_type: 'call',
        subject: 'Customer call',
        description: notes,
        status: 'completed',
        completed_at: new Date().toISOString()
      })
      .select()
      .single();

    setActivities(prev => [data, ...prev]);
  };

  const logMeeting = async (opportunityId, meetingData) => {
    const { data } = await supabase
      .from('activities')
      .insert({
        opportunity_id: opportunityId,
        activity_type: 'meeting',
        subject: meetingData.subject,
        description: meetingData.notes,
        scheduled_at: meetingData.scheduledTime,
        status: 'scheduled'
      })
      .select()
      .single();

    setActivities(prev => [data, ...prev]);
  };

  return {
    activities,
    logCall,
    logMeeting,
    logEmail: (oppId, emailData) => { /* similar */ }
  };
}

```

--------------------------------

### Role-Based Data Access: Filtering and Management (TypeScript)

Source: https://context7.com/wirkancil/thrive-sales-board-main/llms.txt

The `useRoleBasedData` hook provides automatically filtered opportunities, deals, and activities based on the user's role and organizational hierarchy. It also includes loading states and a data refresh function. This hook is crucial for tailoring the user experience and data visibility. Dependencies include the `useRoleBasedData` hook and potentially a `supabase` client for updates.

```typescript
import { useRoleBasedData } from './hooks/useRoleBasedData';

// Automatic role-based filtering
function Dashboard() {
  const {
    opportunities,
    activities,
    metrics,
    loading,
    refreshData
  } = useRoleBasedData();

  if (loading) return <Skeleton count={5} />;

  return (
    <div className="dashboard">
      <MetricsCards
        totalDeals={metrics.totalDeals}
        totalValue={metrics.totalValue}
        wonDeals={metrics.wonDeals}
        conversionRate={metrics.conversionRate}
      />

      <OpportunityList
        opportunities={opportunities}
        onUpdate={refreshData}
      />

      <ActivityFeed
        activities={activities}
        onComplete={refreshData}
      />
    </div>
  );
}

// Role-aware opportunity management
function OpportunityKanban() {
  const { opportunities, userProfile, refreshData } = useRoleBasedData();

  // Opportunities are automatically filtered by role:
  // - Account Manager: sees only their own opportunities
  // - Manager: sees opportunities from their department
  // - Head: sees opportunities from their division
  // - Admin: sees all opportunities

  const handleStageChange = async (oppId, newStageId) => {
    await supabase
      .from('opportunities')
      .update({ stage_id: newStageId })
      .eq('id', oppId);

    refreshData();
  };

  return (
    <KanbanBoard
      opportunities={opportunities}
      onStageChange={handleStageChange}
      role={userProfile?.role}
    />
  );
}
```

--------------------------------

### Log Opportunity CRUD Operations with TypeScript

Source: https://context7.com/wirkancil/thrive-sales-board-main/llms.txt

Logs Create, Read, Update, and Delete (CRUD) operations for opportunities. It captures before and after states for updates and deletions, along with user-provided reasons and automatically collected metadata like user agent. Dependencies include `useAuditLog` hook and a Supabase client.

```typescript
import { useAuditLog } from './hooks/useAuditLog';

// Logging CRUD operations
function OpportunityEditor({ opportunityId }) {
  const { logAuditEvent } = useAuditLog();
  const [opportunity, setOpportunity] = useState(null);

  const handleUpdate = async (newData) => {
    const oldData = { ...opportunity };

    // Update opportunity
    const { error } = await supabase
      .from('opportunities')
      .update(newData)
      .eq('id', opportunityId);

    if (!error) {
      // Log the change
      await logAuditEvent({
        event_type: 'update',
        object_type: 'opportunity',
        object_id: opportunityId,
        before_values: oldData,
        after_values: newData,
        reason: 'User edited opportunity details',
        metadata: {
          changed_fields: Object.keys(newData),
          user_agent: navigator.userAgent
        }
      });

      setOpportunity({ ...opportunity, ...newData });
      toast.success('Opportunity updated');
    }
  };

  const handleDelete = async () => {
    await logAuditEvent({
      event_type: 'delete',
      object_type: 'opportunity',
      object_id: opportunityId,
      before_values: opportunity,
      reason: 'User deleted opportunity',
      metadata: { deletion_timestamp: new Date().toISOString() }
    });

    await supabase.from('opportunities').delete().eq('id', opportunityId);
  };

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      handleUpdate({ name: e.target.name.value });
    }}>
      <input name="name" defaultValue={opportunity?.name} />
      <button type="submit">Save</button>
      <button type="button" onClick={handleDelete}>Delete</button>
    </form>
  );
}

```

--------------------------------

### Permission System: UI Rendering and Admin Guards (TypeScript)

Source: https://context7.com/wirkancil/thrive-sales-board-main/llms.txt

The `usePermissions` hook provides boolean flags to conditionally render UI elements or restrict access to administrative features based on the current user's role. It helps ensure users only see and interact with features they are authorized for. Dependencies include the `usePermissions` hook itself.

```typescript
import { usePermissions } from './hooks/usePermissions';

// Permission-based UI rendering
function OpportunityActions({ opportunity }) {
  const permissions = usePermissions();

  return (
    <div className="actions">
      {permissions.canCrudDeals && (
        <button onClick={() => editOpportunity(opportunity.id)}>
          Edit Opportunity
        </button>
      )}

      {permissions.canDeleteRecords && (
        <button onClick={() => deleteOpportunity(opportunity.id)}>
          Delete
        </button>
      )}

      {opportunity.amount > 1_000_000_000 && permissions.canApproveDealsOver1B && (
        <button onClick={() => approveDeal(opportunity.id)}>
          Approve (>1B IDR)
        </button>
      )}

      {opportunity.amount >= 500_000_000 &&
       opportunity.amount <= 1_000_000_000 &&
       permissions.canApproveDeals500MTo1B && (
        <button onClick={() => approveDeal(opportunity.id)}>
          Approve (500M-1B IDR)
        </button>
      )}
    </div>
  );
}

// Administrative features guard
function AdminPanel() {
  const permissions = usePermissions();

  if (!permissions.canAccessUserManagement) {
    return <AccessDenied />;
  }

  return (
    <div>
      {permissions.canSetManagerTargets && (
        <TargetManagement level="manager" />
      )}

      {permissions.canSetAccountManagerTargets && (
        <TargetManagement level="account_manager" />
      )}

      {permissions.canApproveReassignments && (
        <ReassignmentQueue />
      )}
    </div>
  );
}
```

--------------------------------

### User Profile Management Hook and Role-Based Filtering - TypeScript

Source: https://context7.com/wirkancil/thrive-sales-board-main/llms.txt

Manages user profile data, including role and organizational hierarchy. It includes helper functions for role checking (e.g., isAdmin, isManager) and demonstrates role-based data filtering for operations like fetching opportunities. Depends on a custom useProfile hook and Supabase client.

```typescript
import { useProfile } from './hooks/useProfile';

// Profile usage with role-based UI
function DashboardHeader() {
  const { profile, loading, isAdmin, isManager, updateProfile } = useProfile();

  if (loading) return <Skeleton />;

  const handleUpdateCurrency = async () => {
    await updateProfile({
      currency_code: 'USD',
      locale: 'en-US',
      timezone: 'America/New_York'
    });
  };

  return (
    <div>
      <h1>Welcome, {profile?.full_name}</h1>
      <p>Role: {profile?.role}</p>
      <p>Department: {profile?.department}</p>

      {isAdmin() && (
        <button onClick={() => navigate('/admin')}>
          Admin Dashboard
        </button>
      )}

      {isManager() && (
        <button onClick={() => navigate('/team-dashboard')}>
          Team Dashboard
        </button>
      )}

      <CurrencySelector
        currentCurrency={profile?.currency_code}
        onChange={handleUpdateCurrency}
      />
    </div>
  );
}

// Role-based data filtering
function useFilteredData() {
  const { profile, isAccountManager } = useProfile();

  const fetchData = async () => {
    let query = supabase.from('opportunities').select('*');

    if (isAccountManager()) {
      // Account managers see only their own opportunities
      query = query.eq('owner_id', profile?.id);
    }

    return query;
  };

  return { fetchData };
}
```

--------------------------------

### View Audit Logs with TypeScript

Source: https://context7.com/wirkancil/thrive-sales-board-main/llms.txt

Displays audit logs for administrators. It fetches logs filtered by object type and limit, then renders them in a table format. Access is restricted to users with `canViewAuditLogs` permission. Dependencies include `useAuditLog` hook.

```typescript
// Viewing audit logs (admin only)
function AuditLogViewer() {
  const { fetchAuditLogs, canViewAuditLogs } = useAuditLog();
  const [logs, setLogs] = useState([]);

  useEffect(() => {
    if (canViewAuditLogs) {
      fetchAuditLogs({
        object_type: 'opportunity',
        limit: 100
      }).then(({ data }) => setLogs(data));
    }
  }, []);

  if (!canViewAuditLogs) {
    return <p>Access denied. Admin only.</p>;
  }

  return (
    <div>
      <h2>Audit Log</h2>
      <table>
        <thead>
          <tr>
            <th>Timestamp</th>
            <th>User</th>
            <th>Action</th>
            <th>Object</th>
            <th>Changes</th>
          </tr>
        </thead>
        <tbody>
          {logs.map(log => (
            <tr key={log.id}>
              <td>{new Date(log.created_at).toLocaleString()}</td>
              <td>{log.created_by}</td>
              <td>{log.event_type}</td>
              <td>
                {log.object_type} ({log.object_id})
              </td>
              <td>
                <details>
                  <summary>View changes</summary>
                  <pre>Before: {log.before_values}</pre>
                  <pre>After: {log.after_values}</pre>
                </details>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

```

--------------------------------

### Automatic Activity Tracking with TypeScript

Source: https://context7.com/wirkancil/thrive-sales-board-main/llms.txt

Provides a hook `useAutoAuditLog` for automatically logging page views. It logs events like 'view' with associated object type and ID, and captures referrer information. This hook is intended to be called within components to automatically track user interactions.

```typescript
// Automatic activity tracking
function useAutoAuditLog(objectType, objectId) {
  const { logAuditEvent } = useAuditLog();

  useEffect(() => {
    // Log page view
    logAuditEvent({
      event_type: 'view',
      object_type: objectType,
      object_id: objectId,
      metadata: {
        page_view: true,
        referrer: document.referrer
      }
    });
  }, [objectId]);
}

```

--------------------------------

### Manage Organizational Hierarchy with React Hooks

Source: https://context7.com/wirkancil/thrive-sales-board-main/llms.txt

Demonstrates the use of custom React hooks (useDivisions, useTeams, useEntities) to fetch and render organizational data including entities, divisions, departments, and teams. This component visualizes the hierarchy and is suitable for displaying complex organizational structures. It relies on data being available from the specified hooks.

```typescript
import { useDivisions } from './hooks/useDivisions';
import { useTeams } from './hooks/useTeams';
import { useEntities } from './hooks/useEntities';

// Entity and hierarchy management
function OrganizationalHierarchy() {
  const { entities } = useEntities();
  const { divisions } = useDivisions();
  const { teams } = useTeams();

  return (
    <div className="org-chart">
      {entities.map(entity => (
        <div key={entity.id} className="entity">
          <h2>{entity.name}</h2>

          {divisions
            .filter(d => d.entity_id === entity.id)
            .map(division => (
              <div key={division.id} className="division">
                <h3>{division.name}</h3>
                <p>Head: {division.head_name}</p>

                {division.departments?.map(dept => (
                  <div key={dept.id} className="department">
                    <h4>{dept.name}</h4>
                    <p>Manager: {dept.manager_name}</p>

                    {teams
                      .filter(t => t.department_id === dept.id)
                      .map(team => (
                        <div key={team.id} className="team">
                          <h5>{team.name}</h5>
                          <p>Members: {team.member_count}</p>
                        </div>
                      ))}
                  </div>
                ))}
              </div>
            ))}
        </div>
      ))}
    </div>
  );
}
```

--------------------------------

### Filter Data with Entity-Scoped Hooks

Source: https://context7.com/wirkancil/thrive-sales-board-main/llms.txt

Illustrates how to use entity-scoped data hooks (useEntityScopedData, useRoleBasedData) to filter information, specifically sales opportunities, based on a selected entity. This component features an EntitySelector and displays metrics and opportunity lists relevant to the chosen entity. It requires the availability of EntitySelector, MetricCards, and OpportunityList components.

```typescript
// Entity-scoped data filtering
function EntityScopedDashboard() {
  const { selectedEntity, setSelectedEntity } = useEntityScopedData();
  const { opportunities } = useRoleBasedData();

  // Filter opportunities by entity
  const entityOpportunities = opportunities.filter(
    opp => opp.entity_id === selectedEntity?.id
  );

  return (
    <div>
      <EntitySelector
        value={selectedEntity}
        onChange={setSelectedEntity}
      />

      <MetricCards opportunities={entityOpportunities} />
      <OpportunityList opportunities={entityOpportunities} />
    </div>
  );
}
```

--------------------------------

### Custom Authentication Hook for Session Management - TypeScript

Source: https://context7.com/wirkancil/thrive-sales-board-main/llms.txt

Provides session management, login, logout, and automatic token refresh. It handles user authentication state and errors, integrating with a custom hook for easy use in React components. Dependencies include a custom useAuth hook.

```typescript
import { useAuth } from './hooks/useAuth';

// Basic authentication usage
function LoginPage() {
  const { user, loading, signIn, signOut } = useAuth();

  const handleLogin = async () => {
    const { error } = await signIn('user@example.com', 'password123');
    if (error) {
      console.error('Login failed:', error.message);
    }
  };

  const handleLogout = async () => {
    const { error } = await signOut();
    if (!error) {
      // Redirect to login page
      window.location.href = '/auth';
    }
  };

  if (loading) return <LoadingSpinner />;

  if (user) {
    return (
      <div>
        <p>Logged in as: {user.email}</p>
        <button onClick={handleLogout}>Sign Out</button>
      </div>
    );
  }

  return <button onClick={handleLogin}>Sign In</button>;
}

// Protected route pattern
function ProtectedComponent() {
  const { user, loading } = useAuth();

  if (loading) return <LoadingSpinner />;
  if (!user) return <Navigate to="/auth" />;

  return <DashboardContent />;
}
```

--------------------------------

### Notification Handling Logic (TypeScript)

Source: https://context7.com/wirkancil/thrive-sales-board-main/llms.txt

A React component that handles different types of incoming notifications. It uses a `useEffect` hook to iterate through notifications and perform actions based on their type, such as displaying toast alerts for 'alert' type notifications. It depends on the `useNotifications` hook and a `toast` utility.

```typescript
// Notification types and their handling
function NotificationHandler() {
  const { notifications } = useNotifications();

  useEffect(() => {
    notifications.forEach(notif => {
      // Handle different notification types
      switch (notif.type) {
        case 'alert':
          // Show toast for urgent alerts
          if (!notif.is_read) {
            toast.warning(notif.title, { description: notif.message });
          }
          break;

        case 'target':
          // Target-related notifications
          console.log('Target notification:', notif.message);
          break;

        case 'ai':
          // AI insights and recommendations
          console.log('AI insight:', notif.message);
          break;

        case 'system':
          // System announcements
          console.log('System notification:', notif.message);
          break;
      }
    });
  }, [notifications]);

  return null;
}

```

--------------------------------

### Real-Time Notification Bell Component (TypeScript)

Source: https://context7.com/wirkancil/thrive-sales-board-main/llms.txt

A React component that displays a notification bell with a badge for unread count. It fetches notifications using a custom hook and provides functionality to mark notifications as read or all as read. It depends on a `useNotifications` hook and UI components like `Popover`, `PopoverTrigger`, `PopoverContent`, and `Badge`.

```typescript
import { useNotifications } from './hooks/useNotifications';

// Notification bell with real-time updates
function NotificationBell() {
  const {
    notifications,
    unreadCount,
    loading,
    markAsRead,
    markAllAsRead
  } = useNotifications();

  const [isOpen, setIsOpen] = useState(false);

  if (loading) return <BellIcon className="animate-pulse" />;

  return (
    <Popover open={isOpen} onOpenChange={setIsOpen}>
      <PopoverTrigger>
        <div className="relative">
          <BellIcon className="h-6 w-6" />
          {unreadCount > 0 && (
            <Badge className="absolute -top-2 -right-2">
              {unreadCount}
            </Badge>
          )}
        </div>
      </PopoverTrigger>

      <PopoverContent className="w-80">
        <div className="flex justify-between items-center mb-4">
          <h3 className="font-semibold">Notifications</h3>
          {unreadCount > 0 && (
            <button
              onClick={markAllAsRead}
              className="text-sm text-blue-600"
            >
              Mark all as read
            </button>
          )}
        </div>

        <div className="space-y-2">
          {notifications.length === 0 ? (
            <p className="text-center text-gray-500 py-4">
              No notifications
            </p>
          ) : (
            notifications.map(notif => (
              <div
                key={notif.id}
                className={`p-3 rounded ${ notif.is_read ? 'bg-gray-50' : 'bg-blue-50'}`}
              >
                <div className="flex justify-between">
                  <h4 className="font-medium">{notif.title}</h4>
                  {!notif.is_read && (
                    <button
                      onClick={() => markAsRead(notif.id)}
                      className="text-xs text-blue-600"
                    >
                      Mark read
                    </button>
                  )}
                </div>
                <p className="text-sm text-gray-600 mt-1">
                  {notif.message}
                </p>
                {notif.link && (
                  <a
                    href={notif.link}
                    className="text-xs text-blue-600 mt-2 inline-block"
                  >
                    View details →
                  </a>
                )}
                <p className="text-xs text-gray-400 mt-2">
                  {formatDistanceToNow(new Date(notif.created_at))} ago
                </p>
              </div>
            ))
          )}
        </div>
      </PopoverContent>
    </Popover>
  );
}

```
Tokens:
Raw