feat(app): wire dashboard administration flows

ts_web/elements/account/views/baseview.ts

@@ -97,14 +97,12 @@ export class BaseView extends DeesElement {
         }
       }
 
-      .card {
-        background: #18181b;
-        border: 1px solid #27272a;
-        border-radius: 12px;
+      idp-card.card::part(card) {
+        padding: 0;
         overflow: hidden;
       }
 
-      .card.full-width {
+      idp-card.card.full-width {
         grid-column: 1 / -1;
       }
 
@@ -124,7 +122,7 @@ export class BaseView extends DeesElement {
         gap: 8px;
       }
 
-      .card-title dees-icon {
+      .card-title idp-icon {
         opacity: 0.7;
       }
 
@@ -209,7 +207,7 @@ export class BaseView extends DeesElement {
         flex-shrink: 0;
       }
 
-      .org-icon dees-icon {
+      .org-icon idp-icon {
         opacity: 0.7;
       }
 
@@ -290,7 +288,7 @@ export class BaseView extends DeesElement {
         flex-shrink: 0;
       }
 
-      .session-icon dees-icon {
+      .session-icon idp-icon {
         opacity: 0.7;
       }
 
@@ -298,7 +296,7 @@ export class BaseView extends DeesElement {
         background: rgba(34, 197, 94, 0.1);
       }
 
-      .session-icon.current dees-icon {
+      .session-icon.current idp-icon {
         color: #22c55e;
         opacity: 1;
       }
@@ -382,8 +380,7 @@ export class BaseView extends DeesElement {
         flex-shrink: 0;
       }
 
-      .activity-icon dees-icon {
-        font-size: 14px;
+      .activity-icon idp-icon {
         opacity: 0.7;
       }
 
@@ -391,7 +388,7 @@ export class BaseView extends DeesElement {
         background: rgba(34, 197, 94, 0.1);
       }
 
-      .activity-icon.login dees-icon {
+      .activity-icon.login idp-icon {
         color: #22c55e;
         opacity: 1;
       }
@@ -400,7 +397,7 @@ export class BaseView extends DeesElement {
         background: rgba(239, 68, 68, 0.1);
       }
 
-      .activity-icon.logout dees-icon {
+      .activity-icon.logout idp-icon {
         color: #ef4444;
         opacity: 1;
       }
@@ -427,8 +424,7 @@ export class BaseView extends DeesElement {
         color: #71717a;
       }
 
-      .empty-state dees-icon {
-        font-size: 32px;
+      .empty-state idp-icon {
         opacity: 0.5;
         margin-bottom: 12px;
       }
@@ -467,7 +463,7 @@ export class BaseView extends DeesElement {
         background: #27272a;
       }
 
-      .create-org-btn dees-icon {
+      .create-org-btn idp-icon {
         font-size: 14px;
       }
     `,
@@ -494,10 +490,10 @@ export class BaseView extends DeesElement {
 
         <div class="dashboard-grid">
           <!-- Profile Card -->
-          <div class="card">
+          <idp-card class="card">
             <div class="card-header">
               <span class="card-title">
-                <dees-icon .icon=${'lucide:user'}></dees-icon>
+                <idp-icon name="user" size="16"></idp-icon>
                 Profile
               </span>
             </div>
@@ -510,50 +506,49 @@ export class BaseView extends DeesElement {
                 </div>
               </div>
             </div>
-          </div>
+          </idp-card>
 
           <!-- Organizations Card -->
-          <div class="card">
+          <idp-card class="card">
             <div class="card-header">
               <span class="card-title">
-                <dees-icon .icon=${'lucide:building2'}></dees-icon>
+                <idp-icon name="building2" size="16"></idp-icon>
                 Organizations
               </span>
-              <button class="create-org-btn" @click=${this.handleCreateOrg}>
-                <dees-icon .icon=${'lucide:plus'}></dees-icon>
+              <idp-button variant="outline" size="sm" icon="plus" @click=${this.handleCreateOrg}>
                 New
-              </button>
+              </idp-button>
             </div>
             <div class="card-body no-padding">
               ${this.renderOrganizations()}
             </div>
-          </div>
+          </idp-card>
 
           <!-- Sessions Card -->
-          <div class="card">
+          <idp-card class="card">
             <div class="card-header">
               <span class="card-title">
-                <dees-icon .icon=${'lucide:monitor-smartphone'}></dees-icon>
+                <idp-icon name="monitor-smartphone" size="16"></idp-icon>
                 Active Sessions
               </span>
             </div>
             <div class="card-body no-padding">
               ${this.renderSessions()}
             </div>
-          </div>
+          </idp-card>
 
           <!-- Activity Card -->
-          <div class="card">
+          <idp-card class="card">
             <div class="card-header">
               <span class="card-title">
-                <dees-icon .icon=${'lucide:activity'}></dees-icon>
+                <idp-icon name="activity" size="16"></idp-icon>
                 Recent Activity
               </span>
             </div>
             <div class="card-body no-padding">
               ${this.renderActivity()}
             </div>
-          </div>
+          </idp-card>
         </div>
       </div>
     `;
@@ -563,7 +558,7 @@ export class BaseView extends DeesElement {
     if (this.organizations.length === 0) {
       return html`
         <div class="empty-state">
-          <dees-icon .icon=${'lucide:building2'}></dees-icon>
+          <idp-icon name="building2" size="32"></idp-icon>
           <p>You're not a member of any organizations yet.</p>
         </div>
       `;
@@ -580,13 +575,13 @@ export class BaseView extends DeesElement {
           return html`
             <div class="org-item" @click=${() => this.handleSelectOrg(org)}>
               <div class="org-icon">
-                <dees-icon .icon=${'lucide:building2'}></dees-icon>
+                <idp-icon name="building2" size="16"></idp-icon>
               </div>
               <div class="org-info">
                 <div class="org-name">${org.data.name}</div>
                 <div class="org-role">${org.data.slug}</div>
               </div>
-              <span class="role-badge ${roleClass}">${roleDisplay}</span>
+              <idp-badge variant=${roleClass === 'owner' ? 'accent' : roleClass === 'admin' ? 'warn' : 'outline'}>${roleDisplay}</idp-badge>
             </div>
           `;
         })}
@@ -598,7 +593,7 @@ export class BaseView extends DeesElement {
     if (this.sessions.length === 0) {
       return html`
         <div class="empty-state">
-          <dees-icon .icon=${'lucide:monitor'}></dees-icon>
+          <idp-icon name="monitor" size="32"></idp-icon>
           <p>No active sessions found.</p>
         </div>
       `;
@@ -609,12 +604,12 @@ export class BaseView extends DeesElement {
         ${this.sessions.map((session) => html`
           <div class="session-item" data-session-id=${session.id}>
             <div class="session-icon ${session.isCurrent ? 'current' : ''}">
-              <dees-icon .icon=${this.getDeviceIcon(session.os)}></dees-icon>
+              <idp-icon name=${this.getDeviceIcon(session.os)} size="16"></idp-icon>
             </div>
             <div class="session-info">
               <div class="session-device">
                 ${session.deviceName || 'Unknown Device'}
-                ${session.isCurrent ? html`<span class="current-badge">Current</span>` : ''}
+                ${session.isCurrent ? html`<idp-badge variant="ok">Current</idp-badge>` : ''}
               </div>
               <div class="session-details">
                 ${session.browser} · ${session.os} · Last active ${this.formatTimeAgo(session.lastActive)}
@@ -622,9 +617,9 @@ export class BaseView extends DeesElement {
             </div>
             ${!session.isCurrent ? html`
               <div class="session-actions">
-                <button class="revoke-btn" @click=${() => this.handleRevokeSession(session.id)}>
+                <idp-button variant="destructive" size="sm" @click=${() => this.handleRevokeSession(session.id)}>
                   Revoke
-                </button>
+                </idp-button>
               </div>
             ` : ''}
           </div>
@@ -637,7 +632,7 @@ export class BaseView extends DeesElement {
     if (this.activities.length === 0) {
       return html`
         <div class="empty-state">
-          <dees-icon .icon=${'lucide:activity'}></dees-icon>
+          <idp-icon name="activity" size="32"></idp-icon>
           <p>No recent activity.</p>
         </div>
       `;
@@ -648,7 +643,7 @@ export class BaseView extends DeesElement {
         ${this.activities.slice(0, 5).map((activity) => html`
           <div class="activity-item">
             <div class="activity-icon ${this.getActivityIconClass(activity.data.action)}">
-              <dees-icon .icon=${this.getActivityIcon(activity.data.action)}></dees-icon>
+              <idp-icon name=${this.getActivityIcon(activity.data.action)} size="14"></idp-icon>
             </div>
             <div class="activity-info">
               <div class="activity-description">${activity.data.metadata.description}</div>