Dataverse Sample with Fluent Teams inspired look and feel

samples/DataverseFluentTeamsInspired/.cursor/rules/powersdkcli.mdc

@@ -0,0 +1,6 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+Always read the .github/copilot-instructions.md for the context.

samples/DataverseFluentTeamsInspired/.github/copilot-instructions.md

@@ -0,0 +1,226 @@
+# Power Platform Code Apps Development Guide
+
+## 🚨 CRITICAL DEVELOPMENT RESTRICTIONS
+
+### **DO NOT RUN SPECIFIC DEVELOPMENT COMMANDS**
+- **NEVER run `npm run dev`** - This command is prohibited
+- **NEVER run `pac code run`** - This command is prohibited
+- If debugging is needed, create debug pages and ask the user to paste console output
+- The user will handle running these commands manually when needed
+
+**Note**: Other terminal commands (file operations, git, cleanup scripts, etc.) are allowed and encouraged when needed.
+
+## Architecture Overview
+
+This is a **Power Platform Code Apps** project using React + TypeScript + Vite that connects to Dataverse and Office 365 connectors. The architecture follows a strict code-generation pattern where data models and services are auto-generated from Power Platform schemas.
+
+### Key Components
+- **React Frontend**: Standard Vite + React app with TypeScript
+- **Power SDK Integration**: `@pa-client/power-code-sdk` handles all Power Platform communication
+- **Auto-generated Layer**: Models and Services in `src/Models/` and `src/Services/` (DO NOT EDIT directly)
+- **Configuration**: `power.config.json` defines environments, connections, and data sources
+
+## Critical Development Patterns
+
+### 🚨 Auto-generated Files - NEVER EDIT
+**ABSOLUTELY NEVER edit files that are marked as generated or auto-generated**
+
+Files with this header are auto-generated and will be overwritten:
+```typescript
+/*!
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ * This file is autogenerated. Do not edit this file directly.
+ */
+```
+
+**These files are COMPLETELY OFF-LIMITS for editing:**
+- All files in `src/Models/` and `src/Services/`
+- `.power/appschemas/dataSourcesInfo.ts`
+- Any file with "autogenerated" or "generated" annotations in comments
+- Files that contain copyright notices indicating they are auto-generated
+
+**If changes are needed to these files, they must be regenerated using Power Platform CLI commands, not edited directly.**
+
+## UI Design System
+
+### Fluent UI v9 Design Guidelines
+This app MUST use Fluent UI v9 components and follow Microsoft Fluent Design principles:
+
+**Reference Documentation:**
+- **Fluent Design System**: https://fluent2.microsoft.design/
+- **React Fluent UI v9**: https://react.fluentui.dev/
+- **Microsoft Fluent 2 Web Figma**: https://www.figma.com/community/file/836828295772957889
+
+**Design Requirements:**
+1. **Microsoft Teams Inspiration**: The app should look and feel like Microsoft Teams
+2. **Layout Structure**:
+   - Left navigation panel (similar to Teams sidebar)
+   - Title bar at the top (similar to Teams header)
+   - Main content area
+3. **Theme Support**: Must support both light and dark Fluent themes
+4. **Component Library**: Use only Fluent UI v9 components (@fluentui/react-components)
+5. **Design Tokens**: Use Fluent design tokens for colors, spacing, typography
+6. **Accessibility**: Follow Fluent accessibility guidelines
+7. **Custom Components**: When a Fluent UI v9 component is not available, create custom components that look and behave like Fluent UI v9 components using Fluent design principles, tokens, and styling patterns
+
+**Example Component Usage:**
+```typescript
+import {
+  FluentProvider,
+  webLightTheme,
+  webDarkTheme,
+  Button,
+  Avatar,
+  Text,
+  Card
+} from '@fluentui/react-components';
+
+// Always wrap app in FluentProvider with theme
+<FluentProvider theme={isDarkMode ? webDarkTheme : webLightTheme}>
+  <App />
+</FluentProvider>
+```
+
+### Power Provider Pattern
+The `PowerProvider` component MUST wrap your entire app to initialize the Power SDK:
+```tsx
+// main.tsx
+<PowerProvider>
+  <App />
+</PowerProvider>
+```
+
+### Service Usage Pattern
+Always use the generated service classes for data operations:
+```typescript
+import { contactsService } from '../Services/contactsService';
+
+// Standard CRUD operations
+const contact = await contactsService.get(id, { select: ['firstname', 'lastname'] });
+const contacts = await contactsService.getAll({ filter: "firstname eq 'John'" });
+await contactsService.create({ firstname: 'Jane', lastname: 'Doe' });
+await contactsService.update(id, { firstname: 'Updated' });
+await contactsService.delete(id);
+```
+
+### Generated Connector Service Pattern
+All services in the `Services/` folder are generated by `pac code add-data-source` and follow consistent patterns:
+
+**Key Pattern Rules:**
+1. **Static Methods**: Most connector services use static methods (e.g., `Office365UsersService.MyProfile_V2()`)
+2. **Response Object**: Services return `{ success: boolean, data?: T, error?: string }`
+3. **Always Check `success`**: Use `result.success` (NOT `result.isSuccess`)
+4. **Error Handling**: Access errors via `result.error`
+
+```typescript
+import { SomeConnectorService } from '../Services/SomeConnectorService';
+
+// Generic pattern for any generated connector service
+const result = await SomeConnectorService.SomeMethod(parameters);
+if (result.success && result.data) {
+  console.log('Success:', result.data);
+} else {
+  console.error('Failed:', result.error);
+}
+```
+
+**Example with Office 365 Users Service:**
+```typescript
+import { Office365UsersService } from '../Services/Office365UsersService';
+
+// Get current user profile
+const profileResult = await Office365UsersService.MyProfile_V2('displayName,mail,givenName,surname,id');
+if (profileResult.success && profileResult.data) {
+  console.log('User data:', profileResult.data);
+} else {
+  console.error('Profile request failed:', profileResult.error);
+}
+```
+
+## Development Workflow
+
+### Initial Setup & Data Source Management
+```bash
+# Initialize app (only needed once)
+pac code init -n "App Name" -env <environmentId>
+
+# Add Dataverse entities
+pac code add-data-source -a "shared_dataverse" -c <connectionId> -t "contacts" -d "default.cds"
+
+# Add connectors (Office 365, SQL, etc.)
+pac code add-data-source -a "shared_office365users" -c <connectionId>
+```
+
+### Development Loop
+```bash
+# Start dev server (runs both pac code run and vite)
+npm run dev
+
+# Build and deploy
+npm run build
+pac code push
+```
+
+### Key Configuration Files
+- `power.config.json`: Environment, connections, and data source mappings
+- `vite.config.ts`: Dev server on port 3000, base path "./" for Power Platform hosting
+- `package.json`: Special script `"dev": "start pac code run && vite"` runs Power Platform CLI alongside Vite
+
+## Data Layer Patterns
+
+### Query Options
+Use `IGetOptions` and `IGetAllOptions` from `CommonModels.ts`:
+```typescript
+// Select specific fields
+const contact = await contactsService.get(id, { select: ['firstname', 'lastname'] });
+
+// Filter and pagination
+const contacts = await contactsService.getAll({
+  filter: "statecode eq 0",
+  orderBy: ['createdon desc'],
+  top: 50,
+  select: ['contactid', 'fullname']
+});
+```
+
+### Error Handling
+All service methods return `IOperationResult<T>` - check for success:
+```typescript
+const result = await contactsService.get(id);
+if (result.isSuccess) {
+  console.log(result.data);
+} else {
+  console.error(result.error);
+}
+```
+
+## Integration Points
+
+### Dataverse Connection
+- Configured in `databaseReferences.default.cds` in `power.config.json`
+- Entity metadata auto-generates TypeScript interfaces
+- Primary keys and relationships preserved in generated models
+
+### Office 365 Connector
+- Configured in `connectionReferences` in `power.config.json`
+- API operations available in `.power/appschemas/dataSourcesInfo.ts`
+- Use generated service methods for connector operations
+
+## Debugging & Troubleshooting
+
+### Common Issues
+1. **Power SDK not initialized**: Ensure `PowerProvider` wraps your app
+2. **Data source not found**: Check `power.config.json` data source names match service usage
+3. **Build failures**: Auto-generated files may be corrupted - regenerate with `pac code add-data-source`
+
+### Useful Commands
+```bash
+# Check current Power Platform context
+pac auth who
+
+# List available environments
+pac env list
+
+# Validate configuration
+pac code push --dry-run
+```

samples/DataverseFluentTeamsInspired/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?