Merge pull request #666 from objectstack-ai/copilot/optimize-opportunity-mobile-view

Author: hotlong

ROADMAP.md

@@ -75,6 +75,13 @@ All 11 plugin views (Grid, Kanban, Form, Dashboard, Calendar, Timeline, List, De
 - ModalForm: skeleton loading state, sticky action buttons, form grid forced to 1-column on mobile (`md:` breakpoint for multi-column).
 - Date/DateTime fields use native HTML5 inputs (`type="date"`, `type="datetime-local"`) for optimal mobile picker UX.
 - Form sections supported via `ModalFormSectionConfig` for visual field grouping.
+- Mobile card view optimizations for Opportunity list view:
+  - Stage badge truncation fix: `shrink-0 max-w-[140px] truncate` classes prevent right-edge overflow.
+  - Percent/probability field classification: auto-detected and rendered with `%` suffix; empty values hidden.
+  - Compact date format on mobile cards: `Jan 15, '24` (short style) saves horizontal space.
+  - Compact currency format: `$150K` notation (via `formatCompactCurrency`) replaces `$150,000.00`.
+  - Left border accent color per stage (green/red/yellow/blue/indigo/purple) for visual differentiation.
+  - Improved card density: combined date+percent row, reduced padding (`p-2.5`), tighter margins.
 
 ### v3.0.0 Spec Integration ✅
 

packages/fields/src/index.tsx

@@ -74,6 +74,23 @@ export function formatCurrency(value: number, currency: string = 'USD'): string
   }
 }
 
+/**
+ * Format currency value in compact form for mobile display.
+ * E.g., $150,000 → $150K, $1,200,000 → $1.2M
+ */
+export function formatCompactCurrency(value: number, currency: string = 'USD'): string {
+  try {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency,
+      notation: 'compact',
+      maximumFractionDigits: 1,
+    }).format(value);
+  } catch {
+    return `${currency} ${value}`;
+  }
+}
+
 /**
  * Format percent value
  * Handles both decimal (0.8 = 80%) and whole number (80 = 80%) inputs.
@@ -87,10 +104,18 @@ export function formatPercent(value: number, precision: number = 0): string {
 /**
  * Format date value
  */
-export function formatDate(value: string | Date, _format?: string): string {
+export function formatDate(value: string | Date, style?: string): string {
   if (!value) return '-';
   const date = typeof value === 'string' ? new Date(value) : value;
   if (isNaN(date.getTime())) return '-';
+
+  if (style === 'short') {
+    // Compact format for mobile: "Jan 15, '24"
+    const month = date.toLocaleDateString('en-US', { month: 'short' });
+    const day = date.getDate();
+    const year = String(date.getFullYear()).slice(-2);
+    return `${month} ${day}, '${year}`;
+  }
 
   // Default format: MMM DD, YYYY
   return date.toLocaleDateString('en-US', {

packages/plugin-grid/src/ObjectGrid.tsx

@@ -24,7 +24,7 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import type { ObjectGridSchema, DataSource, ListColumn, ViewData } from '@object-ui/types';
 import { SchemaRenderer, useDataScope, useNavigationOverlay, useAction } from '@object-ui/react';
-import { getCellRenderer, formatCurrency, formatDate } from '@object-ui/fields';
+import { getCellRenderer, formatCurrency, formatCompactCurrency, formatDate, formatPercent } from '@object-ui/fields';
 import {
   Badge, Button, NavigationOverlay,
   Popover, PopoverContent, PopoverTrigger,
@@ -859,6 +859,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     const amountKeys = ['amount', 'price', 'total', 'revenue', 'cost', 'value', 'budget', 'salary'];
     const stageKeys = ['stage', 'status', 'priority', 'category', 'severity', 'level'];
     const dateKeys = ['date', 'due', 'created', 'updated', 'deadline', 'start', 'end', 'expires'];
+    const percentKeys = ['probability', 'percent', 'rate', 'ratio', 'confidence', 'score'];
 
     // Stage badge color mapping for common pipeline stages
     const stageBadgeColor = (value: string): string => {
@@ -878,11 +879,30 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
       return 'bg-gray-100 text-gray-800 border-gray-300';
     };
 
-    const classify = (key: string): 'amount' | 'stage' | 'date' | 'other' => {
+    // Left border color for card accent based on stage
+    const stageBorderLeft = (value: string): string => {
+      const v = (value || '').toLowerCase();
+      if (v.includes('won') || v.includes('completed') || v.includes('done') || v.includes('active'))
+        return 'border-l-green-500';
+      if (v.includes('lost') || v.includes('cancelled') || v.includes('rejected'))
+        return 'border-l-red-500';
+      if (v.includes('negotiation') || v.includes('review') || v.includes('in progress'))
+        return 'border-l-yellow-500';
+      if (v.includes('proposal') || v.includes('pending'))
+        return 'border-l-blue-500';
+      if (v.includes('qualification') || v.includes('qualified'))
+        return 'border-l-indigo-500';
+      if (v.includes('prospecting') || v.includes('new') || v.includes('open'))
+        return 'border-l-purple-500';
+      return 'border-l-gray-300';
+    };
+
+    const classify = (key: string): 'amount' | 'stage' | 'date' | 'percent' | 'other' => {
       const k = key.toLowerCase();
       if (amountKeys.some(p => k.includes(p))) return 'amount';
       if (stageKeys.some(p => k.includes(p))) return 'stage';
       if (dateKeys.some(p => k.includes(p))) return 'date';
+      if (percentKeys.some(p => k.includes(p))) return 'percent';
       return 'other';
     };
 
@@ -895,63 +915,94 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
             const amountCol = secondaryCols.find((c: any) => classify(c.accessorKey) === 'amount');
             const stageCol = secondaryCols.find((c: any) => classify(c.accessorKey) === 'stage');
             const dateCols = secondaryCols.filter((c: any) => classify(c.accessorKey) === 'date');
+            const percentCols = secondaryCols.filter((c: any) => classify(c.accessorKey) === 'percent');
             const otherCols = secondaryCols.filter(
-              (c: any) => c !== amountCol && c !== stageCol && !dateCols.includes(c)
+              (c: any) => c !== amountCol && c !== stageCol && !dateCols.includes(c) && !percentCols.includes(c)
             );
 
+            // Determine left border accent color from stage value
+            const stageValue = stageCol ? String(row[stageCol.accessorKey] ?? '') : '';
+            const leftBorderClass = stageValue ? stageBorderLeft(stageValue) : '';
+            const cardClassName = [
+              'border rounded-lg p-2.5 bg-card hover:bg-accent/50 cursor-pointer transition-colors touch-manipulation',
+              leftBorderClass ? `border-l-[3px] ${leftBorderClass}` : '',
+            ].filter(Boolean).join(' ');
+
             return (
               <div
                 key={row.id || row._id || idx}
-                className="border rounded-lg p-3 bg-card hover:bg-accent/50 cursor-pointer transition-colors touch-manipulation"
+                className={cardClassName}
                 onClick={() => navigation.handleClick(row)}
               >
                 {/* Title row - Name as bold prominent title */}
                 {titleCol && (
-                  <div className="font-semibold text-sm truncate mb-1.5">
+                  <div className="font-semibold text-sm truncate mb-1">
                     {row[titleCol.accessorKey] ?? '—'}
                   </div>
                 )}
 
                 {/* Amount + Stage row - side by side for compact display */}
                 {(amountCol || stageCol) && (
-                  <div className="flex items-center justify-between gap-2 mb-1.5">
+                  <div className="flex items-center justify-between gap-2 mb-1">
                     {amountCol && (
                       <span className="text-sm tabular-nums font-medium">
                         {typeof row[amountCol.accessorKey] === 'number'
-                          ? formatCurrency(row[amountCol.accessorKey])
+                          ? formatCompactCurrency(row[amountCol.accessorKey])
                           : row[amountCol.accessorKey] ?? '—'}
                       </span>
                     )}
                     {stageCol && row[stageCol.accessorKey] && (
                       <Badge
                         variant="outline"
-                        className={`text-xs ${stageBadgeColor(String(row[stageCol.accessorKey]))}`}
+                        className={`text-xs shrink-0 max-w-[140px] truncate ${stageBadgeColor(String(row[stageCol.accessorKey]))}`}
                       >
                         {row[stageCol.accessorKey]}
                       </Badge>
                     )}
                   </div>
                 )}
 
-                {/* Date fields - formatted short date */}
-                {dateCols.map((col: any) => (
-                  <div key={col.accessorKey} className="flex justify-between items-center py-0.5">
-                    <span className="text-xs text-muted-foreground">{col.header}</span>
-                    <span className="text-xs text-muted-foreground tabular-nums">
-                      {row[col.accessorKey] ? formatDate(row[col.accessorKey]) : '—'}
-                    </span>
+                {/* Date + Percent combined row for density */}
+                {(dateCols.length > 0 || percentCols.length > 0) && (
+                  <div className="flex items-center justify-between py-0.5 text-xs text-muted-foreground">
+                    {dateCols[0] && (
+                      <span className="tabular-nums">
+                        {row[dateCols[0].accessorKey]
+                          ? formatDate(row[dateCols[0].accessorKey], 'short')
+                          : '—'}
+                      </span>
+                    )}
+                    {percentCols[0] && row[percentCols[0].accessorKey] != null && (
+                      <span className="tabular-nums">
+                        {formatPercent(Number(row[percentCols[0].accessorKey]))}
+                      </span>
+                    )}
                   </div>
-                ))}
+                )}
 
-                {/* Other fields - standard key-value rows */}
-                {otherCols.map((col: any) => (
+                {/* Additional date fields beyond the first */}
+                {dateCols.slice(1).map((col: any) => (
                   <div key={col.accessorKey} className="flex justify-between items-center py-0.5">
                     <span className="text-xs text-muted-foreground">{col.header}</span>
-                    <span className="text-xs font-medium truncate ml-2 text-right">
-                      {col.cell ? col.cell(row[col.accessorKey], row) : String(row[col.accessorKey] ?? '—')}
+                    <span className="text-xs text-muted-foreground tabular-nums">
+                      {row[col.accessorKey] ? formatDate(row[col.accessorKey], 'short') : '—'}
                     </span>
                   </div>
                 ))}
+
+                {/* Other fields - hide empty values on mobile */}
+                {otherCols.map((col: any) => {
+                  const val = row[col.accessorKey];
+                  if (val == null || val === '') return null;
+                  return (
+                    <div key={col.accessorKey} className="flex justify-between items-center py-0.5">
+                      <span className="text-xs text-muted-foreground">{col.header}</span>
+                      <span className="text-xs font-medium truncate ml-2 text-right">
+                        {col.cell ? col.cell(val, row) : String(val)}
+                      </span>
+                    </div>
+                  );
+                })}
               </div>
             );
           })}

packages/plugin-grid/src/__tests__/mobile-card-view.test.tsx

@@ -119,13 +119,13 @@ describe('Mobile Card View: Title hierarchy', () => {
 // 2. Currency Formatting
 // =========================================================================
 describe('Mobile Card View: Currency formatting', () => {
-  it('should format Amount as currency ($150,000.00)', async () => {
+  it('should format Amount as compact currency ($150K)', async () => {
     renderGrid(opportunityData, opportunityColumns);
 
     await waitFor(() => {
-      expect(screen.getByText('$150,000.00')).toBeInTheDocument();
-      expect(screen.getByText('$45,000.00')).toBeInTheDocument();
-      expect(screen.getByText('$85,000.00')).toBeInTheDocument();
+      expect(screen.getByText('$150K')).toBeInTheDocument();
+      expect(screen.getByText('$45K')).toBeInTheDocument();
+      expect(screen.getByText('$85K')).toBeInTheDocument();
     });
   });
 });
@@ -185,16 +185,16 @@ describe('Mobile Card View: Stage colored badge', () => {
 // 4. Date Formatting
 // =========================================================================
 describe('Mobile Card View: Date formatting', () => {
-  it('should format close_date as short date (not ISO string)', async () => {
+  it('should format close_date as compact short date (not ISO string)', async () => {
     renderGrid(opportunityData, opportunityColumns);
 
     await waitFor(() => {
       // Should NOT show raw ISO string
       expect(screen.queryByText('2024-01-15T00:00:00.000Z')).not.toBeInTheDocument();
       expect(screen.queryByText('2024-03-30T00:00:00.000Z')).not.toBeInTheDocument();
 
-      // Should show formatted date (en-US short format)
-      expect(screen.getByText('Jan 15, 2024')).toBeInTheDocument();
+      // Should show compact date format (e.g. "Jan 15, '24")
+      expect(screen.getByText("Jan 15, '24")).toBeInTheDocument();
     });
   });
 });
@@ -239,12 +239,117 @@ describe('Mobile Card View: Card structure', () => {
     });
   });
 
-  it('should render Close Date label in the card', async () => {
+  it('should render compact date and percent in combined row', async () => {
     renderGrid(opportunityData, opportunityColumns);
 
     await waitFor(() => {
-      const labels = screen.getAllByText('Close Date');
-      expect(labels.length).toBeGreaterThanOrEqual(1);
+      // Compact date visible
+      const dateEls = screen.getAllByText("Jan 15, '24");
+      expect(dateEls.length).toBeGreaterThanOrEqual(1);
+      // Probability shown as percent
+      expect(screen.getByText('100%')).toBeInTheDocument();
+    });
+  });
+});
+
+// =========================================================================
+// 7. Percent/Probability Display
+// =========================================================================
+describe('Mobile Card View: Percent field display', () => {
+  it('should render probability values with % suffix', async () => {
+    renderGrid(opportunityData, opportunityColumns);
+
+    await waitFor(() => {
+      expect(screen.getByText('100%')).toBeInTheDocument();
+      expect(screen.getByText('80%')).toBeInTheDocument();
+      expect(screen.getByText('60%')).toBeInTheDocument();
+    });
+  });
+
+  it('should hide empty/null percent fields', async () => {
+    const dataWithNull = [
+      { _id: '201', name: 'Test Deal', amount: 50000, stage: 'Proposal', close_date: '2024-06-01', probability: null },
+    ];
+    renderGrid(dataWithNull, opportunityColumns);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Deal')).toBeInTheDocument();
+      // "Probability" label should NOT appear since value is null
+      expect(screen.queryByText('Probability')).not.toBeInTheDocument();
+    });
+  });
+});
+
+// =========================================================================
+// 8. Left Border Stage Color
+// =========================================================================
+describe('Mobile Card View: Left border stage accent', () => {
+  it('should add green left border for Closed Won stage', async () => {
+    const { container } = renderGrid(opportunityData, opportunityColumns);
+
+    await waitFor(() => {
+      const cards = container.querySelectorAll('.border.rounded-lg');
+      expect(cards[0].className).toContain('border-l-green-500');
+    });
+  });
+
+  it('should add yellow left border for Negotiation stage', async () => {
+    const { container } = renderGrid(opportunityData, opportunityColumns);
+
+    await waitFor(() => {
+      const cards = container.querySelectorAll('.border.rounded-lg');
+      expect(cards[1].className).toContain('border-l-yellow-500');
+    });
+  });
+
+  it('should add blue left border for Proposal stage', async () => {
+    const { container } = renderGrid(opportunityData, opportunityColumns);
+
+    await waitFor(() => {
+      const cards = container.querySelectorAll('.border.rounded-lg');
+      expect(cards[2].className).toContain('border-l-blue-500');
+    });
+  });
+});
+
+// =========================================================================
+// 9. Badge Truncation Fix
+// =========================================================================
+describe('Mobile Card View: Badge truncation handling', () => {
+  it('should have shrink-0, max-w, and truncate classes on stage badges', async () => {
+    renderGrid(opportunityData, opportunityColumns);
+
+    await waitFor(() => {
+      const badge = screen.getByText('Closed Won');
+      expect(badge.className).toContain('shrink-0');
+      expect(badge.className).toContain('max-w-[140px]');
+      expect(badge.className).toContain('truncate');
+    });
+  });
+});
+
+// =========================================================================
+// 10. Empty field hiding
+// =========================================================================
+describe('Mobile Card View: Empty field hiding', () => {
+  it('should not render "other" fields with null/empty values', async () => {
+    const columnsWithExtra: ListColumn[] = [
+      { field: 'name', label: 'Name' },
+      { field: 'amount', label: 'Amount' },
+      { field: 'stage', label: 'Stage' },
+      { field: 'description', label: 'Description' },
+    ];
+    const dataWithEmpty = [
+      { _id: '301', name: 'Deal A', amount: 10000, stage: 'Proposal', description: null },
+      { _id: '302', name: 'Deal B', amount: 20000, stage: 'Proposal', description: 'Has value' },
+    ];
+    renderGrid(dataWithEmpty, columnsWithExtra);
+
+    await waitFor(() => {
+      // "Description" label should appear only for Deal B (has value), not Deal A (null)
+      const descLabels = screen.getAllByText('Description');
+      expect(descLabels.length).toBe(1);
+      expect(screen.getByText('Has value')).toBeInTheDocument();
     });
   });
 });