U1Sync UI
Perfect — I see exactly what you’re aiming for. Below is a **clean, corrected, generator-ready prompt** that **describes the page in the screenshot**, while also making a few **UX improvements** that stay true to your intent (WinMerge diff, scan-first, not table-heavy). You can paste this directly into an AI UI generator. --- ## AI Prompt — Permission Comparison Results Page (Based on Provided Screenshot) **Design a web application page for comparing CRM and SharePoint permissions. The UI should resemble a diff viewer (WinMerge-style), not a traditional data table. Alignment and visual comparison are more important than density.** --- ### Top Control Bar At the top of the page, place a **horizontal control bar** containing: * **CRM Environment URL input** (text field, labeled) * **SharePoint Site URL input** (text field, labeled) * **Primary button**: “Start Comparison” (blue, prominent) * **Secondary button**: “Refresh / Update” (neutral gray) * On the far right: * Small text label: **“Last comparison: N/A”** This area should feel like a setup/control panel, visually separated from results. --- ### Search & Filtering Below the control bar: * A **full-width search input** with placeholder: * “Search by principal, table, folder, role…” * The search filters results live across all columns. --- ### Result Type Tabs Under the search bar, display **three tabs**: 1. **Missing in SharePoint (0)** 2. **Extra in SharePoint (0)** 3. **Privilege Mismatch (0)** Tab behavior: * Only one tab visible at a time * Count updates dynamically * Switching tabs does not reload the page --- ### Comparison Layout (Core Area) Inside the active tab, show a **three-column diff layout**: ``` | Principal | CRM | SharePoint | ``` #### Column Styling * Each column: * Has a **light gray background** * Is visually separated by a small gap or divider * Width proportions: * Principal: ~20% * CRM: ~40% * SharePoint: ~40% * Column headers are sticky and labeled clearly. --- ### Rows (Comparison Entries) Each row represents **one principal compared across CRM and SharePoint**. Row rules: * Rows are horizontally aligned across all three columns * Entire row is clickable * Hover state highlights the whole row * Row height is consistent to maintain alignment --- ### Column Content Details #### Principal Column Contains: * **Principal name** (bold, primary) * **Principal email** (muted, secondary) No icons, no extra metadata — keep it clean and readable. --- #### CRM Column Contains: * **Record name** (e.g., “Account 1”) * **CRM privileges**, shown as comma-separated text: * Read, Write, Create, Delete * Empty state (styled clearly, muted or red depending on tab): * “No access in CRM” --- #### SharePoint Column Contains: * **Folder name** (may include ID suffix) * **Permission level**, shown as a badge or pill: * Full Access * Owner * Write * Read * Empty state: * “No access in SharePoint” Permission badges should be visually distinct but not aggressive. --- ### Visual Feedback (Improvement) Apply **subtle row indicators** based on comparison type: * Missing in SharePoint → light red accent * Extra in SharePoint → light blue accent * Privilege mismatch → light yellow accent Use a left border or faint background tint — avoid full-row strong colors. --- ### Interaction: Row Click * Clicking a row opens a **new browser tab** * The main comparison page remains unchanged --- ### Detail View Page (New Tab) **Purpose:** show full diagnostic details for a single comparison row. Layout: * Vertical, section-based * Read-only * Technical, clean, copy-friendly #### Sections & Fields **General** * Row ID * Comparison type * Comparison timestamp **Principal** * Name * Email * Principal ID * Principal type (User / Group / Team) **CRM** * Table display name * Table logical name * Record name * Record ID * URL to CRM record **SharePoint** * Site name * Folder name * Folder ID * URL to SharePoint folder * Permission inheritance status * Exact permission mappings IDs and URLs should be easily copyable. --- ### Design Principles * Scan-first, comparison-first * Strict vertical alignment between CRM and SharePoint * Empty states are explicit and visible * Heavy data only appears in the detail view * This is a **diff viewer**, not a CRUD grid --- ### Optional Improvements (Allowed) * Sticky column headers * Keyboard navigation between rows * Subtle icons for CRM vs SharePoint * Tooltips for permission meanings --- If you want next, I can: * Rewrite this **specifically for v0.dev** * Convert it into **React + Tailwind layout instructions** * Align it **1:1 with your DTOs** * Tighten it into a **short “one-paragraph” prompt** Just say which one 👍