P0080 | Saurabh-Divyanshu | angular upgrade 14-21 and refactor code and syntax and Design

.eslintignore

@@ -0,0 +1 @@
+node_modules

.github/workflows/main.yml

@@ -44,7 +44,7 @@ jobs:
       - name: Install Node.js & NPM
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "20"
 
       # Runs npm i
       - uses: bahmutov/npm-install@v1
@@ -65,3 +65,16 @@ jobs:
         run: npx nx affected --target=build --base='origin/production' --configuration=local
       - if: ${{github.event.pull_request.base.ref == 'development'}}
         run: npx nx affected --target=build --base='origin/development' --configuration=local
+
+      - name: Check widget bundle size
+        if: always()
+        run: |
+          WIDGET_FILE="apps/36-blocks/src/assets/proxy-auth/proxy-auth.js"
+          if [ -f "$WIDGET_FILE" ]; then
+            SIZE=$(stat -c%s "$WIDGET_FILE")
+            echo "proxy-auth.js size: $((SIZE / 1024)) KB"
+            if [ $SIZE -gt 3145728 ]; then
+              echo "::error::proxy-auth.js exceeds 3 MB ($((SIZE / 1024)) KB) — check for bundle bloat!"
+              exit 1
+            fi
+          fi

.gitignore

@@ -50,4 +50,12 @@ Thumbs.db
 .angular
 
 # dotenv environment variables file
-.env
+.env
+
+# Generated environment variable files (created by tools/set-env.js from .env)
+apps/36-blocks/src/environments/env-variables.ts
+apps/36-blocks-widget/src/environments/env-variables.ts
+
+# Nx cache
+.nx/cache
+.nx/workspace-data

.postcssrc.json

@@ -0,0 +1,5 @@
+{
+    "plugins": {
+        "@tailwindcss/postcss": {}
+    }
+}

apps/36-blocks-widget/DESIGN-STRUCTURE.md

@@ -0,0 +1,131 @@
+# Widget Design Structure
+
+## Stack
+- **Tailwind CSS v4** — default color palette only (`gray-*`, `blue-*`, `red-*`, etc.). No custom token mapping.
+- **Angular Material v21** — MDC components for forms, dialogs, tables, tabs only. No custom Material theming applied to templates.
+- **No inline `style=` attributes** in templates.
+- **No custom SCSS** in component files — only `:host` display/layout overrides if strictly necessary.
+
+---
+
+## Color Conventions (Tailwind defaults)
+
+| Role | Light | Dark |
+|---|---|---|
+| Page background | `bg-white` | `dark:bg-gray-900` |
+| Card background | `bg-white` | `dark:bg-gray-800` |
+| Card border | `border-gray-200` | `dark:border-gray-700` |
+| Primary text | `text-gray-900` | `dark:text-gray-100` |
+| Secondary / muted text | `text-gray-500` | `dark:text-gray-400` |
+| Label / caption text | `text-gray-400` | `dark:text-gray-500` |
+| Primary action (buttons) | `bg-blue-600 text-white` | same |
+| Primary action hover | `hover:bg-blue-700` | same |
+| Danger | `text-red-600` / `bg-red-600` | same |
+| Success | `text-green-600` | same |
+| Input border | `border-gray-300` | `dark:border-gray-600` |
+| Input background | `bg-white` | `dark:bg-gray-800` |
+| Divider | `border-gray-100` | `dark:border-gray-700` |
+
+> Dark mode is toggled via `[class.dark]` on the root widget `<div>` using Tailwind's `darkMode: ['class']` config.
+
+---
+
+## Typography Conventions
+
+| Use | Class |
+|---|---|
+| Page / card title | `text-lg font-semibold text-gray-900` |
+| Section heading | `text-sm font-semibold text-gray-700` |
+| Body text | `text-sm text-gray-700` |
+| Muted / caption | `text-xs text-gray-500` |
+| Label above field | `text-xs font-medium text-gray-500 uppercase tracking-wide` |
+| Error message | `text-xs text-red-600` |
+
+---
+
+## Spacing Conventions
+
+| Element | Class |
+|---|---|
+| Card padding | `p-6` |
+| Section gap | `gap-6` |
+| Form field gap | `gap-4` |
+| Button gap in row | `gap-3` |
+| Input height | Angular Material `appearance="outline"` handles this |
+
+---
+
+## Component Map
+
+### 1. `widget-shell` — `widget.component.html`
+The outer wrapper rendered by the Angular Element. Contains:
+- Header bar (logo, title, close button)
+- Router outlet for inner views
+- Overlay/modal container
+
+### 2. `send-otp-center` — `send-otp-center.component.html`
+First screen: enter phone number or email to receive OTP.
+- Input field + send button
+- Social login buttons (optional)
+- "Already have an account" link
+
+### 3. `login` — `login.component.html`
+Email + password form.
+- Input fields (email, password with show/hide toggle)
+- "Forgot password" link
+- Submit button
+- Switch to OTP/register
+
+### 4. `register` — `register.component.html`
+Multi-step registration:
+- Step 1: name, email, phone
+- Step 2: OTP verification (4 boxes)
+- Step 3: password setup
+
+### 5. `subscription-center` — `subscription-center.component.html`
+Plan selection:
+- Plan cards (title, price, features list)
+- CTA button per card
+- Current plan highlight
+
+### 6. `user-profile` — `user-profile.component.html`
+Authenticated user view/edit:
+- Avatar + name + email banner
+- View mode: read-only field rows
+- Edit mode: form fields
+- Organizations list / table
+
+### 7. `user-management` — `user-management.component.html`
+Admin panel:
+- Members tab: search, user rows, edit/remove buttons
+- Roles tab: roles table with permissions
+- Permissions tab
+
+### 8. `organization-details` — `organization-details.component.html`
+Org settings form:
+- Name, timezone, logo upload
+- Save/cancel buttons
+
+---
+
+## Migration Order (tell me which to start)
+1. `send-otp-center`
+2. `login`
+3. `register`
+4. `subscription-center`
+5. `user-profile`
+6. `user-management`
+7. `organization-details`
+8. `widget-shell` (last — depends on inner views)
+
+---
+
+## Files Reference
+
+| File | Purpose |
+|---|---|
+| `src/tailwind-blocks.html` | Paste paid Tailwind UI blocks here |
+| `src/styles.scss` | Global styles — minimal |
+| `src/otp-global.scss` | Widget-specific global overrides |
+| `apps/shared/scss/global.scss` | Tailwind import + shared utilities |
+| `tailwind.config.js` (root) | Tailwind config — content globs + darkMode |

apps/36-blocks-widget/build-elements.js

@@ -0,0 +1,87 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+(async function build() {
+    const distDir = './dist/apps/36-blocks-widget/browser';
+    const outDir = './apps/36-blocks/src/assets/proxy-auth';
+
+    if (!(await fs.pathExists(distDir))) {
+        throw new Error(`Widget dist not found: ${distDir}`);
+    }
+
+    // Dynamic discovery with priority-based ordering — future-proof against Angular output changes
+    const allFiles = await fs.readdir(distDir);
+    const priority = ['polyfills', 'vendor', 'main'];
+    const jsFiles = allFiles
+        .filter((f) => f.endsWith('.js'))
+        .sort((a, b) => {
+            const getPriority = (f) => {
+                const index = priority.findIndex((p) => f.includes(p));
+                return index === -1 ? priority.length : index;
+            };
+            return getPriority(a) - getPriority(b);
+        });
+
+    if (jsFiles.length === 0) {
+        throw new Error(`No JS files found in ${distDir}`);
+    }
+
+    console.info('Concatenating:', jsFiles);
+
+    // Read and concat all JS files in order
+    const contents = [];
+    for (const file of jsFiles) {
+        contents.push(await fs.readFile(path.join(distDir, file), 'utf8'));
+    }
+
+    // Inline styles.css if it exists
+    const stylesPath = path.join(distDir, 'styles.css');
+    if (await fs.pathExists(stylesPath)) {
+        console.info('Inlining styles.css...');
+        const cssContent = await fs.readFile(stylesPath, 'utf8');
+        // Escape backticks and backslashes for JS template literal
+        const escapedCSS = cssContent.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$/g, '\\$');
+
+        // Create a self-executing function that injects styles into document.head
+        const styleInjector = `
+(function() {
+    if (typeof window === 'undefined' || !window.document) return;
+    if (document.getElementById('proxy-auth-widget-styles')) return;
+
+    var style = document.createElement('style');
+    style.id = 'proxy-auth-widget-styles';
+    style.textContent = \`${escapedCSS}\`;
+
+    // Store CSS content globally so widget-portal service can access it
+    if (!window.__proxyAuth) window.__proxyAuth = {};
+    window.__proxyAuth.inlinedStyles = \`${escapedCSS}\`;
+
+    // Inject into document.head
+    (document.head || document.getElementsByTagName('head')[0]).appendChild(style);
+})();
+`;
+        contents.push(styleInjector);
+    } else {
+        console.warn('styles.css not found - skipping CSS inlining');
+    }
+
+    await fs.ensureDir(outDir);
+    const outPath = path.join(outDir, 'proxy-auth.js');
+    await fs.writeFile(outPath, contents.join('\n'));
+
+    // Copy to dist output directory as well
+    const distOutDir = './dist/apps/36-blocks/browser/assets/proxy-auth';
+    await fs.ensureDir(distOutDir);
+    await fs.copyFile(outPath, path.join(distOutDir, 'proxy-auth.js'));
+
+    // Bundle size check — warn if unexpectedly large
+    const stats = await fs.stat(outPath);
+    const sizeMB = (stats.size / 1048576).toFixed(2);
+    console.info(`proxy-auth.js created: ${sizeMB} MB`);
+    console.info(`Copied to: ${distOutDir}/proxy-auth.js`);
+    if (stats.size > 3 * 1048576) {
+        console.warn('WARNING: proxy-auth.js exceeds 3 MB — check for bundle bloat!');
+    }
+
+    console.info('Elements created successfully!');
+})();