@procore/saved-views 5.1.0-alpha → 5.1.0-alpha.2

package/README.md

@@ -1,90 +1,708 @@
-# @procore/saved-views
+# @procore/saved-views - Consumer Integration Guide
 
-> [!WARNING]
-> It's an initial version of this package (0.0.0) intended to demo the Saved Views capabilities. The design and API integration aren't finished yet, so please don't use it on production.
-> The final design and API integration are going to be delivered with next version (0.0.1) soon.
+Enable users to save, share, and manage custom table configurations with URL synchronization and cross-user sharing capabilities.
 
-Saved Views Component for integration with @procore/data-table and @procore/smart-grid-core
+## Table of Contents
 
-**✨ Latest Updates:**
+- [Quick Start](#quick-start)
+- [Core Concepts](#core-concepts)
+- [What Gets Stored in a View?](#what-gets-stored-in-a-view)
+- [DataTable Integration](#datatable-integration)
+- [SmartGrid Integration](#smartgrid-integration)
+- [Backend Changes Required](#backend-changes-required)
+- [Complete End-to-End Example](#complete-end-to-end-example)
+- [Additional Resources](#additional-resources)
 
-- Upgraded to @tanstack/react-query v5.83.0 (latest) for better performance and modern API and made it a direct dependecy to not force our consumers
+## Quick Start
 
-## Installation
+### Installation
 
-### In a web application, micro frontend or hydra client
-
-```shell script
+```bash
 yarn add @procore/saved-views
 ```
 
-**NOTE:** Ensure that the following peer dependencies for `@procore/saved-views` are also installed:
+**Peer Dependencies Required:**
 
 - `@procore/core-react`: `>=11.4.0 <13`
 - `@procore/toast-alert`: `>=5.1.0`
 - `react`: `>=16.8`
 - `styled-components`: `^5.3.0`
+- `@tanstack/react-query`: `^5.0.0`
+
+### What is SavedViews?
+
+SavedViews allows users to save, manage, and share custom table/grid configurations:
+
+- **Save configurations**: Column arrangements, widths, sorting, and filtering
+- **Multiple views**: Create different views with different view levels
+- **Share with team**: Project & Company level views visible to all users in a project/company.
+- **Personal views**: Private views only visible to you
+- **Shareable URLs**: Bookmark and share specific views
+
+## Core Concepts
+
+### View Levels
+
+| Level        | Visibility        |
+| ------------ | ----------------- |
+| **Personal** | Only you          |
+| **Project**  | All project users |
+| **Default**  | All company users |
+
+### Key Terms
+
+- **Domain**: Maps to the permission domain for your tool (e.g., "rfi", "submittal_log")
+- **Table Name**: Unique table identifier (e.g., "list", "calendar")
+- **Sticky Views Key**: LocalStorage key to remember last selected view
+- **Table API/Grid API**: Interface to control table programmatically
+- **Ref**: Enables bidirectional communication (DataTable only)
+
+## What Gets Stored in a View?
+
+When a user saves a view, the following configuration is persisted:
+
+### Column Configuration & Filtering
+
+- **Column Widths**: Custom width for each column
+- **Column Order**: The sequence of columns from left to right
+- **Column Visibility**: Which columns are shown or hidden
+- **Column Pinning**: Columns pinned to left or right side
+- **Filter State**: All active filters on columns
+
+### Metadata
+
+- **View Name**: User-provided name (e.g., "My Open RFIs")
+- **Description**: Optional description of the view
+- **View Level**: Personal, Project, or Company visibility
+- **Creator**: User who created the view
+
+## DataTable Integration
+
+DataTable integration uses a ref-based pattern for tight coupling between the table and saved views components. This allows saved views to update the table configuration and vice versa.
+
+![DataTable Ref Communication Flow](./assets/refFlow.png)
+
+### Props Reference
+
+#### Required Props
+
+| Prop                  | Type                                | Description                                      |
+| --------------------- | ----------------------------------- | ------------------------------------------------ |
+| `ref`                 | `IDataTableSavedViewsRef`           | Ref for parent-to-child communication            |
+| `tableApi`            | `TableApi`                          | DataTable API instance for controlling the table |
+| `tableName`           | `string`                            | Unique identifier for the table (e.g., "list")   |
+| `domain`              | `string`                            | Permission domain (e.g., "rfi", "submittal_log") |
+| `stickyViewsKey`      | `string`                            | LocalStorage key to persist selected view        |
+| `enableSavedViews`    | `boolean`                           | Feature flag to enable/disable saved views       |
+| `userId`              | `number`                            | Current user ID                                  |
+| `projectId`           | `number`                            | Current project ID                               |
+| `companyId`           | `number`                            | Current company ID                               |
+| `columnDefinitions`   | `ColumnDef[]`                       | Array of column definitions                      |
+| `onTableConfigChange` | `(config: DataTableConfig) => void` | Callback when table config changes               |
+
+#### Optional Props
 
-### In a npm package or library
+| Prop                | Type              | Default Behavior if Not Passed                                    |
+| ------------------- | ----------------- | ----------------------------------------------------------------- |
+| `defaultViewName`   | `string`          | Displays as "Default View"                                        |
+| `defaultViewConfig` | `DataTableConfig` | Built automatically from passed `columnDefinitions` from our side |
 
+### Step-by-Step Integration
+
+#### Step 1: Set Up Dependencies and Imports
+
+```tsx
+import React, { useRef, useState, useEffect } from 'react';
+import { ServerSideDataTable, TableApi } from '@procore/data-table';
+import {
+  DataTableSavedViews,
+  useSavedViewsPanel,
+  IDataTableSavedViewsRef,
+} from '@procore/saved-views';
+import { useSearchParams } from 'react-router-dom';
 ```
-yarn add -P @procore/saved-views^1.0.0 # adds the package as a peer dependency
-yarn add -D @procore/saved-views # adds as a dev dependency, for tests, storybook, etc.
+
+#### Step 2: Create Required State and Refs
+
+```tsx
+const MyDataTableView = () => {
+  // Essential state for table API communication
+  const [tableApi, setTableApi] = useState<TableApi | null>(null);
+  const [isTableReady, setIsTableReady] = useState(false);
+
+  // Critical: Ref for bidirectional communication
+  const savedViewsWrapperRef = useRef<IDataTableSavedViewsRef>(null);
+
+  // Panel visibility control
+  const { SavedViewsButton, isOpen: isPanelOpen } = useSavedViewsPanel('your_domain', 'your_table');
 ```
 
-**NOTE:** Ensure that the following peer dependencies for `@procore/saved-views` are also installed _as peer dependencies_ and as dev dependencies (for tests, storybook, etc.):
+**Key Points**:
 
-- `@procore/core-react`: `^12`
-- `react`: `>=16.8`
-- `styled-components`: `^5.3.0`
+- `savedViewsWrapperRef` is essential for the table to notify saved views of configuration changes
+- `useSavedViewsPanel` manages the visibility state of the saved views panel
+- `tableApi` state tracks when the table is ready for interaction
+
+#### Step 3: Configure Table Configuration Handlers
+
+```tsx
+// Configuration persistence handler
+const handleTableConfigChange = useCallback((config: DataTableConfig) => {
+  // Save to localStorage, update URL, etc.
+  persistTableConfiguration(config);
+
+  // Critical: Notify saved views of configuration changes
+  savedViewsWrapperRef.current?.setTableConfig(config);
+}, []);
+
+// Prepare default configuration for saved views [This is an OPTIONAL step if you want to send your own tool's default view]
+const defaultViewConfig = useMemo(
+  () => ({
+    columnState: columnDefinitions.map((col) => ({
+      colId: col.field,
+      width: col.width,
+      hide: col.hide,
+      pinned: col.pinned,
+    })),
+    filterState: {},
+    sortState: [],
+  }),
+  [columnDefinitions]
+);
+```
+
+**Key Points**:
+
+- The `handleTableConfigChange` callback must call `savedViewsWrapperRef.current?.setTableConfig(config)`
+- This keeps saved views in sync with table state changes
+- `defaultViewConfig` represents the baseline table configuration
+
+#### Step 4: Implement Table Component with Saved Views Integration
+
+```tsx
+  return (
+    <div className="table-with-saved-views">
+      <ServerSideDataTable
+        columnDefinitions={columnDefinitions}
+        initialTableConfig={defaultConfig}
+        onTableConfigChange={handleTableConfigChange} // Critical integration point
+        onServerSideDataRequest={handleDataRequest}
+        onTableReady={(api) => {
+          setTableApi(api); // Store API reference
+          setIsTableReady(true);
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'stretch' }}>
+
+          {/* Left Panel: Saved Views */}
+          <div style={{ flex: '0 1 0px', paddingRight: '12px' }}>
+            {isPanelOpen && (
+              <DataTableSavedViews
+                ref={savedViewsWrapperRef} // Critical: Enable ref communication
+                tableApi={tableApi}
+                onTableConfigChange={handleTableConfigChange}
+
+                // Required identifiers
+                tableName="list"
+                domain="your_domain"
+                stickyViewsKey="currentSavedView"
+
+                // Configuration
+                enableSavedViews={true}
+                defaultViewConfig={defaultViewConfig}
+                defaultViewName="All Items"
+                columnDefinitions={columnDefinitions}
+
+                // User context
+                userId={userId}
+                projectId={projectId}
+                companyId={companyId}
+              />
+            )}
+            <ServerSideDataTable.FiltersPanel />
+          </div>
 
-## Usage
+          {/* Main Content Area */}
+          <div style={{ flex: '1', display: 'flex', flexDirection: 'column' }}>
+            {/* Top Controls */}
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
+              <div style={{ display: 'flex', gap: '8px' }}>
+                <SavedViewsButton /> {/* Toggle saved views panel */}
+                <ServerSideDataTable.Search />
+                <ServerSideDataTable.FiltersPanelButton />
+              </div>
+              <ServerSideDataTable.ConfigPanelButton />
+            </div>
 
-```js
-import { useSavedViews } from '@procore/saved-views';
+            <ServerSideDataTable.QuickFilters />
+            <ServerSideDataTable.BulkActions />
+
+            {/* Main Table */}
+            <ServerSideDataTable.Table
+              pagination
+              paginationPageSize={pageSize}
+              loading={!isTableReady}
+              // ... other table props
+            />
+          </div>
+
+          {/* Right Panel: Context */}
+          <div style={{ flex: '0 1 0px', paddingLeft: '12px' }}>
+            <ServerSideDataTable.ContextPanel />
+          </div>
+        </div>
+      </ServerSideDataTable>
+    </div>
+  );
+};
 ```
 
-```jsx
-const { SavedViews } = useSavedViews(
-  onSelect,
-  onEdit,
-  onDelete,
-  onCreate,
-  onUpdate,
-  AllItemsOptionFlag,
-  savedViewsGroups
-:
-savedGroups,
-  isAdmin
-:
-true,
-  currentFilters,
-  currentColumnState,
-  onTableConfigChange,
-  tableConfig,
-  tableApi,
-  currentRowHeight,
-  stickyViewsKey
-:
-'currentSavedView'
-)
-;
-
-<SavedViews />
+**Key Integration Points**:
+
+1. **Ref Connection**: `ref={savedViewsWrapperRef}` enables bidirectional communication
+2. **API Sharing**: `tableApi={tableApi}` gives saved views control over table state
+3. **Config Sync**: `onTableConfigChange={handleTableConfigChange}` keeps everything in sync
+4. **Layout**: Saved views typically go in a left sidebar with fixed width
+
+---
+
+## SmartGrid Integration
+
+SmartGrid integration uses direct `gridApi` access and the built-in tool panel system for a simpler integration. SavedViews appears as a dedicated tool panel alongside columns and filters. **No ref needed!**
+
+![DataTable Ref Communication Flow](./assets/SGFlow.png)
+
+### Props Reference
+
+#### Required Props
+
+| Prop                 | Type         | Description                                            |
+| -------------------- | ------------ | ------------------------------------------------------ | --------------------------------------------------- |
+| `gridApi`            | `GridApi`    | Grid API instance (auto-passed by tool panel system)   |
+| `tableName`          | `string`     | Unique identifier for the table (e.g., "list")         |
+| `domain`             | `string`     | Permission domain (e.g., "submittal_log")              |
+| `stickyViewsKey`     | `string`     | LocalStorage key to persist selected view              |
+| `enableSavedViews`   | `boolean`    | Feature flag to enable/disable saved views             |
+| `userId`             | `number`     | Current user ID                                        |
+| `projectId`          | `number`     | Current project ID                                     |
+| `companyId`          | `number`     | Current company ID                                     |
+| `defaultViewFilters` | `FilterModel | null`                                                  | Default filters applied when selecting default view |
+| `defaultRowHeight`   | `number`     | Default row height applied when selecting default view |
+
+#### Optional Props
+
+| Prop              | Type     | Default Behavior if Not Passed |
+| ----------------- | -------- | ------------------------------ |
+| `defaultViewName` | `string` | Displays as "Default View"     |
+
+**Note:** Unlike DataTable, SmartGrid doesn't need `defaultViewConfig`, `columnDefinitions`, or `onTableConfigChange` - the grid handles configuration automatically through the gridApi!
+
+### Step-by-Step Integration
+
+#### Step 1: Create the SavedViews Tool Panel Renderer
+
+First, create a component that wraps `SmartGridSavedViews`. The tool panel system will automatically pass the `api` prop.
+
+```tsx
+import React from 'react';
+import { SmartGridSavedViews } from '@procore/saved-views';
+import { rowHeights } from '@procore/smart-grid-core';
+import { useProcoreEnvironment } from '@procore/environment';
+
+const SavedViewsToolPanelRenderer = ({ api }) => {
+  const { companyId, projectId, userId } = useProcoreEnvironment();
+
+  return (
+    <SmartGridSavedViews
+      gridApi={api} // Passed automatically by tool panel system
+      tableName="list" // Your table identifier
+      domain="your_domain" // Your permission domain
+      stickyViewsKey="currentSavedView" // LocalStorage key
+      defaultViewName="All Items" // Default view display name
+      enableSavedViews={true} // Feature flag
+      userId={userId}
+      projectId={projectId}
+      companyId={companyId}
+      defaultViewFilters={{}} // Default filters (optional)
+      defaultRowHeight={rowHeights.md} // Grid-specific config
+    />
+  );
+};
 ```
 
-## Development
+**Key Points:**
+
+- `api` prop is **automatically provided** by SmartGrid's tool panel system
+- No ref creation needed
+- No manual state synchronization required
+
+#### Step 2: Create the SavedViews Configuration Object
+
+Create a configuration object (or hook) that defines your saved views setup:
+
+```tsx
+import { SavedViews } from '@procore/smart-grid-core';
+import { YourDataType } from '@/types';
+
+// Option A: Simple configuration object
+const savedViewsConfig: SavedViews<YourDataType> = {
+  renderer: SavedViewsToolPanelRenderer,
+  enabled: true,
+};
+
+// Option B: Custom hook (recommended for multiple views)
+const useSavedViews = (view: 'list' | 'calendar') => {
+  const savedViews = {
+    list: {
+      renderer: SavedViewsToolPanelRenderer,
+      enabled: true,
+    },
+    // Add more views as needed
+  };
+
+  return savedViews[view];
+};
+```
+
+#### Step 3: Add SavedViews to SmartGridServer
+
+Pass the configuration to `SmartGridServer` and add `'savedViews'` to the tool panels:
+
+```tsx
+import { SmartGridServer } from '@procore/smart-grid-core';
+
+const MySmartGridView = () => {
+  const [gridApi, setGridApi] = useState(null);
+  const savedViews = useSavedViews('list'); // Or use savedViewsConfig directly
+
+  return (
+    <SmartGridServer
+      // Column and data configuration
+      columnDefs={columnDefinitions}
+      handleServerSideDatasource={handleDataSource}
+      // SavedViews integration - just two props!
+      savedViews={savedViews}
+      sideBar={{
+        toolPanels: [
+          'savedViews', // Add saved views to tool panel list
+          'filters', // Built-in filters panel
+          'columns', // Built-in columns panel
+        ],
+      }}
+      // Grid lifecycle
+      onGridReady={({ api }) => {
+        setGridApi(api);
+      }}
+
+      // Other grid props...
+    />
+  );
+};
+```
+
+**That's it!** SmartGrid handles everything else automatically.
+
+---
+
+### Key Differences: DataTable vs SmartGrid Integration
+
+| Aspect                  | DataTable                     | SmartGrid                  |
+| ----------------------- | ----------------------------- | -------------------------- |
+| **Integration Pattern** | Ref-based with external panel | Tool panel integrated      |
+| **API Access**          | `tableApi` prop + ref methods | Direct `gridApi` prop      |
+| **State Management**    | Manual sync required          | Automatic grid integration |
+
+![DataTable Ref Communication Flow](./assets/SG_and_DB_comparison.png)
+
+---
+
+## Backend Changes Required
+
+### Overview
+
+SavedViews functionality is provided by the `saved_views` component in the Ruby monolith. No database migrations are required - the infrastructure already exists. You only need to configure permissions for your domain.
+
+### API Endpoints
+
+All API endpoints are already available under the `saved_views` component:
+
+**Base Path:** `/rest/v2.0/companies/:company_id/projects/:project_id/saved_views`
+
+| Method     | Endpoint                   | Description                        | Query Params                       |
+| ---------- | -------------------------- | ---------------------------------- | ---------------------------------- |
+| **GET**    | `/saved_views`             | List all saved views for a table   | `permissions_domain`, `table_name` |
+| **POST**   | `/saved_views`             | Create a new saved view            | -                                  |
+| **PUT**    | `/saved_views/:id`         | Update an existing saved view      | -                                  |
+| **DELETE** | `/saved_views/:id`         | Delete a saved view                | -                                  |
+| **GET**    | `/saved_views/permissions` | Get user's saved views permissions | `permissions_domain`               |
+
+**Example Request:**
+
+```javascript
+GET /rest/v2.0/companies/123/projects/456/saved_views?permissions_domain=rfi&table_name=list
+```
+
+**Example Response:**
+
+```json
+{
+  "data": [
+    {
+      "id": 789,
+      "name": "My Open RFIs",
+      "description": "Shows all open RFIs assigned to me",
+      "table_config": {
+        /* column state, filters, etc. */
+      },
+      "table_name": "list",
+      "domain": "rfi",
+      "view_level": "personal",
+      "created_by_id": 101,
+      "project_id": 456,
+      "company_id": 123,
+      "created_at": "2024-01-15T10:30:00Z",
+      "updated_at": "2024-01-15T10:30:00Z"
+    }
+  ]
+}
+```
+
+### Database Schema
+
+The `saved_views` table has the following structure:
+
+| Column          | Type     | Description                         |
+| --------------- | -------- | ----------------------------------- |
+| `id`            | bigint   | Primary key                         |
+| `name`          | text     | View name (max 150 chars)           |
+| `description`   | text     | Optional description                |
+| `table_config`  | jsonb    | Serialized table configuration      |
+| `table_name`    | text     | Table identifier (e.g., "list")     |
+| `domain`        | text     | Permissions domain (e.g., "rfi")    |
+| `view_level`    | enum     | `personal`, `project`, or `company` |
+| `created_by_id` | bigint   | User who created the view           |
+| `project_id`    | bigint   | Associated project                  |
+| `company_id`    | bigint   | Associated company                  |
+| `created_at`    | datetime | Creation timestamp                  |
+| `updated_at`    | datetime | Last update timestamp               |
+
+**Unique Constraints:**
+
+- Personal views: Unique per `(name, created_by_id, project_id, domain, table_name)`
+- Project views: Unique per `(name, project_id, domain, table_name)`
+- Company views: Unique per `(name, company_id, domain, table_name)`
+
+### Permission Setup
+
+SavedViews uses the **Dynamic Saved Views Policy** system, which automatically generates policies based on your domain's UAL (User Access Level) definitions.
+
+#### Required Permissions
+
+You need to define **two permissions** in your domain's permission file:
+
+1. **`manage_personal_saved_views`** - Allows users to create/manage their own views
+2. **`manage_project_saved_views`** - Allows users to create/manage project-wide views
+
+---
+
+### Method 1: Standard Domain Permissions
+
+Add these two lines to your domain's permissions file:
+
+**File:** `app/lib/permissions/domain/your_domain.rb`
+
+#### Example 1: RFIs Domain
+
+```ruby
+# frozen_string_literal: true
+# domain: RFIs
+
+module Permissions
+  class Domain
+    Rfis = define :rfi do
+      permissions do
+        # ... existing permissions ...
+        can_view                    ual: :read
+        can_update                  ual: :update
+        can_delete                  ual: :admin
+
+        # SavedViews permissions (add these two lines)
+        manage_personal_saved_views ual: :read
+        manage_project_saved_views  ual: :admin, granular: :feature_flagged
+
+        # ... other permissions ...
+      end
+
+      legacy_domain :project, :rfi
+    end
+  end
+end
+```
+
+**Path:** `app/lib/permissions/domain/rfis.rb` ([View File](https://github.com/procore/procore/blob/master/app/lib/permissions/domain/rfis.rb))
+
+#### Example 2: Submittals Domain
+
+```ruby
+# frozen_string_literal: true
+# domain: Submittals
+
+module Permissions
+  class Domain
+    SubmittalLogs = define :submittal_log do
+      permissions do
+        # ... existing permissions ...
+        can_view                    ual: :read
+        can_update                  ual: :update
+        can_delete                  ual: :admin
+
+        # SavedViews permissions (add these two lines)
+        manage_personal_saved_views ual: :read
+        manage_project_saved_views  ual: :admin, granular: :feature_flagged
+
+        # ... other permissions ...
+      end
+
+      legacy_domain :project, :submittal_log
+    end
+  end
+end
+```
+
+**Path:** `app/lib/permissions/domain/submittal_logs.rb` ([View File](https://github.com/procore/procore/blob/master/app/lib/permissions/domain/submittal_logs.rb))
+
+**How it works:**
+
+- The `DynamicSavedViewsPolicy` automatically looks up your domain (e.g., `"rfi"`, `"submittal_log"`)
+- It creates a policy class on-the-fly that checks these two permissions
+- The frontend `@procore/saved-views` package automatically checks these permissions
+
+---
+
+### Method 2: Custom Policy Class
+
+**Best for:** Use this if you need some special permission logic
+
+Create a custom policy class that inherits from `ApplicationPolicy` or an aggregate policy.
+
+```ruby
+# frozen_string_literal: true
+# domain: Generic Tools
+
+class CustomSavedViewsPolicy < CommunicationTypesAggregatePolicy
+  def self.resource_class
+    nil
+  end
+
+  def index?
+    can_manage_personal_saved_views?
+  end
+
+  .......
+  .......
+  .......
+  .......
+  .......
+
+  private
+
+  def can_manage_project_saved_views?
+    has_admin?
+  end
+
+  .......
+  .......
+  .......
+  .......
+  .......
+
+end
+```
+
+**Register in DynamicSavedViewsPolicy ([Here](https://github.com/procore/procore/blob/master/components/saved_views/app/policies/dynamic_saved_views_policy.rb)):**
+
+The `DynamicSavedViewsPolicy` checks for special cases:
+
+```ruby
+def for_permissions_domain(permissions_domain)
+  return CustomSavedViewsPolicy if permissions_domain == 'your-tool-domian'
+
+  # ... falls back to dynamic generation
+end
+```
+
+#### Example: Correspondence Types (Generic Tools)
+
+**Path:** `components/generic_tools/app/policies/correspondence_types_saved_views_policy.rb` ([View File](https://github.com/procore/procore/blob/master/components/generic_tools/app/policies/correspondence_types_saved_views_policy.rb))
+
+---
+
+### Understanding DynamicSavedViewsPolicy
+
+The `DynamicSavedViewsPolicy` is a singleton that dynamically generates policy classes for any domain.
+
+**File:** `components/saved_views/app/policies/dynamic_saved_views_policy.rb`
+
+**How it works:**
+
+1. **Controller requests policy** for a domain (e.g., `"rfi"`):
+
+   ```ruby
+   def policy_class
+     DynamicSavedViewsPolicy.instance.for_permissions_domain(permissions_domain)
+   end
+   ```
+
+2. **Policy looks up domain** in `Permissions.domains`:
+
+   ```ruby
+   return nil if ::Permissions.domains.find(permissions_domain).nil?
+   ```
+
+3. **Generates policy class on-the-fly**:
+
+   ```ruby
+   @policies[permissions_domain] ||= Class.new(ApplicationPolicy) do
+     self.permissions_domain = permissions_domain
+
+     def index?
+       check(:manage_personal_saved_views)
+     end
+
+     def create?
+       can_edit?
+     end
+
+     # ... etc
+   end
+   ```
+
+4. **Checks UAL permissions** defined in your domain:
+   - `manage_personal_saved_views` - Required for all view operations
+   - `manage_project_saved_views` - Required for project-level views
+
+---
+
+### Questions?
+
+- **Slack:** #saved-views-updates
+- **Backend Component:** `components/saved_views/`
+- **Permissions Guide:** [Permissions Documentation](https://github.com/procore/procore/wiki/Permissions)
+
+---
+
+## Complete End-to-End Example
+
+Refer to:
+
+- **RFIs implementation**: `rfis-ui-service/src/pages/ModernizedList/components/Table/`
+- **Submittals implementation**: `submittals-ui-service/src/components/List/`
+
+---
 
-This project uses [`yarn`][yarn], and supports the following commands:
+## Additional Resources
 
-- `build`: builds and bundles the project.
-- `format`: runs [`prettier`][prettier] on the project.
-- `format:check`: validates that the source code conforms to the [`prettier`][prettier] configuration.
-- `lint`: lints the source code.
-- `storybook`: starts up the storybook development server on port 6006.
-- `build-storybook`: generates a static version of the storybook.
-- `test`: runs the unit test suite.
-- `test:dev`: run the unit test suite in watch mode.
+- **Support:** #saved-views-updates Slack channel
+- **Saved Views Deep Dive:** [Confluence](https://procoretech.atlassian.net/wiki/spaces/PMQS/pages/4503371946/Saved+Views+Deep+Dive)
 
-[prettier]: https://prettier.io/
-[yarn]: https://classic.yarnpkg.com/
+---