Important
⭐ Enjoying this project? Please consider giving it a Star, Forking the repository, and using the Discussions tab for any issues or new feature requests!
A full-featured Asset Management application built as a Power Apps Code App using React, TypeScript, and Vite. It connects directly to SharePoint Online lists for data storage and runs inside the Power Platform runtime.
(Note: GitHub blocks embedded iframe videos for security reasons. Click the button above to view the showcase!)
| Feature | Description |
|---|---|
| Platform | Power Apps Code Apps (preview) |
| Frontend | React 19 + TypeScript 5.8 + Vite 7 |
| Data Layer | SharePoint Online Lists via @microsoft/power-apps/data SDK |
| Icons | Lucide React |
| Styling | Vanilla CSS with 6 color schemes + dark/light theme |
| Auth | Power Platform context (@microsoft/power-apps/app) |
┌─────────────────────────────────────────────────┐
│ Power Platform Runtime │
│ ┌──────────────┐ ┌────────────────────────┐ │
│ │ getContext() │ │ @microsoft/power-apps │ │
│ │ User identity │ │ /data SDK │ │
│ └──────┬───────┘ └───────────┬────────────┘ │
│ │ │ │
│ ┌──────▼───────────────────────▼────────────┐ │
│ │ React Application │ │
│ │ App.tsx → Screens → dataService.ts │ │
│ │ │ │ │
│ │ Generated Services │ │
│ │ (PAC CLI auto-generated) │ │
│ └───────────────────────────────────────────┘ │
│ │ │
└───────────────────────┼─────────────────────────┘
│
┌─────────▼──────────┐
│ SharePoint Online │
│ 6 Lists on site │
│ /sites/AssetMgmt │
└────────────────────┘
AssetManagementSystem-Codeapps/
├── src/
│ ├── App.tsx # Main app — routing, state, all action handlers
│ ├── App.css # Complete design system (themes, schemes, components)
│ ├── main.tsx # React entry point
│ ├── config.ts # App-wide settings (cycle, branding, defaults)
│ ├── types.ts # All TypeScript interfaces & union types
│ ├── dataService.ts # SharePoint CRUD wrapper (normalizers + service calls)
│ ├── utils.ts # Helpers (date formatting, ID generation, etc.)
│ ├── fieldMap.ts # SharePoint field name mapping
│ │
│ ├── components/ # Reusable UI components
│ │ ├── Sidebar.tsx # Navigation sidebar with role-based menu
│ │ ├── Topbar.tsx # Top bar with theme/scheme switcher
│ │ ├── Badge.tsx # Status & category badge renderer
│ │ ├── KpiCard.tsx # Dashboard KPI metric card
│ │ └── ProgressBar.tsx # Animated progress bar
│ │
│ ├── screens/ # All application screens
│ │ ├── WelcomeScreen.tsx # Animated loading/splash screen
│ │ ├── DashboardScreen.tsx # Admin: KPIs, charts, activity feed
│ │ ├── CatalogueScreen.tsx # Admin: Asset inventory CRUD (Add/Edit modal)
│ │ ├── AssignmentsScreen.tsx # Admin: View all asset assignments
│ │ ├── ApproveScreen.tsx # Admin: Approve/Deny asset requests
│ │ ├── AttReviewScreen.tsx # Admin: Review attestation cycle status
│ │ ├── ReportsScreen.tsx # Admin: Export & analytics
│ │ ├── HomeScreen.tsx # Employee: Personal dashboard
│ │ ├── NewRequestScreen.tsx # Employee: Submit new asset request
│ │ ├── MyRequestsScreen.tsx # Employee: Track request history
│ │ ├── MyAssetsScreen.tsx # Employee: View assigned assets
│ │ ├── AttestScreen.tsx # Employee: Attest asset possession
│ │ └── NotificationsScreen.tsx # Both: View notifications
│ │
│ └── generated/ # Auto-generated by PAC CLI (DO NOT EDIT)
│ ├── models/ # TypeScript interfaces per SharePoint list
│ │ ├── AppAdminsModel.ts
│ │ ├── AssetCatalogueModel.ts
│ │ ├── AssetRequestsModel.ts
│ │ ├── AssetAssignmentsModel.ts
│ │ ├── AttestationsModel.ts
│ │ ├── NotificationsModel.ts
│ │ └── UserSettingsModel.ts
│ └── services/ # CRUD service classes per SharePoint list
│ ├── AppAdminsService.ts
│ ├── AssetCatalogueService.ts
│ ├── AssetRequestsService.ts
│ ├── AssetAssignmentsService.ts
│ ├── AttestationsService.ts
│ ├── NotificationsService.ts
│ └── UserSettingsService.ts
│
├── SPO-Schema/ # SharePoint list provisioning
│ ├── Deploy-ITAssetManagement.ps1 # PowerShell script to create all lists
│ ├── AppAdmins.csv # Sample data
│ ├── AssetCatalogue.csv
│ ├── AssetRequests.csv
│ ├── AssetAssignments.csv
│ ├── Attestations.csv
│ ├── Notifications.csv
│ └── UserSettings.csv
│
├── power.config.json # Power Platform app configuration
├── package.json
├── vite.config.ts
├── tsconfig.json
└── index.html
| # | List Name | Purpose |
|---|---|---|
| 1 | AppAdmins | Role-based access: Super Admin, IT Admin, Read-Only Admin |
| 2 | AssetCatalogue | Master inventory of available IT assets (laptops, monitors, etc.) |
| 3 | AssetRequests | Employee asset requests with approval workflow |
| 4 | AssetAssignments | Tracking which asset is assigned to which employee |
| 5 | Attestations | Quarterly confirmation that employees still possess their assets |
| 6 | Notifications | In-app notification system |
| 7 | UserSettings | User-specific application settings like theme and mode |
The PowerShell provisioning script automatically creates these lists with the following columns:
- Title (Text)
- UserEmail (Text, Required)
- DisplayName (Text)
- Role (Choice:
IT Admin,Super Admin,Read-Only Admin, Required) - IsActive (Boolean)
- Department (Text)
- Title (Text)
- Category (Choice:
Laptop,Desktop,Monitor,Keyboard,Mouse,Headset,Docking Station,Mobile Phone,Tablet,Other, Required) - Description (Note)
- StockQty (Number, Required)
- Status (Choice:
Active,Out of Stock,Retired, Required) - ImageURL (URL)
- AvgLifeYears (Number)
- UnitCost (Currency)
- Title (Text)
- RequestedBy (User)
- RequestedByEmail (Text, Required)
- AssetType (Text, Required)
- AssetCategory (Choice, same as above)
- Quantity (Number, Required)
- Justification (Note, Required)
- Urgency (Choice:
Low,Medium,High,Critical, Required) - Status (Choice:
Pending,Approved,Denied,Cancelled, Required) - ApprovedBy (User)
- ApprovedByEmail (Text)
- ITNotes (Note)
- NeededByDate (DateTime)
- ExpectedDelivery (DateTime)
- SubmittedDate (DateTime, Required)
- DelegatedTo (Text)
- Title (Text)
- AssetName (Text, Required)
- AssetCategory (Choice, same as above)
- AssignedTo (User)
- AssignedToEmail (Text, Required)
- SerialNumber (Text)
- AssetTag (Text)
- AssignedDate (DateTime, Required)
- Status (Choice:
Active,Returned,Lost,Damaged, Required) - WarrantyExpiry (DateTime)
- SourceRequestID (Text)
- LastAttestedDate (DateTime)
- AttestedThisCycle (Boolean)
- Notes (Note)
- Title (Text)
- AssignmentID (Text, Required)
- AttestBy (User)
- AttestByEmail (Text, Required)
- AttestDate (DateTime, Required)
- Confirmed (Boolean)
- Condition (Choice:
Good,Minor Wear,Damaged,Missing,Lost, Required) - Comments (Note)
- CycleYear (Text, Required)
- ITReviewed (Boolean)
- ITComment (Note)
- Title (Text)
- Recipient (User)
- RecipientEmail (Text, Required)
- Message (Note, Required)
- NotifType (Choice:
Request,Assignment,Attestation,Announcement, Required) - IsRead (Boolean)
- CreatedDate (DateTime, Required)
- RelatedItemID (Text)
- Title (Text)
- Theme (Text, Required)
- Mode (Text, Required)
- UserEmail (Text, Required)
| Screen | Features |
|---|---|
| Dashboard | KPI cards (total assets, pending requests, active assignments, attestation rate), activity feed |
| Asset Catalogue | Full CRUD — Add/Edit assets via modal, search, filter by category/status |
| Assignments | View all assignments, search by email/asset, filter by status |
| Approve Requests | Split-pane: request list + detail view, Approve/Deny with notes |
| Attestation Review | Cycle progress bar, outstanding list, disputed assets, Mark Reviewed |
| Reports | Export data, analytics by category |
| Screen | Features |
|---|---|
| My Home | Personal stats, quick actions, recent requests |
| New Request | Asset picker carousel, urgency, justification, needed-by date |
| My Requests | Request history with Cancel/Re-submit actions |
| My Assets | Currently assigned assets |
| Attest Assets | One-click attestation with condition dropdown (Good/Minor Wear/Damaged/Missing/Lost) |
| Notifications | Read/unread notifications, Mark All Read |
- 6 Color Schemes: Azure, Teal, Violet, Rose, Amber, Emerald
- 2 Themes: Light / Dark
- Switchable at runtime via the top bar
Every action follows this pattern:
User Action → SharePoint Write → loadData() → UI Re-renders
All state comes from SharePoint. No local-only state manipulation — the UI always reflects the real data.
Follow these steps to deploy this app to your own Microsoft 365 / Power Platform environment.
- Node.js v18+ and npm
- Power Platform CLI (
pac):npm install -g @microsoft/power-platform-cli - SharePoint Admin access to create a site and lists
- Power Apps license (Developer plan works)
- PowerShell 7+ with PnP.PowerShell module (for list provisioning)
The provisioning process uses a PowerShell script to create all lists, their schema (columns, types, choices), and populate them with test data directly from CSV files.
# Install PnP.PowerShell if not already installed
Install-Module -Name PnP.PowerShell -Scope CurrentUser
# Connect to your SharePoint admin site
Connect-PnPOnline -Url "https://YOUR-TENANT.sharepoint.com/sites/AssetManagement1" -Interactive
# Navigate to the SPO-Schema folder
cd SPO-Schema
# (Optional) Update User Emails in Deploy-ITAssetManagement.ps1 before running
# The script automatically maps placeholder emails in the CSV files to real tenant UPNs.
# You can adjust $U_SuperAdmin, $U_ITAdmin, etc. at the top of the PS1 file.
# Run the provisioning script (creates all 7 lists with columns + imports sample data from CSVs)
.\Deploy-ITAssetManagement.ps1 -SiteUrl "https://YOUR-TENANT.sharepoint.com/sites/AssetManagement1"Note: If you name the site something other than
AssetManagement1, note the URL — you'll need it in Step 4. Also, person columns (User) must be manually populated after import, as the script provisions the data but SharePoint requires manual resolution for specific person claims on new lists via the UI if not mapped directly. TheUserEmailfields will be properly mapped!
git clone <this-repo-url>
cd AssetManagementSystem-Codeapps
npm install# Create an auth profile for your tenant
pac auth create --name MyTenant
# Select your Power Platform environment
pac org select --environment "https://YOUR-ENV.crm.dynamics.com"Delete the existing config and generated files (they point to the original tenant):
# Remove old config
rm power.config.json
rm -rf src/generated
# Re-initialize for your environment
pac code initEdit power.config.json and update these fields:
{
"appDisplayName": "Asset Management",
"description": "Asset Management - Manage, Track, Attest",
"localAppUrl": "http://localhost:3000"
}First, find your SharePoint connection ID:
pac connection listCopy the connection ID for SharePoint (e.g., shared-sharepointonl-XXXXXXXX-...).
Then list available tables on your site:
pac code list-tables \
--connection shared-sharepointonl-YOUR-ID \
--dataset "https://YOUR-TENANT.sharepoint.com/sites/AssetManagement1"Add each of the 7 lists as a data source:
# Replace YOUR-CONNECTION-ID and YOUR-LIST-GUID for each list
pac code add-data-source \
--name appadmins \
--connection shared-sharepointonl-YOUR-CONNECTION-ID \
--dataset "https://YOUR-TENANT.sharepoint.com/sites/AssetManagement1" \
--table "YOUR-APPADMINS-LIST-GUID"
pac code add-data-source \
--name assetcatalogue \
--connection shared-sharepointonl-YOUR-CONNECTION-ID \
--dataset "https://YOUR-TENANT.sharepoint.com/sites/AssetManagement1" \
--table "YOUR-ASSETCATALOGUE-LIST-GUID"
pac code add-data-source \
--name assetrequests \
--connection shared-sharepointonl-YOUR-CONNECTION-ID \
--dataset "https://YOUR-TENANT.sharepoint.com/sites/AssetManagement1" \
--table "YOUR-ASSETREQUESTS-LIST-GUID"
pac code add-data-source \
--name assetassignments \
--connection shared-sharepointonl-YOUR-CONNECTION-ID \
--dataset "https://YOUR-TENANT.sharepoint.com/sites/AssetManagement1" \
--table "YOUR-ASSETASSIGNMENTS-LIST-GUID"
pac code add-data-source \
--name attestations \
--connection shared-sharepointonl-YOUR-CONNECTION-ID \
--dataset "https://YOUR-TENANT.sharepoint.com/sites/AssetManagement1" \
--table "YOUR-ATTESTATIONS-LIST-GUID"
pac code add-data-source \
--name notifications \
--connection shared-sharepointonl-YOUR-CONNECTION-ID \
--dataset "https://YOUR-TENANT.sharepoint.com/sites/AssetManagement1" \
--table "YOUR-NOTIFICATIONS-LIST-GUID"
pac code add-data-source \
--name usersettings \
--connection shared-sharepointonl-YOUR-CONNECTION-ID \
--dataset "https://YOUR-TENANT.sharepoint.com/sites/AssetManagement1" \
--table "YOUR-USERSETTINGS-LIST-GUID"This auto-generates the src/generated/ folder with models and services.
Add your own email to the AppAdmins SharePoint list with Role = "Super Admin" and IsActive = Yes so the app recognizes you as an admin.
Run both commands in separate terminals:
# Terminal 1 — Start Vite dev server
npm run dev
# Terminal 2 — Start Power Platform SDK proxy
npx power-apps runOpen the URL printed by npx power-apps run:
https://apps.powerapps.com/play/e/YOUR-ENV-ID/app/local?_localAppUrl=http://localhost:3000&_localConnectionUrl=http://localhost:8080
⚠️ Do NOT openlocalhost:3000directly — the SharePoint SDK only works through the Power Apps player URL.
# Build production bundle
npm run build
# Push to Power Platform
pac code pushYour app is now live in Power Apps! Share it with users via the Power Apps portal.
Edit src/config.ts to customize:
export const appConfig = {
defaultScheme: "azure", // azure | teal | violet | rose | amber | emerald
defaultTheme: "light", // light | dark
attestationCycle: "2026-Q2", // Current attestation cycle label
appName: "Assets", // Sidebar branding
appTagline: "Asset Management Platform",
};| File | What it does |
|---|---|
src/dataService.ts |
All SharePoint CRUD — every read/write goes through here |
src/App.tsx |
Central hub — state management, all action handlers, screen routing |
src/types.ts |
All TypeScript types — change field types here if your schema differs |
src/generated/ |
Auto-generated by pac code add-data-source — never edit manually |
power.config.json |
Power Platform config — environment ID, connection refs, list GUIDs |
If your lists use different choice values, update src/types.ts:
// Asset categories — must match your AssetCatalogue list "Category" column choices
export type AssetCategory = "Laptop" | "Desktop" | "Monitor" | ... ;
// Request urgency — must match your AssetRequests list "Urgency" column choices
export type Urgency = "Low" | "Medium" | "High" | "Critical";
// Assignment status — must match your AssetAssignments list "Status" column choices
export type AssignmentStatus = "Active" | "Returned" | "Lost" | "Damaged";| Problem | Solution |
|---|---|
| Stuck on "Loading your workspace..." | You opened localhost:3000 directly. Use the Power Apps player URL from npx power-apps run |
pac connection list — "No active environment" |
Run pac org select --environment YOUR-ENV-URL |
pac code add-data-source fails |
Ensure the connection ID and dataset URL are correct. Run pac connection list to verify |
| User shows as blank / no admin access | Add your email to the AppAdmins list with IsActive = Yes |
| Choice fields show wrong values | Ensure src/types.ts union types match your SharePoint column choices exactly |
Build fails with TS errors in generated/ |
Re-run pac code add-data-source for the affected list to regenerate models |
- Power Apps Code Apps Documentation
- Connect Code Apps to Data
- PAC CLI Reference
- @microsoft/power-apps SDK
MIT — Built by Vishnu