+
@for (workflow of workflows(); track workflow.id) {
-
{{ workflow.name }}
-
{{ workflow.description || 'Standard approval workflow' }}
+
+ {{ getLicenseIcon(workflow.name) }}
+
+
+
{{ getCleanLicenseName(workflow.name) }}
+
{{ workflow.description || getLicenseDescription(workflow.name) }}
+
+ groups
+ Requires {{ workflow.definition?.stages?.length || 'multiple' }} department approvals
+
+
+ @if (basicForm.controls.workflowId.value === workflow.id) {
+
+ check_circle
+
+ }
}
diff --git a/frontend/src/app/features/requests/request-create/request-create.component.ts b/frontend/src/app/features/requests/request-create/request-create.component.ts
index 7b43cf9..2cc4579 100644
--- a/frontend/src/app/features/requests/request-create/request-create.component.ts
+++ b/frontend/src/app/features/requests/request-create/request-create.component.ts
@@ -54,16 +54,16 @@ import { createSubmitDebounce } from '../../../shared/utils/form-utils';
}
.form-header {
- background: linear-gradient(135deg, var(--dbim-blue-dark) 0%, var(--dbim-blue-mid) 100%);
+ background: #FAFAFA;
padding: 32px;
- color: white;
text-align: center;
+ border-bottom: 1px solid #E0E0E0;
.header-icon {
width: 64px;
height: 64px;
margin: 0 auto 16px;
- background: rgba(255, 255, 255, 0.2);
+ background: #00897B;
border-radius: 16px;
display: flex;
align-items: center;
@@ -73,6 +73,7 @@ import { createSubmitDebounce } from '../../../shared/utils/form-utils';
font-size: 32px;
width: 32px;
height: 32px;
+ color: white;
}
}
@@ -80,12 +81,13 @@ import { createSubmitDebounce } from '../../../shared/utils/form-utils';
margin: 0 0 8px;
font-size: 24px;
font-weight: 600;
+ color: #212121;
}
p {
margin: 0;
- opacity: 0.9;
font-size: 14px;
+ color: #757575;
}
}
@@ -151,41 +153,104 @@ import { createSubmitDebounce } from '../../../shared/utils/form-utils';
gap: 20px;
}
- /* Workflow selection cards */
- .workflow-selection {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
- gap: 16px;
+ /* License Type selection cards */
+ .license-type-selection {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
margin-top: 16px;
}
- .workflow-option {
+ .license-type-option {
+ display: flex;
+ align-items: flex-start;
+ gap: 16px;
padding: 20px;
- border: 2px solid var(--dbim-linen);
+ border: 2px solid #E0E0E0;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
+ background: white;
&:hover {
- border-color: var(--dbim-blue-light);
- background: var(--dbim-blue-subtle);
+ border-color: #00897B;
+ background: #FAFAFA;
}
&.selected {
- border-color: var(--dbim-blue-mid);
- background: var(--dbim-blue-subtle);
- box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
+ border-color: #00897B;
+ background: #E0F2F1;
}
- .workflow-name {
+ .license-type-icon {
+ width: 48px;
+ height: 48px;
+ border-radius: 12px;
+ background: #FAFAFA;
+ border: 1px solid #E0E0E0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+
+ mat-icon {
+ font-size: 24px;
+ width: 24px;
+ height: 24px;
+ color: #757575;
+ }
+ }
+
+ &.selected .license-type-icon {
+ background: #00897B;
+ border-color: #00897B;
+
+ mat-icon {
+ color: white;
+ }
+ }
+
+ .license-type-content {
+ flex: 1;
+ }
+
+ .license-type-name {
+ font-size: 16px;
font-weight: 600;
- color: var(--dbim-brown);
+ color: #212121;
margin-bottom: 4px;
}
- .workflow-desc {
+ .license-type-desc {
font-size: 13px;
- color: var(--dbim-grey-2);
+ color: #757575;
+ line-height: 1.4;
+ margin-bottom: 8px;
+ }
+
+ .license-type-depts {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 12px;
+ color: #9E9E9E;
+
+ mat-icon {
+ font-size: 14px;
+ width: 14px;
+ height: 14px;
+ }
+ }
+
+ .license-type-check {
+ flex-shrink: 0;
+
+ mat-icon {
+ font-size: 24px;
+ width: 24px;
+ height: 24px;
+ color: #00897B;
+ }
}
}
@@ -434,6 +499,44 @@ export class RequestCreateComponent implements OnInit {
}
}
+ /** Clean workflow name for display - remove internal terms like "Approval Workflow" */
+ getCleanLicenseName(name: string): string {
+ return name
+ .replace(/\s*Approval\s*Workflow\s*/gi, '')
+ .replace(/\s*Workflow\s*/gi, '')
+ .trim();
+ }
+
+ getLicenseIcon(name: string): string {
+ const lower = name.toLowerCase();
+ if (lower.includes('resort') || lower.includes('hotel')) return 'hotel';
+ if (lower.includes('restaurant') || lower.includes('food')) return 'restaurant';
+ if (lower.includes('tour') || lower.includes('travel')) return 'tour';
+ if (lower.includes('health') || lower.includes('medical')) return 'local_hospital';
+ if (lower.includes('trade') || lower.includes('shop')) return 'storefront';
+ if (lower.includes('transport')) return 'local_shipping';
+ if (lower.includes('environment')) return 'eco';
+ if (lower.includes('forest')) return 'forest';
+ return 'description';
+ }
+
+ getLicenseDescription(name: string): string {
+ const lower = name.toLowerCase();
+ if (lower.includes('resort') || lower.includes('hotel')) {
+ return 'For hotels, resorts, guesthouses, and similar accommodation businesses in Goa.';
+ }
+ if (lower.includes('restaurant') || lower.includes('food')) {
+ return 'For restaurants, cafes, food stalls, and catering services.';
+ }
+ if (lower.includes('tour') || lower.includes('travel')) {
+ return 'For tour operators, travel agencies, and tourism-related services.';
+ }
+ if (lower.includes('trade') || lower.includes('shop')) {
+ return 'For retail shops, trading establishments, and commercial businesses.';
+ }
+ return 'Standard license application with multi-department approval.';
+ }
+
onSubmit(): void {
// Debounce to prevent double-click submissions
this.submitDebounce(() => this.performSubmit());