fix(approvals): save approver name and center table columns

[Israeltheminer]

Summary by CodeRabbit

• Style

  • Improved approval dialog layout with adjusted sizing and spacing
  • Refined column alignments for better visual clarity
  • Enhanced product recommendation and list rendering display

• Bug Fixes

  • Fixed confidence score calculation with robust fallback strategy
  • Improved content scrolling behavior in approval dialogs

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request modifies the approvals module with UI layout refinements and backend data-handling improvements. Changes include reducing padding on a PDF preview input, adjusting dialog sizing and height constraints in the approval detail dialog, refactoring product data rendering and confidence calculation logic in the approvals component, and adding logic to store the approver's display name in approval metadata during status updates. The majority of changes involve restructuring how product recommendations are rendered and how confidence values are computed with fallback strategies.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 minutes

Possibly related PRs

• tale-project/poc2#375: Modifies the same approvals UI and data-flow in approvals.tsx—introduces product\_recommendation filtering and query adjustments that interact with the refactored product-rendering logic in this PR.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

services/platform/app/(app)/dashboard/[id]/approvals/components/approvals.tsx (1)

300-444: Inconsistent unoptimized prop usage for external images.

The unoptimized prop is applied to Image components in the non-recommendation path (line 425) but not in the recommendation path (lines 344-356, 366-390). External URLs should consistently use unoptimized to avoid Next.js image optimization issues.

🔎 Suggested fix for recommendation images

             <Image
               src={firstImage}
               alt={firstName}
               width={20}
               height={20}
               className="w-full h-full object-cover"
+              unoptimized={/^https?:\/\//.test(firstImage)}
               onError={(e) => {

Apply the same pattern to the second product image as well.

🤖 Fix all issues with AI Agents

In
@services/platform/app/(app)/dashboard/[id]/approvals/components/approvals.tsx:
- Around line 190-221: The mapping over metadata['recommendedProducts'] uses
repetitive typeof checks plus redundant "as" assertions because bracket access
prevents narrowing; create a small helper (e.g., getString(obj: Record<string,
unknown>, key: string): string | undefined) and use it inside the
recommendedProducts map used by the const recommendedProducts block to extract
productId, productName, imageUrl, relationshipType, reasoning and only coerce
numeric confidence with a safe helper or Number check; replace constructions
like (typeof product['productName'] === 'string' && (product['productName'] as
string)) with getString(product,'productName') and default fallbacks (e.g., id
|| `rec-${index}`, name || '', image || '/assets/placeholder-image.png').

In @services/platform/convex/model/approvals/update_approval_status.ts:
- Around line 18-35: The code unsafely casts user?.name and user?.email to
string when computing approverName; replace these casts with explicit type
guards checking typeof user?.name === 'string' and typeof user?.email ===
'string' (or other runtime validations) before assigning to approverName, and
fall back to undefined or a safe default if neither is a string; update the
block that reads memberRes, userRes, user and sets approverName so it only
assigns when the value is actually a string.

📜 Review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro (Legacy)

📥 Commits

Reviewing files that changed from the base of the PR and between 7c8517e and da47e54.

📒 Files selected for processing (4)

• services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-preview-pdf.tsx
• services/platform/app/(app)/dashboard/[id]/approvals/components/approval-detail-dialog.tsx
• services/platform/app/(app)/dashboard/[id]/approvals/components/approvals.tsx
• services/platform/convex/model/approvals/update_approval_status.ts

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx,js,jsx}: ALL pages should be optimized for accessibility (Level AA)
ALWAYS put imports at the top and exports at the bottom. Keep them sorted correctly
PREFER named exports. AVOID default exports (only if needed)

Files:

• services/platform/convex/model/approvals/update_approval_status.ts
• services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-preview-pdf.tsx
• services/platform/app/(app)/dashboard/[id]/approvals/components/approval-detail-dialog.tsx
• services/platform/app/(app)/dashboard/[id]/approvals/components/approvals.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: USE implicit typing whenever possible
DO NOT use type casting. Avoid any, and unknown whenever possible

Files:

• services/platform/convex/model/approvals/update_approval_status.ts
• services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-preview-pdf.tsx
• services/platform/app/(app)/dashboard/[id]/approvals/components/approval-detail-dialog.tsx
• services/platform/app/(app)/dashboard/[id]/approvals/components/approvals.tsx

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{tsx,jsx}: Do NOT hardcode text, use the translation hooks/functions instead for user-facing UI
CONSIDER ALWAYS TO add optimistic updates with withOptimisticUpdate for useMutation. If you decide to NOT add a optimistic update you need to provide a good reason why and comment the hook
USE useMemo, useCallback and memo the right moment
DO NOT overuse useEffect
USE cva if a component has multiple variants
AVOID router.refresh()
CONSIDER TO preload queries with preloadQuery and usePreloadedQuery in React
ALWAYS CONSIDER semantic HTML elements (<button>, <nav>, <main>, <header>, <footer>, <article>, <section>)
ALWAYS provide text alternatives for non-text content (alt for images, aria-label for icon buttons)
ENSURE all interactive elements are keyboard accessible and have visible focus states
USE proper heading hierarchy (h1 → h2 → h3), never skip heading levels
ALWAYS associate form labels with inputs using htmlFor or wrapping
PROVIDE clear error messages that identify the field and describe how to fix the issue
AVOID using color alone to convey information
USE aria-live regions for dynamic content updates

Files:

• services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-preview-pdf.tsx
• services/platform/app/(app)/dashboard/[id]/approvals/components/approval-detail-dialog.tsx
• services/platform/app/(app)/dashboard/[id]/approvals/components/approvals.tsx

🧠 Learnings (15)

📚 Learning: 2025-12-26T03:04:07.995Z

Learnt from: larryro
Repo: tale-project/tale PR: 35
File: services/platform/convex/approvals.ts:51-62
Timestamp: 2025-12-26T03:04:07.995Z
Learning: In Convex approvals API (services/platform/convex/approvals.ts), continue the pattern of maintaining separate internalQuery functions for internal vs public API access (e.g., getApprovalInternal vs getApprovalById) even if implementations are identical. This separation preserves the ability to diverge access control patterns in the future without breaking call sites. Apply this guideline broadly to the Convex-related API files under services/platform/convex/, using the pattern services/platform/convex/**/*.ts to cover similar modules. Ensure new or refactored internal/public wrappers follow this convention and document intent where access rules may evolve.

Applied to files:

• services/platform/convex/model/approvals/update_approval_status.ts

📚 Learning: 2026-01-05T12:04:10.553Z

Learnt from: CR
Repo: tale-project/tale PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-05T12:04:10.553Z
Learning: Applies to **/*.{tsx,jsx} : CONSIDER ALWAYS TO add optimistic updates with `withOptimisticUpdate` for `useMutation`. If you decide to NOT add a optimistic update you need to provide a good reason why and comment the hook

Applied to files:

• services/platform/convex/model/approvals/update_approval_status.ts

📚 Learning: 2025-07-03T08:43:49.346Z

Learnt from: CR
Repo: talecorp/poc PR: 0
File: .cursor/rules/next-best-practice.mdc:0-0
Timestamp: 2025-07-03T08:43:49.346Z
Learning: Update `getServerSideProps` to server components

Applied to files:

• services/platform/convex/model/approvals/update_approval_status.ts

📚 Learning: 2025-12-30T03:24:33.770Z

Learnt from: larryro
Repo: tale-project/tale PR: 36
File: services/platform/convex/wf_step_defs.ts:33-39
Timestamp: 2025-12-30T03:24:33.770Z
Learning: In Convex API files under services/platform/convex (e.g., wf_step_defs.ts and peers) refrain from delegating trivial single-line database calls like ctx.db.get(id) to model helpers. Use direct calls for simple operations with no extra business logic. Reserve model helpers for complex tasks (ordering, filtering, validation, transformation). This guideline applies to all .ts files in this Convex API area.

Applied to files:

• services/platform/convex/model/approvals/update_approval_status.ts

📚 Learning: 2026-01-05T01:44:20.855Z

Learnt from: larryro
Repo: tale-project/tale PR: 76
File: services/platform/convex/agent_tools/sub_agents/helpers/format_integrations.ts:73-111
Timestamp: 2026-01-05T01:44:20.855Z
Learning: Guideline: In Convex integration-related TypeScript files (e.g., services/platform/convex/agent_tools/sub_agents/helpers/format_integrations.ts and services/platform/convex/agent_tools/integrations/execute_batch_integration_internal.ts), avoid relying on generated types for optional fields. If you must access optional fields like sqlOperations or connector on Doc<'integrations'> and the generated type doesn’t capture them, use an explicit as any cast to access those fields, and document this rationale (as referenced in issue #79). During reviews, flag such casts, verify they’re necessary due to known type limitations, and ensure alternative type-safe approaches aren’t feasible before accepting the cast.

Applied to files:

• services/platform/convex/model/approvals/update_approval_status.ts

📚 Learning: 2025-12-30T06:21:13.183Z

Learnt from: larryro
Repo: tale-project/tale PR: 37
File: services/platform/convex/model/documents/validators.ts:89-102
Timestamp: 2025-12-30T06:21:13.183Z
Learning: Do not flag a missing trailing newline for TypeScript files in code reviews. POSIX text files should end with a trailing newline and Prettier (or your formatter) will enforce this. Treat the trailing newline as a non-issue in reviews for all TS files.

Applied to files:

• services/platform/convex/model/approvals/update_approval_status.ts

📚 Learning: 2025-12-19T04:29:09.246Z

Learnt from: larryro
Repo: tale-project/tale PR: 26
File: services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/rag-status-badge.tsx:82-92
Timestamp: 2025-12-19T04:29:09.246Z
Learning: In services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/rag-status-badge.tsx, the team prefers using router.refresh() for polling in-progress RAG statuses over targeted status fetching, prioritizing simplicity and state consistency given the expected low number of concurrent indexing jobs (1-3 documents).

Applied to files:

• services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-preview-pdf.tsx

📚 Learning: 2025-10-01T17:12:39.508Z

Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace p-[8px] with p-2

Applied to files:

• services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-preview-pdf.tsx

📚 Learning: 2025-10-01T17:12:39.508Z

Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace p-[4px] with p-1

Applied to files:

• services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-preview-pdf.tsx

📚 Learning: 2025-10-01T17:12:39.508Z

Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace m-[8px] with m-2

Applied to files:

• services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-preview-pdf.tsx

📚 Learning: 2025-10-01T17:12:39.508Z

Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace m-[4px] with m-1

Applied to files:

• services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-preview-pdf.tsx

📚 Learning: 2025-12-26T02:23:20.245Z

Learnt from: larryro
Repo: tale-project/tale PR: 35
File: services/platform/app/(app)/dashboard/[id]/chat/components/integration-approval-card.tsx:58-90
Timestamp: 2025-12-26T02:23:20.245Z
Learning: In services/platform/app/(app)/dashboard/[id]/chat/components/integration-approval-card.tsx, prefer reading the approving user from the authenticated session context rather than passing a userId from the frontend. The hardcoded 'user' string can be acceptable only as a temporary placeholder during the initial implementation until a user profile feature is added; plan to replace with proper user identity via session context or user service once backend supports it.

Applied to files:

• services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-preview-pdf.tsx
• services/platform/app/(app)/dashboard/[id]/approvals/components/approval-detail-dialog.tsx
• services/platform/app/(app)/dashboard/[id]/approvals/components/approvals.tsx

📚 Learning: 2025-12-26T03:04:19.196Z

Learnt from: larryro
Repo: tale-project/tale PR: 35
File: services/platform/convex/approvals.ts:51-62
Timestamp: 2025-12-26T03:04:19.196Z
Learning: In Convex approvals API (services/platform/convex/approvals.ts), the codebase intentionally maintains separate internalQuery functions for internal vs public API access (e.g., getApprovalInternal vs getApprovalById) even when implementations are identical. This separation allows for future access control pattern divergence without breaking call sites.

Applied to files:

• services/platform/app/(app)/dashboard/[id]/approvals/components/approvals.tsx

📚 Learning: 2025-11-25T04:37:44.394Z

Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-11-25T04:37:44.394Z
Learning: Applies to **/*.{tsx,jsx} : ALWAYS use the Table component (`Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`) instead of custom flex layouts; apply proper column widths using rem units and use semantic colors for all text and backgrounds

Applied to files:

• services/platform/app/(app)/dashboard/[id]/approvals/components/approvals.tsx

📚 Learning: 2025-11-30T12:29:39.745Z

Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/workspace_rules.mdc:0-0
Timestamp: 2025-11-30T12:29:39.745Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use descriptive message as toast `title` (never generic 'Error'), with optional `description` only for additional context

Applied to files:

• services/platform/app/(app)/dashboard/[id]/approvals/components/approvals.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Build Docker Image

🔇 Additional comments (12)

services/platform/convex/model/approvals/update_approval_status.ts (1)

37-46: LGTM!

The metadata merge pattern correctly preserves existing fields while conditionally adding approverName. The approach is consistent with the existing comments handling.

services/platform/app/(app)/dashboard/[id]/(knowledge)/documents/components/document-preview-pdf.tsx (2)

240-240: LGTM!

Minor styling adjustment removing horizontal padding from the page number input. The input remains accessible with visible focus states via ring styles.

---

265-267: LGTM!

Cosmetic reformatting with no functional change.

services/platform/app/(app)/dashboard/[id]/approvals/components/approval-detail-dialog.tsx (4)

18-26: LGTM!

Cosmetic reformatting of the dynamic import with no functional change.

---

97-116: LGTM!

Extracting footer to a variable improves readability while preserving the same conditional rendering logic.

---

171-177: LGTM!

Cosmetic reformatting of the status badge conditional rendering with no functional change.

---

140-140: This change is safe—the parent Dialog has an explicit height constraint.

The Dialog component applies max-h-[90vh] with flex flex-col layout, which provides the explicit height context needed for percentage-based calculations on child elements. Using calc(100%-88px) will work correctly here.

Note: The hardcoded 88px offset should be monitored if header or footer dimensions change in the future, as it may require adjustment.

Likely an incorrect or invalid review comment.

services/platform/app/(app)/dashboard/[id]/approvals/components/approvals.tsx (5)

61-62: LGTM!

Minor reformatting of state initialization.

---

549-572: LGTM!

Column header and cell alignment changes are consistent and improve visual presentation.

---

447-459: LGTM!

The getCustomerLabel callback is properly memoized with correct dependencies and provides good fallback handling.

---

706-738: LGTM!

Resolved columns alignment is consistent with pending columns styling approach.

---

754-754: LGTM!

Simplified empty state description using inline ternary.