Organization Onboarding Workflow
This commit is contained in:
Gagan7900
@@ -0,0 +1,121 @@
|
||||
<div class="box custom-card">
|
||||
<div class="box-header justify-between">
|
||||
<div class="box-title">
|
||||
Branding
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-body">
|
||||
<form [formGroup]="brandingForm" autocomplete="off">
|
||||
|
||||
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
||||
|
||||
<!-- Organization Logo -->
|
||||
<div class="col-span-12 md:col-span-3">
|
||||
<div
|
||||
class="border border-dashed border-gray-400 rounded-md bg-gray-50/30 flex flex-col items-center justify-center py-8 px-4 text-center text-sm text-gray-500 cursor-pointer hover:bg-gray-100 transition-colors h-full">
|
||||
<span class="flex items-center gap-1 italic mb-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
||||
stroke="currentColor" class="w-4 h-4 text-gray-400">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75 12 3m0 0 3.75 3.75M12 3v18" />
|
||||
</svg>
|
||||
Organization Logo
|
||||
</span>
|
||||
<span class="text-xs text-gray-400 italic">(click or drag file here)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- White Logo -->
|
||||
<div class="col-span-12 md:col-span-3">
|
||||
<div
|
||||
class="border border-dashed border-gray-400 rounded-md bg-gray-50/30 flex flex-col items-center justify-center py-8 px-4 text-center text-sm text-gray-500 cursor-pointer hover:bg-gray-100 transition-colors h-full">
|
||||
<span class="flex items-center gap-1 italic mb-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
||||
stroke="currentColor" class="w-4 h-4 text-gray-400">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75 12 3m0 0 3.75 3.75M12 3v18" />
|
||||
</svg>
|
||||
White Logo (dark bg)
|
||||
</span>
|
||||
<span class="text-xs text-gray-400 italic">(click or drag file here)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Favicon -->
|
||||
<div class="col-span-12 md:col-span-3">
|
||||
<div
|
||||
class="border border-dashed border-gray-400 rounded-md bg-gray-50/30 flex flex-col items-center justify-center py-8 px-4 text-center text-sm text-gray-500 cursor-pointer hover:bg-gray-100 transition-colors h-full">
|
||||
<span class="flex items-center gap-1 italic mb-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
||||
stroke="currentColor" class="w-4 h-4 text-gray-400">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75 12 3m0 0 3.75 3.75M12 3v18" />
|
||||
</svg>
|
||||
Favicon / Icon
|
||||
</span>
|
||||
<span class="text-xs text-gray-400 italic">(click or drag file here)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Digital Seal -->
|
||||
<div class="col-span-12 md:col-span-3">
|
||||
<div
|
||||
class="border border-dashed border-gray-400 rounded-md bg-gray-50/30 flex flex-col items-center justify-center py-8 px-4 text-center text-sm text-gray-500 cursor-pointer hover:bg-gray-100 transition-colors h-full">
|
||||
<span class="flex items-center gap-1 italic mb-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
||||
stroke="currentColor" class="w-4 h-4 text-gray-400">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75 12 3m0 0 3.75 3.75M12 3v18" />
|
||||
</svg>
|
||||
Digital Seal & Signature
|
||||
</span>
|
||||
<span class="text-xs text-gray-400 italic">(click or drag file here)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Brand Color -->
|
||||
<div class="col-span-12 md:col-span-3">
|
||||
<app-form-input formControlName="brandColor" inputId="brand-color" label="Brand Color"
|
||||
placeholder="e.g. #1F3A93" variant="floating">
|
||||
</app-form-input>
|
||||
</div>
|
||||
|
||||
<!-- Theme Dropdown -->
|
||||
<div class="col-span-12 md:col-span-3">
|
||||
<app-form-select formControlName="theme" [id]="'branding-theme'" variant="floating" label="Theme"
|
||||
[options]="themeOptions" [clearable]="false" [searchable]="false" [selectClass]="'rounded-sm'"
|
||||
bindLabel="label" bindValue="value"></app-form-select>
|
||||
</div>
|
||||
|
||||
<!-- Help Text -->
|
||||
<div class="col-span-12 text-xs text-gray-500 italic mt-4">
|
||||
All settings have working defaults — nothing here blocks onboarding. Security tab holds MFA / password policy
|
||||
/ session / IP restriction with platform defaults.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="box-footer">
|
||||
<!-- Mobile View (< 640px) -->
|
||||
<div class="flex flex-col gap-2.5 sm:hidden">
|
||||
<div class="w-full">
|
||||
<app-button action="save" label="Save Changes" [showIcon]="true" [fullWidth]="true"
|
||||
className="onboarding-nav-btn w-full"></app-button>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<app-button action="cancel" label="Discard" [showIcon]="true" [fullWidth]="true"
|
||||
className="w-full"></app-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Desktop View (>= 640px) -->
|
||||
<div class="hidden w-full sm:flex sm:justify-between sm:items-center sm:gap-3">
|
||||
<div class="justify-self-start">
|
||||
<app-button action="cancel" label="Discard" [showIcon]="true"></app-button>
|
||||
</div>
|
||||
<div class="justify-self-end">
|
||||
<app-button action="save" label="Save Changes" [showIcon]="true"
|
||||
className="onboarding-nav-btn"></app-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user