feat(samples/action-center-app): migrate UI to Apollo Vertex (apollo-wind)

Replace hand-rolled Tailwind primitives with @uipath/apollo-wind components
across App, TaskList, and TaskDetail. No more custom Modal/Button/Select/
Tabs/Badge — everything renders through UiPath's design system.

Build setup
- Upgrade Tailwind v3 → v4 (drop tailwind.config.js; apollo-wind ships its
  own @tailwindcss/postcss preset)
- postcss.config.js reuses @uipath/apollo-wind/postcss
- src/index.css → single @import '@uipath/apollo-wind/styles.css' (apollo's
  tokens already include light + dark variants)

Components
- Dialog, Card, Input, Label, Select, Tabs, Table, Badge, Alert, Spinner,
  Sonner, EmptyState from @uipath/apollo-wind
- Remove src/components/Modal.tsx (replaced by Dialog)
- Badge variants (success/info/warning/error) replace TONE classnames
- next-themes provider + Sun/Moon ThemeToggle (apollo-wind has no provider)

UX
- ListChecks / ShieldCheck / Plus / RefreshCw / Inbox / User / Users icons
- Tab count badges on the active tab
- Animated refresh spinner during refetch
- Skeleton table while loading (industry-standard data-grid pattern)
- Folder filter is a proper filter chip: leading Folder icon, clear (X)
  button, Escape to clear, no number-input spinners (folder IDs are
  identifiers, not quantities)
- Fix stale data on tab switch (clear tasks on dep change in useTasks)
- uipath.json.example: baseUrl https://api.uipath.com

Author: amrit-agarwal-1

samples/action-center-app/README.md

@@ -2,19 +2,20 @@
 
 A minimal React + TypeScript [UiPath Coded Web App](https://docs.uipath.com/)
 demonstrating the `@uipath/uipath-typescript` SDK's **Tasks (Action Center)**
-service. It's an operational dashboard for triaging human tasks in a folder:
-list and filter them, view detail, assign / reassign / unassign, complete
-(approve / reject), and create external tasks.
+service. It's an operational dashboard for triaging human tasks: list and
+filter them across your folders, view detail, assign / reassign / unassign,
+complete (approve / reject), and create external tasks.
 
-Built with plain Tailwind (no component library) to keep the file count small.
+Built on UiPath's [Apollo Vertex](https://apollo-vertex.vercel.app/) design
+system via [`@uipath/apollo-wind`](https://www.npmjs.com/package/@uipath/apollo-wind).
 
 ## What it demonstrates
 
 Every method on [`TaskServiceModel`](https://uipath.github.io/uipath-typescript/api/interfaces/TaskServiceModel/):
 
 | SDK call | Where |
 |----------|-------|
-| `Tasks.getAll({ folderId, pageSize, jumpToPage, filter, orderby })` | `hooks/useTasks.ts` (`useTasks`) — paginated, filterable list |
+| `Tasks.getAll({ folderId, pageSize, jumpToPage, filter, orderby, asTaskAdmin })` | `hooks/useTasks.ts` (`useTasks`) — paginated, filterable list |
 | `Tasks.getById(id, {}, folderId)` | `hooks/useTasks.ts` (`useTask`) — full detail |
 | `Tasks.getUsers(folderId)` | `hooks/useTasks.ts` (`useTaskUsers`) — assignee picker (cursor-looped) |
 | `Tasks.create({ title, priority }, folderId)` | `components/TaskList.tsx` (create form) |
@@ -24,8 +25,8 @@ Every method on [`TaskServiceModel`](https://uipath.github.io/uipath-typescript/
 By default the app lists tasks across **all folders** you can view/edit. The
 header's **Folder ID** field is an optional filter — leave it blank for all
 folders, or set it to scope the list (persisted to `localStorage`). Per-task
-actions (detail, assign, complete) use each task's own folder; creating a task
-asks for a target folder.
+actions (detail, assign, complete) use each task's own folder, propagated from
+the row; creating a task asks for a target folder.
 
 ## Files
 
@@ -35,14 +36,15 @@ src/
   taskUtils.ts        — badges, filter builder, complete-options builder, formatting
   hooks/useAuth.tsx   — OAuth/PKCE via the SDK (Coded Apps template)
   hooks/useTasks.ts   — useTasks + useTask + useTaskUsers
-  components/Modal.tsx, TaskList.tsx, TaskDetail.tsx
+  components/Theme.tsx, TaskList.tsx, TaskDetail.tsx
 ```
 
 ## Prerequisites
 
 - Node.js 20+
 - A UiPath OAuth External Application (client ID) with the **`OR.Tasks`** scope
-- An Orchestrator folder ID that contains Action Center tasks
+- An Orchestrator folder ID that contains Action Center tasks (required only
+  when creating tasks)
 
 ## Setup
 

samples/action-center-app/index.html

@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/src/assets/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Action Center Manager</title>
   </head>