From 2bf8ed80ef32146f2ab4dc4a14acc4e66c505259 Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Tue, 29 Oct 2024 20:38:10 +0530
Subject: [PATCH 01/30] feat: discord login page

---
 .../src/lib/external-user-auth.model.ts       | 15 ++++++++
 libs/shared/services/src/index.ts             |  2 +
 .../services/src/lib/api-routes.constant.ts   |  4 ++
 .../lib/external-user-auth-handler.service.ts | 37 +++++++++++++++++++
 .../src/lib/external-user-auth.service.ts     | 18 +++++++++
 5 files changed, 76 insertions(+)
 create mode 100644 libs/shared/models/src/lib/external-user-auth.model.ts
 create mode 100644 libs/shared/services/src/lib/external-user-auth-handler.service.ts
 create mode 100644 libs/shared/services/src/lib/external-user-auth.service.ts

diff --git a/libs/shared/models/src/lib/external-user-auth.model.ts b/libs/shared/models/src/lib/external-user-auth.model.ts
new file mode 100644
index 000000000..bdc4fd829
--- /dev/null
+++ b/libs/shared/models/src/lib/external-user-auth.model.ts
@@ -0,0 +1,15 @@
+export interface IExternalUserAuth {
+  id: number;
+  platform: EExternalUserAuth;
+  token: string;
+  active: boolean;
+  data: Date;
+}
+
+export enum EExternalUserAuth {
+  DISCORD = 'discord',
+  TWITTER = 'twitter',
+  INSTAGRAM = 'instagram',
+  FACEBOOK = 'facebook',
+  LINKEDIN = 'linkedin',
+}
diff --git a/libs/shared/services/src/index.ts b/libs/shared/services/src/index.ts
index f3d175783..fbf7b50a8 100644
--- a/libs/shared/services/src/index.ts
+++ b/libs/shared/services/src/index.ts
@@ -22,3 +22,5 @@ export * from './lib/round.service';
 export * from './lib/note.service';
 export * from './lib/razorpay.service';
 export * from './lib/help-dictionary.store';
+export * from './lib/external-user-auth-handler.service';
+export * from './lib/external-user-auth.service';
diff --git a/libs/shared/services/src/lib/api-routes.constant.ts b/libs/shared/services/src/lib/api-routes.constant.ts
index 787c2e01c..3e29dd605 100644
--- a/libs/shared/services/src/lib/api-routes.constant.ts
+++ b/libs/shared/services/src/lib/api-routes.constant.ts
@@ -951,4 +951,8 @@ export const API_ROUTES = {
     INDEX_UPCOMING_HACKATHONS_EVENTS: 'api/v2/feed/events_hackathons/upcoming',
     ACTIVITY_FEED: 'api/v2/activity_feed',
   },
+
+  EXTERNAL_USER_AUTH: {
+    CREATE: 'api/v2/external_user_auth', //POST
+  },
 };
diff --git a/libs/shared/services/src/lib/external-user-auth-handler.service.ts b/libs/shared/services/src/lib/external-user-auth-handler.service.ts
new file mode 100644
index 000000000..53ac6b6cb
--- /dev/null
+++ b/libs/shared/services/src/lib/external-user-auth-handler.service.ts
@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ExternalUserAuthService } from './external-user-auth.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ExternalUserAuthHandlerService {
+  private clientId = '1298505458629214218';
+
+  constructor(private activatedRoute: ActivatedRoute, private externalUserAuthService: ExternalUserAuthService) {
+    this.getTokenFromUrl();
+  }
+
+  loginToDiscord(): void {
+    const url = `https://discord.com/oauth2/authorize?client_id=${this.clientId}&response_type=token&redirect_uri=${window.location.href}&scope=identify`;
+    window.location.href = url;
+  }
+
+  // Extract token from URL fragment after Discord login
+  getTokenFromUrl() {
+    const fragment = this.activatedRoute.snapshot.fragment;
+    if (fragment) {
+      const tokenMatch = fragment.match(/access_token=([^&]*)/);
+      if (tokenMatch && tokenMatch[1]) {
+        const token = tokenMatch[1];
+        const external_user_auth = {
+          token: token,
+          platform: 'discord',
+        };
+        this.externalUserAuthService.create(external_user_auth).subscribe((res) => {
+          console.log(res);
+        });
+      }
+    }
+  }
+}
diff --git a/libs/shared/services/src/lib/external-user-auth.service.ts b/libs/shared/services/src/lib/external-user-auth.service.ts
new file mode 100644
index 000000000..85f3418c0
--- /dev/null
+++ b/libs/shared/services/src/lib/external-user-auth.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { API_ROUTES } from './api-routes.constant';
+import { BaseApiService } from './base-api.service';
+import { HttpClient } from '@angular/common/http';
+import { IExternalUserAuth } from '@commudle/shared-models';
+@Injectable({
+  providedIn: 'root',
+})
+export class ExternalUserAuthService {
+  constructor(private http: HttpClient, private baseApiService: BaseApiService) {}
+
+  create(data): Observable<IExternalUserAuth> {
+    return this.http.post<IExternalUserAuth>(this.baseApiService.getRoute(API_ROUTES.EXTERNAL_USER_AUTH.CREATE), {
+      external_user_auth: data,
+    });
+  }
+}

From 3a008564d6db36102b6459a741dae586493669c4 Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Tue, 29 Oct 2024 21:51:41 +0530
Subject: [PATCH 02/30] feat: create quest tab in admin community pannel

---
 .../community-control-panel-routing.module.ts |  6 +++++
 .../community-control-panel.module.ts         |  3 +++
 .../community-control-panel.component.html    |  4 +++
 .../community-quest.component.html            |  1 +
 .../community-quest.component.scss            |  0
 .../community-quest.component.spec.ts         | 27 +++++++++++++++++++
 .../community-quest.component.ts              | 17 ++++++++++++
 libs/shared/models/src/index.ts               |  1 +
 8 files changed, 59 insertions(+)
 create mode 100644 apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html
 create mode 100644 apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.scss
 create mode 100644 apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.spec.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.ts

diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/community-control-panel-routing.module.ts b/apps/commudle-admin/src/app/feature-modules/community-control-panel/community-control-panel-routing.module.ts
index 861f5c68d..2b538f21f 100644
--- a/apps/commudle-admin/src/app/feature-modules/community-control-panel/community-control-panel-routing.module.ts
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/community-control-panel-routing.module.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @nx/enforce-module-boundaries */
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CommunityAdminNotificationsComponent } from 'apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-admin-notifications/community-admin-notifications.component';
@@ -24,6 +25,7 @@ import { AdminCommunityHackathonComponent } from './components/admin-community-h
 import { CommunityBankDetailsComponent } from 'apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-payments/community-bank-details/community-bank-details.component';
 import { CommunityPaymentLogsComponent } from 'apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-payments/community-payment-logs/community-payment-logs.component';
 import { PaymentLogEdfegComponent } from 'apps/shared-components/payment-detail/payment-log-edfeg/payment-log-edfeg.component';
+import { CommunityQuestComponent } from 'apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component';
 const routes = [
   {
     path: 'new',
@@ -136,6 +138,10 @@ const routes = [
         path: 'team',
         component: CommunityTeamComponent,
       },
+      {
+        path: 'quest',
+        component: CommunityQuestComponent,
+      },
       {
         path: 'channels',
         component: CommunityChannelsAndForumsComponent,
diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/community-control-panel.module.ts b/apps/commudle-admin/src/app/feature-modules/community-control-panel/community-control-panel.module.ts
index 265e2ccc5..0c26d4a53 100644
--- a/apps/commudle-admin/src/app/feature-modules/community-control-panel/community-control-panel.module.ts
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/community-control-panel.module.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @nx/enforce-module-boundaries */
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -58,6 +59,7 @@ import { CommunityChannelsModule } from 'apps/commudle-admin/src/app/feature-mod
 import { AdminCommunityHackathonComponent } from './components/admin-community-hackathon/admin-community-hackathon.component';
 import { CommunityPaymentLogsComponent } from 'apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-payments/community-payment-logs/community-payment-logs.component';
 import { CommunityBankDetailsComponent } from 'apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-payments/community-bank-details/community-bank-details.component';
+import { CommunityQuestComponent } from 'apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component';
 
 @NgModule({
   declarations: [
@@ -86,6 +88,7 @@ import { CommunityBankDetailsComponent } from 'apps/commudle-admin/src/app/featu
     AdminCommunityHackathonComponent,
     CommunityPaymentLogsComponent,
     CommunityBankDetailsComponent,
+    CommunityQuestComponent,
   ],
   imports: [
     CommonModule,
diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-control-panel/community-control-panel.component.html b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-control-panel/community-control-panel.component.html
index e00b48cdd..8631cdeb5 100644
--- a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-control-panel/community-control-panel.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-control-panel/community-control-panel.component.html
@@ -159,6 +159,10 @@ <h4>{{ community.name }}</h4>
               <nb-icon icon="people" status="success"></nb-icon>
               <span class="title">Members</span>
             </a>
+            <a [routerLink]="['quest']" class="d-flex" routerLinkActive="active">
+              <nb-icon icon="star" status="success"></nb-icon>
+              <span class="title">Quest</span>
+            </a>
             <a [routerLink]="['forms']" class="d-flex" routerLinkActive="active">
               <fa-icon [icon]="faScroll"></fa-icon>
               <span class="title">Forms</span>
diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html
new file mode 100644
index 000000000..11ca6ff65
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html
@@ -0,0 +1 @@
+<button (click)="loginToDiscord()">Login with Discord</button>
diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.scss b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.spec.ts b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.spec.ts
new file mode 100644
index 000000000..a9d8287f5
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { CommunityQuestComponent } from './community-quest.component';
+
+describe('CommunityQuestComponent', () => {
+  let component: CommunityQuestComponent;
+  let fixture: ComponentFixture<CommunityQuestComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [CommunityQuestComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CommunityQuestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.ts b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.ts
new file mode 100644
index 000000000..49d34da33
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { ExternalUserAuthHandlerService } from '@commudle/shared-services';
+
+@Component({
+  selector: 'commudle-community-quest',
+  templateUrl: './community-quest.component.html',
+  styleUrls: ['./community-quest.component.scss'],
+})
+export class CommunityQuestComponent implements OnInit {
+  constructor(private externalUserAuthHandlerService: ExternalUserAuthHandlerService) {}
+
+  ngOnInit() {}
+
+  loginToDiscord() {
+    this.externalUserAuthHandlerService.loginToDiscord();
+  }
+}
diff --git a/libs/shared/models/src/index.ts b/libs/shared/models/src/index.ts
index 33ae60fb9..dc07dc722 100644
--- a/libs/shared/models/src/index.ts
+++ b/libs/shared/models/src/index.ts
@@ -40,3 +40,4 @@ export * from './lib/help-dictionary.model';
 export * from './lib/upcoming-event-hackathon.model';
 export * from './lib/hackathon-user-response.model';
 export * from './lib/activity-feed.model';
+export * from './lib/external-user-auth.model';

From 07098b7572ec5e221b8652dd7a723bc891c18ced Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Thu, 7 Nov 2024 12:45:16 +0530
Subject: [PATCH 03/30] feat: admin quest page

---
 .../src/app/app-routing.module.ts             |  7 ++
 .../community-control-panel-routing.module.ts | 11 ++++
 .../community-quest.component.html            |  7 +-
 .../community-quest.component.scss            |  3 +
 .../community-quest.component.ts              | 10 ++-
 .../public-quests/public-quests.module.ts     |  8 +++
 .../new-quest-form.component.html             |  7 ++
 .../new-quest-form.component.scss             |  0
 .../new-quest-form.component.spec.ts          | 27 ++++++++
 .../new-quest-form.component.ts               |  8 +++
 .../quests-control-panel.module.ts            | 11 ++++
 .../quests-control-panel.routing.ts           | 11 ++++
 .../quest-form/quest-form.component.html      | 64 ++++++++++++++++++
 .../quest-form/quest-form.component.scss      | 25 +++++++
 .../quest-form/quest-form.component.spec.ts   | 27 ++++++++
 .../quest-form/quest-form.component.ts        | 60 +++++++++++++++++
 .../shared-components.module.ts               |  4 +-
 libs/shared/models/src/index.ts               |  1 +
 libs/shared/models/src/lib/quest.model.ts     | 13 ++++
 libs/shared/services/src/index.ts             |  1 +
 .../services/src/lib/api-routes.constant.ts   | 11 ++++
 libs/shared/services/src/lib/quest.service.ts | 65 +++++++++++++++++++
 22 files changed, 378 insertions(+), 3 deletions(-)
 create mode 100644 apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.module.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/new-quest-form/new-quest-form.component.html
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/new-quest-form/new-quest-form.component.scss
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/new-quest-form/new-quest-form.component.spec.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/new-quest-form/new-quest-form.component.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.module.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.routing.ts
 create mode 100644 apps/shared-components/quest-form/quest-form.component.html
 create mode 100644 apps/shared-components/quest-form/quest-form.component.scss
 create mode 100644 apps/shared-components/quest-form/quest-form.component.spec.ts
 create mode 100644 apps/shared-components/quest-form/quest-form.component.ts
 create mode 100644 libs/shared/models/src/lib/quest.model.ts
 create mode 100644 libs/shared/services/src/lib/quest.service.ts

diff --git a/apps/commudle-admin/src/app/app-routing.module.ts b/apps/commudle-admin/src/app/app-routing.module.ts
index 8d26f8664..50c3d2485 100644
--- a/apps/commudle-admin/src/app/app-routing.module.ts
+++ b/apps/commudle-admin/src/app/app-routing.module.ts
@@ -264,6 +264,13 @@ const routes: Routes = [
         path: 'communities/:community_id/event-dashboard',
         loadChildren: () => import('./feature-modules/events/events.module').then((m) => m.EventsModule),
       },
+      {
+        path: 'communities/:community_id/quest-dashboard',
+        loadChildren: () =>
+          import('./feature-modules/quests-control-panel/quests-control-panel.module').then(
+            (m) => m.QuestsControlPanelModule,
+          ),
+      },
       {
         path: 'orgs',
         loadChildren: () =>
diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/community-control-panel-routing.module.ts b/apps/commudle-admin/src/app/feature-modules/community-control-panel/community-control-panel-routing.module.ts
index 2b538f21f..99209eb10 100644
--- a/apps/commudle-admin/src/app/feature-modules/community-control-panel/community-control-panel-routing.module.ts
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/community-control-panel-routing.module.ts
@@ -26,6 +26,7 @@ import { CommunityBankDetailsComponent } from 'apps/commudle-admin/src/app/featu
 import { CommunityPaymentLogsComponent } from 'apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-payments/community-payment-logs/community-payment-logs.component';
 import { PaymentLogEdfegComponent } from 'apps/shared-components/payment-detail/payment-log-edfeg/payment-log-edfeg.component';
 import { CommunityQuestComponent } from 'apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component';
+import { QuestFormComponent } from 'apps/shared-components/quest-form/quest-form.component';
 const routes = [
   {
     path: 'new',
@@ -141,6 +142,16 @@ const routes = [
       {
         path: 'quest',
         component: CommunityQuestComponent,
+        children: [
+          {
+            path: 'new',
+            component: QuestFormComponent,
+          },
+          {
+            path: ':quest_id/edit',
+            component: QuestFormComponent,
+          },
+        ],
       },
       {
         path: 'channels',
diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html
index 11ca6ff65..9befe69a5 100644
--- a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html
@@ -1 +1,6 @@
-<button (click)="loginToDiscord()">Login with Discord</button>
+<!-- <button (click)="loginToDiscord()">Login with Discord</button> -->
+<section>
+  <button nbButton [routerLink]="['../quest-dashboard', 'new']" status="primary" outline>
+    <fa-icon [icon]="icons.faPlus"></fa-icon>&nbsp; New Quest
+  </button>
+</section>
diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.scss b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.scss
index e69de29bb..5b9ddfb78 100644
--- a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.scss
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.scss
@@ -0,0 +1,3 @@
+section {
+  @apply com-p-6;
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.ts b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.ts
index 49d34da33..3a05b58d6 100644
--- a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.ts
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ExternalUserAuthHandlerService } from '@commudle/shared-services';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'commudle-community-quest',
@@ -7,11 +8,18 @@ import { ExternalUserAuthHandlerService } from '@commudle/shared-services';
   styleUrls: ['./community-quest.component.scss'],
 })
 export class CommunityQuestComponent implements OnInit {
+  icons = {
+    faPlus,
+  };
   constructor(private externalUserAuthHandlerService: ExternalUserAuthHandlerService) {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.getQuests();
+  }
 
   loginToDiscord() {
     this.externalUserAuthHandlerService.loginToDiscord();
   }
+
+  getQuests() {}
 }
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.module.ts b/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.module.ts
new file mode 100644
index 000000000..f15a6a7ef
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.module.ts
@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [],
+})
+export class PublicQuestsModule {}
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/new-quest-form/new-quest-form.component.html b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/new-quest-form/new-quest-form.component.html
new file mode 100644
index 000000000..617054edf
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/new-quest-form/new-quest-form.component.html
@@ -0,0 +1,7 @@
+<div class="base-layout">
+  <div class="container">
+    <div class="one-column-layout">
+      <commudle-quest-form buttonText="save & continue"></commudle-quest-form>
+    </div>
+  </div>
+</div>
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/new-quest-form/new-quest-form.component.scss b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/new-quest-form/new-quest-form.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/new-quest-form/new-quest-form.component.spec.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/new-quest-form/new-quest-form.component.spec.ts
new file mode 100644
index 000000000..861cb9ddd
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/new-quest-form/new-quest-form.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { NewQuestFormComponent } from './new-quest-form.component';
+
+describe('NewQuestFormComponent', () => {
+  let component: NewQuestFormComponent;
+  let fixture: ComponentFixture<NewQuestFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [NewQuestFormComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NewQuestFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/new-quest-form/new-quest-form.component.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/new-quest-form/new-quest-form.component.ts
new file mode 100644
index 000000000..3deb54715
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/new-quest-form/new-quest-form.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'commudle-new-quest-form',
+  templateUrl: './new-quest-form.component.html',
+  styleUrls: ['./new-quest-form.component.scss'],
+})
+export class NewQuestFormComponent {}
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.module.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.module.ts
new file mode 100644
index 000000000..60311190c
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { QuestsControlPanelRoutes } from './quests-control-panel.routing';
+import { SharedComponentsModule } from 'apps/shared-components/shared-components.module';
+import { NewQuestFormComponent } from 'apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/new-quest-form/new-quest-form.component';
+
+@NgModule({
+  imports: [CommonModule, QuestsControlPanelRoutes, SharedComponentsModule],
+  declarations: [NewQuestFormComponent],
+})
+export class QuestsControlPanelModule {}
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.routing.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.routing.ts
new file mode 100644
index 000000000..3a7e248eb
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.routing.ts
@@ -0,0 +1,11 @@
+import { Routes, RouterModule } from '@angular/router';
+import { NewQuestFormComponent } from 'apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/new-quest-form/new-quest-form.component';
+
+const routes: Routes = [
+  {
+    path: 'new',
+    component: NewQuestFormComponent,
+  },
+];
+
+export const QuestsControlPanelRoutes = RouterModule.forChild(routes);
diff --git a/apps/shared-components/quest-form/quest-form.component.html b/apps/shared-components/quest-form/quest-form.component.html
new file mode 100644
index 000000000..4b26a63c4
--- /dev/null
+++ b/apps/shared-components/quest-form/quest-form.component.html
@@ -0,0 +1,64 @@
+<nb-card>
+  <nb-card-header>New Quest</nb-card-header>
+
+  <nb-card-body>
+    <form [formGroup]="questForm">
+      <!-- title -->
+      <div class="label-container">
+        <label for="title">Quest Title <span class="required">*</span></label>
+        <input type="text" id="title" formControlName="title" nbInput fullWidth placeholder="Title" />
+        <!-- Error message for title -->
+        <commudle-alert
+          [error]="questForm.get('title')?.invalid && questForm.get('title')?.touched"
+          errorMessage="Title is required"
+        ></commudle-alert>
+      </div>
+
+      <!-- description -->
+      <div class="label-container">
+        <label for="description">Description <span class="required">*</span></label>
+        <textarea id="description" formControlName="description" nbInput fullWidth placeholder="Description"></textarea>
+        <!-- Error message for description -->
+        <commudle-alert
+          [error]="questForm.get('description')?.invalid && questForm.get('description')?.touched"
+          errorMessage="Description is required"
+        ></commudle-alert>
+      </div>
+
+      <!-- Date container -->
+      <div class="date-container">
+        <!-- start_date -->
+        <div class="label-container">
+          <label for="start_date">Start Date</label>
+          <input type="datetime-local" id="start_date" formControlName="start_date" nbInput fullWidth />
+        </div>
+
+        <div class="label-container">
+          <label for="end_date">End Date</label>
+          <input type="datetime-local" id="end_date" formControlName="end_date" nbInput fullWidth />
+        </div>
+      </div>
+
+      <!-- visibility -->
+      <div class="label-container">
+        <label>Visibility <span class="required">*</span></label>
+        <div class="radio-buttons">
+          <div *ngFor="let type of EQuestVisibility | keyvalue">
+            <input [id]="type.key" [value]="type.value" formControlName="visibility" type="radio" />&nbsp;
+            <label [for]="type.key">{{ type.value | titlecase }}</label>
+          </div>
+        </div>
+        <commudle-alert
+          [error]="questForm.get('visibility')?.invalid && questForm.get('visibility')?.touched"
+          errorMessage="Visibility is required"
+        ></commudle-alert>
+      </div>
+    </form>
+  </nb-card-body>
+
+  <nb-card-footer>
+    <button nbButton status="primary" [disabled]="!questForm.valid" type="submit" (click)="createOrUpdateQuest()">
+      {{ buttonText }}
+    </button>
+  </nb-card-footer>
+</nb-card>
diff --git a/apps/shared-components/quest-form/quest-form.component.scss b/apps/shared-components/quest-form/quest-form.component.scss
new file mode 100644
index 000000000..ed9dcf210
--- /dev/null
+++ b/apps/shared-components/quest-form/quest-form.component.scss
@@ -0,0 +1,25 @@
+nb-card {
+  nb-card-body {
+    form {
+      @apply com-flex com-flex-col com-gap-4;
+      .label-container {
+        @apply com-flex com-flex-col com-gap-0.5;
+        label {
+          @apply com-mb-2;
+          .required {
+            @apply com-text-red-500;
+          }
+        }
+      }
+      .date-container {
+        @apply com-flex com-gap-6 com-border-0 com-border-b com-border-t com-border-solid com-border-Bright-Gray com-py-3;
+        .label-container {
+          @apply com-w-full;
+        }
+      }
+      .radio-buttons {
+        @apply com-flex com-gap-5;
+      }
+    }
+  }
+}
diff --git a/apps/shared-components/quest-form/quest-form.component.spec.ts b/apps/shared-components/quest-form/quest-form.component.spec.ts
new file mode 100644
index 000000000..63adfdbe5
--- /dev/null
+++ b/apps/shared-components/quest-form/quest-form.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { QuestFormComponent } from './quest-form.component';
+
+describe('QuestFormComponent', () => {
+  let component: QuestFormComponent;
+  let fixture: ComponentFixture<QuestFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestFormComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QuestFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/shared-components/quest-form/quest-form.component.ts b/apps/shared-components/quest-form/quest-form.component.ts
new file mode 100644
index 000000000..9337d82c6
--- /dev/null
+++ b/apps/shared-components/quest-form/quest-form.component.ts
@@ -0,0 +1,60 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { EDbModels, IQuest, EQuestVisibility } from '@commudle/shared-models';
+import { QuestService } from '@commudle/shared-services';
+
+@Component({
+  selector: 'commudle-quest-form',
+  templateUrl: './quest-form.component.html',
+  styleUrls: ['./quest-form.component.scss'],
+})
+export class QuestFormComponent implements OnInit {
+  @Input() buttonText: string = 'Save';
+  parentId = '';
+  questId = '';
+  parentType: EDbModels;
+  EQuestVisibility = EQuestVisibility;
+  questForm: FormGroup;
+  quest: IQuest;
+  constructor(private activatedRoute: ActivatedRoute, private fb: FormBuilder, private questService: QuestService) {
+    this.questForm = this.fb.group({
+      title: ['', Validators.required],
+      description: ['', Validators.required],
+      start_date: [''],
+      end_date: [''],
+      visibility: ['', Validators.required],
+    });
+  }
+
+  ngOnInit() {
+    this.activatedRoute.parent.paramMap.subscribe((params) => {
+      if (params.get('community_id')) {
+        this.parentId = params.get('community_id');
+        this.parentType = EDbModels.KOMMUNITY;
+      }
+      if (params.get('community_group_id')) {
+        this.parentId = params.get('community_group_id');
+        this.parentType = EDbModels.COMMUNITY_GROUP;
+      }
+      if (params.get('quest_id')) {
+        this.questId = params.get('community_group_id');
+        this.fetchQuestDetails();
+      }
+    });
+  }
+
+  createOrUpdateQuest() {}
+  fetchQuestDetails() {
+    this.questService.getQuest(Number(this.questId)).subscribe((quest: IQuest) => {
+      this.quest = quest;
+      this.questForm.patchValue({
+        title: quest.title,
+        description: quest.description,
+        start_date: quest.start_date,
+        end_date: quest.end_date,
+        visibility: quest.visibility,
+      });
+    });
+  }
+}
diff --git a/apps/shared-components/shared-components.module.ts b/apps/shared-components/shared-components.module.ts
index 13dc46ba7..b3f6fe6af 100644
--- a/apps/shared-components/shared-components.module.ts
+++ b/apps/shared-components/shared-components.module.ts
@@ -91,7 +91,7 @@ import { HelpSectionComponent } from 'apps/commudle-admin/src/app/app-shared-com
 import { UserDetailsCheckboxFormComponent } from './user-details-checkbox-form/user-details-checkbox-form.component';
 import { UserDetailsFormComponent } from './user-details-form/user-details-form.component';
 import { NewsletterCardComponent } from './newsletter-card/newsletter-card.component';
-
+import { QuestFormComponent } from './quest-form/quest-form.component';
 @NgModule({
   declarations: [
     WorkInProgressComponent,
@@ -145,6 +145,7 @@ import { NewsletterCardComponent } from './newsletter-card/newsletter-card.compo
     UserDetailsCheckboxFormComponent,
     UserDetailsFormComponent,
     NewsletterCardComponent,
+    QuestFormComponent,
   ],
   imports: [
     CommonModule,
@@ -236,6 +237,7 @@ import { NewsletterCardComponent } from './newsletter-card/newsletter-card.compo
     UserDetailsCheckboxFormComponent,
     UserDetailsFormComponent,
     NewsletterCardComponent,
+    QuestFormComponent,
   ],
   providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }],
 })
diff --git a/libs/shared/models/src/index.ts b/libs/shared/models/src/index.ts
index dc07dc722..1cc528f10 100644
--- a/libs/shared/models/src/index.ts
+++ b/libs/shared/models/src/index.ts
@@ -41,3 +41,4 @@ export * from './lib/upcoming-event-hackathon.model';
 export * from './lib/hackathon-user-response.model';
 export * from './lib/activity-feed.model';
 export * from './lib/external-user-auth.model';
+export * from './lib/quest.model';
diff --git a/libs/shared/models/src/lib/quest.model.ts b/libs/shared/models/src/lib/quest.model.ts
new file mode 100644
index 000000000..7b6dd3b7d
--- /dev/null
+++ b/libs/shared/models/src/lib/quest.model.ts
@@ -0,0 +1,13 @@
+export interface IQuest {
+  id: number;
+  title: string;
+  description: string;
+  start_date: Date;
+  end_date: Date;
+  visibility: EQuestVisibility;
+}
+
+export enum EQuestVisibility {
+  PUBLIC = 'public',
+  PRIVATE = 'private',
+}
diff --git a/libs/shared/services/src/index.ts b/libs/shared/services/src/index.ts
index fbf7b50a8..776a9722f 100644
--- a/libs/shared/services/src/index.ts
+++ b/libs/shared/services/src/index.ts
@@ -24,3 +24,4 @@ export * from './lib/razorpay.service';
 export * from './lib/help-dictionary.store';
 export * from './lib/external-user-auth-handler.service';
 export * from './lib/external-user-auth.service';
+export * from './lib/quest.service';
diff --git a/libs/shared/services/src/lib/api-routes.constant.ts b/libs/shared/services/src/lib/api-routes.constant.ts
index 3e29dd605..1303ef8ab 100644
--- a/libs/shared/services/src/lib/api-routes.constant.ts
+++ b/libs/shared/services/src/lib/api-routes.constant.ts
@@ -955,4 +955,15 @@ export const API_ROUTES = {
   EXTERNAL_USER_AUTH: {
     CREATE: 'api/v2/external_user_auth', //POST
   },
+
+  QUEST: {
+    CREATE: 'api/v2/quest', //POST
+    INDEX: 'api/v2/quest', //GET
+    SHOW: 'api/v2/quest/show', //GET
+    UPDATE: 'api/v2/quest', //PUT
+    PUBLIC: {
+      INDEX: 'api/v2/quest/public', //GET
+      SHOW: 'api/v2/quest/public/show', //GET
+    },
+  },
 };
diff --git a/libs/shared/services/src/lib/quest.service.ts b/libs/shared/services/src/lib/quest.service.ts
new file mode 100644
index 000000000..fc0a5733b
--- /dev/null
+++ b/libs/shared/services/src/lib/quest.service.ts
@@ -0,0 +1,65 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { API_ROUTES } from './api-routes.constant';
+import { BaseApiService } from './base-api.service';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { EDbModels, IQuest } from '@commudle/shared-models';
+@Injectable({
+  providedIn: 'root',
+})
+export class QuestService {
+  constructor(private http: HttpClient, private baseApiService: BaseApiService) {}
+
+  create(formData: IQuest, parentType: EDbModels, parentId: number | string): Observable<IQuest> {
+    const params = new HttpParams().set('parent_id', parentId).set('parent_type', parentType);
+    return this.http.post<IQuest>(
+      this.baseApiService.getRoute(API_ROUTES.QUEST.CREATE),
+      {
+        quest: formData,
+      },
+      {
+        params,
+      },
+    );
+  }
+
+  update(questId: number, data: IQuest): Observable<IQuest> {
+    const params = new HttpParams().set('quest_id', questId);
+    return this.http.put<IQuest>(
+      this.baseApiService.getRoute(API_ROUTES.QUEST.UPDATE),
+      {
+        quest: data,
+      },
+      { params },
+    );
+  }
+
+  index(parentType: EDbModels, parentId: number | string): Observable<IQuest[]> {
+    const params = new HttpParams().set('parent_id', parentId).set('parent_type', parentType);
+    return this.http.get<IQuest[]>(this.baseApiService.getRoute(API_ROUTES.QUEST.INDEX), {
+      params,
+    });
+  }
+
+  getQuest(questId: number): Observable<IQuest> {
+    const params = new HttpParams().set('quest_id', questId);
+    return this.http.get<IQuest>(this.baseApiService.getRoute(API_ROUTES.QUEST.SHOW), {
+      params,
+    });
+  }
+
+  // PUBLIC API
+  publicIndex(parentType: EDbModels, parentId: number | string): Observable<IQuest[]> {
+    const params = new HttpParams().set('parent_id', parentId).set('parent_type', parentType);
+    return this.http.get<IQuest[]>(this.baseApiService.getRoute(API_ROUTES.QUEST.PUBLIC.INDEX), {
+      params,
+    });
+  }
+
+  publicShow(questId: number): Observable<IQuest> {
+    const params = new HttpParams().set('quest_id', questId);
+    return this.http.get<IQuest>(this.baseApiService.getRoute(API_ROUTES.QUEST.PUBLIC.SHOW), {
+      params,
+    });
+  }
+}

From 8f979623520ad90782974763f44192ab5daa1a71 Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Thu, 7 Nov 2024 20:46:02 +0530
Subject: [PATCH 04/30] refactor: add index table for quest list

---
 .../community-control-panel-routing.module.ts | 12 +------
 .../community-control-panel.component.html    |  4 +--
 .../community-quest.component.html            | 33 +++++++++++++++++++
 .../community-quest.component.scss            | 17 ++++++++++
 .../community-quest.component.ts              | 29 +++++++++++++---
 .../quest-form/quest-form.component.html      | 10 +++---
 .../quest-form/quest-form.component.ts        | 30 ++++++++++++++---
 libs/shared/models/src/lib/quest.model.ts     |  8 +++--
 .../services/src/lib/api-routes.constant.ts   | 14 ++++----
 libs/shared/services/src/lib/quest.service.ts | 12 +++----
 10 files changed, 125 insertions(+), 44 deletions(-)

diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/community-control-panel-routing.module.ts b/apps/commudle-admin/src/app/feature-modules/community-control-panel/community-control-panel-routing.module.ts
index 99209eb10..c27c33fff 100644
--- a/apps/commudle-admin/src/app/feature-modules/community-control-panel/community-control-panel-routing.module.ts
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/community-control-panel-routing.module.ts
@@ -140,18 +140,8 @@ const routes = [
         component: CommunityTeamComponent,
       },
       {
-        path: 'quest',
+        path: 'quests',
         component: CommunityQuestComponent,
-        children: [
-          {
-            path: 'new',
-            component: QuestFormComponent,
-          },
-          {
-            path: ':quest_id/edit',
-            component: QuestFormComponent,
-          },
-        ],
       },
       {
         path: 'channels',
diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-control-panel/community-control-panel.component.html b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-control-panel/community-control-panel.component.html
index 8631cdeb5..0f7488db8 100644
--- a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-control-panel/community-control-panel.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-control-panel/community-control-panel.component.html
@@ -159,9 +159,9 @@ <h4>{{ community.name }}</h4>
               <nb-icon icon="people" status="success"></nb-icon>
               <span class="title">Members</span>
             </a>
-            <a [routerLink]="['quest']" class="d-flex" routerLinkActive="active">
+            <a [routerLink]="['quests']" class="d-flex" routerLinkActive="active">
               <nb-icon icon="star" status="success"></nb-icon>
-              <span class="title">Quest</span>
+              <span class="title">Quests</span>
             </a>
             <a [routerLink]="['forms']" class="d-flex" routerLinkActive="active">
               <fa-icon [icon]="faScroll"></fa-icon>
diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html
index 9befe69a5..ecca05357 100644
--- a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html
@@ -3,4 +3,37 @@
   <button nbButton [routerLink]="['../quest-dashboard', 'new']" status="primary" outline>
     <fa-icon [icon]="icons.faPlus"></fa-icon>&nbsp; New Quest
   </button>
+
+  <table *ngIf="quests && quests.length > 0">
+    <tr>
+      <th>Name</th>
+      <th>Creation date</th>
+      <th>Dates</th>
+      <th>No of tasks</th>
+      <th>No of participants</th>
+      <th>Actions</th>
+    </tr>
+    <tr *ngFor="let quest of quests">
+      <td>{{ quest.name }}</td>
+      <td>{{ moment(quest.created_at).format('dddd, MMM Do, YYYY') }}</td>
+      <td>
+        <small *ngIf="quest.start_date">Start at: {{ moment(quest.start_date).format('dddd, MMM Do, YYYY') }}</small>
+        <br />
+        <small *ngIf="quest.end_date">End at: {{ moment(quest.end_date).format('dddd, MMM Do, YYYY') }}</small>
+      </td>
+      <td></td>
+      <td></td>
+      <td class="action-buttons">
+        <a [routerLink]="['/admin', 'communities', communityId, 'quest-dashboard', quest.slug]">
+          <button nbButton status="primary" size="tiny">Dashboard</button>
+        </a>
+        <a [routerLink]="['/communities', communityId, 'hackathons', quest.slug]" target="_blank">
+          <button nbButton status="primary" size="tiny">
+            <fa-icon [icon]="icons.faArrowUpRightFromSquare"></fa-icon>
+            &nbsp;Public Page
+          </button>
+        </a>
+      </td>
+    </tr>
+  </table>
 </section>
diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.scss b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.scss
index 5b9ddfb78..89af2e2ca 100644
--- a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.scss
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.scss
@@ -1,3 +1,20 @@
 section {
   @apply com-p-6;
+
+  table {
+    @apply com-border-collapse com-w-full com-mt-4;
+
+    td,
+    th {
+      @apply com-border com-border-solid com-border-Bright-Gray com-text-left com-p-2;
+    }
+
+    tr:nth-child(even) {
+      @apply com-bg-Bright-Gray;
+    }
+
+    .action-buttons {
+      @apply com-flex com-justify-evenly;
+    }
+  }
 }
diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.ts b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.ts
index 3a05b58d6..549ea8065 100644
--- a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.ts
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.ts
@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { ExternalUserAuthHandlerService } from '@commudle/shared-services';
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { ActivatedRoute } from '@angular/router';
+import { EDbModels, IQuest } from '@commudle/shared-models';
+import { ExternalUserAuthHandlerService, QuestService } from '@commudle/shared-services';
+import { faPlus, faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
+import moment from 'moment';
 
 @Component({
   selector: 'commudle-community-quest',
@@ -8,18 +11,34 @@ import { faPlus } from '@fortawesome/free-solid-svg-icons';
   styleUrls: ['./community-quest.component.scss'],
 })
 export class CommunityQuestComponent implements OnInit {
+  communityId: number | string;
+  quests: IQuest[];
+  moment = moment;
   icons = {
     faPlus,
+    faArrowUpRightFromSquare,
   };
-  constructor(private externalUserAuthHandlerService: ExternalUserAuthHandlerService) {}
+
+  constructor(
+    private externalUserAuthHandlerService: ExternalUserAuthHandlerService,
+    private questService: QuestService,
+    private activatedRoute: ActivatedRoute,
+  ) {}
 
   ngOnInit() {
-    this.getQuests();
+    this.activatedRoute.parent.params.subscribe((params) => {
+      this.communityId = params.community_id;
+      this.getQuests();
+    });
   }
 
   loginToDiscord() {
     this.externalUserAuthHandlerService.loginToDiscord();
   }
 
-  getQuests() {}
+  getQuests() {
+    this.questService.index(EDbModels.KOMMUNITY, this.communityId).subscribe((data) => {
+      this.quests = data;
+    });
+  }
 }
diff --git a/apps/shared-components/quest-form/quest-form.component.html b/apps/shared-components/quest-form/quest-form.component.html
index 4b26a63c4..eff1ed8ff 100644
--- a/apps/shared-components/quest-form/quest-form.component.html
+++ b/apps/shared-components/quest-form/quest-form.component.html
@@ -5,12 +5,12 @@
     <form [formGroup]="questForm">
       <!-- title -->
       <div class="label-container">
-        <label for="title">Quest Title <span class="required">*</span></label>
-        <input type="text" id="title" formControlName="title" nbInput fullWidth placeholder="Title" />
+        <label for="name">Quest Title <span class="required">*</span></label>
+        <input type="text" id="name" formControlName="name" nbInput fullWidth placeholder="Name" />
         <!-- Error message for title -->
         <commudle-alert
-          [error]="questForm.get('title')?.invalid && questForm.get('title')?.touched"
-          errorMessage="Title is required"
+          [error]="questForm.get('name')?.invalid && questForm.get('name')?.touched"
+          errorMessage="Name is required"
         ></commudle-alert>
       </div>
 
@@ -45,7 +45,7 @@
         <div class="radio-buttons">
           <div *ngFor="let type of EQuestVisibility | keyvalue">
             <input [id]="type.key" [value]="type.value" formControlName="visibility" type="radio" />&nbsp;
-            <label [for]="type.key">{{ type.value | titlecase }}</label>
+            <label [for]="type.key">{{ type.key | titlecase }}</label>
           </div>
         </div>
         <commudle-alert
diff --git a/apps/shared-components/quest-form/quest-form.component.ts b/apps/shared-components/quest-form/quest-form.component.ts
index 9337d82c6..7b2b2e304 100644
--- a/apps/shared-components/quest-form/quest-form.component.ts
+++ b/apps/shared-components/quest-form/quest-form.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { EDbModels, IQuest, EQuestVisibility } from '@commudle/shared-models';
 import { QuestService } from '@commudle/shared-services';
 
@@ -17,9 +17,15 @@ export class QuestFormComponent implements OnInit {
   EQuestVisibility = EQuestVisibility;
   questForm: FormGroup;
   quest: IQuest;
-  constructor(private activatedRoute: ActivatedRoute, private fb: FormBuilder, private questService: QuestService) {
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private fb: FormBuilder,
+    private questService: QuestService,
+    private router: Router,
+  ) {
     this.questForm = this.fb.group({
-      title: ['', Validators.required],
+      name: ['', Validators.required],
       description: ['', Validators.required],
       start_date: [''],
       end_date: [''],
@@ -44,12 +50,26 @@ export class QuestFormComponent implements OnInit {
     });
   }
 
-  createOrUpdateQuest() {}
+  createOrUpdateQuest() {
+    if (this.questId) {
+      this.updateQuest();
+    } else {
+      this.createQuest();
+    }
+  }
+
+  createQuest() {
+    this.questService.create(this.questForm.value, this.parentType, this.parentId).subscribe((quest: IQuest) => {});
+  }
+  updateQuest() {
+    this.questService.update(Number(this.questId), this.questForm.value).subscribe((quest: IQuest) => {});
+  }
+
   fetchQuestDetails() {
     this.questService.getQuest(Number(this.questId)).subscribe((quest: IQuest) => {
       this.quest = quest;
       this.questForm.patchValue({
-        title: quest.title,
+        name: quest.name,
         description: quest.description,
         start_date: quest.start_date,
         end_date: quest.end_date,
diff --git a/libs/shared/models/src/lib/quest.model.ts b/libs/shared/models/src/lib/quest.model.ts
index 7b6dd3b7d..0373ee876 100644
--- a/libs/shared/models/src/lib/quest.model.ts
+++ b/libs/shared/models/src/lib/quest.model.ts
@@ -1,13 +1,15 @@
 export interface IQuest {
   id: number;
-  title: string;
+  name: string;
   description: string;
   start_date: Date;
   end_date: Date;
   visibility: EQuestVisibility;
+  created_at: Date;
+  slug: string;
 }
 
 export enum EQuestVisibility {
-  PUBLIC = 'public',
-  PRIVATE = 'private',
+  PUBLIC = 'is_public',
+  PRIVATE = 'is_private',
 }
diff --git a/libs/shared/services/src/lib/api-routes.constant.ts b/libs/shared/services/src/lib/api-routes.constant.ts
index 1303ef8ab..e9e08bca7 100644
--- a/libs/shared/services/src/lib/api-routes.constant.ts
+++ b/libs/shared/services/src/lib/api-routes.constant.ts
@@ -956,14 +956,14 @@ export const API_ROUTES = {
     CREATE: 'api/v2/external_user_auth', //POST
   },
 
-  QUEST: {
-    CREATE: 'api/v2/quest', //POST
-    INDEX: 'api/v2/quest', //GET
-    SHOW: 'api/v2/quest/show', //GET
-    UPDATE: 'api/v2/quest', //PUT
+  QUESTS: {
+    CREATE: 'api/v2/quests', //POST
+    INDEX: 'api/v2/quests', //GET
+    SHOW: 'api/v2/quests/show', //GET
+    UPDATE: 'api/v2/quests', //PUT
     PUBLIC: {
-      INDEX: 'api/v2/quest/public', //GET
-      SHOW: 'api/v2/quest/public/show', //GET
+      INDEX: 'api/v2/quests/public', //GET
+      SHOW: 'api/v2/quests/public/show', //GET
     },
   },
 };
diff --git a/libs/shared/services/src/lib/quest.service.ts b/libs/shared/services/src/lib/quest.service.ts
index fc0a5733b..1d3f1b016 100644
--- a/libs/shared/services/src/lib/quest.service.ts
+++ b/libs/shared/services/src/lib/quest.service.ts
@@ -13,7 +13,7 @@ export class QuestService {
   create(formData: IQuest, parentType: EDbModels, parentId: number | string): Observable<IQuest> {
     const params = new HttpParams().set('parent_id', parentId).set('parent_type', parentType);
     return this.http.post<IQuest>(
-      this.baseApiService.getRoute(API_ROUTES.QUEST.CREATE),
+      this.baseApiService.getRoute(API_ROUTES.QUESTS.CREATE),
       {
         quest: formData,
       },
@@ -26,7 +26,7 @@ export class QuestService {
   update(questId: number, data: IQuest): Observable<IQuest> {
     const params = new HttpParams().set('quest_id', questId);
     return this.http.put<IQuest>(
-      this.baseApiService.getRoute(API_ROUTES.QUEST.UPDATE),
+      this.baseApiService.getRoute(API_ROUTES.QUESTS.UPDATE),
       {
         quest: data,
       },
@@ -36,14 +36,14 @@ export class QuestService {
 
   index(parentType: EDbModels, parentId: number | string): Observable<IQuest[]> {
     const params = new HttpParams().set('parent_id', parentId).set('parent_type', parentType);
-    return this.http.get<IQuest[]>(this.baseApiService.getRoute(API_ROUTES.QUEST.INDEX), {
+    return this.http.get<IQuest[]>(this.baseApiService.getRoute(API_ROUTES.QUESTS.INDEX), {
       params,
     });
   }
 
   getQuest(questId: number): Observable<IQuest> {
     const params = new HttpParams().set('quest_id', questId);
-    return this.http.get<IQuest>(this.baseApiService.getRoute(API_ROUTES.QUEST.SHOW), {
+    return this.http.get<IQuest>(this.baseApiService.getRoute(API_ROUTES.QUESTS.SHOW), {
       params,
     });
   }
@@ -51,14 +51,14 @@ export class QuestService {
   // PUBLIC API
   publicIndex(parentType: EDbModels, parentId: number | string): Observable<IQuest[]> {
     const params = new HttpParams().set('parent_id', parentId).set('parent_type', parentType);
-    return this.http.get<IQuest[]>(this.baseApiService.getRoute(API_ROUTES.QUEST.PUBLIC.INDEX), {
+    return this.http.get<IQuest[]>(this.baseApiService.getRoute(API_ROUTES.QUESTS.PUBLIC.INDEX), {
       params,
     });
   }
 
   publicShow(questId: number): Observable<IQuest> {
     const params = new HttpParams().set('quest_id', questId);
-    return this.http.get<IQuest>(this.baseApiService.getRoute(API_ROUTES.QUEST.PUBLIC.SHOW), {
+    return this.http.get<IQuest>(this.baseApiService.getRoute(API_ROUTES.QUESTS.PUBLIC.SHOW), {
       params,
     });
   }

From 5b8ee7a1f11f505c203d524e7a8253efee20fdff Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Thu, 7 Nov 2024 21:13:15 +0530
Subject: [PATCH 05/30] feat: add pagination in quest list

---
 .../community-quest.component.html             | 11 +++++++++++
 .../community-quest.component.scss             |  4 ++++
 .../community-quest.component.ts               |  9 +++++++--
 libs/shared/services/src/lib/quest.service.ts  | 18 ++++++++++++------
 4 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html
index ecca05357..86d3443dd 100644
--- a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html
@@ -36,4 +36,15 @@
       </td>
     </tr>
   </table>
+  <div class="pagination">
+    <app-pagination
+      (goTo)="page = $event; getQuests()"
+      (next)="page = $event; getQuests()"
+      (previous)="page = $event; getQuests()"
+      *ngIf="total > 0"
+      [count]="count"
+      [current]="page"
+      [total]="total"
+    ></app-pagination>
+  </div>
 </section>
diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.scss b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.scss
index 89af2e2ca..f2e51c368 100644
--- a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.scss
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.scss
@@ -17,4 +17,8 @@ section {
       @apply com-flex com-justify-evenly;
     }
   }
+
+  .pagination {
+    @apply com-mt-4;
+  }
 }
diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.ts b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.ts
index 549ea8065..a391e1432 100644
--- a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.ts
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.ts
@@ -14,6 +14,9 @@ export class CommunityQuestComponent implements OnInit {
   communityId: number | string;
   quests: IQuest[];
   moment = moment;
+  page = 1;
+  total = 0;
+  count = 10;
   icons = {
     faPlus,
     faArrowUpRightFromSquare,
@@ -37,8 +40,10 @@ export class CommunityQuestComponent implements OnInit {
   }
 
   getQuests() {
-    this.questService.index(EDbModels.KOMMUNITY, this.communityId).subscribe((data) => {
-      this.quests = data;
+    this.questService.index(EDbModels.KOMMUNITY, this.communityId, this.page, this.count).subscribe((data) => {
+      this.quests = data.values;
+      this.page = data.page;
+      this.total = data.total;
     });
   }
 }
diff --git a/libs/shared/services/src/lib/quest.service.ts b/libs/shared/services/src/lib/quest.service.ts
index 1d3f1b016..a9a5da746 100644
--- a/libs/shared/services/src/lib/quest.service.ts
+++ b/libs/shared/services/src/lib/quest.service.ts
@@ -3,7 +3,7 @@ import { Observable } from 'rxjs';
 import { API_ROUTES } from './api-routes.constant';
 import { BaseApiService } from './base-api.service';
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { EDbModels, IQuest } from '@commudle/shared-models';
+import { EDbModels, IPaginationCount, IQuest } from '@commudle/shared-models';
 @Injectable({
   providedIn: 'root',
 })
@@ -34,9 +34,15 @@ export class QuestService {
     );
   }
 
-  index(parentType: EDbModels, parentId: number | string): Observable<IQuest[]> {
-    const params = new HttpParams().set('parent_id', parentId).set('parent_type', parentType);
-    return this.http.get<IQuest[]>(this.baseApiService.getRoute(API_ROUTES.QUESTS.INDEX), {
+  index(parentType: EDbModels, parentId: number | string, page = 1, count = 10): Observable<IPaginationCount<IQuest>> {
+    let params = new HttpParams().set('parent_id', parentId).set('parent_type', parentType);
+    if (page) {
+      params = params.set('page', page);
+    }
+    if (count) {
+      params = params.set('count', count);
+    }
+    return this.http.get<IPaginationCount<IQuest>>(this.baseApiService.getRoute(API_ROUTES.QUESTS.INDEX), {
       params,
     });
   }
@@ -49,9 +55,9 @@ export class QuestService {
   }
 
   // PUBLIC API
-  publicIndex(parentType: EDbModels, parentId: number | string): Observable<IQuest[]> {
+  publicIndex(parentType: EDbModels, parentId: number | string): Observable<IPaginationCount<IQuest>> {
     const params = new HttpParams().set('parent_id', parentId).set('parent_type', parentType);
-    return this.http.get<IQuest[]>(this.baseApiService.getRoute(API_ROUTES.QUESTS.PUBLIC.INDEX), {
+    return this.http.get<IPaginationCount<IQuest>>(this.baseApiService.getRoute(API_ROUTES.QUESTS.PUBLIC.INDEX), {
       params,
     });
   }

From fc9c6ee5b28ffb713e6c0374ad5ce7a9d014d437 Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Fri, 8 Nov 2024 17:02:14 +0530
Subject: [PATCH 06/30] refactor: revamp table for quest list

---
 .../community-quest.component.html            | 37 +++++++++++--------
 libs/shared/models/src/lib/quest.model.ts     |  2 +
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html
index 86d3443dd..8b24321eb 100644
--- a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html
@@ -17,22 +17,29 @@
       <td>{{ quest.name }}</td>
       <td>{{ moment(quest.created_at).format('dddd, MMM Do, YYYY') }}</td>
       <td>
-        <small *ngIf="quest.start_date">Start at: {{ moment(quest.start_date).format('dddd, MMM Do, YYYY') }}</small>
-        <br />
-        <small *ngIf="quest.end_date">End at: {{ moment(quest.end_date).format('dddd, MMM Do, YYYY') }}</small>
+        <div *ngIf="quest.start_date; else noDate">
+          <small *ngIf="quest.start_date">Start at: {{ moment(quest.start_date).format('dddd, MMM Do, YYYY') }}</small>
+          <br />
+          <small *ngIf="quest.end_date">End at: {{ moment(quest.end_date).format('dddd, MMM Do, YYYY') }}</small>
+        </div>
+        <ng-template #noDate>
+          <span>No Date selected yet!</span>
+        </ng-template>
       </td>
-      <td></td>
-      <td></td>
-      <td class="action-buttons">
-        <a [routerLink]="['/admin', 'communities', communityId, 'quest-dashboard', quest.slug]">
-          <button nbButton status="primary" size="tiny">Dashboard</button>
-        </a>
-        <a [routerLink]="['/communities', communityId, 'hackathons', quest.slug]" target="_blank">
-          <button nbButton status="primary" size="tiny">
-            <fa-icon [icon]="icons.faArrowUpRightFromSquare"></fa-icon>
-            &nbsp;Public Page
-          </button>
-        </a>
+      <td>{{ quest.tasks_count }}</td>
+      <td>{{ quest.participants_count }}</td>
+      <td>
+        <div class="action-buttons">
+          <a [routerLink]="['/admin', 'communities', communityId, 'quest-dashboard', quest.slug]">
+            <button nbButton status="primary" size="tiny">Dashboard</button>
+          </a>
+          <a [routerLink]="['/communities', communityId, 'hackathons', quest.slug]" target="_blank">
+            <button nbButton status="primary" size="tiny">
+              <fa-icon [icon]="icons.faArrowUpRightFromSquare"></fa-icon>
+              &nbsp;Public Page
+            </button>
+          </a>
+        </div>
       </td>
     </tr>
   </table>
diff --git a/libs/shared/models/src/lib/quest.model.ts b/libs/shared/models/src/lib/quest.model.ts
index 0373ee876..264a2f853 100644
--- a/libs/shared/models/src/lib/quest.model.ts
+++ b/libs/shared/models/src/lib/quest.model.ts
@@ -7,6 +7,8 @@ export interface IQuest {
   visibility: EQuestVisibility;
   created_at: Date;
   slug: string;
+  tasks_count: number;
+  participants_count: number;
 }
 
 export enum EQuestVisibility {

From d7bf95fd0cbd9321b5d78a8a6f6527ad6b5f1ea6 Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Fri, 8 Nov 2024 18:40:37 +0530
Subject: [PATCH 07/30] feat: edit, create, tasks

---
 .../edit-quest/edit-quest.component.html      |  1 +
 .../edit-quest/edit-quest.component.scss      |  0
 .../edit-quest/edit-quest.component.spec.ts   | 27 ++++++
 .../edit-quest/edit-quest.component.ts        | 19 +++++
 .../quest-control-panel-tasks.component.html  |  1 +
 .../quest-control-panel-tasks.component.scss  |  0
 ...uest-control-panel-tasks.component.spec.ts | 27 ++++++
 .../quest-control-panel-tasks.component.ts    | 12 +++
 .../quest-control-panel.component.html        | 68 +++++++++++++++
 .../quest-control-panel.component.scss        | 82 +++++++++++++++++++
 .../quest-control-panel.component.spec.ts     | 27 ++++++
 .../quest-control-panel.component.ts          | 58 +++++++++++++
 .../quest-dashboard.component.html            |  1 +
 .../quest-dashboard.component.scss            |  0
 .../quest-dashboard.component.spec.ts         | 27 ++++++
 .../quest-dashboard.component.ts              | 12 +++
 .../quests-control-panel.module.ts            | 26 +++++-
 .../quests-control-panel.routing.ts           | 26 +++++-
 .../resolver/quest-details.resolver.ts        | 20 +++++
 .../src/app/services/communities.service.ts   |  2 +-
 .../quest-form/quest-form.component.html      | 14 +++-
 .../quest-form/quest-form.component.ts        | 70 +++++++++++-----
 libs/shared/services/src/lib/quest.service.ts |  2 +-
 23 files changed, 493 insertions(+), 29 deletions(-)
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/edit-quest/edit-quest.component.html
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/edit-quest/edit-quest.component.scss
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/edit-quest/edit-quest.component.spec.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/edit-quest/edit-quest.component.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.html
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.scss
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.spec.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel/quest-control-panel.component.html
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel/quest-control-panel.component.scss
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel/quest-control-panel.component.spec.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel/quest-control-panel.component.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-dashboard/quest-dashboard.component.html
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-dashboard/quest-dashboard.component.scss
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-dashboard/quest-dashboard.component.spec.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-dashboard/quest-dashboard.component.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/quests-control-panel/resolver/quest-details.resolver.ts

diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/edit-quest/edit-quest.component.html b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/edit-quest/edit-quest.component.html
new file mode 100644
index 000000000..6878893fc
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/edit-quest/edit-quest.component.html
@@ -0,0 +1 @@
+<commudle-quest-form buttonText="save" [quest]="quest"></commudle-quest-form>
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/edit-quest/edit-quest.component.scss b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/edit-quest/edit-quest.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/edit-quest/edit-quest.component.spec.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/edit-quest/edit-quest.component.spec.ts
new file mode 100644
index 000000000..6e311425e
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/edit-quest/edit-quest.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { EditQuestComponent } from './edit-quest.component';
+
+describe('EditQuestComponent', () => {
+  let component: EditQuestComponent;
+  let fixture: ComponentFixture<EditQuestComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [EditQuestComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditQuestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/edit-quest/edit-quest.component.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/edit-quest/edit-quest.component.ts
new file mode 100644
index 000000000..0f56a924a
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/edit-quest/edit-quest.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { IQuest } from '@commudle/shared-models';
+
+@Component({
+  selector: 'commudle-edit-quest',
+  templateUrl: './edit-quest.component.html',
+  styleUrls: ['./edit-quest.component.scss'],
+})
+export class EditQuestComponent implements OnInit {
+  quest: IQuest;
+  constructor(private activatedRoute: ActivatedRoute) {}
+
+  ngOnInit() {
+    this.activatedRoute.parent.data.subscribe((data: { quest: IQuest }) => {
+      this.quest = data.quest;
+    });
+  }
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.html b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.html
new file mode 100644
index 000000000..42790655f
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.html
@@ -0,0 +1 @@
+<p>quest-control-panel-tasks works!</p>
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.scss b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.spec.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.spec.ts
new file mode 100644
index 000000000..ac69648cd
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { QuestControlPanelTasksComponent } from './quest-control-panel-tasks.component';
+
+describe('QuestControlPanelTasksComponent', () => {
+  let component: QuestControlPanelTasksComponent;
+  let fixture: ComponentFixture<QuestControlPanelTasksComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestControlPanelTasksComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QuestControlPanelTasksComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.ts
new file mode 100644
index 000000000..e52b8db14
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'commudle-quest-control-panel-tasks',
+  templateUrl: './quest-control-panel-tasks.component.html',
+  styleUrls: ['./quest-control-panel-tasks.component.scss'],
+})
+export class QuestControlPanelTasksComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel/quest-control-panel.component.html b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel/quest-control-panel.component.html
new file mode 100644
index 000000000..3dee83b0d
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel/quest-control-panel.component.html
@@ -0,0 +1,68 @@
+<section class="hackathon-details">
+  <app-community-badge *ngIf="community" [community]="community" size="small"></app-community-badge>
+  <div *ngIf="quest">
+    <h1>{{ quest.name }}</h1>
+    <div class="badge">
+      <p>Quest</p>
+    </div>
+  </div>
+</section>
+
+<section class="com-flex">
+  <div class="sidebar">
+    <commudle-sidebar
+      [isExpanded]="true"
+      [expandedWidth]="ESidebarWidth.XL"
+      [forWindow]="false"
+      [showExpandedButton]="false"
+    >
+      <div class="action-buttons">
+        <a [routerLink]="['/admin', 'communities', community?.slug, 'quests']" class="back-admin">
+          <div class="icon">
+            <fa-icon [icon]="icons.faArrowLeft"></fa-icon>
+          </div>
+          <div class="heading">Back to Admin Panel</div>
+        </a>
+        <div class="category">
+          <div>
+            <div class="category-heading">Quest Setup</div>
+            <div>
+              <a
+                class="action-button"
+                [routerLinkActiveOptions]="{ exact: true }"
+                [routerLink]="['./']"
+                routerLinkActive="active"
+              >
+                <div class="icon">
+                  <fa-icon [icon]="icons.faChartPie"></fa-icon>
+                </div>
+                <div class="action-button-name">Dashboard</div>
+              </a>
+              <a class="action-button" [routerLink]="['tasks']" routerLinkActive="active">
+                <div class="icon">
+                  <fa-icon [icon]="icons.faListCheck"></fa-icon>
+                </div>
+                <div class="action-button-name">Tasks</div>
+              </a>
+              <a class="action-button" [routerLink]="['edit']" routerLinkActive="active">
+                <div class="icon">
+                  <fa-icon [icon]="icons.faInfoCircle"></fa-icon>
+                </div>
+                <div class="action-button-name">Quest Information</div>
+              </a>
+              <a class="action-button" [routerLink]="['tracks']" routerLinkActive="active">
+                <div class="icon">
+                  <fa-icon [icon]="icons.faGear"></fa-icon>
+                </div>
+                <div class="action-button-name">Quest Settings</div>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </commudle-sidebar>
+  </div>
+  <div class="router">
+    <router-outlet></router-outlet>
+  </div>
+</section>
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel/quest-control-panel.component.scss b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel/quest-control-panel.component.scss
new file mode 100644
index 000000000..f04e83ed4
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel/quest-control-panel.component.scss
@@ -0,0 +1,82 @@
+.hackathon-details {
+  @apply com-p-8 com-bg-white com-border-0 com-border-b com-border-solid com-border-Bright-Gray;
+  > div {
+    @apply com-flex com-gap-4 com-items-center com-mt-2;
+    h1 {
+      @apply com-text-3xl com-m-0;
+    }
+    .badge {
+      @apply com-py-2 com-px-3 com-rounded-[32px] com-border com-border-solid com-border-purple-700 com-bg-purple-50;
+      p {
+        @apply com-m-0 com-text-purple-700 com-text-base;
+      }
+    }
+  }
+}
+
+.sidebar {
+  @apply com-w-80 com-sticky com-top-16 com-h-[calc(100vh-70px)];
+
+  a {
+    @apply com-text-inherit com-no-underline;
+  }
+  .action-buttons {
+    @apply com-py-3;
+
+    .back-admin {
+      @apply com-px-4;
+      .icon {
+        @apply com-text-Cadet-Grey;
+      }
+      .heading {
+        @apply com-text-xs com-text-Cadet-Grey;
+      }
+    }
+
+    .status-buttons {
+      @apply com-flex com-flex-col com-justify-center;
+      .border {
+        @apply com-border com-border-Bright-Gray com-border-solid com-rounded-md;
+      }
+
+      section {
+        @apply com-flex com-justify-center com-mb-5;
+      }
+    }
+    .category {
+      @apply com-flex com-flex-col;
+    }
+    .category-heading {
+      @apply com-text-sm com-font-semibold com-my-2 com-px-4;
+    }
+    .divided-line {
+      @apply com-border com-border-solid com-border-Bright-Gray;
+    }
+    .action-button {
+      @apply com-px-5 com-my-1 com-flex com-gap-2 com-items-center com-cursor-pointer;
+      &.active {
+        @apply com-bg-Bright-Gray-Light com-text-tYankees-Blue;
+      }
+      .icon {
+        fa-icon {
+          @apply com-text-lg com-text-Cadet-Grey;
+        }
+      }
+      .action-button-name {
+        @apply com-text-sm com-font-light;
+      }
+    }
+
+    .action-button:hover {
+      @apply com-bg-Bright-Gray-Light com-text-tYankees-Blue;
+    }
+  }
+}
+
+a {
+  @apply com-flex com-gap-2 com-items-center com-py-1;
+}
+
+.router {
+  @apply com-w-full com-my-2 com-mx-4;
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel/quest-control-panel.component.spec.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel/quest-control-panel.component.spec.ts
new file mode 100644
index 000000000..3830dad70
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel/quest-control-panel.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { QuestControlPanelComponent } from './quest-control-panel.component';
+
+describe('QuestControlPanelComponent', () => {
+  let component: QuestControlPanelComponent;
+  let fixture: ComponentFixture<QuestControlPanelComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestControlPanelComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QuestControlPanelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel/quest-control-panel.component.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel/quest-control-panel.component.ts
new file mode 100644
index 000000000..90857e9a8
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel/quest-control-panel.component.ts
@@ -0,0 +1,58 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ICommunity, IQuest } from '@commudle/shared-models';
+import { QuestService } from '@commudle/shared-services';
+import {
+  faArrowLeft,
+  faArrowUpRightFromSquare,
+  faChartPie,
+  faListCheck,
+  faInfoCircle,
+  faGear,
+} from '@fortawesome/free-solid-svg-icons';
+import { CommunitiesService } from 'apps/commudle-admin/src/app/services/communities.service';
+import { FooterService } from 'apps/commudle-admin/src/app/services/footer.service';
+import { ESidebarWidth } from 'apps/shared-components/sidebar/enum/sidebar.enum';
+
+@Component({
+  selector: 'commudle-quest-control-panel',
+  templateUrl: './quest-control-panel.component.html',
+  styleUrls: ['./quest-control-panel.component.scss'],
+})
+export class QuestControlPanelComponent implements OnInit {
+  questSlug: string;
+  quest: IQuest;
+  communitySlug: string;
+  community: ICommunity;
+  ESidebarWidth = ESidebarWidth;
+  icons = { faArrowLeft, faArrowUpRightFromSquare, faChartPie, faListCheck, faInfoCircle, faGear };
+  constructor(
+    private questService: QuestService,
+    private activatedRoute: ActivatedRoute,
+    private communityService: CommunitiesService,
+    private footerService: FooterService,
+  ) {}
+
+  ngOnInit() {
+    this.footerService.changeMiniFooterStatus(false);
+    this.activatedRoute.params.subscribe((params) => {
+      this.questSlug = params['quest_id'];
+      this.communitySlug = params['community_id'];
+      this.getCommunity();
+      this.getQuest();
+    });
+  }
+
+  // TODO: get data from resolver
+  getQuest() {
+    this.questService.getQuest(this.questSlug).subscribe((quest) => {
+      this.quest = quest;
+    });
+  }
+
+  getCommunity() {
+    this.communityService.getCommunityDetails(this.communitySlug).subscribe((data) => {
+      this.community = data;
+    });
+  }
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-dashboard/quest-dashboard.component.html b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-dashboard/quest-dashboard.component.html
new file mode 100644
index 000000000..464f78bbf
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-dashboard/quest-dashboard.component.html
@@ -0,0 +1 @@
+<h1>Dashboard</h1>
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-dashboard/quest-dashboard.component.scss b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-dashboard/quest-dashboard.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-dashboard/quest-dashboard.component.spec.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-dashboard/quest-dashboard.component.spec.ts
new file mode 100644
index 000000000..524f1b522
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-dashboard/quest-dashboard.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { QuestDashboardComponent } from './quest-dashboard.component';
+
+describe('QuestDashboardComponent', () => {
+  let component: QuestDashboardComponent;
+  let fixture: ComponentFixture<QuestDashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestDashboardComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QuestDashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-dashboard/quest-dashboard.component.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-dashboard/quest-dashboard.component.ts
new file mode 100644
index 000000000..ac6909f05
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-dashboard/quest-dashboard.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'commudle-quest-dashboard',
+  templateUrl: './quest-dashboard.component.html',
+  styleUrls: ['./quest-dashboard.component.scss'],
+})
+export class QuestDashboardComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.module.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.module.ts
index 60311190c..4ed3326a5 100644
--- a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.module.ts
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.module.ts
@@ -2,10 +2,30 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { QuestsControlPanelRoutes } from './quests-control-panel.routing';
 import { SharedComponentsModule } from 'apps/shared-components/shared-components.module';
-import { NewQuestFormComponent } from 'apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/new-quest-form/new-quest-form.component';
+import { NewQuestFormComponent } from './components/new-quest-form/new-quest-form.component';
+import { QuestDashboardComponent } from './components/quest-dashboard/quest-dashboard.component';
+import { SidebarComponent } from 'apps/shared-components/sidebar/sidebar.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { QuestControlPanelComponent } from './components/quest-control-panel/quest-control-panel.component';
+import { QuestControlPanelTasksComponent } from './components/quest-control-panel-tasks/quest-control-panel-tasks.component';
+import { EditQuestComponent } from './components/edit-quest/edit-quest.component';
 
 @NgModule({
-  imports: [CommonModule, QuestsControlPanelRoutes, SharedComponentsModule],
-  declarations: [NewQuestFormComponent],
+  imports: [
+    CommonModule,
+    QuestsControlPanelRoutes,
+    SharedComponentsModule,
+    FontAwesomeModule,
+
+    // standalone
+    SidebarComponent,
+  ],
+  declarations: [
+    NewQuestFormComponent,
+    QuestDashboardComponent,
+    QuestControlPanelTasksComponent,
+    QuestControlPanelComponent,
+    EditQuestComponent,
+  ],
 })
 export class QuestsControlPanelModule {}
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.routing.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.routing.ts
index 3a7e248eb..abcb1a892 100644
--- a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.routing.ts
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.routing.ts
@@ -1,11 +1,35 @@
 import { Routes, RouterModule } from '@angular/router';
-import { NewQuestFormComponent } from 'apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/new-quest-form/new-quest-form.component';
+import { NewQuestFormComponent } from './components/new-quest-form/new-quest-form.component';
+import { QuestDashboardComponent } from './components/quest-dashboard/quest-dashboard.component';
+import { QuestControlPanelTasksComponent } from './components/quest-control-panel-tasks/quest-control-panel-tasks.component';
+import { QuestControlPanelComponent } from './components/quest-control-panel/quest-control-panel.component';
+import { EditQuestComponent } from './components/edit-quest/edit-quest.component';
+import { QuestDetailsResolver } from './resolver/quest-details.resolver';
 
 const routes: Routes = [
   {
     path: 'new',
     component: NewQuestFormComponent,
   },
+  {
+    path: ':quest_id',
+    component: QuestControlPanelComponent,
+    resolve: { quest: QuestDetailsResolver },
+    children: [
+      {
+        path: '',
+        component: QuestDashboardComponent,
+      },
+      {
+        path: 'tasks',
+        component: QuestControlPanelTasksComponent,
+      },
+      {
+        path: 'edit',
+        component: EditQuestComponent,
+      },
+    ],
+  },
 ];
 
 export const QuestsControlPanelRoutes = RouterModule.forChild(routes);
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/resolver/quest-details.resolver.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/resolver/quest-details.resolver.ts
new file mode 100644
index 000000000..653d1feec
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/resolver/quest-details.resolver.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { Observable } from 'rxjs';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { ApiRoutesService } from 'apps/shared-services/api-routes.service';
+import { API_ROUTES } from 'apps/shared-services/api-routes.constants';
+import { IQuest } from '@commudle/shared-models';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class QuestDetailsResolver implements Resolve<IQuest> {
+  constructor(private http: HttpClient, private apiRoutesService: ApiRoutesService) {}
+
+  resolve(route: ActivatedRouteSnapshot): Observable<IQuest> {
+    const questId = route.parent.params.quest_id || route.params.quest_id;
+    const params = new HttpParams().set('quest_id', questId);
+    return this.http.get<IQuest>(this.apiRoutesService.getRoute(API_ROUTES.QUESTS.SHOW), { params });
+  }
+}
diff --git a/apps/commudle-admin/src/app/services/communities.service.ts b/apps/commudle-admin/src/app/services/communities.service.ts
index a7798ceb0..38ef49a29 100644
--- a/apps/commudle-admin/src/app/services/communities.service.ts
+++ b/apps/commudle-admin/src/app/services/communities.service.ts
@@ -44,7 +44,7 @@ export class CommunitiesService {
   }
 
   // get the details of a community
-  getCommunityDetails(communityId: number): Observable<ICommunity> {
+  getCommunityDetails(communityId: number | string): Observable<ICommunity> {
     const params = new HttpParams().set('community_id', String(communityId));
     return this.http.get<ICommunity>(this.apiRoutesService.getRoute(API_ROUTES.COMMUNITIES.DETAILS), { params });
   }
diff --git a/apps/shared-components/quest-form/quest-form.component.html b/apps/shared-components/quest-form/quest-form.component.html
index eff1ed8ff..ed0ac43c7 100644
--- a/apps/shared-components/quest-form/quest-form.component.html
+++ b/apps/shared-components/quest-form/quest-form.component.html
@@ -1,6 +1,5 @@
 <nb-card>
-  <nb-card-header>New Quest</nb-card-header>
-
+  <nb-card-header>{{ quest ? 'Edit quest' : 'New quest' }}</nb-card-header>
   <nb-card-body>
     <form [formGroup]="questForm">
       <!-- title -->
@@ -17,7 +16,7 @@
       <!-- description -->
       <div class="label-container">
         <label for="description">Description <span class="required">*</span></label>
-        <textarea id="description" formControlName="description" nbInput fullWidth placeholder="Description"></textarea>
+        <editor [init]="tinyMCE" formControlName="description" id="description"></editor>
         <!-- Error message for description -->
         <commudle-alert
           [error]="questForm.get('description')?.invalid && questForm.get('description')?.touched"
@@ -57,7 +56,14 @@
   </nb-card-body>
 
   <nb-card-footer>
-    <button nbButton status="primary" [disabled]="!questForm.valid" type="submit" (click)="createOrUpdateQuest()">
+    <button
+      nbButton
+      status="primary"
+      [disabled]="!questForm.valid"
+      type="submit"
+      (click)="createOrUpdateQuest()"
+      fullWidth
+    >
       {{ buttonText }}
     </button>
   </nb-card-footer>
diff --git a/apps/shared-components/quest-form/quest-form.component.ts b/apps/shared-components/quest-form/quest-form.component.ts
index 7b2b2e304..1d9f1c794 100644
--- a/apps/shared-components/quest-form/quest-form.component.ts
+++ b/apps/shared-components/quest-form/quest-form.component.ts
@@ -1,6 +1,7 @@
+import { DatePipe } from '@angular/common';
 import { Component, Input, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { EDbModels, IQuest, EQuestVisibility } from '@commudle/shared-models';
 import { QuestService } from '@commudle/shared-services';
 
@@ -11,18 +12,53 @@ import { QuestService } from '@commudle/shared-services';
 })
 export class QuestFormComponent implements OnInit {
   @Input() buttonText: string = 'Save';
+  @Input() quest: IQuest;
   parentId = '';
-  questId = '';
   parentType: EDbModels;
   EQuestVisibility = EQuestVisibility;
   questForm: FormGroup;
-  quest: IQuest;
+
+  tinyMCE = {
+    min_height: 300,
+    menubar: false,
+    convert_urls: false,
+    placeholder: 'Write description for hackathon',
+    content_style:
+      "@import url('https://fonts.googleapis.com/css?family=Inter'); body {font-family: 'Inter'; font-size: 16px !important;}",
+    plugins: [
+      'emoticons',
+      'advlist',
+      'lists',
+      'autolink',
+      'link',
+      'charmap',
+      'preview',
+      'anchor',
+      'image',
+      'visualblocks',
+      'code',
+      'charmap',
+      'codesample',
+      'insertdatetime',
+      'table',
+      'code',
+      'help',
+      'wordcount',
+      'autoresize',
+      'media',
+    ],
+    toolbar:
+      'bold italic backcolor | codesample emoticons | link | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | media code | removeformat | table',
+    default_link_target: '_blank',
+    branding: false,
+    license_key: 'gpl',
+  };
 
   constructor(
     private activatedRoute: ActivatedRoute,
     private fb: FormBuilder,
     private questService: QuestService,
-    private router: Router,
+    private datePipe: DatePipe,
   ) {
     this.questForm = this.fb.group({
       name: ['', Validators.required],
@@ -34,6 +70,9 @@ export class QuestFormComponent implements OnInit {
   }
 
   ngOnInit() {
+    if (this.quest) {
+      this.fetchQuestDetails();
+    }
     this.activatedRoute.parent.paramMap.subscribe((params) => {
       if (params.get('community_id')) {
         this.parentId = params.get('community_id');
@@ -43,15 +82,11 @@ export class QuestFormComponent implements OnInit {
         this.parentId = params.get('community_group_id');
         this.parentType = EDbModels.COMMUNITY_GROUP;
       }
-      if (params.get('quest_id')) {
-        this.questId = params.get('community_group_id');
-        this.fetchQuestDetails();
-      }
     });
   }
 
   createOrUpdateQuest() {
-    if (this.questId) {
+    if (this.quest) {
       this.updateQuest();
     } else {
       this.createQuest();
@@ -62,19 +97,16 @@ export class QuestFormComponent implements OnInit {
     this.questService.create(this.questForm.value, this.parentType, this.parentId).subscribe((quest: IQuest) => {});
   }
   updateQuest() {
-    this.questService.update(Number(this.questId), this.questForm.value).subscribe((quest: IQuest) => {});
+    this.questService.update(this.quest.id, this.questForm.value).subscribe((quest: IQuest) => {});
   }
 
   fetchQuestDetails() {
-    this.questService.getQuest(Number(this.questId)).subscribe((quest: IQuest) => {
-      this.quest = quest;
-      this.questForm.patchValue({
-        name: quest.name,
-        description: quest.description,
-        start_date: quest.start_date,
-        end_date: quest.end_date,
-        visibility: quest.visibility,
-      });
+    this.questForm.patchValue({
+      name: this.quest.name,
+      description: this.quest.description,
+      start_date: this.datePipe.transform(this.quest.start_date, 'yyyy-MM-ddTHH:mm:ss'),
+      end_date: this.datePipe.transform(this.quest.end_date, 'yyyy-MM-ddTHH:mm:ss'),
+      visibility: this.quest.visibility,
     });
   }
 }
diff --git a/libs/shared/services/src/lib/quest.service.ts b/libs/shared/services/src/lib/quest.service.ts
index a9a5da746..e7f64a5ad 100644
--- a/libs/shared/services/src/lib/quest.service.ts
+++ b/libs/shared/services/src/lib/quest.service.ts
@@ -47,7 +47,7 @@ export class QuestService {
     });
   }
 
-  getQuest(questId: number): Observable<IQuest> {
+  getQuest(questId: number | string): Observable<IQuest> {
     const params = new HttpParams().set('quest_id', questId);
     return this.http.get<IQuest>(this.baseApiService.getRoute(API_ROUTES.QUESTS.SHOW), {
       params,

From 6063bd3f33cdc9a81cc09abf19b70a90fa3a1dc7 Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Sat, 9 Nov 2024 12:56:34 +0530
Subject: [PATCH 08/30] fix: update quest details

---
 .../quest-form/quest-form.component.html      |  2 +-
 .../quest-form/quest-form.component.ts        | 30 +++++++++++++++++--
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/apps/shared-components/quest-form/quest-form.component.html b/apps/shared-components/quest-form/quest-form.component.html
index ed0ac43c7..0d29bc597 100644
--- a/apps/shared-components/quest-form/quest-form.component.html
+++ b/apps/shared-components/quest-form/quest-form.component.html
@@ -59,7 +59,7 @@
     <button
       nbButton
       status="primary"
-      [disabled]="!questForm.valid"
+      [disabled]="!questForm.valid || isLoading || !questForm.dirty"
       type="submit"
       (click)="createOrUpdateQuest()"
       fullWidth
diff --git a/apps/shared-components/quest-form/quest-form.component.ts b/apps/shared-components/quest-form/quest-form.component.ts
index 1d9f1c794..6d5890ed8 100644
--- a/apps/shared-components/quest-form/quest-form.component.ts
+++ b/apps/shared-components/quest-form/quest-form.component.ts
@@ -3,7 +3,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { EDbModels, IQuest, EQuestVisibility } from '@commudle/shared-models';
-import { QuestService } from '@commudle/shared-services';
+import { QuestService, ToastrService } from '@commudle/shared-services';
 
 @Component({
   selector: 'commudle-quest-form',
@@ -17,6 +17,7 @@ export class QuestFormComponent implements OnInit {
   parentType: EDbModels;
   EQuestVisibility = EQuestVisibility;
   questForm: FormGroup;
+  isLoading = false;
 
   tinyMCE = {
     min_height: 300,
@@ -59,6 +60,7 @@ export class QuestFormComponent implements OnInit {
     private fb: FormBuilder,
     private questService: QuestService,
     private datePipe: DatePipe,
+    private toastService: ToastrService,
   ) {
     this.questForm = this.fb.group({
       name: ['', Validators.required],
@@ -94,10 +96,32 @@ export class QuestFormComponent implements OnInit {
   }
 
   createQuest() {
-    this.questService.create(this.questForm.value, this.parentType, this.parentId).subscribe((quest: IQuest) => {});
+    this.isLoading = true;
+    this.questService.create(this.questForm.value, this.parentType, this.parentId).subscribe(
+      (quest: IQuest) => {
+        this.isLoading = false;
+        if (quest) {
+          this.toastService.successDialog('Quest created successfully');
+        }
+      },
+      () => {
+        this.isLoading = false;
+      },
+    );
   }
   updateQuest() {
-    this.questService.update(this.quest.id, this.questForm.value).subscribe((quest: IQuest) => {});
+    this.isLoading = true;
+    this.questService.update(this.quest.id, this.questForm.value).subscribe(
+      (quest: IQuest) => {
+        this.isLoading = false;
+        if (quest) {
+          this.toastService.successDialog('Quest updated successfully');
+        }
+      },
+      () => {
+        this.isLoading = false;
+      },
+    );
   }
 
   fetchQuestDetails() {

From 213e505d32cae42548a03aeb20167a7fe13e6979 Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Sat, 9 Nov 2024 13:36:41 +0530
Subject: [PATCH 09/30] feat: task component

---
 .../quest-control-panel-tasks.component.html  | 22 +++++++-
 .../quest-control-panel-tasks.component.scss  | 27 +++++++++
 .../quest-control-panel-tasks.component.ts    | 56 +++++++++++++++++++
 .../quests-control-panel.module.ts            |  4 ++
 4 files changed, 108 insertions(+), 1 deletion(-)

diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.html b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.html
index 42790655f..37fe9dd79 100644
--- a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.html
@@ -1 +1,21 @@
-<p>quest-control-panel-tasks works!</p>
+<nb-card>
+  <nb-card-header>Create Task</nb-card-header>
+  <nb-card-body>
+    <div class="heading-container">
+      <div class="heading">Select Your Medium</div>
+      <div class="sub-heading">Select the medium through which you want participants to perform the tasks</div>
+    </div>
+
+    <div class="social-media-cards">
+      <div *ngFor="let card of cards" class="social-media-card">
+        <div class="logo-title">
+          <div class="logo">
+            <fa-icon [icon]="card.logo"></fa-icon>
+          </div>
+          <div class="title">{{ card.name }}</div>
+        </div>
+        <div class="description">{{ card.description }}</div>
+      </div>
+    </div>
+  </nb-card-body>
+</nb-card>
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.scss b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.scss
index e69de29bb..588b5bb69 100644
--- a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.scss
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.scss
@@ -0,0 +1,27 @@
+.heading-container {
+  .heading {
+    @apply com-text-base com-font-semibold com-text-gray-800;
+  }
+  .sub-heading {
+    @apply com-text-sm com-font-medium com-text-gray-400;
+  }
+}
+
+.social-media-cards {
+  @apply com-grid com-grid-cols-3 com-gap-6 com-mt-4;
+  .social-media-card {
+    @apply com-p-4 com-h-32 com-border com-border-solid com-border-gray-200 com-rounded-xl com-cursor-pointer hover:com-shadow;
+    .logo-title {
+      @apply com-flex com-gap-3 com-items-center;
+      .logo {
+        @apply com-text-2xl;
+      }
+      .title {
+        @apply com-text-Yankees-Blue com-text-base com-font-semibold;
+      }
+    }
+    .description {
+      @apply com-text-xs com-font-normal com-my-3 com-text-gray-800;
+    }
+  }
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.ts
index e52b8db14..46a51f1ed 100644
--- a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.ts
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.ts
@@ -1,4 +1,13 @@
 import { Component, OnInit } from '@angular/core';
+import {
+  faDiscord,
+  faInstagram,
+  faLinkedin,
+  faTelegram,
+  faTwitter,
+  faXTwitter,
+  faYoutube,
+} from '@fortawesome/free-brands-svg-icons';
 
 @Component({
   selector: 'commudle-quest-control-panel-tasks',
@@ -6,6 +15,53 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./quest-control-panel-tasks.component.scss'],
 })
 export class QuestControlPanelTasksComponent implements OnInit {
+  cards = [
+    {
+      logo: faXTwitter,
+      name: 'Twitter',
+      description: 'Like a Tweet, retweet, follow or create memes with hashtag',
+    },
+    {
+      logo: faInstagram,
+      name: 'Instagram',
+      description: 'Like a Tweet, retweet, follow or create memes with hashtag',
+    },
+    {
+      logo: faDiscord,
+      name: 'Discord',
+      description: 'Like a Tweet, retweet, follow or create memes with hashtag',
+    },
+    {
+      logo: faTelegram,
+      name: 'Telegram',
+      description: 'Like a Tweet, retweet, follow or create memes with hashtag',
+    },
+    {
+      logo: faXTwitter,
+      name: 'URL Visits',
+      description: 'Like a Tweet, retweet, follow or create memes with hashtag',
+    },
+    {
+      logo: faLinkedin,
+      name: 'LinkedIn',
+      description: 'Like a Tweet, retweet, follow or create memes with hashtag',
+    },
+    {
+      logo: faTwitter,
+      name: 'Commudle Community',
+      description: 'Like a Tweet, retweet, follow or create memes with hashtag',
+    },
+    {
+      logo: faTwitter,
+      name: 'Commudle Channels',
+      description: 'Like a Tweet, retweet, follow or create memes with hashtag',
+    },
+    {
+      logo: faYoutube,
+      name: 'Youtube',
+      description: 'Like a Tweet, retweet, follow or create memes with hashtag',
+    },
+  ];
   constructor() {}
 
   ngOnInit() {}
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.module.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.module.ts
index 4ed3326a5..77db43e66 100644
--- a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.module.ts
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.module.ts
@@ -9,6 +9,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { QuestControlPanelComponent } from './components/quest-control-panel/quest-control-panel.component';
 import { QuestControlPanelTasksComponent } from './components/quest-control-panel-tasks/quest-control-panel-tasks.component';
 import { EditQuestComponent } from './components/edit-quest/edit-quest.component';
+import { NbCardModule } from '@commudle/theme';
 
 @NgModule({
   imports: [
@@ -19,6 +20,9 @@ import { EditQuestComponent } from './components/edit-quest/edit-quest.component
 
     // standalone
     SidebarComponent,
+
+    // Nebular
+    NbCardModule,
   ],
   declarations: [
     NewQuestFormComponent,

From 3800f2b8a8de44372911a83f22524cec49d75302 Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Tue, 19 Nov 2024 16:42:37 +0530
Subject: [PATCH 10/30] feat: list of task types

---
 .../community-control-panel.component.html    |  4 +-
 .../community-control-panel.component.ts      |  5 +-
 .../quest-control-panel-tasks.component.html  | 29 ++++++-
 .../quest-control-panel-tasks.component.scss  | 20 ++++-
 .../quest-control-panel-tasks.component.ts    | 86 ++++++-------------
 .../quests-control-panel.module.ts            |  4 +-
 libs/shared/models/src/lib/quest.model.ts     |  1 +
 libs/shared/services/src/index.ts             |  1 +
 .../services/src/lib/api-routes.constant.ts   |  4 +
 libs/shared/services/src/lib/task.service.ts  | 17 ++++
 10 files changed, 102 insertions(+), 69 deletions(-)
 create mode 100644 libs/shared/services/src/lib/task.service.ts

diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-control-panel/community-control-panel.component.html b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-control-panel/community-control-panel.component.html
index 0f7488db8..274d546a9 100644
--- a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-control-panel/community-control-panel.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-control-panel/community-control-panel.component.html
@@ -160,11 +160,11 @@ <h4>{{ community.name }}</h4>
               <span class="title">Members</span>
             </a>
             <a [routerLink]="['quests']" class="d-flex" routerLinkActive="active">
-              <nb-icon icon="star" status="success"></nb-icon>
+              <fa-icon [icon]="icons.faShapes"></fa-icon>
               <span class="title">Quests</span>
             </a>
             <a [routerLink]="['forms']" class="d-flex" routerLinkActive="active">
-              <fa-icon [icon]="faScroll"></fa-icon>
+              <fa-icon [icon]="icons.faScroll"></fa-icon>
               <span class="title">Forms</span>
             </a>
             <a [routerLink]="['pages']" class="d-flex com-relative" routerLinkActive="active">
diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-control-panel/community-control-panel.component.ts b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-control-panel/community-control-panel.component.ts
index b93647993..fd4a184a3 100644
--- a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-control-panel/community-control-panel.component.ts
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-control-panel/community-control-panel.component.ts
@@ -7,7 +7,7 @@ import { ICommunity } from 'apps/shared-models/community.model';
 import { EemailTypes } from 'apps/shared-models/enums/email_types.enum';
 import { SeoService } from 'apps/shared-services/seo.service';
 import { Subscription } from 'rxjs';
-import { faScroll } from '@fortawesome/free-solid-svg-icons';
+import { faScroll, faShapes } from '@fortawesome/free-solid-svg-icons';
 import { NotificationsStore } from 'apps/commudle-admin/src/app/feature-modules/notifications/store/notifications.store';
 import { GoogleTagManagerService } from 'apps/commudle-admin/src/app/services/google-tag-manager.service';
 import { ENotificationSenderTypes } from 'apps/shared-models/enums/notification_sender_types.enum';
@@ -27,7 +27,6 @@ export class CommunityControlPanelComponent implements OnInit, OnDestroy {
 
   notificationCount = 0;
   ENotificationSenderTypes = ENotificationSenderTypes;
-  faScroll = faScroll;
 
   subscriptions: Subscription[] = [];
   icons = {
@@ -35,6 +34,8 @@ export class CommunityControlPanelComponent implements OnInit, OnDestroy {
     faFileLines,
     faNewspaper,
     faMessage,
+    faShapes,
+    faScroll,
   };
   environment = environment;
   darkMode: boolean;
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.html b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.html
index 37fe9dd79..9397c73e7 100644
--- a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.html
@@ -7,15 +7,36 @@
     </div>
 
     <div class="social-media-cards">
-      <div *ngFor="let card of cards" class="social-media-card">
+      <div *ngFor="let taskType of questTaskType" class="social-media-card" (click)="openDialogBox(taskForm, taskType)">
         <div class="logo-title">
           <div class="logo">
-            <fa-icon [icon]="card.logo"></fa-icon>
+            <img [src]="taskType.logo_url" [alt]="taskType.platform_name" />
           </div>
-          <div class="title">{{ card.name }}</div>
+          <div class="title">{{ taskType.platform_name }}</div>
         </div>
-        <div class="description">{{ card.description }}</div>
+        <div class="description">{{ taskType.description }}</div>
       </div>
     </div>
   </nb-card-body>
 </nb-card>
+
+<ng-template #taskForm let-data let-ref="dialogRef">
+  <nb-card class="task-form">
+    <nb-card-header>
+      <div>{{ data.task ? 'Edit Task' : 'Create Task' }}</div>
+      <button ghost nbButton size="small" (click)="ref.close()">
+        <nb-icon icon="close"></nb-icon>
+      </button>
+    </nb-card-header>
+    <nb-card-body>
+      <div class="platform-container">
+        <img [src]="data.taskType.logo_url" [alt]="data.taskType.platform_name" />
+        <p>{{ data.taskType.platform_name }}</p>
+      </div>
+    </nb-card-body>
+    <nb-card-footer>
+      <button nbButton status="primary" (click)="ref.close()">Confirm</button>
+      <button nbButton status="danger" (click)="ref.close()">cancel</button>
+    </nb-card-footer>
+  </nb-card>
+</ng-template>
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.scss b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.scss
index 588b5bb69..8032afe9c 100644
--- a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.scss
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.scss
@@ -14,7 +14,10 @@
     .logo-title {
       @apply com-flex com-gap-3 com-items-center;
       .logo {
-        @apply com-text-2xl;
+        @apply com-h-6;
+        img {
+          @apply com-h-full;
+        }
       }
       .title {
         @apply com-text-Yankees-Blue com-text-base com-font-semibold;
@@ -25,3 +28,18 @@
     }
   }
 }
+
+.task-form {
+  @apply com-w-full md:com-w-[40dvw];
+  nb-card-header,
+  nb-card-footer {
+    @apply com-flex com-justify-between com-items-center;
+  }
+
+  .platform-container {
+    @apply com-flex com-gap-3 com-items-center com-bg-primary-100 com-w-full com-rounded-xl com-p-4;
+    p {
+      @apply com-text-base com-font-semibold com-text-primary-600 com-m-0;
+    }
+  }
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.ts
index 46a51f1ed..01463b6ed 100644
--- a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.ts
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.ts
@@ -1,13 +1,6 @@
-import { Component, OnInit } from '@angular/core';
-import {
-  faDiscord,
-  faInstagram,
-  faLinkedin,
-  faTelegram,
-  faTwitter,
-  faXTwitter,
-  faYoutube,
-} from '@fortawesome/free-brands-svg-icons';
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { TaskService } from '@commudle/shared-services';
+import { NbDialogService } from '@commudle/theme';
 
 @Component({
   selector: 'commudle-quest-control-panel-tasks',
@@ -15,54 +8,29 @@ import {
   styleUrls: ['./quest-control-panel-tasks.component.scss'],
 })
 export class QuestControlPanelTasksComponent implements OnInit {
-  cards = [
-    {
-      logo: faXTwitter,
-      name: 'Twitter',
-      description: 'Like a Tweet, retweet, follow or create memes with hashtag',
-    },
-    {
-      logo: faInstagram,
-      name: 'Instagram',
-      description: 'Like a Tweet, retweet, follow or create memes with hashtag',
-    },
-    {
-      logo: faDiscord,
-      name: 'Discord',
-      description: 'Like a Tweet, retweet, follow or create memes with hashtag',
-    },
-    {
-      logo: faTelegram,
-      name: 'Telegram',
-      description: 'Like a Tweet, retweet, follow or create memes with hashtag',
-    },
-    {
-      logo: faXTwitter,
-      name: 'URL Visits',
-      description: 'Like a Tweet, retweet, follow or create memes with hashtag',
-    },
-    {
-      logo: faLinkedin,
-      name: 'LinkedIn',
-      description: 'Like a Tweet, retweet, follow or create memes with hashtag',
-    },
-    {
-      logo: faTwitter,
-      name: 'Commudle Community',
-      description: 'Like a Tweet, retweet, follow or create memes with hashtag',
-    },
-    {
-      logo: faTwitter,
-      name: 'Commudle Channels',
-      description: 'Like a Tweet, retweet, follow or create memes with hashtag',
-    },
-    {
-      logo: faYoutube,
-      name: 'Youtube',
-      description: 'Like a Tweet, retweet, follow or create memes with hashtag',
-    },
-  ];
-  constructor() {}
+  // TODO: create model for task type
+  questTaskType;
 
-  ngOnInit() {}
+  constructor(private taskService: TaskService, private dialogService: NbDialogService) {}
+
+  ngOnInit() {
+    this.getTaskTypesIndex();
+  }
+
+  getTaskTypesIndex() {
+    this.taskService.getTaskTypesIndex().subscribe((res) => {
+      this.questTaskType = res;
+      console.log(this.questTaskType);
+    });
+  }
+
+  openDialogBox(dialog: TemplateRef<any>, taskType, task?, index?: number) {
+    this.dialogService.open(dialog, {
+      context: {
+        taskType: taskType,
+        task: task,
+        index: index,
+      },
+    });
+  }
 }
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.module.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.module.ts
index 77db43e66..3d926c07a 100644
--- a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.module.ts
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.module.ts
@@ -9,7 +9,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { QuestControlPanelComponent } from './components/quest-control-panel/quest-control-panel.component';
 import { QuestControlPanelTasksComponent } from './components/quest-control-panel-tasks/quest-control-panel-tasks.component';
 import { EditQuestComponent } from './components/edit-quest/edit-quest.component';
-import { NbCardModule } from '@commudle/theme';
+import { NbButtonModule, NbCardModule, NbIconModule } from '@commudle/theme';
 
 @NgModule({
   imports: [
@@ -23,6 +23,8 @@ import { NbCardModule } from '@commudle/theme';
 
     // Nebular
     NbCardModule,
+    NbIconModule,
+    NbButtonModule,
   ],
   declarations: [
     NewQuestFormComponent,
diff --git a/libs/shared/models/src/lib/quest.model.ts b/libs/shared/models/src/lib/quest.model.ts
index 264a2f853..73728a76d 100644
--- a/libs/shared/models/src/lib/quest.model.ts
+++ b/libs/shared/models/src/lib/quest.model.ts
@@ -14,4 +14,5 @@ export interface IQuest {
 export enum EQuestVisibility {
   PUBLIC = 'is_public',
   PRIVATE = 'is_private',
+  DRAFT = 'is_draft',
 }
diff --git a/libs/shared/services/src/index.ts b/libs/shared/services/src/index.ts
index 776a9722f..1de502b85 100644
--- a/libs/shared/services/src/index.ts
+++ b/libs/shared/services/src/index.ts
@@ -25,3 +25,4 @@ export * from './lib/help-dictionary.store';
 export * from './lib/external-user-auth-handler.service';
 export * from './lib/external-user-auth.service';
 export * from './lib/quest.service';
+export * from './lib/task.service';
diff --git a/libs/shared/services/src/lib/api-routes.constant.ts b/libs/shared/services/src/lib/api-routes.constant.ts
index e9e08bca7..976d794b5 100644
--- a/libs/shared/services/src/lib/api-routes.constant.ts
+++ b/libs/shared/services/src/lib/api-routes.constant.ts
@@ -966,4 +966,8 @@ export const API_ROUTES = {
       SHOW: 'api/v2/quests/public/show', //GET
     },
   },
+
+  TASKS: {
+    TASK_TYPES_INDEX: 'api/v2/tasks/task_types_index', //GET
+  },
 };
diff --git a/libs/shared/services/src/lib/task.service.ts b/libs/shared/services/src/lib/task.service.ts
new file mode 100644
index 000000000..36eaef214
--- /dev/null
+++ b/libs/shared/services/src/lib/task.service.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { API_ROUTES } from './api-routes.constant';
+import { BaseApiService } from './base-api.service';
+import { HttpClient, HttpParams } from '@angular/common/http';
+@Injectable({
+  providedIn: 'root',
+})
+export class TaskService {
+  constructor(private http: HttpClient, private baseApiService: BaseApiService) {}
+
+  getTaskTypesIndex(): Observable<unknown> {
+    return this.http.get<unknown>(this.baseApiService.getRoute(API_ROUTES.TASKS.TASK_TYPES_INDEX));
+  }
+
+  // PUBLIC API
+}

From 986cb0749f8b3417cf7679d3b2da03857ff416c8 Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Wed, 20 Nov 2024 11:56:28 +0530
Subject: [PATCH 11/30] feat: add task card, create task, index task

---
 .../quest-control-panel-tasks.component.html  | 128 +++++++++++++++++-
 .../quest-control-panel-tasks.component.scss  |  50 ++++++-
 .../quest-control-panel-tasks.component.ts    |  60 +++++++-
 .../quests-control-panel.module.ts            |   9 +-
 libs/shared/models/src/index.ts               |   2 +
 .../models/src/lib/quest-task-type.model.ts   |  13 ++
 libs/shared/models/src/lib/task.model.ts      |  11 ++
 .../services/src/lib/api-routes.constant.ts   |   8 ++
 libs/shared/services/src/lib/task.service.ts  |  25 +++-
 9 files changed, 294 insertions(+), 12 deletions(-)
 create mode 100644 libs/shared/models/src/lib/quest-task-type.model.ts
 create mode 100644 libs/shared/models/src/lib/task.model.ts

diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.html b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.html
index 9397c73e7..8b7b465db 100644
--- a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.html
@@ -7,7 +7,11 @@
     </div>
 
     <div class="social-media-cards">
-      <div *ngFor="let taskType of questTaskType" class="social-media-card" (click)="openDialogBox(taskForm, taskType)">
+      <div
+        *ngFor="let taskType of questTaskType"
+        class="social-media-card"
+        (click)="openDialogBox(taskFormDialogBox, taskType)"
+      >
         <div class="logo-title">
           <div class="logo">
             <img [src]="taskType.logo_url" [alt]="taskType.platform_name" />
@@ -20,7 +24,35 @@
   </nb-card-body>
 </nb-card>
 
-<ng-template #taskForm let-data let-ref="dialogRef">
+<nb-card>
+  <nb-card-header>
+    <p>Tasks</p>
+    <p>Every Task you’ve created for this quest</p>
+  </nb-card-header>
+  <nb-card-body>
+    <div class="buttons">
+      <button nbButton shape="round">Active Tasks</button>
+      <button nbButton shape="round">Inactive Tasks</button>
+    </div>
+
+    <div class="tasks">
+      <nb-card *ngFor="let task of tasks" class="task">
+        <nb-card-body>
+          <div class="title-container">
+            <img [src]="task.quest_task_type.logo_url" />
+            <p class="title">{{ task.name }}</p>
+          </div>
+          <p>{{ task.description }}</p>
+          <div class="rewards">
+            <span>{{ task.reward_points }} Reward Points</span>
+          </div>
+        </nb-card-body>
+      </nb-card>
+    </div>
+  </nb-card-body>
+</nb-card>
+
+<ng-template #taskFormDialogBox let-data let-ref="dialogRef">
   <nb-card class="task-form">
     <nb-card-header>
       <div>{{ data.task ? 'Edit Task' : 'Create Task' }}</div>
@@ -33,9 +65,99 @@
         <img [src]="data.taskType.logo_url" [alt]="data.taskType.platform_name" />
         <p>{{ data.taskType.platform_name }}</p>
       </div>
+      <form [formGroup]="taskForm">
+        <nb-accordion>
+          <nb-accordion-item expanded="true">
+            <nb-accordion-item-header>
+              <span class="heading">Type of task</span>
+              <span class="sub-heading">Select Type of task and other information respectively</span>
+            </nb-accordion-item-header>
+            <nb-accordion-item-body>
+              <!-- quest_task_type_id -->
+              <div>
+                <label for="quest_task_type_id">Select an action <span class="required"> *</span></label>
+                <div class="select">
+                  <select
+                    formControlName="quest_task_type_id"
+                    [ngClass]="{
+                      'com-text-Cadet-Grey': taskForm.controls['quest_task_type_id'].value === 0
+                    }"
+                  >
+                    <option [ngValue]="0" selected disabled>Type</option>
+                    <option *ngFor="let platformType of selectedTaskType.platform_types" [value]="platformType.id">
+                      {{ platformType.name | capitalizeAndRemoveUnderscore }}
+                    </option>
+                  </select>
+                </div>
+              </div>
+              <br />
+
+              <!-- url -->
+              <div>
+                <label for="url">Add Your URL <span class="required"> *</span></label>
+                <input type="url" nbInput formControlName="url" placeholder="URL" fullWidth />
+              </div>
+            </nb-accordion-item-body>
+          </nb-accordion-item>
+        </nb-accordion>
+        <nb-accordion>
+          <nb-accordion-item>
+            <nb-accordion-item-header>
+              <span class="heading">Basic Information</span>
+              <span class="sub-heading">Add basic information such as title, description, rewards</span>
+            </nb-accordion-item-header>
+            <nb-accordion-item-body>
+              <!-- name -->
+              <div>
+                <label for="name">Task Title <span class="required"> *</span></label>
+                <input type="text" nbInput formControlName="name" placeholder="Title" fullWidth />
+              </div>
+              <br />
+
+              <!-- description -->
+              <div>
+                <label for="description">Description <span class="required"> *</span></label>
+                <textarea
+                  nbInput
+                  formControlName="description"
+                  fullWidth
+                  placeholder="Description of you task"
+                ></textarea>
+              </div>
+              <br />
+
+              <div>
+                <label for="reward_points">Reward Points <span class="required"> *</span></label>
+                <div class="select">
+                  <select
+                    formControlName="reward_points"
+                    [ngClass]="{
+                      'com-text-Cadet-Grey': taskForm.controls['reward_points'].value === 0
+                    }"
+                  >
+                    <option [ngValue]="0" selected disabled>1-5</option>
+                    <option [ngValue]="5">5</option>
+                    <option [ngValue]="4">4</option>
+                    <option [ngValue]="3">3</option>
+                    <option [ngValue]="2">2</option>
+                    <option [ngValue]="1">1</option>
+                  </select>
+                </div>
+              </div>
+            </nb-accordion-item-body>
+          </nb-accordion-item>
+        </nb-accordion>
+      </form>
     </nb-card-body>
     <nb-card-footer>
-      <button nbButton status="primary" (click)="ref.close()">Confirm</button>
+      <button
+        nbButton
+        status="primary"
+        [disabled]="!taskForm.valid"
+        (click)="data.task ? updateTask() : createTask(); ref.close()"
+      >
+        Confirm
+      </button>
       <button nbButton status="danger" (click)="ref.close()">cancel</button>
     </nb-card-footer>
   </nb-card>
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.scss b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.scss
index 8032afe9c..46684ca5f 100644
--- a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.scss
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.scss
@@ -29,8 +29,25 @@
   }
 }
 
+.tasks {
+  @apply com-grid com-grid-cols-1 md:com-grid-cols-3;
+  .task {
+    .title-container {
+      @apply com-flex com-gap-2 com-items-center;
+      img {
+        @apply com-h-6;
+      }
+      .title {
+        @apply com-text-base com-font-medium com-my-0;
+      }
+    }
+    .rewards {
+      @apply com-w-full com-border com-border-solid com-border-Bright-Gray com-rounded-lg com-bg-gray-50 com-text-center com-text-fuchsia-600 com-py-1;
+    }
+  }
+}
 .task-form {
-  @apply com-w-full md:com-w-[40dvw];
+  @apply com-w-full md:com-w-[40dvw] com-max-h-[90dvh];
   nb-card-header,
   nb-card-footer {
     @apply com-flex com-justify-between com-items-center;
@@ -41,5 +58,36 @@
     p {
       @apply com-text-base com-font-semibold com-text-primary-600 com-m-0;
     }
+    img {
+      @apply com-h-6;
+    }
+  }
+  form {
+    .required {
+      @apply com-text-red-500;
+    }
+    nb-accordion {
+      @apply com-my-4 com-shadow-none com-border com-border-solid com-border-Bright-Gray com-rounded-xl;
+      nb-accordion-item {
+        @apply com-rounded-xl;
+        nb-accordion-item-header {
+          @apply com-flex-col com-items-start;
+          .heading {
+            @apply com-text-sm com-font-semibold com-inline-block;
+          }
+
+          .sub-heading {
+            @apply com-text-sm com-font-normal;
+          }
+        }
+      }
+    }
+
+    .select {
+      @apply com-flex com-items-center com-gap-1 com-h-8 com-p-1 com-text-sm com-rounded-[4px] com-cursor-pointer com-bg-[#F6F9FC] hover:com-bg-[#eef2f7]/50  com-border com-border-solid com-border-[#E4E9F2]  com-w-full;
+      select {
+        @apply com-bg-[#F6F9FC] hover:com-bg-[#eef2f7]/50 com-cursor-pointer com-border-0 com-w-full;
+      }
+    }
   }
 }
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.ts
index 01463b6ed..f63176f5b 100644
--- a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.ts
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit, TemplateRef } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { IQuest, IQuestTaskType, ITask } from '@commudle/shared-models';
 import { TaskService } from '@commudle/shared-services';
 import { NbDialogService } from '@commudle/theme';
 
@@ -8,23 +11,62 @@ import { NbDialogService } from '@commudle/theme';
   styleUrls: ['./quest-control-panel-tasks.component.scss'],
 })
 export class QuestControlPanelTasksComponent implements OnInit {
-  // TODO: create model for task type
-  questTaskType;
+  questTaskType: IQuestTaskType[];
+  taskForm: FormGroup;
+  selectedTaskType: IQuestTaskType;
+  quest: IQuest;
+  tasks: ITask[];
 
-  constructor(private taskService: TaskService, private dialogService: NbDialogService) {}
+  constructor(
+    private taskService: TaskService,
+    private dialogService: NbDialogService,
+    private fb: FormBuilder,
+    private activatedRoute: ActivatedRoute,
+  ) {
+    this.taskForm = this.fb.group({
+      name: ['', Validators.required],
+      description: ['', Validators.required],
+      url: ['', Validators.required],
+      reward_points: [0, [Validators.required, Validators.min(1)]],
+      other_rewards: [''],
+      quest_task_type_id: [0, [Validators.required, Validators.min(1)]],
+    });
+  }
 
   ngOnInit() {
+    this.activatedRoute.parent.data.subscribe((data: { quest: IQuest }) => {
+      this.quest = data.quest;
+      this.getTasks();
+    });
     this.getTaskTypesIndex();
   }
 
+  getTasks() {
+    this.taskService.index(this.quest.id).subscribe((res) => {
+      this.tasks = res;
+    });
+  }
+
   getTaskTypesIndex() {
     this.taskService.getTaskTypesIndex().subscribe((res) => {
       this.questTaskType = res;
-      console.log(this.questTaskType);
     });
   }
 
-  openDialogBox(dialog: TemplateRef<any>, taskType, task?, index?: number) {
+  openDialogBox(dialog: TemplateRef<any>, taskType: IQuestTaskType, task?: ITask, index?: number) {
+    if (taskType) {
+      this.selectedTaskType = taskType;
+    }
+    if (task) {
+      this.taskForm.patchValue({
+        name: task.name,
+        description: task.description,
+        url: task.url,
+        rewards_points: task.reward_points,
+        other_rewards: task.other_rewards,
+        quest_task_type_id: task.quest_task_type.id,
+      });
+    }
     this.dialogService.open(dialog, {
       context: {
         taskType: taskType,
@@ -33,4 +75,12 @@ export class QuestControlPanelTasksComponent implements OnInit {
       },
     });
   }
+
+  createTask() {
+    this.taskService.createTask(this.quest.id, this.taskForm.value).subscribe((res: ITask) => {
+      this.tasks.unshift(res);
+    });
+  }
+
+  updateTask() {}
 }
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.module.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.module.ts
index 3d926c07a..25ecb2661 100644
--- a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.module.ts
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/quests-control-panel.module.ts
@@ -9,7 +9,9 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { QuestControlPanelComponent } from './components/quest-control-panel/quest-control-panel.component';
 import { QuestControlPanelTasksComponent } from './components/quest-control-panel-tasks/quest-control-panel-tasks.component';
 import { EditQuestComponent } from './components/edit-quest/edit-quest.component';
-import { NbButtonModule, NbCardModule, NbIconModule } from '@commudle/theme';
+import { NbButtonModule, NbCardModule, NbIconModule, NbAccordionModule, NbInputModule } from '@commudle/theme';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { SharedPipesModule } from 'apps/shared-pipes/pipes.module';
 
 @NgModule({
   imports: [
@@ -17,6 +19,9 @@ import { NbButtonModule, NbCardModule, NbIconModule } from '@commudle/theme';
     QuestsControlPanelRoutes,
     SharedComponentsModule,
     FontAwesomeModule,
+    FormsModule,
+    ReactiveFormsModule,
+    SharedPipesModule,
 
     // standalone
     SidebarComponent,
@@ -25,6 +30,8 @@ import { NbButtonModule, NbCardModule, NbIconModule } from '@commudle/theme';
     NbCardModule,
     NbIconModule,
     NbButtonModule,
+    NbAccordionModule,
+    NbInputModule,
   ],
   declarations: [
     NewQuestFormComponent,
diff --git a/libs/shared/models/src/index.ts b/libs/shared/models/src/index.ts
index 1cc528f10..e1d617de0 100644
--- a/libs/shared/models/src/index.ts
+++ b/libs/shared/models/src/index.ts
@@ -42,3 +42,5 @@ export * from './lib/hackathon-user-response.model';
 export * from './lib/activity-feed.model';
 export * from './lib/external-user-auth.model';
 export * from './lib/quest.model';
+export * from './lib/task.model';
+export * from './lib/quest-task-type.model';
diff --git a/libs/shared/models/src/lib/quest-task-type.model.ts b/libs/shared/models/src/lib/quest-task-type.model.ts
new file mode 100644
index 000000000..acc7ea3fa
--- /dev/null
+++ b/libs/shared/models/src/lib/quest-task-type.model.ts
@@ -0,0 +1,13 @@
+export interface IQuestTaskType {
+  id: number;
+  platform_name: string;
+  logo_url: string;
+  description: string;
+  platform_type: string;
+  platform_types: [
+    {
+      id: number;
+      name: string;
+    },
+  ];
+}
diff --git a/libs/shared/models/src/lib/task.model.ts b/libs/shared/models/src/lib/task.model.ts
new file mode 100644
index 000000000..8e07645d4
--- /dev/null
+++ b/libs/shared/models/src/lib/task.model.ts
@@ -0,0 +1,11 @@
+import { IQuestTaskType } from './quest-task-type.model';
+
+export interface ITask {
+  id: number;
+  name: string;
+  description: string;
+  reward_points: number;
+  other_rewards: string;
+  url: string;
+  quest_task_type: IQuestTaskType;
+}
diff --git a/libs/shared/services/src/lib/api-routes.constant.ts b/libs/shared/services/src/lib/api-routes.constant.ts
index 976d794b5..43b71624e 100644
--- a/libs/shared/services/src/lib/api-routes.constant.ts
+++ b/libs/shared/services/src/lib/api-routes.constant.ts
@@ -968,6 +968,14 @@ export const API_ROUTES = {
   },
 
   TASKS: {
+    CREATE: 'api/v2/tasks', //POST
+    INDEX: 'api/v2/tasks', //GET
+    SHOW: 'api/v2/tasks/show', //GET
+    UPDATE: 'api/v2/tasks', //PUT
     TASK_TYPES_INDEX: 'api/v2/tasks/task_types_index', //GET
+    PUBLIC: {
+      INDEX: 'api/v2/tasks/public', //GET
+      SHOW: 'api/v2/tasks/public/show', //GET
+    },
   },
 };
diff --git a/libs/shared/services/src/lib/task.service.ts b/libs/shared/services/src/lib/task.service.ts
index 36eaef214..98a8cc0fc 100644
--- a/libs/shared/services/src/lib/task.service.ts
+++ b/libs/shared/services/src/lib/task.service.ts
@@ -3,14 +3,35 @@ import { Observable } from 'rxjs';
 import { API_ROUTES } from './api-routes.constant';
 import { BaseApiService } from './base-api.service';
 import { HttpClient, HttpParams } from '@angular/common/http';
+import { IQuestTaskType, ITask } from '@commudle/shared-models';
 @Injectable({
   providedIn: 'root',
 })
 export class TaskService {
   constructor(private http: HttpClient, private baseApiService: BaseApiService) {}
 
-  getTaskTypesIndex(): Observable<unknown> {
-    return this.http.get<unknown>(this.baseApiService.getRoute(API_ROUTES.TASKS.TASK_TYPES_INDEX));
+  createTask(questId: number, formData): Observable<ITask> {
+    const params = new HttpParams().set('quest_id', questId);
+    return this.http.post<ITask>(
+      this.baseApiService.getRoute(API_ROUTES.TASKS.CREATE),
+      {
+        task: formData,
+      },
+      {
+        params,
+      },
+    );
+  }
+
+  index(questId: number): Observable<ITask[]> {
+    const params = new HttpParams().set('quest_id', questId);
+    return this.http.get<ITask[]>(this.baseApiService.getRoute(API_ROUTES.TASKS.INDEX), {
+      params,
+    });
+  }
+
+  getTaskTypesIndex(): Observable<IQuestTaskType[]> {
+    return this.http.get<IQuestTaskType[]>(this.baseApiService.getRoute(API_ROUTES.TASKS.TASK_TYPES_INDEX));
   }
 
   // PUBLIC API

From 953de122fd5e08342072861c977605c4bb15f672 Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Wed, 20 Nov 2024 12:49:26 +0530
Subject: [PATCH 12/30] feat: quest public page

---
 .../src/app/app-routing.module.ts             |  5 ++++
 .../community-quest.component.html            |  2 +-
 .../public-quest-homepage.component.html      |  1 +
 .../public-quest-homepage.component.scss      |  0
 .../public-quest-homepage.component.spec.ts   | 27 +++++++++++++++++++
 .../public-quest-homepage.component.ts        | 12 +++++++++
 .../public-quests/public-quests.module.ts     |  3 ++-
 .../public-quests/public-quests.routing.ts    | 13 +++++++++
 .../resolver/public-quest-details.resolver.ts | 19 +++++++++++++
 9 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
 create mode 100644 apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss
 create mode 100644 apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.spec.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.routing.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/public-quests/resolver/public-quest-details.resolver.ts

diff --git a/apps/commudle-admin/src/app/app-routing.module.ts b/apps/commudle-admin/src/app/app-routing.module.ts
index 50c3d2485..ab2e24a50 100644
--- a/apps/commudle-admin/src/app/app-routing.module.ts
+++ b/apps/commudle-admin/src/app/app-routing.module.ts
@@ -142,6 +142,11 @@ const routes: Routes = [
     loadChildren: () =>
       import('./feature-modules/public-hackathon/public-hackathon.module').then((m) => m.PublicHackathonModule),
   },
+  {
+    path: 'communities/:community_id/quests/:quest_id',
+    loadChildren: () =>
+      import('./feature-modules/public-quests/public-quests.module').then((m) => m.PublicQuestsModule),
+  },
   {
     path: 'communities/:community_id/channels',
     loadChildren: () =>
diff --git a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html
index 8b24321eb..3afc6ce7b 100644
--- a/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/community-control-panel/components/community-quest/community-quest.component.html
@@ -33,7 +33,7 @@
           <a [routerLink]="['/admin', 'communities', communityId, 'quest-dashboard', quest.slug]">
             <button nbButton status="primary" size="tiny">Dashboard</button>
           </a>
-          <a [routerLink]="['/communities', communityId, 'hackathons', quest.slug]" target="_blank">
+          <a [routerLink]="['/communities', communityId, 'quests', quest.slug]" target="_blank">
             <button nbButton status="primary" size="tiny">
               <fa-icon [icon]="icons.faArrowUpRightFromSquare"></fa-icon>
               &nbsp;Public Page
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
new file mode 100644
index 000000000..b94972db1
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
@@ -0,0 +1 @@
+<p>public-quest-homepage works!</p>
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.spec.ts b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.spec.ts
new file mode 100644
index 000000000..87d654249
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { PublicQuestHomepageComponent } from './public-quest-homepage.component';
+
+describe('PublicQuestHomepageComponent', () => {
+  let component: PublicQuestHomepageComponent;
+  let fixture: ComponentFixture<PublicQuestHomepageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [PublicQuestHomepageComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PublicQuestHomepageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
new file mode 100644
index 000000000..97aaba2a5
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'commudle-public-quest-homepage',
+  templateUrl: './public-quest-homepage.component.html',
+  styleUrls: ['./public-quest-homepage.component.scss'],
+})
+export class PublicQuestHomepageComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.module.ts b/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.module.ts
index f15a6a7ef..9ad68e89f 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.module.ts
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.module.ts
@@ -1,8 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { PublicQuestHomepageComponent } from './components/public-quest-homepage/public-quest-homepage.component';
 
 @NgModule({
   imports: [CommonModule],
-  declarations: [],
+  declarations: [PublicQuestHomepageComponent],
 })
 export class PublicQuestsModule {}
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.routing.ts b/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.routing.ts
new file mode 100644
index 000000000..75dd8f74b
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.routing.ts
@@ -0,0 +1,13 @@
+import { Routes, RouterModule } from '@angular/router';
+import { PublicQuestHomepageComponent } from './components/public-quest-homepage/public-quest-homepage.component';
+import { PublicQuestDetailsResolver } from 'apps/commudle-admin/src/app/feature-modules/public-quests/resolver/public-quest-details.resolver';
+
+const routes: Routes = [
+  {
+    path: ':quest_id',
+    component: PublicQuestHomepageComponent,
+    resolve: { quest: PublicQuestDetailsResolver },
+  },
+];
+
+export const PublicQuestsRoutes = RouterModule.forChild(routes);
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/resolver/public-quest-details.resolver.ts b/apps/commudle-admin/src/app/feature-modules/public-quests/resolver/public-quest-details.resolver.ts
new file mode 100644
index 000000000..aa8e14c86
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/resolver/public-quest-details.resolver.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { Observable } from 'rxjs';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { IQuest } from '@commudle/shared-models';
+import { API_ROUTES, BaseApiService } from '@commudle/shared-services';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PublicQuestDetailsResolver implements Resolve<IQuest> {
+  constructor(private http: HttpClient, private apiRoutesService: BaseApiService) {}
+
+  resolve(route: ActivatedRouteSnapshot): Observable<IQuest> {
+    const questId = route.parent.params.quest_id || route.params.quest_id;
+    const params = new HttpParams().set('quest_id', questId);
+    return this.http.get<IQuest>(this.apiRoutesService.getRoute(API_ROUTES.QUESTS.PUBLIC.SHOW), { params });
+  }
+}

From c163bdaefdc9ae47f2ffcf16a94083feb861d9ff Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Wed, 20 Nov 2024 18:30:22 +0530
Subject: [PATCH 13/30] feat: public task list

---
 .../public-quest-homepage.component.html      | 34 ++++++++++++++++++-
 .../public-quest-homepage.component.scss      | 19 +++++++++++
 .../public-quest-homepage.component.ts        | 27 +++++++++++++--
 .../public-quests/public-quests.module.ts     |  5 ++-
 .../public-quests/public-quests.routing.ts    |  2 +-
 libs/shared/models/src/lib/quest.model.ts     |  3 ++
 libs/shared/services/src/lib/task.service.ts  |  7 ++++
 7 files changed, 92 insertions(+), 5 deletions(-)

diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
index b94972db1..6d19a334f 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
@@ -1 +1,33 @@
-<p>public-quest-homepage works!</p>
+<div class="com-bg-white">
+  <div class="base-layout">
+    <div class="container">
+      <div class="two-column-layout wide">
+        <div class="main-column">
+          <div class="community-badge" *ngIf="quest.community">
+            <app-community-badge [community]="quest.community"></app-community-badge>
+          </div>
+          <h1>{{ quest.name }}</h1>
+          <div>
+            <div class="status"></div>
+            <div class="dates">
+              <div class="start-date">
+                <span class="date">{{ quest.start_date | date : "d'th' MMM" }}</span>
+                <span> | </span>
+                <span class="time">{{ quest.start_date | date : 'hh:mm a' }}</span>
+              </div>
+              <fa-icon [icon]="icons.faArrowRight"></fa-icon>
+              <div class="end-date">
+                <span class="date">{{ quest.end_date | date : "d'th' MMM" }}</span>
+                <span> | </span>
+                <span class="time">{{ quest.end_date | date : 'hh:mm a' }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="task-cards"></div>
+        </div>
+        <div class="right-column"></div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss
index e69de29bb..4806ffa37 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss
@@ -0,0 +1,19 @@
+.community-badge {
+  @apply com-mt-4;
+}
+
+.dates {
+  @apply com-flex com-gap-2 com-items-center;
+  .start-date {
+    @apply com-border-2 com-border-solid com-border-Bright-Gray com-rounded-tl-2xl com-rounded-bl-2xl com-rounded-tr-lg com-rounded-br-lg com-w-max com-px-2 com-py-1;
+  }
+  .end-date {
+    @apply com-border-2 com-border-solid com-border-Bright-Gray com-rounded-tl-lg com-rounded-bl-lg com-rounded-tr-2xl com-rounded-br-2xl com-w-max com-px-2 com-py-1;
+  }
+  .date {
+    @apply com-font-semibold;
+  }
+  .time {
+    @apply com-text-gray-500;
+  }
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
index 97aaba2a5..15205efaf 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
@@ -1,4 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { IQuest, ITask } from '@commudle/shared-models';
+import { TaskService } from '@commudle/shared-services';
+import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
+import moment from 'moment';
 
 @Component({
   selector: 'commudle-public-quest-homepage',
@@ -6,7 +11,25 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./public-quest-homepage.component.scss'],
 })
 export class PublicQuestHomepageComponent implements OnInit {
-  constructor() {}
+  quest: IQuest;
+  moment = moment;
+  tasks: ITask[];
+  icons = {
+    faArrowRight,
+  };
 
-  ngOnInit() {}
+  constructor(private activatedRoute: ActivatedRoute, private taskService: TaskService) {}
+
+  ngOnInit() {
+    this.activatedRoute.data.subscribe((data) => {
+      this.quest = data.quest;
+      this.getTask();
+    });
+  }
+
+  getTask() {
+    this.taskService.pIndex(this.quest.id).subscribe((task) => {
+      this.tasks = task;
+    });
+  }
 }
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.module.ts b/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.module.ts
index 9ad68e89f..fcdb86f04 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.module.ts
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.module.ts
@@ -1,9 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PublicQuestHomepageComponent } from './components/public-quest-homepage/public-quest-homepage.component';
+import { PublicQuestsRoutes } from './public-quests.routing';
+import { SharedComponentsModule } from 'apps/shared-components/shared-components.module';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, PublicQuestsRoutes, SharedComponentsModule, FontAwesomeModule],
   declarations: [PublicQuestHomepageComponent],
 })
 export class PublicQuestsModule {}
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.routing.ts b/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.routing.ts
index 75dd8f74b..23c136aec 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.routing.ts
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.routing.ts
@@ -4,7 +4,7 @@ import { PublicQuestDetailsResolver } from 'apps/commudle-admin/src/app/feature-
 
 const routes: Routes = [
   {
-    path: ':quest_id',
+    path: '',
     component: PublicQuestHomepageComponent,
     resolve: { quest: PublicQuestDetailsResolver },
   },
diff --git a/libs/shared/models/src/lib/quest.model.ts b/libs/shared/models/src/lib/quest.model.ts
index 73728a76d..30b9cde7b 100644
--- a/libs/shared/models/src/lib/quest.model.ts
+++ b/libs/shared/models/src/lib/quest.model.ts
@@ -1,3 +1,5 @@
+import { ICommunity } from './community.model';
+
 export interface IQuest {
   id: number;
   name: string;
@@ -9,6 +11,7 @@ export interface IQuest {
   slug: string;
   tasks_count: number;
   participants_count: number;
+  community: ICommunity;
 }
 
 export enum EQuestVisibility {
diff --git a/libs/shared/services/src/lib/task.service.ts b/libs/shared/services/src/lib/task.service.ts
index 98a8cc0fc..7d7249957 100644
--- a/libs/shared/services/src/lib/task.service.ts
+++ b/libs/shared/services/src/lib/task.service.ts
@@ -35,4 +35,11 @@ export class TaskService {
   }
 
   // PUBLIC API
+
+  pIndex(questId: number): Observable<ITask[]> {
+    const params = new HttpParams().set('quest_id', questId);
+    return this.http.get<ITask[]>(this.baseApiService.getRoute(API_ROUTES.TASKS.PUBLIC.INDEX), {
+      params,
+    });
+  }
 }

From 3ad2c71459d081754d413a69fc69e087920cdfb4 Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Thu, 21 Nov 2024 18:51:38 +0530
Subject: [PATCH 14/30] feat: add task list in public side

---
 .../public-quest-homepage.component.html      |  6 +++-
 .../public-quest-homepage.component.scss      |  4 +++
 .../quest-control-panel-tasks.component.html  | 15 ++-------
 .../quest-control-panel-tasks.component.scss  | 15 +--------
 .../quest-control-panel-tasks.component.ts    | 15 ++++++++-
 .../quest-task-card.component.html            | 31 +++++++++++++++++++
 .../quest-task-card.component.scss            | 22 +++++++++++++
 .../quest-task-card.component.spec.ts         | 27 ++++++++++++++++
 .../quest-task-card.component.ts              | 24 ++++++++++++++
 .../shared-components.module.ts               |  5 +++
 10 files changed, 136 insertions(+), 28 deletions(-)
 create mode 100644 apps/shared-components/quest-task-card/quest-task-card.component.html
 create mode 100644 apps/shared-components/quest-task-card/quest-task-card.component.scss
 create mode 100644 apps/shared-components/quest-task-card/quest-task-card.component.spec.ts
 create mode 100644 apps/shared-components/quest-task-card/quest-task-card.component.ts

diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
index 6d19a334f..e874a7a38 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
@@ -24,7 +24,11 @@ <h1>{{ quest.name }}</h1>
             </div>
           </div>
 
-          <div class="task-cards"></div>
+          <div class="task-cards">
+            <div *ngFor="let task of tasks">
+              <commudle-quest-task-card [task]="task"></commudle-quest-task-card>
+            </div>
+          </div>
         </div>
         <div class="right-column"></div>
       </div>
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss
index 4806ffa37..ce0b6a333 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss
@@ -17,3 +17,7 @@
     @apply com-text-gray-500;
   }
 }
+
+.task-cards {
+  @apply com-grid com-grid-cols-2;
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.html b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.html
index 8b7b465db..4574db864 100644
--- a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.html
@@ -36,18 +36,9 @@
     </div>
 
     <div class="tasks">
-      <nb-card *ngFor="let task of tasks" class="task">
-        <nb-card-body>
-          <div class="title-container">
-            <img [src]="task.quest_task_type.logo_url" />
-            <p class="title">{{ task.name }}</p>
-          </div>
-          <p>{{ task.description }}</p>
-          <div class="rewards">
-            <span>{{ task.reward_points }} Reward Points</span>
-          </div>
-        </nb-card-body>
-      </nb-card>
+      <div *ngFor="let task of tasks">
+        <commudle-quest-task-card [task]="task" [adminPage]="true"></commudle-quest-task-card>
+      </div>
     </div>
   </nb-card-body>
 </nb-card>
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.scss b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.scss
index 46684ca5f..97231b76f 100644
--- a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.scss
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.scss
@@ -31,21 +31,8 @@
 
 .tasks {
   @apply com-grid com-grid-cols-1 md:com-grid-cols-3;
-  .task {
-    .title-container {
-      @apply com-flex com-gap-2 com-items-center;
-      img {
-        @apply com-h-6;
-      }
-      .title {
-        @apply com-text-base com-font-medium com-my-0;
-      }
-    }
-    .rewards {
-      @apply com-w-full com-border com-border-solid com-border-Bright-Gray com-rounded-lg com-bg-gray-50 com-text-center com-text-fuchsia-600 com-py-1;
-    }
-  }
 }
+
 .task-form {
   @apply com-w-full md:com-w-[40dvw] com-max-h-[90dvh];
   nb-card-header,
diff --git a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.ts b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.ts
index f63176f5b..88b44f81c 100644
--- a/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.ts
+++ b/apps/commudle-admin/src/app/feature-modules/quests-control-panel/components/quest-control-panel-tasks/quest-control-panel-tasks.component.ts
@@ -62,10 +62,12 @@ export class QuestControlPanelTasksComponent implements OnInit {
         name: task.name,
         description: task.description,
         url: task.url,
-        rewards_points: task.reward_points,
+        reward_points: task.reward_points,
         other_rewards: task.other_rewards,
         quest_task_type_id: task.quest_task_type.id,
       });
+    } else {
+      this.resetForm();
     }
     this.dialogService.open(dialog, {
       context: {
@@ -76,6 +78,17 @@ export class QuestControlPanelTasksComponent implements OnInit {
     });
   }
 
+  resetForm() {
+    this.taskForm.patchValue({
+      name: '',
+      description: '',
+      url: '',
+      reward_points: 0,
+      other_rewards: '',
+      quest_task_type_id: 0,
+    });
+  }
+
   createTask() {
     this.taskService.createTask(this.quest.id, this.taskForm.value).subscribe((res: ITask) => {
       this.tasks.unshift(res);
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.html b/apps/shared-components/quest-task-card/quest-task-card.component.html
new file mode 100644
index 000000000..bebd5e9f4
--- /dev/null
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.html
@@ -0,0 +1,31 @@
+<nb-card class="task" (click)="openTaskPopup()" [ngClass]="{ 'admin-properties': adminPage }">
+  <nb-card-body>
+    <div class="title-container">
+      <img [src]="task.quest_task_type.logo_url" />
+      <p class="title">{{ task.name }}</p>
+    </div>
+    <p class="description">{{ task.description }}</p>
+    <div class="rewards">
+      <span>{{ task.reward_points }} Reward Points</span>
+    </div>
+  </nb-card-body>
+</nb-card>
+
+<ng-template #discordDialog let-data let-ref="dialogRef">
+  <nb-card>
+    <nb-card-header>
+      <div>Discord</div>
+      <button ghost nbButton size="small" (click)="ref.close()">
+        <nb-icon icon="close"></nb-icon>
+      </button>
+    </nb-card-header>
+    <nb-card-body>
+      <div>Are you sure you want to delete this page?</div>
+      <em>This action can not be undone</em>
+    </nb-card-body>
+    <nb-card-footer>
+      <button nbButton status="primary" (click)="ref.close()">Confirm</button>
+      <button nbButton status="danger" (click)="ref.close()">cancel</button>
+    </nb-card-footer>
+  </nb-card>
+</ng-template>
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.scss b/apps/shared-components/quest-task-card/quest-task-card.component.scss
new file mode 100644
index 000000000..97cb1952c
--- /dev/null
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.scss
@@ -0,0 +1,22 @@
+.task {
+  @apply com-cursor-pointer;
+  .title-container {
+    @apply com-flex com-gap-2 com-items-center;
+    img {
+      @apply com-h-6;
+    }
+    .title {
+      @apply com-text-base com-font-medium com-my-0;
+    }
+  }
+  .description {
+    @apply com-h-10 com-line-clamp-2;
+  }
+  .rewards {
+    @apply com-w-full com-border com-border-solid com-border-Bright-Gray com-rounded-lg com-bg-gray-50 com-text-center com-text-fuchsia-600 com-py-1;
+  }
+
+  &.admin-properties {
+    @apply com-cursor-text com-pointer-events-none;
+  }
+}
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.spec.ts b/apps/shared-components/quest-task-card/quest-task-card.component.spec.ts
new file mode 100644
index 000000000..f7b2449ac
--- /dev/null
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { QuestTaskCardComponent } from './quest-task-card.component';
+
+describe('QuestTaskCardComponent', () => {
+  let component: QuestTaskCardComponent;
+  let fixture: ComponentFixture<QuestTaskCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestTaskCardComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QuestTaskCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.ts b/apps/shared-components/quest-task-card/quest-task-card.component.ts
new file mode 100644
index 000000000..beab18565
--- /dev/null
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.ts
@@ -0,0 +1,24 @@
+import { Component, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { ITask } from '@commudle/shared-models';
+import { NbDialogService } from '@commudle/theme';
+
+@Component({
+  selector: 'commudle-quest-task-card',
+  templateUrl: './quest-task-card.component.html',
+  styleUrls: ['./quest-task-card.component.scss'],
+})
+export class QuestTaskCardComponent implements OnInit {
+  @Input() task: ITask;
+  @Input() adminPage: boolean = false;
+  @ViewChild('discordDialog') discordDialogBox: TemplateRef<any>;
+
+  constructor(private dialogBoxService: NbDialogService) {}
+
+  ngOnInit() {}
+
+  openTaskPopup() {
+    if (!this.adminPage) {
+      this.dialogBoxService.open(this.discordDialogBox, { context: this.task });
+    }
+  }
+}
diff --git a/apps/shared-components/shared-components.module.ts b/apps/shared-components/shared-components.module.ts
index b3f6fe6af..17f7ffd09 100644
--- a/apps/shared-components/shared-components.module.ts
+++ b/apps/shared-components/shared-components.module.ts
@@ -28,6 +28,7 @@ import {
   NbToggleModule,
   NbTooltipModule,
   NbWindowModule,
+  NbDialogModule,
 } from '@commudle/theme';
 import { PickerModule } from '@ctrl/ngx-emoji-mart';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -92,6 +93,7 @@ import { UserDetailsCheckboxFormComponent } from './user-details-checkbox-form/u
 import { UserDetailsFormComponent } from './user-details-form/user-details-form.component';
 import { NewsletterCardComponent } from './newsletter-card/newsletter-card.component';
 import { QuestFormComponent } from './quest-form/quest-form.component';
+import { QuestTaskCardComponent } from 'apps/shared-components/quest-task-card/quest-task-card.component';
 @NgModule({
   declarations: [
     WorkInProgressComponent,
@@ -146,6 +148,7 @@ import { QuestFormComponent } from './quest-form/quest-form.component';
     UserDetailsFormComponent,
     NewsletterCardComponent,
     QuestFormComponent,
+    QuestTaskCardComponent,
   ],
   imports: [
     CommonModule,
@@ -189,6 +192,7 @@ import { QuestFormComponent } from './quest-form/quest-form.component';
     NbToggleModule,
     NbContextMenuModule,
     NbSpinnerModule,
+    NbDialogModule,
 
     //cdk
     DragDropModule,
@@ -238,6 +242,7 @@ import { QuestFormComponent } from './quest-form/quest-form.component';
     UserDetailsFormComponent,
     NewsletterCardComponent,
     QuestFormComponent,
+    QuestTaskCardComponent,
   ],
   providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }],
 })

From 95aa4512a63f2ad746b3f46ff96c78f64e110370 Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Thu, 21 Nov 2024 22:52:12 +0530
Subject: [PATCH 15/30] feat: external user token index

---
 .../quest-task-card.component.html            | 20 +++++++++------
 .../quest-task-card.component.scss            | 18 +++++++++++--
 .../quest-task-card.component.ts              | 25 +++++++++++++++++--
 .../src/lib/external-user-auth.model.ts       |  1 +
 .../services/src/lib/api-routes.constant.ts   |  1 +
 .../lib/external-user-auth-handler.service.ts | 16 ++++++------
 .../src/lib/external-user-auth.service.ts     |  9 ++++++-
 7 files changed, 69 insertions(+), 21 deletions(-)

diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.html b/apps/shared-components/quest-task-card/quest-task-card.component.html
index bebd5e9f4..3a087d7fb 100644
--- a/apps/shared-components/quest-task-card/quest-task-card.component.html
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.html
@@ -12,7 +12,7 @@
 </nb-card>
 
 <ng-template #discordDialog let-data let-ref="dialogRef">
-  <nb-card>
+  <nb-card class="discord-dialog">
     <nb-card-header>
       <div>Discord</div>
       <button ghost nbButton size="small" (click)="ref.close()">
@@ -20,12 +20,18 @@
       </button>
     </nb-card-header>
     <nb-card-body>
-      <div>Are you sure you want to delete this page?</div>
-      <em>This action can not be undone</em>
+      <div class="select">
+        <select>
+          <option *ngFor="let userAuthToken of userAuthTokens" [value]="userAuthToken.username">
+            {{ userAuthToken.username }}
+          </option>
+        </select>
+      </div>
+      <button nbButton (click)="loginAccount()">
+        <img [src]="data.quest_task_type.logo_url" [alt]="data.name" />
+        &nbsp; &nbsp;
+        <span>Connect with Account</span>
+      </button>
     </nb-card-body>
-    <nb-card-footer>
-      <button nbButton status="primary" (click)="ref.close()">Confirm</button>
-      <button nbButton status="danger" (click)="ref.close()">cancel</button>
-    </nb-card-footer>
   </nb-card>
 </ng-template>
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.scss b/apps/shared-components/quest-task-card/quest-task-card.component.scss
index 97cb1952c..b55172773 100644
--- a/apps/shared-components/quest-task-card/quest-task-card.component.scss
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.scss
@@ -1,5 +1,5 @@
 .task {
-  @apply com-cursor-pointer;
+  @apply com-cursor-pointer hover:com-shadow;
   .title-container {
     @apply com-flex com-gap-2 com-items-center;
     img {
@@ -17,6 +17,20 @@
   }
 
   &.admin-properties {
-    @apply com-cursor-text com-pointer-events-none;
+    @apply com-cursor-text com-pointer-events-none hover:com-shadow-none;
+  }
+}
+
+.discord-dialog {
+  nb-card-header,
+  nb-card-footer {
+    @apply com-flex com-justify-between com-items-center;
+  }
+
+  .select {
+    @apply com-flex com-items-center com-gap-1 com-h-8 com-p-1 com-text-sm com-rounded-[4px] com-cursor-pointer com-bg-[#F6F9FC] hover:com-bg-[#eef2f7]/50  com-border com-border-solid com-border-[#E4E9F2]  com-w-full;
+    select {
+      @apply com-bg-[#F6F9FC] hover:com-bg-[#eef2f7]/50 com-cursor-pointer com-border-0 com-w-full;
+    }
   }
 }
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.ts b/apps/shared-components/quest-task-card/quest-task-card.component.ts
index beab18565..f892d2393 100644
--- a/apps/shared-components/quest-task-card/quest-task-card.component.ts
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { ITask } from '@commudle/shared-models';
+import { IExternalUserAuth, ITask } from '@commudle/shared-models';
+import { ExternalUserAuthHandlerService, ExternalUserAuthService } from '@commudle/shared-services';
 import { NbDialogService } from '@commudle/theme';
 
 @Component({
@@ -10,15 +11,35 @@ import { NbDialogService } from '@commudle/theme';
 export class QuestTaskCardComponent implements OnInit {
   @Input() task: ITask;
   @Input() adminPage: boolean = false;
+  userAuthTokens: IExternalUserAuth[];
   @ViewChild('discordDialog') discordDialogBox: TemplateRef<any>;
 
-  constructor(private dialogBoxService: NbDialogService) {}
+  constructor(
+    private dialogBoxService: NbDialogService,
+    private externalUserAuthHandlerService: ExternalUserAuthHandlerService,
+    private externalUserAuthService: ExternalUserAuthService,
+  ) {}
 
   ngOnInit() {}
 
   openTaskPopup() {
     if (!this.adminPage) {
+      this.getExternalUsers('discord');
       this.dialogBoxService.open(this.discordDialogBox, { context: this.task });
     }
   }
+
+  getExternalUsers(platformName) {
+    this.externalUserAuthService.userAuthTokenIndex(platformName).subscribe((res) => {
+      this.userAuthTokens = res;
+    });
+  }
+
+  loginAccount() {
+    switch (this.task.quest_task_type.platform_name) {
+      case 'Discord':
+        this.externalUserAuthHandlerService.loginToDiscord();
+        return;
+    }
+  }
 }
diff --git a/libs/shared/models/src/lib/external-user-auth.model.ts b/libs/shared/models/src/lib/external-user-auth.model.ts
index bdc4fd829..1624ca3c5 100644
--- a/libs/shared/models/src/lib/external-user-auth.model.ts
+++ b/libs/shared/models/src/lib/external-user-auth.model.ts
@@ -4,6 +4,7 @@ export interface IExternalUserAuth {
   token: string;
   active: boolean;
   data: Date;
+  username: string;
 }
 
 export enum EExternalUserAuth {
diff --git a/libs/shared/services/src/lib/api-routes.constant.ts b/libs/shared/services/src/lib/api-routes.constant.ts
index 43b71624e..05aba34b2 100644
--- a/libs/shared/services/src/lib/api-routes.constant.ts
+++ b/libs/shared/services/src/lib/api-routes.constant.ts
@@ -954,6 +954,7 @@ export const API_ROUTES = {
 
   EXTERNAL_USER_AUTH: {
     CREATE: 'api/v2/external_user_auth', //POST
+    INDEX: 'api/v2/external_user_auth', //GET
   },
 
   QUESTS: {
diff --git a/libs/shared/services/src/lib/external-user-auth-handler.service.ts b/libs/shared/services/src/lib/external-user-auth-handler.service.ts
index 53ac6b6cb..bb16847aa 100644
--- a/libs/shared/services/src/lib/external-user-auth-handler.service.ts
+++ b/libs/shared/services/src/lib/external-user-auth-handler.service.ts
@@ -13,25 +13,23 @@ export class ExternalUserAuthHandlerService {
   }
 
   loginToDiscord(): void {
-    const url = `https://discord.com/oauth2/authorize?client_id=${this.clientId}&response_type=token&redirect_uri=${window.location.href}&scope=identify`;
+    const url = `https://discord.com/oauth2/authorize?client_id=${this.clientId}&response_type=code&redirect_uri=${window.location.href}&scope=identify`;
     window.location.href = url;
   }
 
-  // Extract token from URL fragment after Discord login
+  // Extract token from URL after Discord login
   getTokenFromUrl() {
-    const fragment = this.activatedRoute.snapshot.fragment;
-    if (fragment) {
-      const tokenMatch = fragment.match(/access_token=([^&]*)/);
-      if (tokenMatch && tokenMatch[1]) {
-        const token = tokenMatch[1];
+    this.activatedRoute.queryParamMap.subscribe((params) => {
+      const code = params.get('code'); // Retrieve the 'code' parameter
+      if (code) {
         const external_user_auth = {
-          token: token,
+          token: code,
           platform: 'discord',
         };
         this.externalUserAuthService.create(external_user_auth).subscribe((res) => {
           console.log(res);
         });
       }
-    }
+    });
   }
 }
diff --git a/libs/shared/services/src/lib/external-user-auth.service.ts b/libs/shared/services/src/lib/external-user-auth.service.ts
index 85f3418c0..6abae51ca 100644
--- a/libs/shared/services/src/lib/external-user-auth.service.ts
+++ b/libs/shared/services/src/lib/external-user-auth.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { API_ROUTES } from './api-routes.constant';
 import { BaseApiService } from './base-api.service';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { IExternalUserAuth } from '@commudle/shared-models';
 @Injectable({
   providedIn: 'root',
@@ -15,4 +15,11 @@ export class ExternalUserAuthService {
       external_user_auth: data,
     });
   }
+
+  userAuthTokenIndex(platformName: string): Observable<IExternalUserAuth[]> {
+    const params = new HttpParams().set('platform_name', platformName);
+    return this.http.get<IExternalUserAuth[]>(this.baseApiService.getRoute(API_ROUTES.EXTERNAL_USER_AUTH.CREATE), {
+      params,
+    });
+  }
 }

From 1d1af74e2b72e4b73d665876db38213d7d397e00 Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Mon, 25 Nov 2024 16:20:44 +0530
Subject: [PATCH 16/30] refactor: redirect path for quest

---
 .../services/src/lib/external-user-auth-handler.service.ts  | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/libs/shared/services/src/lib/external-user-auth-handler.service.ts b/libs/shared/services/src/lib/external-user-auth-handler.service.ts
index bb16847aa..d2a8c672e 100644
--- a/libs/shared/services/src/lib/external-user-auth-handler.service.ts
+++ b/libs/shared/services/src/lib/external-user-auth-handler.service.ts
@@ -13,7 +13,11 @@ export class ExternalUserAuthHandlerService {
   }
 
   loginToDiscord(): void {
-    const url = `https://discord.com/oauth2/authorize?client_id=${this.clientId}&response_type=code&redirect_uri=${window.location.href}&scope=identify`;
+    const state = {
+      redirectTo: window.location.href,
+    };
+    const encodedState = encodeURIComponent(JSON.stringify(state));
+    const url = `https://discord.com/oauth2/authorize?client_id=${this.clientId}&response_type=code&redirect_uri=${window.location.href}&scope=identify+email+guilds+guilds.members.read&state=${encodedState}`;
     window.location.href = url;
   }
 

From 7500195c4ec872088849fdbd6ba42b3ecd78404b Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Tue, 26 Nov 2024 11:30:45 +0530
Subject: [PATCH 17/30] feat: redirect to discord page

---
 .../src/app/app-routing.module.ts             |  4 ++
 .../public-quest-homepage.component.html      |  4 ++
 .../public-quest-homepage.component.ts        | 37 +++++++++++++++++--
 .../components/discord/discord.component.html |  8 ++++
 .../components/discord/discord.component.scss |  9 +++++
 .../discord/discord.component.spec.ts         | 27 ++++++++++++++
 .../components/discord/discord.component.ts   | 24 ++++++++++++
 .../user-oauth/user-oauth.module.ts           | 11 ++++++
 .../user-oauth/user-oauth.routing.ts          | 11 ++++++
 .../src/assets/static-assets.ts               |  3 ++
 .../quest-task-card.component.html            | 11 +++++-
 .../quest-task-card.component.ts              | 12 +++---
 .../lib/external-user-auth-handler.service.ts | 13 ++++---
 .../src/lib/external-user-auth.service.ts     |  7 ++++
 14 files changed, 165 insertions(+), 16 deletions(-)
 create mode 100644 apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.html
 create mode 100644 apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.scss
 create mode 100644 apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.spec.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/user-oauth/user-oauth.module.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/user-oauth/user-oauth.routing.ts

diff --git a/apps/commudle-admin/src/app/app-routing.module.ts b/apps/commudle-admin/src/app/app-routing.module.ts
index ab2e24a50..b5c287e10 100644
--- a/apps/commudle-admin/src/app/app-routing.module.ts
+++ b/apps/commudle-admin/src/app/app-routing.module.ts
@@ -132,6 +132,10 @@ const routes: Routes = [
     loadChildren: () =>
       import('./feature-modules/public-community/public-community.module').then((m) => m.PublicCommunityModule),
   },
+  {
+    path: 'auth/users',
+    loadChildren: () => import('./feature-modules/user-oauth/user-oauth.module').then((m) => m.UserOauthModule),
+  },
   {
     path: 'communities/:community_id/events/:event_id',
     loadChildren: () =>
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
index e874a7a38..ecf525e79 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
@@ -35,3 +35,7 @@ <h1>{{ quest.name }}</h1>
     </div>
   </div>
 </div>
+
+<ng-template #loadingScreen>
+  <app-loading-spinner></app-loading-spinner>
+</ng-template>
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
index 15205efaf..26e9a5f3d 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
@@ -1,8 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { IQuest, ITask } from '@commudle/shared-models';
 import { TaskService } from '@commudle/shared-services';
+import { NbDialogService } from '@commudle/theme';
 import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
+import { QuestTaskCardComponent } from 'apps/shared-components/quest-task-card/quest-task-card.component';
 import moment from 'moment';
 
 @Component({
@@ -17,8 +19,14 @@ export class PublicQuestHomepageComponent implements OnInit {
   icons = {
     faArrowRight,
   };
+  @ViewChild(QuestTaskCardComponent) questTaskCardComponent: QuestTaskCardComponent;
+  @ViewChild('loadingScreen') LoadingDialogBox: TemplateRef<any>;
 
-  constructor(private activatedRoute: ActivatedRoute, private taskService: TaskService) {}
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private taskService: TaskService,
+    private dialogService: NbDialogService,
+  ) {}
 
   ngOnInit() {
     this.activatedRoute.data.subscribe((data) => {
@@ -28,8 +36,29 @@ export class PublicQuestHomepageComponent implements OnInit {
   }
 
   getTask() {
-    this.taskService.pIndex(this.quest.id).subscribe((task) => {
-      this.tasks = task;
+    this.taskService.pIndex(this.quest.id).subscribe((data) => {
+      this.tasks = data;
+      this.processTaskFromQueryParams();
+    });
+  }
+
+  processTaskFromQueryParams() {
+    this.activatedRoute.queryParamMap.subscribe((params) => {
+      const taskId = Number(params.get('task_id'));
+      if (taskId) {
+        const task = this.tasks.find((task) => task.id === taskId);
+        if (task) {
+          const dialogRef = this.dialogService.open(this.LoadingDialogBox, {
+            closeOnBackdropClick: false,
+            closeOnEsc: false,
+            hasScroll: true,
+          });
+          setTimeout(() => {
+            dialogRef.close();
+            this.questTaskCardComponent.openTaskPopup(task);
+          }, 2000);
+        }
+      }
     });
   }
 }
diff --git a/apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.html b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.html
new file mode 100644
index 000000000..1767f5c33
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.html
@@ -0,0 +1,8 @@
+<section>
+  <commudle-loading-spinner></commudle-loading-spinner>
+  <img [src]="staticAssets.discord_logo" alt="Discord Logo" title="Discord Logo" />
+  <div>
+    Redirect To:
+    <a [href]="redirectTo">{{ redirectTo }}</a>
+  </div>
+</section>
diff --git a/apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.scss b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.scss
new file mode 100644
index 000000000..9ebeb1b17
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.scss
@@ -0,0 +1,9 @@
+section {
+  @apply com-flex com-justify-center com-flex-col com-h-[80dvh] com-gap-14;
+  img {
+    @apply com-h-40;
+  }
+  div {
+    @apply com-text-center;
+  }
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.spec.ts b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.spec.ts
new file mode 100644
index 000000000..590fdc8f8
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { DiscordComponent } from './discord.component';
+
+describe('DiscordComponent', () => {
+  let component: DiscordComponent;
+  let fixture: ComponentFixture<DiscordComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [DiscordComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DiscordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.ts b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.ts
new file mode 100644
index 000000000..b766967a1
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { staticAssets } from 'apps/commudle-admin/src/assets/static-assets';
+
+@Component({
+  selector: 'commudle-discord',
+  templateUrl: './discord.component.html',
+  styleUrls: ['./discord.component.scss'],
+})
+export class DiscordComponent implements OnInit {
+  redirectTo: string;
+  staticAssets = staticAssets;
+  constructor(private activatedRoute: ActivatedRoute) {}
+
+  ngOnInit() {
+    this.activatedRoute.queryParamMap.subscribe((params) => {
+      const encodedState = params.get('state');
+      const state = JSON.parse(decodeURIComponent(encodedState));
+      const baseUrl = state.redirectTo;
+      this.redirectTo = `${baseUrl}?task_id=${state.task_id}`;
+      window.location.href = this.redirectTo;
+    });
+  }
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/user-oauth/user-oauth.module.ts b/apps/commudle-admin/src/app/feature-modules/user-oauth/user-oauth.module.ts
new file mode 100644
index 000000000..0e115066d
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/user-oauth/user-oauth.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UserOauthRoutes } from './user-oauth.routing';
+import { DiscordComponent } from './components/discord/discord.component';
+import { SharedComponentsModule } from '@commudle/shared-components';
+
+@NgModule({
+  imports: [CommonModule, UserOauthRoutes, SharedComponentsModule],
+  declarations: [DiscordComponent],
+})
+export class UserOauthModule {}
diff --git a/apps/commudle-admin/src/app/feature-modules/user-oauth/user-oauth.routing.ts b/apps/commudle-admin/src/app/feature-modules/user-oauth/user-oauth.routing.ts
new file mode 100644
index 000000000..df9fe67ce
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/user-oauth/user-oauth.routing.ts
@@ -0,0 +1,11 @@
+import { Routes, RouterModule } from '@angular/router';
+import { DiscordComponent } from './components/discord/discord.component';
+
+const routes: Routes = [
+  {
+    path: 'discord/callback',
+    component: DiscordComponent,
+  },
+];
+
+export const UserOauthRoutes = RouterModule.forChild(routes);
diff --git a/apps/commudle-admin/src/assets/static-assets.ts b/apps/commudle-admin/src/assets/static-assets.ts
index 81ae1ef5d..228e9e72c 100644
--- a/apps/commudle-admin/src/assets/static-assets.ts
+++ b/apps/commudle-admin/src/assets/static-assets.ts
@@ -178,4 +178,7 @@ export const staticAssets = {
   //id: 158
   call_for_speaker_empty_state:
     'https://json.commudle.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL0N1QWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--3d0e4b9c60c0f63c0272e41a6ea79608454cc379/CFP-Empty%20State.png',
+
+  discord_logo:
+    'https://json.commudle.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeTAvQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--d01625bde4293ef3b7d8de196a73f603114eed05/Discord.svg',
 };
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.html b/apps/shared-components/quest-task-card/quest-task-card.component.html
index 3a087d7fb..852dadd7f 100644
--- a/apps/shared-components/quest-task-card/quest-task-card.component.html
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.html
@@ -1,4 +1,4 @@
-<nb-card class="task" (click)="openTaskPopup()" [ngClass]="{ 'admin-properties': adminPage }">
+<nb-card class="task" (click)="openTaskPopup(task)" [ngClass]="{ 'admin-properties': adminPage }">
   <nb-card-body>
     <div class="title-container">
       <img [src]="task.quest_task_type.logo_url" />
@@ -27,6 +27,15 @@
           </option>
         </select>
       </div>
+      <button nbButton>
+        <span>Use This Account</span>
+      </button>
+
+      <div>
+        <a [href]="task.url" target="_blank">Follow</a>
+      </div>
+
+      <button>Verify</button>
       <button nbButton (click)="loginAccount()">
         <img [src]="data.quest_task_type.logo_url" [alt]="data.name" />
         &nbsp; &nbsp;
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.ts b/apps/shared-components/quest-task-card/quest-task-card.component.ts
index f892d2393..125a05316 100644
--- a/apps/shared-components/quest-task-card/quest-task-card.component.ts
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.ts
@@ -22,11 +22,9 @@ export class QuestTaskCardComponent implements OnInit {
 
   ngOnInit() {}
 
-  openTaskPopup() {
-    if (!this.adminPage) {
-      this.getExternalUsers('discord');
-      this.dialogBoxService.open(this.discordDialogBox, { context: this.task });
-    }
+  openTaskPopup(task) {
+    this.getExternalUsers('discord');
+    this.dialogBoxService.open(this.discordDialogBox, { context: task });
   }
 
   getExternalUsers(platformName) {
@@ -38,8 +36,10 @@ export class QuestTaskCardComponent implements OnInit {
   loginAccount() {
     switch (this.task.quest_task_type.platform_name) {
       case 'Discord':
-        this.externalUserAuthHandlerService.loginToDiscord();
+        this.externalUserAuthHandlerService.loginToDiscord(this.task.id);
         return;
     }
   }
+
+  verifyDiscordServer() {}
 }
diff --git a/libs/shared/services/src/lib/external-user-auth-handler.service.ts b/libs/shared/services/src/lib/external-user-auth-handler.service.ts
index d2a8c672e..3622e3dc3 100644
--- a/libs/shared/services/src/lib/external-user-auth-handler.service.ts
+++ b/libs/shared/services/src/lib/external-user-auth-handler.service.ts
@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { ExternalUserAuthService } from './external-user-auth.service';
+import { environment } from '@commudle/shared-environments';
 
 @Injectable({
   providedIn: 'root',
@@ -12,12 +13,16 @@ export class ExternalUserAuthHandlerService {
     this.getTokenFromUrl();
   }
 
-  loginToDiscord(): void {
+  loginToDiscord(task_id?: number): void {
     const state = {
       redirectTo: window.location.href,
     };
+    const redirectUrl = environment.app_url + '/auth/users/discord/callback';
+    if (task_id) {
+      state['task_id'] = task_id;
+    }
     const encodedState = encodeURIComponent(JSON.stringify(state));
-    const url = `https://discord.com/oauth2/authorize?client_id=${this.clientId}&response_type=code&redirect_uri=${window.location.href}&scope=identify+email+guilds+guilds.members.read&state=${encodedState}`;
+    const url = `https://discord.com/oauth2/authorize?client_id=${this.clientId}&response_type=code&redirect_uri=${redirectUrl}&scope=identify+email+guilds+guilds.members.read&state=${encodedState}`;
     window.location.href = url;
   }
 
@@ -30,9 +35,7 @@ export class ExternalUserAuthHandlerService {
           token: code,
           platform: 'discord',
         };
-        this.externalUserAuthService.create(external_user_auth).subscribe((res) => {
-          console.log(res);
-        });
+        this.externalUserAuthService.create(external_user_auth).subscribe();
       }
     });
   }
diff --git a/libs/shared/services/src/lib/external-user-auth.service.ts b/libs/shared/services/src/lib/external-user-auth.service.ts
index 6abae51ca..5adb425c0 100644
--- a/libs/shared/services/src/lib/external-user-auth.service.ts
+++ b/libs/shared/services/src/lib/external-user-auth.service.ts
@@ -22,4 +22,11 @@ export class ExternalUserAuthService {
       params,
     });
   }
+
+  verifyDiscordServerMember(externalUserAuthTokenId: number, taskId: number): Observable<boolean> {
+    const params = new HttpParams().set('external_user_auth_token_id', externalUserAuthTokenId).set('task_id', taskId);
+    return this.http.get<boolean>(this.baseApiService.getRoute(API_ROUTES.EXTERNAL_USER_AUTH.CREATE), {
+      params,
+    });
+  }
 }

From 001923df22a40cbacf85d3d05d80c171f2e5707e Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Wed, 27 Nov 2024 22:37:18 +0530
Subject: [PATCH 18/30] feat: add discord verification for server member

---
 .../components/discord/discord.component.ts   |  7 ++-
 .../quest-task-card.component.html            | 40 +++++++++--------
 .../quest-task-card.component.ts              | 43 ++++++++++++++++---
 .../services/src/lib/api-routes.constant.ts   |  1 +
 .../lib/external-user-auth-handler.service.ts |  8 +---
 libs/shared/services/src/lib/task.service.ts  |  6 ++-
 6 files changed, 74 insertions(+), 31 deletions(-)

diff --git a/apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.ts b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.ts
index b766967a1..39c3b75b5 100644
--- a/apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.ts
+++ b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { ExternalUserAuthHandlerService } from '@commudle/shared-services';
 import { staticAssets } from 'apps/commudle-admin/src/assets/static-assets';
 
 @Component({
@@ -10,7 +11,10 @@ import { staticAssets } from 'apps/commudle-admin/src/assets/static-assets';
 export class DiscordComponent implements OnInit {
   redirectTo: string;
   staticAssets = staticAssets;
-  constructor(private activatedRoute: ActivatedRoute) {}
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private externalUserAuthHandlerService: ExternalUserAuthHandlerService,
+  ) {}
 
   ngOnInit() {
     this.activatedRoute.queryParamMap.subscribe((params) => {
@@ -18,6 +22,7 @@ export class DiscordComponent implements OnInit {
       const state = JSON.parse(decodeURIComponent(encodedState));
       const baseUrl = state.redirectTo;
       this.redirectTo = `${baseUrl}?task_id=${state.task_id}`;
+      this.externalUserAuthHandlerService.getTokenFromUrl();
       window.location.href = this.redirectTo;
     });
   }
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.html b/apps/shared-components/quest-task-card/quest-task-card.component.html
index 852dadd7f..6960b4616 100644
--- a/apps/shared-components/quest-task-card/quest-task-card.component.html
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.html
@@ -20,27 +20,33 @@
       </button>
     </nb-card-header>
     <nb-card-body>
-      <div class="select">
-        <select>
-          <option *ngFor="let userAuthToken of userAuthTokens" [value]="userAuthToken.username">
-            {{ userAuthToken.username }}
-          </option>
-        </select>
+      <div *ngIf="stepOne">
+        <button nbButton (click)="loginAccount()">
+          <img [src]="data.quest_task_type.logo_url" [alt]="data.name" />
+          &nbsp; &nbsp;
+          <span>Connect with Account</span>
+        </button>
       </div>
-      <button nbButton>
-        <span>Use This Account</span>
-      </button>
 
-      <div>
-        <a [href]="task.url" target="_blank">Follow</a>
+      <div *ngIf="stepTwo">
+        <div class="select">
+          <select [(ngModel)]="selectedExternalUserAuthId">
+            <option *ngFor="let userAuthToken of userAuthTokens" [ngValue]="userAuthToken.id">
+              {{ userAuthToken.username }}
+            </option>
+          </select>
+        </div>
+        <button nbButton (click)="stepTwo = false; stepThree = true">
+          <span>Use This Account</span>
+        </button>
       </div>
 
-      <button>Verify</button>
-      <button nbButton (click)="loginAccount()">
-        <img [src]="data.quest_task_type.logo_url" [alt]="data.name" />
-        &nbsp; &nbsp;
-        <span>Connect with Account</span>
-      </button>
+      <div *ngIf="stepThree">
+        <div>
+          <a [href]="task.url" target="_blank">Follow</a>
+        </div>
+        <button (click)="verifyDiscordServer()">Verify</button>
+      </div>
     </nb-card-body>
   </nb-card>
 </ng-template>
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.ts b/apps/shared-components/quest-task-card/quest-task-card.component.ts
index 125a05316..ec15234bb 100644
--- a/apps/shared-components/quest-task-card/quest-task-card.component.ts
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.ts
@@ -1,6 +1,11 @@
 import { Component, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { IExternalUserAuth, ITask } from '@commudle/shared-models';
-import { ExternalUserAuthHandlerService, ExternalUserAuthService } from '@commudle/shared-services';
+import { EExternalUserAuth, IExternalUserAuth, ITask } from '@commudle/shared-models';
+import {
+  ExternalUserAuthHandlerService,
+  ExternalUserAuthService,
+  TaskService,
+  ToastrService,
+} from '@commudle/shared-services';
 import { NbDialogService } from '@commudle/theme';
 
 @Component({
@@ -12,34 +17,60 @@ export class QuestTaskCardComponent implements OnInit {
   @Input() task: ITask;
   @Input() adminPage: boolean = false;
   userAuthTokens: IExternalUserAuth[];
+  selectedExternalUserAuthId: number;
+  stepOne = true;
+  stepTwo = false;
+  stepThree = false;
   @ViewChild('discordDialog') discordDialogBox: TemplateRef<any>;
 
   constructor(
     private dialogBoxService: NbDialogService,
     private externalUserAuthHandlerService: ExternalUserAuthHandlerService,
     private externalUserAuthService: ExternalUserAuthService,
+    private taskService: TaskService,
+    private toasterService: ToastrService,
   ) {}
 
   ngOnInit() {}
 
   openTaskPopup(task) {
-    this.getExternalUsers('discord');
-    this.dialogBoxService.open(this.discordDialogBox, { context: task });
+    this.stepOne = true;
+    this.stepTwo = false;
+    this.stepThree = false;
+    switch (task.quest_task_type.platform_name) {
+      case EExternalUserAuth.DISCORD:
+        this.getExternalUsers(EExternalUserAuth.DISCORD);
+        this.dialogBoxService.open(this.discordDialogBox, { context: task });
+        return;
+    }
   }
 
   getExternalUsers(platformName) {
     this.externalUserAuthService.userAuthTokenIndex(platformName).subscribe((res) => {
       this.userAuthTokens = res;
+      if (this.userAuthTokens.length > 0) {
+        this.stepOne = false;
+        this.stepTwo = true;
+        this.selectedExternalUserAuthId = this.userAuthTokens[0].id;
+      }
     });
   }
 
   loginAccount() {
     switch (this.task.quest_task_type.platform_name) {
-      case 'Discord':
+      case EExternalUserAuth.DISCORD:
         this.externalUserAuthHandlerService.loginToDiscord(this.task.id);
         return;
     }
   }
 
-  verifyDiscordServer() {}
+  verifyDiscordServer() {
+    this.taskService.verifyDiscord(this.task.id, this.selectedExternalUserAuthId).subscribe((res) => {
+      if (res) {
+        this.toasterService.successDialog('Verified');
+      } else {
+        this.toasterService.warningDialog('Not Verified');
+      }
+    });
+  }
 }
diff --git a/libs/shared/services/src/lib/api-routes.constant.ts b/libs/shared/services/src/lib/api-routes.constant.ts
index 05aba34b2..1e97cea70 100644
--- a/libs/shared/services/src/lib/api-routes.constant.ts
+++ b/libs/shared/services/src/lib/api-routes.constant.ts
@@ -974,6 +974,7 @@ export const API_ROUTES = {
     SHOW: 'api/v2/tasks/show', //GET
     UPDATE: 'api/v2/tasks', //PUT
     TASK_TYPES_INDEX: 'api/v2/tasks/task_types_index', //GET
+    VERIFY_DISCORD: 'api/v2/tasks/verify_discord', //GET
     PUBLIC: {
       INDEX: 'api/v2/tasks/public', //GET
       SHOW: 'api/v2/tasks/public/show', //GET
diff --git a/libs/shared/services/src/lib/external-user-auth-handler.service.ts b/libs/shared/services/src/lib/external-user-auth-handler.service.ts
index 3622e3dc3..8ff9d0d75 100644
--- a/libs/shared/services/src/lib/external-user-auth-handler.service.ts
+++ b/libs/shared/services/src/lib/external-user-auth-handler.service.ts
@@ -7,11 +7,7 @@ import { environment } from '@commudle/shared-environments';
   providedIn: 'root',
 })
 export class ExternalUserAuthHandlerService {
-  private clientId = '1298505458629214218';
-
-  constructor(private activatedRoute: ActivatedRoute, private externalUserAuthService: ExternalUserAuthService) {
-    this.getTokenFromUrl();
-  }
+  constructor(private activatedRoute: ActivatedRoute, private externalUserAuthService: ExternalUserAuthService) {}
 
   loginToDiscord(task_id?: number): void {
     const state = {
@@ -22,7 +18,7 @@ export class ExternalUserAuthHandlerService {
       state['task_id'] = task_id;
     }
     const encodedState = encodeURIComponent(JSON.stringify(state));
-    const url = `https://discord.com/oauth2/authorize?client_id=${this.clientId}&response_type=code&redirect_uri=${redirectUrl}&scope=identify+email+guilds+guilds.members.read&state=${encodedState}`;
+    const url = `https://discord.com/oauth2/authorize?client_id=${environment.discord_client_id}&response_type=code&redirect_uri=${redirectUrl}&scope=identify+email+guilds+guilds.members.read&state=${encodedState}`;
     window.location.href = url;
   }
 
diff --git a/libs/shared/services/src/lib/task.service.ts b/libs/shared/services/src/lib/task.service.ts
index 7d7249957..2ce5db09d 100644
--- a/libs/shared/services/src/lib/task.service.ts
+++ b/libs/shared/services/src/lib/task.service.ts
@@ -34,8 +34,12 @@ export class TaskService {
     return this.http.get<IQuestTaskType[]>(this.baseApiService.getRoute(API_ROUTES.TASKS.TASK_TYPES_INDEX));
   }
 
-  // PUBLIC API
+  verifyDiscord(taskId: number, externalUserAuthTokenId: number): Observable<boolean> {
+    const params = new HttpParams().set('task_id', taskId).set('external_user_auth_token_id', externalUserAuthTokenId);
+    return this.http.get<boolean>(this.baseApiService.getRoute(API_ROUTES.TASKS.VERIFY_DISCORD), { params });
+  }
 
+  // PUBLIC API
   pIndex(questId: number): Observable<ITask[]> {
     const params = new HttpParams().set('quest_id', questId);
     return this.http.get<ITask[]>(this.baseApiService.getRoute(API_ROUTES.TASKS.PUBLIC.INDEX), {

From 6e50e016aa8589e6407aff3de629f62b7bbe0b67 Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Thu, 28 Nov 2024 13:43:01 +0530
Subject: [PATCH 19/30] feat: add quest task types

---
 .../admin-static-assets-list.component.html   |  43 +++++-
 .../admin-static-assets-list.component.scss   |  24 +++
 .../admin-static-assets-list.component.ts     |  61 ++++++--
 .../quest-task-types.component.html           | 139 ++++++++++++++++++
 .../quest-task-types.component.scss           |  42 ++++++
 .../quest-task-types.component.spec.ts        |  27 ++++
 .../quest-task-types.component.ts             |  59 ++++++++
 .../services/admin-static-assets.service.ts   |   7 +-
 .../sys-admin/sys-admin-routing.module.ts     |   5 +
 .../sys-admin/sys-admin.module.ts             |   2 +
 .../quest-task-card.component.html            |   4 +-
 .../quest-task-card.component.scss            |   2 +-
 .../quest-task-card.component.ts              |  10 +-
 .../environments/src/lib/environments.ts      |   5 +
 libs/shared/models/src/lib/task.model.ts      |  16 ++
 .../services/src/lib/api-routes.constant.ts   |  10 +-
 libs/shared/services/src/lib/task.service.ts  |  31 ++++
 17 files changed, 470 insertions(+), 17 deletions(-)
 create mode 100644 apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.html
 create mode 100644 apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.scss
 create mode 100644 apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.spec.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.ts

diff --git a/apps/commudle-admin/src/app/feature-modules/sys-admin/components/admin-static-assets/admin-static-assets-list/admin-static-assets-list.component.html b/apps/commudle-admin/src/app/feature-modules/sys-admin/components/admin-static-assets/admin-static-assets-list/admin-static-assets-list.component.html
index 43f57c09d..6b4e36b60 100644
--- a/apps/commudle-admin/src/app/feature-modules/sys-admin/components/admin-static-assets/admin-static-assets-list/admin-static-assets-list.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/sys-admin/components/admin-static-assets/admin-static-assets-list/admin-static-assets-list.component.html
@@ -6,10 +6,28 @@
         <nb-icon icon="plus"></nb-icon>
         Create Assets
       </button>
+      <button (click)="openDialogBox(searchByIdDialogBox)" ghost nbButton shape="round" size="small">
+        <nb-icon icon="plus"></nb-icon>
+        get by id
+      </button>
     </div>
   </nb-card-header>
   <nb-card-body>
     <div class="assets-list-container">
+      <div class="search-container">
+        <input
+          type="text"
+          placeholder="Search assets..."
+          [formControl]="searchControl"
+          nbInput
+          fullWidth
+          status="primary"
+        />
+        <div *ngIf="assets.length === 0 && !isLoading"><h3>No Result found....</h3></div>
+      </div>
+      <div class="loading-spinner" *ngIf="isLoading">
+        <app-loading-spinner></app-loading-spinner>
+      </div>
       <nb-list>
         <nb-list-item *ngFor="let asset of assets" class="d-flex justify-content-space-between">
           <div class="assets-details">
@@ -28,7 +46,30 @@
           </div>
         </nb-list-item>
       </nb-list>
-      <button (click)="getAsset()" *ngIf="assets.length !== total" fullWidth ghost nbButton>Get more Assets</button>
+      <button (click)="getAsset()" *ngIf="assets.length !== 0 && assets.length !== total" fullWidth ghost nbButton>
+        Get more Assets
+      </button>
     </div>
   </nb-card-body>
 </nb-card>
+
+<ng-template #searchByIdDialogBox let-data let-ref="dialogRef">
+  <nb-card class="get-by-id">
+    <nb-card-header>
+      <div>Delete Page</div>
+      <button ghost nbButton size="small" (click)="ref.close()">
+        <nb-icon icon="close"></nb-icon>
+      </button>
+    </nb-card-header>
+    <nb-card-body>
+      <input type="text" placeholder="Search assets..." [formControl]="searchById" nbInput fullWidth status="primary" />
+
+      <br />
+      <pre class="json-content">{{ searchedById | json }}</pre>
+    </nb-card-body>
+    <nb-card-footer>
+      <button nbButton status="primary" [disabled]="!searchById.value" (click)="getAssetById()">Get</button>
+      <button nbButton status="danger" (click)="ref.close()">cancel</button>
+    </nb-card-footer>
+  </nb-card>
+</ng-template>
diff --git a/apps/commudle-admin/src/app/feature-modules/sys-admin/components/admin-static-assets/admin-static-assets-list/admin-static-assets-list.component.scss b/apps/commudle-admin/src/app/feature-modules/sys-admin/components/admin-static-assets/admin-static-assets-list/admin-static-assets-list.component.scss
index 6a1b04466..5797a4f19 100644
--- a/apps/commudle-admin/src/app/feature-modules/sys-admin/components/admin-static-assets/admin-static-assets-list/admin-static-assets-list.component.scss
+++ b/apps/commudle-admin/src/app/feature-modules/sys-admin/components/admin-static-assets/admin-static-assets-list/admin-static-assets-list.component.scss
@@ -11,6 +11,12 @@
     @apply com-p-0;
 
     .assets-list-container {
+      .search-container {
+        @apply com-mx-6;
+        h3 {
+          @apply com-text-center;
+        }
+      }
       nb-list {
         nb-list-item {
           &:first-of-type {
@@ -66,3 +72,21 @@
 .asset-image img {
   @apply com-h-[200px];
 }
+
+.loading-spinner {
+  @apply com-my-6;
+}
+
+.get-by-id {
+  @apply com-w-[40dvw];
+  nb-card-header,
+  nb-card-footer {
+    @apply com-flex com-justify-between com-items-center;
+  }
+  .json-content {
+    white-space: pre-wrap; /* Preserve formatting and allow wrapping */
+    word-wrap: break-word; /* Break long words like URLs */
+    overflow-wrap: break-word; /* Compatibility for modern browsers */
+    max-width: 100%; /* Optional: Limit the width */
+  }
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/sys-admin/components/admin-static-assets/admin-static-assets-list/admin-static-assets-list.component.ts b/apps/commudle-admin/src/app/feature-modules/sys-admin/components/admin-static-assets/admin-static-assets-list/admin-static-assets-list.component.ts
index 0ed12d86a..4994389c2 100644
--- a/apps/commudle-admin/src/app/feature-modules/sys-admin/components/admin-static-assets/admin-static-assets-list/admin-static-assets-list.component.ts
+++ b/apps/commudle-admin/src/app/feature-modules/sys-admin/components/admin-static-assets/admin-static-assets-list/admin-static-assets-list.component.ts
@@ -1,7 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { NbDialogService } from '@commudle/theme';
+import { AdminStaticAssetsService } from 'apps/commudle-admin/src/app/feature-modules/sys-admin/services/admin-static-assets.service';
 import { IStaticAsset } from 'apps/shared-models/assets.model';
-import { AdminStaticAssetsService } from '../../../services/admin-static-assets.service';
 import { Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 @Component({
   selector: 'app-admin-static-assets-list',
@@ -9,27 +12,65 @@ import { Subscription } from 'rxjs';
   styleUrls: ['./admin-static-assets-list.component.scss'],
 })
 export class AdminStaticAssetsListComponent implements OnInit {
-  constructor(private adminStaticAssetsService: AdminStaticAssetsService) {}
+  constructor(private adminStaticAssetsService: AdminStaticAssetsService, private dialogService: NbDialogService) {}
   assets: IStaticAsset[] = [];
   page = 1;
   count = 5;
   total = -1;
   subscriptions: Subscription[] = [];
+  searchControl = new FormControl('');
+  searchById = new FormControl('');
+  isLoading = true;
+  searchedById;
 
   ngOnInit(): void {
+    this.setupSearch();
     this.getAsset();
   }
 
-  getAsset(): void {
+  setupSearch(): void {
+    this.subscriptions.push(
+      this.searchControl.valueChanges
+        .pipe(
+          debounceTime(2000), // Wait for 2 seconds
+          distinctUntilChanged(), // Prevent duplicate requests for the same value
+        )
+        .subscribe((searchTerm) => {
+          this.isLoading = true;
+          this.assets = []; // Clear current assets
+          this.page = 1; // Reset pagination
+          this.getAsset(searchTerm); // Fetch filtered assets
+        }),
+    );
+  }
+
+  getAsset(query = ''): void {
     if (this.assets.length !== this.total) {
       this.subscriptions.push(
-        this.adminStaticAssetsService.getAssets(this.page, this.count).subscribe((value) => {
-          this.assets = this.assets.concat(value.static_assets);
-          this.page = +value.page;
-          this.total = +value.total;
-          this.page += 1;
-        }),
+        this.adminStaticAssetsService.getAssets(this.page, this.count, query).subscribe(
+          (value) => {
+            this.assets = this.assets.concat(value.static_assets);
+            this.page = +value.page;
+            this.total = +value.total;
+            this.page += 1;
+            this.isLoading = false;
+          },
+          (error) => {
+            console.error('Error fetching assets:', error);
+            this.isLoading = false;
+          },
+        ),
       );
     }
   }
+
+  getAssetById() {
+    this.adminStaticAssetsService.getAssetById(Number(this.searchById.value)).subscribe((data) => {
+      this.searchedById = data;
+    });
+  }
+
+  openDialogBox(templateRef: TemplateRef<any>) {
+    this.dialogService.open(templateRef, { closeOnBackdropClick: false });
+  }
 }
diff --git a/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.html b/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.html
new file mode 100644
index 000000000..f720168af
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.html
@@ -0,0 +1,139 @@
+<div class="base-layout">
+  <div class="container">
+    <div class="one-column-layout">
+      <h3>List of Quest Task types platform</h3>
+      <button nbButton (click)="openDialog(createEditTaskType)" status="info" class="com-mb-4">
+        <nb-icon icon="plus"></nb-icon>Create New Task Platform Type
+      </button>
+      <table>
+        <tr>
+          <th>Logo</th>
+          <th>Platform Name</th>
+          <th>Description</th>
+          <th>Platform Types</th>
+          <th>Actions</th>
+        </tr>
+        <tr *ngFor="let taskType of taskTypes; let i = index">
+          <td><img [src]="taskType.logo_url" alt="" /></td>
+          <td>{{ taskType.platform_name | titlecase }}</td>
+          <td>{{ taskType.description ?? '--' }}</td>
+          <td>{{ taskType.platform_type | capitalizeAndRemoveUnderscore }}</td>
+          <td>
+            <button nbButton status="primary" size="tiny" (click)="openDialog(createEditTaskType, taskType)">
+              edit
+            </button>
+            &nbsp; &nbsp; &nbsp;
+            <button nbButton status="danger" size="tiny" outline (click)="destroy(taskType, i)">Delete</button>
+          </td>
+        </tr>
+      </table>
+
+      <ng-template #createEditTaskType let-data let-ref="dialogRef">
+        <nb-card>
+          <nb-card-header>
+            <div>{{ data.taskType ? 'Edit Task type' : 'Create new task type' }}</div>
+            <button ghost nbButton size="small" (click)="ref.close()">
+              <nb-icon icon="close"></nb-icon>
+            </button>
+          </nb-card-header>
+          <nb-card-body>
+            <div class="quest-task-type-form">
+              <form [formGroup]="questTaskTypeForm">
+                <div class="form-group">
+                  <label for="platform_name">Platform Name <span class="required">*</span></label>
+                  <input
+                    id="platform_name"
+                    formControlName="platform_name"
+                    type="text"
+                    class="form-control"
+                    placeholder="Enter platform name"
+                    nbInput
+                    fullWidth
+                  />
+                  <div
+                    *ngIf="
+                      questTaskTypeForm.get('platform_name').invalid && questTaskTypeForm.get('platform_name').touched
+                    "
+                  >
+                    <commudle-alert
+                      [error]="true"
+                      errorMessage="Platform Name is required and must be less than 100 characters."
+                    ></commudle-alert>
+                  </div>
+                </div>
+
+                <div class="form-group">
+                  <label for="platform_type">Platform Type <span class="required">*</span></label>
+                  <input
+                    id="platform_type"
+                    formControlName="platform_type"
+                    type="text"
+                    class="form-control"
+                    placeholder="Enter platform type"
+                    nbInput
+                    fullWidth
+                  />
+                  <div
+                    *ngIf="
+                      questTaskTypeForm.get('platform_type').invalid && questTaskTypeForm.get('platform_type').touched
+                    "
+                  >
+                    <commudle-alert [error]="true" errorMessage="Platform Type is required."></commudle-alert>
+                  </div>
+                </div>
+
+                <div class="form-group">
+                  <label for="logo_url">Logo URL <span class="required">*</span></label>
+                  <input
+                    id="logo_url"
+                    formControlName="logo_url"
+                    type="url"
+                    class="form-control"
+                    placeholder="Enter logo URL"
+                    nbInput
+                    fullWidth
+                  />
+                  <div *ngIf="questTaskTypeForm.get('logo_url').invalid && questTaskTypeForm.get('logo_url').touched">
+                    <commudle-alert [error]="true" errorMessage="A valid Logo URL is required."></commudle-alert>
+                  </div>
+                </div>
+
+                <div class="form-group">
+                  <label for="description">Description <span class="required">*</span></label>
+                  <textarea
+                    id="description"
+                    formControlName="description"
+                    class="form-control"
+                    rows="3"
+                    placeholder="Enter description"
+                    nbInput
+                    fullWidth
+                  ></textarea>
+                  <div
+                    *ngIf="questTaskTypeForm.get('description').invalid && questTaskTypeForm.get('description').touched"
+                  >
+                    <commudle-alert
+                      [error]="true"
+                      errorMessage="Description is required and must be less than 255 characters."
+                    ></commudle-alert>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </nb-card-body>
+          <nb-card-footer>
+            <button
+              nbButton
+              status="primary"
+              (click)="createOrUpdate(data.taskType); ref.close()"
+              [disabled]="!questTaskTypeForm.valid"
+            >
+              Confirm
+            </button>
+            <button nbButton status="danger" (click)="ref.close()">cancel</button>
+          </nb-card-footer>
+        </nb-card>
+      </ng-template>
+    </div>
+  </div>
+</div>
diff --git a/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.scss b/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.scss
new file mode 100644
index 000000000..c80cb0a80
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.scss
@@ -0,0 +1,42 @@
+table {
+  font-family: arial, sans-serif;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+td,
+th {
+  border: 1px solid #dddddd;
+  text-align: left;
+  padding: 8px;
+}
+
+tr:nth-child(even) {
+  background-color: #dddddd;
+}
+
+img {
+  @apply com-h-6 com-w-6;
+}
+
+ul {
+  @apply com-my-0;
+}
+nb-card {
+  @apply md:com-w-[40dvw] com-w-full;
+  nb-card-header,
+  nb-card-footer {
+    @apply com-flex com-justify-between;
+  }
+
+  nb-card-body {
+    .quest-task-type-form {
+      .form-group {
+        @apply com-mb-4;
+      }
+      .required {
+        @apply com-text-red-500;
+      }
+    }
+  }
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.spec.ts b/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.spec.ts
new file mode 100644
index 000000000..3e1b6a12a
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { QuestTaskTypesComponent } from './quest-task-types.component';
+
+describe('QuestTaskTypesComponent', () => {
+  let component: QuestTaskTypesComponent;
+  let fixture: ComponentFixture<QuestTaskTypesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestTaskTypesComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QuestTaskTypesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.ts b/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.ts
new file mode 100644
index 000000000..6f52cf9ba
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.ts
@@ -0,0 +1,59 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { IQuestTaskType } from '@commudle/shared-models';
+import { TaskService } from '@commudle/shared-services';
+import { NbDialogService } from '@commudle/theme';
+
+@Component({
+  selector: 'commudle-quest-task-types',
+  templateUrl: './quest-task-types.component.html',
+  styleUrls: ['./quest-task-types.component.scss'],
+})
+export class QuestTaskTypesComponent implements OnInit {
+  taskTypes: IQuestTaskType[];
+  questTaskTypeForm: FormGroup;
+
+  constructor(private taskService: TaskService, private nbDialogService: NbDialogService, private fb: FormBuilder) {
+    this.questTaskTypeForm = this.fb.group({
+      platform_name: ['', [Validators.required, Validators.maxLength(100)]],
+      platform_type: ['', [Validators.required]],
+      logo_url: ['', [Validators.required, Validators.pattern('https?://.+')]], // URL validation
+      description: ['', [Validators.required, Validators.maxLength(255)]],
+    });
+  }
+
+  ngOnInit() {
+    this.taskService.getQuestTaskTypeIndex().subscribe((res) => {
+      this.taskTypes = res;
+    });
+  }
+
+  openDialog(templateRef, taskType?) {
+    if (taskType) {
+      this.questTaskTypeForm.patchValue(taskType);
+    }
+    this.nbDialogService.open(templateRef, {
+      context: {
+        taskType: taskType,
+      },
+    });
+  }
+  createOrUpdate(taskType?) {
+    if (taskType) {
+      this.taskService.updateQuestTaskType(taskType.id, this.questTaskTypeForm.value).subscribe((res) => {
+        const index = this.taskTypes.findIndex((t) => t.id === taskType.id);
+        this.taskTypes[index] = res;
+      });
+    } else {
+      this.taskService.createQuestTaskType(this.questTaskTypeForm.value).subscribe((res) => {
+        this.taskTypes.unshift(res);
+      });
+    }
+  }
+
+  destroy(taskType, index) {
+    this.taskService.destroyQuestTaskType(taskType.id).subscribe((res) => {
+      this.taskTypes.splice(index, 1);
+    });
+  }
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/sys-admin/services/admin-static-assets.service.ts b/apps/commudle-admin/src/app/feature-modules/sys-admin/services/admin-static-assets.service.ts
index 4ca2278de..02bb41545 100644
--- a/apps/commudle-admin/src/app/feature-modules/sys-admin/services/admin-static-assets.service.ts
+++ b/apps/commudle-admin/src/app/feature-modules/sys-admin/services/admin-static-assets.service.ts
@@ -12,7 +12,7 @@ import { Observable } from 'rxjs';
 export class AdminStaticAssetsService {
   constructor(private http: HttpClient, private apiRoutesService: ApiRoutesService) {}
 
-  getAssets(page?: number, count?: number): Observable<IStaticAssets> {
+  getAssets(page?: number, count?: number, q?): Observable<IStaticAssets> {
     let params = new HttpParams();
     if (page) {
       params = params.append('page', String(page));
@@ -20,7 +20,10 @@ export class AdminStaticAssetsService {
     if (count) {
       params = params.append('count', String(count));
     }
-    return this.http.get<IStaticAssets>(this.apiRoutesService.getRoute(API_ROUTES.STATIC_ASSETS.SHOW), { params });
+    if (q) {
+      params = params.append('q', q);
+    }
+    return this.http.get<IStaticAssets>(this.apiRoutesService.getRoute(API_ROUTES.STATIC_ASSETS.INDEX), { params });
   }
 
   createAsset(formData): Observable<IStaticAssets> {
diff --git a/apps/commudle-admin/src/app/feature-modules/sys-admin/sys-admin-routing.module.ts b/apps/commudle-admin/src/app/feature-modules/sys-admin/sys-admin-routing.module.ts
index 04450cc08..32f07dab3 100644
--- a/apps/commudle-admin/src/app/feature-modules/sys-admin/sys-admin-routing.module.ts
+++ b/apps/commudle-admin/src/app/feature-modules/sys-admin/sys-admin-routing.module.ts
@@ -24,6 +24,7 @@ import { AdminFeaturedUsersComponent } from 'apps/commudle-admin/src/app/feature
 import { AdminFeaturedCommunitiesChannelsComponent } from 'apps/commudle-admin/src/app/feature-modules/sys-admin/components/admin-featured/admin-featured-communities-channels/admin-featured-communities-channels.component';
 import { PaymentLogsComponent } from 'apps/commudle-admin/src/app/feature-modules/sys-admin/components/payment-logs/payment-logs.component';
 import { PaymentDetailComponent } from 'apps/shared-components/payment-detail/payment-detail.component';
+import { QuestTaskTypesComponent } from 'apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component';
 
 const routes = [
   {
@@ -34,6 +35,10 @@ const routes = [
         path: '',
         component: CommunityControlsComponent,
       },
+      {
+        path: 'quest-task-types',
+        component: QuestTaskTypesComponent,
+      },
       {
         path: 'pa',
         component: AdminPageAdsComponent,
diff --git a/apps/commudle-admin/src/app/feature-modules/sys-admin/sys-admin.module.ts b/apps/commudle-admin/src/app/feature-modules/sys-admin/sys-admin.module.ts
index 422f1f546..bea199875 100644
--- a/apps/commudle-admin/src/app/feature-modules/sys-admin/sys-admin.module.ts
+++ b/apps/commudle-admin/src/app/feature-modules/sys-admin/sys-admin.module.ts
@@ -48,6 +48,7 @@ import { AdminFeaturedEventsComponent } from './components/admin-featured/admin-
 import { AdminFeaturedUsersComponent } from './components/admin-featured/admin-featured-users/admin-featured-users.component';
 import { AdminFeaturedCommunitiesChannelsComponent } from './components/admin-featured/admin-featured-communities-channels/admin-featured-communities-channels.component';
 import { PaymentLogsComponent } from 'apps/commudle-admin/src/app/feature-modules/sys-admin/components/payment-logs/payment-logs.component';
+import { QuestTaskTypesComponent } from 'apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component';
 @NgModule({
   declarations: [
     SysAdminComponent,
@@ -75,6 +76,7 @@ import { PaymentLogsComponent } from 'apps/commudle-admin/src/app/feature-module
     AdminFeaturedUsersComponent,
     AdminFeaturedCommunitiesChannelsComponent,
     PaymentLogsComponent,
+    QuestTaskTypesComponent,
   ],
   imports: [
     CommonModule,
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.html b/apps/shared-components/quest-task-card/quest-task-card.component.html
index 6960b4616..02dac3c9c 100644
--- a/apps/shared-components/quest-task-card/quest-task-card.component.html
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.html
@@ -6,7 +6,8 @@
     </div>
     <p class="description">{{ task.description }}</p>
     <div class="rewards">
-      <span>{{ task.reward_points }} Reward Points</span>
+      <img [src]="ERewardPointsLogo[task.reward_points]" [alt]="task.reward_points" [title]="task.reward_points" />
+      <span [class]="ERewardPointsColors[task.reward_points]">{{ task.reward_points }} Reward Points</span>
     </div>
   </nb-card-body>
 </nb-card>
@@ -39,6 +40,7 @@
         <button nbButton (click)="stepTwo = false; stepThree = true">
           <span>Use This Account</span>
         </button>
+        <span (click)="loginAccount()">Connect with Account</span>
       </div>
 
       <div *ngIf="stepThree">
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.scss b/apps/shared-components/quest-task-card/quest-task-card.component.scss
index b55172773..e9832b196 100644
--- a/apps/shared-components/quest-task-card/quest-task-card.component.scss
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.scss
@@ -13,7 +13,7 @@
     @apply com-h-10 com-line-clamp-2;
   }
   .rewards {
-    @apply com-w-full com-border com-border-solid com-border-Bright-Gray com-rounded-lg com-bg-gray-50 com-text-center com-text-fuchsia-600 com-py-1;
+    @apply com-flex com-items-center com-gap-2 com-w-full com-border com-border-solid com-border-Bright-Gray com-rounded-lg com-bg-gray-50 com-text-fuchsia-600 com-py-1 com-justify-center;
   }
 
   &.admin-properties {
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.ts b/apps/shared-components/quest-task-card/quest-task-card.component.ts
index ec15234bb..2ac9a1182 100644
--- a/apps/shared-components/quest-task-card/quest-task-card.component.ts
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.ts
@@ -1,5 +1,11 @@
 import { Component, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { EExternalUserAuth, IExternalUserAuth, ITask } from '@commudle/shared-models';
+import {
+  EExternalUserAuth,
+  IExternalUserAuth,
+  ITask,
+  ERewardPointsColors,
+  ERewardPointsLogo,
+} from '@commudle/shared-models';
 import {
   ExternalUserAuthHandlerService,
   ExternalUserAuthService,
@@ -21,6 +27,8 @@ export class QuestTaskCardComponent implements OnInit {
   stepOne = true;
   stepTwo = false;
   stepThree = false;
+  ERewardPointsColors = ERewardPointsColors;
+  ERewardPointsLogo = ERewardPointsLogo;
   @ViewChild('discordDialog') discordDialogBox: TemplateRef<any>;
 
   constructor(
diff --git a/libs/shared/environments/src/lib/environments.ts b/libs/shared/environments/src/lib/environments.ts
index 8a0e33f84..0c3a7216f 100644
--- a/libs/shared/environments/src/lib/environments.ts
+++ b/libs/shared/environments/src/lib/environments.ts
@@ -12,6 +12,7 @@ type Environment = {
   stripe: string;
   sentry_dsn: string;
   razorpay_key: string;
+  discord_client_id: string;
 };
 
 const environments: { [type: string]: Environment } = {
@@ -30,6 +31,7 @@ const environments: { [type: string]: Environment } = {
       'pk_live_51NIQahSAaAm97Wzm6Nthh2SsbFH123ckuvoO9P4fEghH2IeC5laeiJmYSBHbOt9bFE1fHY1Hwig5lqiHko0bn7Yi00EWLt1AuB',
     sentry_dsn: 'https://008ea5f833883ac6e933856b26757b7e@o566989.ingest.sentry.io/4506098297405440',
     razorpay_key: 'rzp_test_AQ8emxZcsJoKdl',
+    discord_client_id: '1298505458629214218',
   },
   test: {
     production: false,
@@ -46,6 +48,7 @@ const environments: { [type: string]: Environment } = {
       'pk_test_51NIQahSAaAm97WzmtpZtqYAuI1cCfN7LAJPoy8SmBpJqXQ5c7gnmOXXS9VtXa1b6YvCa1Uc9bX3Ra9ZLjm4AQBSs00en3kVojH',
     sentry_dsn: 'https://008ea5f833883ac6e933856b26757b7e@o566989.ingest.sentry.io/4506098297405440',
     razorpay_key: 'rzp_test_AQ8emxZcsJoKdl',
+    discord_client_id: '1298505458629214218',
   },
   staging: {
     production: false,
@@ -62,6 +65,7 @@ const environments: { [type: string]: Environment } = {
       'pk_live_51NIQahSAaAm97Wzm6Nthh2SsbFH123ckuvoO9P4fEghH2IeC5laeiJmYSBHbOt9bFE1fHY1Hwig5lqiHko0bn7Yi00EWLt1AuB',
     sentry_dsn: 'https://008ea5f833883ac6e933856b26757b7e@o566989.ingest.sentry.io/4506098297405440',
     razorpay_key: 'rzp_live_nqGSJl7Jt6bsZx',
+    discord_client_id: '1298505458629214218',
   },
   production: {
     production: true,
@@ -78,6 +82,7 @@ const environments: { [type: string]: Environment } = {
       'pk_live_51NIQahSAaAm97Wzm6Nthh2SsbFH123ckuvoO9P4fEghH2IeC5laeiJmYSBHbOt9bFE1fHY1Hwig5lqiHko0bn7Yi00EWLt1AuB',
     sentry_dsn: 'https://008ea5f833883ac6e933856b26757b7e@o566989.ingest.sentry.io/4506098297405440',
     razorpay_key: 'rzp_live_nqGSJl7Jt6bsZx',
+    discord_client_id: '1298505458629214218',
   },
 };
 
diff --git a/libs/shared/models/src/lib/task.model.ts b/libs/shared/models/src/lib/task.model.ts
index 8e07645d4..a9204da56 100644
--- a/libs/shared/models/src/lib/task.model.ts
+++ b/libs/shared/models/src/lib/task.model.ts
@@ -9,3 +9,19 @@ export interface ITask {
   url: string;
   quest_task_type: IQuestTaskType;
 }
+
+export const ERewardPointsColors = {
+  1: 'com-text-yellow-700',
+  2: 'com-text-slate-500',
+  3: 'com-text-yellow-600',
+  4: 'com-text-blue-500',
+  5: 'com-text-fuchsia-600',
+};
+
+export const ERewardPointsLogo = {
+  1: 'https://json.commudle.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBOXBhQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--9b2974c3f3b141442f7a4385a2844074bdd8cbac/1.svg',
+  2: 'https://json.commudle.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBOXRhQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--9893d9a6abbba504f0ee8552d9a9014b3ca753b8/2.svg',
+  3: 'https://json.commudle.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBOXhhQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--038531b272cf14887b398b734da6d046fe5456d2/3.svg',
+  4: 'https://json.commudle.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBOTFhQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--5d1935fdb21c170d2239ff2f883bf75bc2e8aa21/4.svg',
+  5: 'https://json.commudle.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBOTVhQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--af928159fd59e68004390eb9f73ca3b1755fa84b/5.svg',
+};
diff --git a/libs/shared/services/src/lib/api-routes.constant.ts b/libs/shared/services/src/lib/api-routes.constant.ts
index 1e97cea70..8bafaf366 100644
--- a/libs/shared/services/src/lib/api-routes.constant.ts
+++ b/libs/shared/services/src/lib/api-routes.constant.ts
@@ -390,9 +390,11 @@ export const API_ROUTES = {
     DELETE: 'api/v2/badges',
   },
   STATIC_ASSETS: {
-    SHOW: 'api/v2/static_assets',
+    INDEX: 'api/v2/static_assets',
     CREATE: 'api/v2/static_assets',
+    SHOW: 'api/v2/static_assets/show',
   },
+
   USER_BADGES: {
     INDEX: 'api/v2/user_badges',
     CREATE: 'api/v2/user_badges',
@@ -979,5 +981,11 @@ export const API_ROUTES = {
       INDEX: 'api/v2/tasks/public', //GET
       SHOW: 'api/v2/tasks/public/show', //GET
     },
+    QUEST_TASK_TYPE: {
+      INDEX: 'api/v2/tasks/quest_task_type', //GET
+      UPDATE: 'api/v2/tasks/quest_task_type', //PUT
+      CREATE: 'api/v2/tasks/quest_task_type', //POST
+      DESTROY: 'api/v2/tasks/quest_task_type', //DELETE
+    },
   },
 };
diff --git a/libs/shared/services/src/lib/task.service.ts b/libs/shared/services/src/lib/task.service.ts
index 2ce5db09d..6f452512c 100644
--- a/libs/shared/services/src/lib/task.service.ts
+++ b/libs/shared/services/src/lib/task.service.ts
@@ -46,4 +46,35 @@ export class TaskService {
       params,
     });
   }
+
+  // Quest Task Type
+  getQuestTaskTypeIndex(): Observable<IQuestTaskType[]> {
+    return this.http.get<IQuestTaskType[]>(this.baseApiService.getRoute(API_ROUTES.TASKS.QUEST_TASK_TYPE.INDEX));
+  }
+
+  createQuestTaskType(formData): Observable<IQuestTaskType> {
+    return this.http.post<IQuestTaskType>(this.baseApiService.getRoute(API_ROUTES.TASKS.QUEST_TASK_TYPE.CREATE), {
+      quest_task_type: formData,
+    });
+  }
+
+  destroyQuestTaskType(questTaskTypeId): Observable<boolean> {
+    const params = new HttpParams().set('quest_task_type_id', questTaskTypeId);
+    return this.http.delete<boolean>(this.baseApiService.getRoute(API_ROUTES.TASKS.QUEST_TASK_TYPE.DESTROY), {
+      params,
+    });
+  }
+
+  updateQuestTaskType(questTaskTypeId, formData): Observable<IQuestTaskType> {
+    const params = new HttpParams().set('quest_task_type_id', questTaskTypeId);
+    return this.http.put<IQuestTaskType>(
+      this.baseApiService.getRoute(API_ROUTES.TASKS.QUEST_TASK_TYPE.UPDATE),
+      {
+        quest_task_type: formData,
+      },
+      {
+        params,
+      },
+    );
+  }
 }

From 4bceadd27dc3f7147424d39e4802ee24d04be55e Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Fri, 29 Nov 2024 14:37:43 +0530
Subject: [PATCH 20/30] style: quest task creation

---
 .../community-controls.component.html         |  2 +
 .../quest-task-types.component.html           | 58 ++++++++++---------
 .../quest-task-types.component.scss           |  2 +-
 .../quest-task-card.component.ts              |  4 ++
 .../lib/external-user-auth-handler.service.ts |  6 ++
 5 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/community-controls.component.html b/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/community-controls.component.html
index 89427f2c4..ad6b39c07 100644
--- a/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/community-controls.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/community-controls.component.html
@@ -11,6 +11,8 @@
           <nb-icon icon="plus"></nb-icon>
           Create Community
         </button>
+
+        <button [routerLink]="['quest-task-types']" nbButton status="primary">Quest Task types</button>
       </div>
     </div>
   </div>
diff --git a/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.html b/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.html
index f720168af..455dd92ee 100644
--- a/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.html
@@ -1,35 +1,39 @@
 <div class="base-layout">
   <div class="container">
     <div class="one-column-layout">
-      <h3>List of Quest Task types platform</h3>
-      <button nbButton (click)="openDialog(createEditTaskType)" status="info" class="com-mb-4">
-        <nb-icon icon="plus"></nb-icon>Create New Task Platform Type
-      </button>
-      <table>
-        <tr>
-          <th>Logo</th>
-          <th>Platform Name</th>
-          <th>Description</th>
-          <th>Platform Types</th>
-          <th>Actions</th>
-        </tr>
-        <tr *ngFor="let taskType of taskTypes; let i = index">
-          <td><img [src]="taskType.logo_url" alt="" /></td>
-          <td>{{ taskType.platform_name | titlecase }}</td>
-          <td>{{ taskType.description ?? '--' }}</td>
-          <td>{{ taskType.platform_type | capitalizeAndRemoveUnderscore }}</td>
-          <td>
-            <button nbButton status="primary" size="tiny" (click)="openDialog(createEditTaskType, taskType)">
-              edit
-            </button>
-            &nbsp; &nbsp; &nbsp;
-            <button nbButton status="danger" size="tiny" outline (click)="destroy(taskType, i)">Delete</button>
-          </td>
-        </tr>
-      </table>
+      <nb-card>
+        <nb-card-body>
+          <h3>List of Quest Task types platform</h3>
+          <button nbButton (click)="openDialog(createEditTaskType)" status="info" class="com-mb-4 com-w-max">
+            <nb-icon icon="plus"></nb-icon>Create New Task Platform Type
+          </button>
+          <table>
+            <tr>
+              <th>Logo</th>
+              <th>Platform Name</th>
+              <th>Description</th>
+              <th>Platform Types</th>
+              <th>Actions</th>
+            </tr>
+            <tr *ngFor="let taskType of taskTypes; let i = index">
+              <td><img [src]="taskType.logo_url" alt="" /></td>
+              <td>{{ taskType.platform_name | titlecase }}</td>
+              <td>{{ taskType.description ?? '--' }}</td>
+              <td>{{ taskType.platform_type | capitalizeAndRemoveUnderscore }}</td>
+              <td>
+                <button nbButton status="primary" size="tiny" (click)="openDialog(createEditTaskType, taskType)">
+                  edit
+                </button>
+                &nbsp; &nbsp; &nbsp;
+                <button nbButton status="danger" size="tiny" outline (click)="destroy(taskType, i)">Delete</button>
+              </td>
+            </tr>
+          </table>
+        </nb-card-body>
+      </nb-card>
 
       <ng-template #createEditTaskType let-data let-ref="dialogRef">
-        <nb-card>
+        <nb-card class="edit-create-task-types">
           <nb-card-header>
             <div>{{ data.taskType ? 'Edit Task type' : 'Create new task type' }}</div>
             <button ghost nbButton size="small" (click)="ref.close()">
diff --git a/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.scss b/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.scss
index c80cb0a80..5c12acdae 100644
--- a/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.scss
+++ b/apps/commudle-admin/src/app/feature-modules/sys-admin/components/community-controls/quest-task-types/quest-task-types.component.scss
@@ -22,7 +22,7 @@ img {
 ul {
   @apply com-my-0;
 }
-nb-card {
+.edit-create-task-types {
   @apply md:com-w-[40dvw] com-w-full;
   nb-card-header,
   nb-card-footer {
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.ts b/apps/shared-components/quest-task-card/quest-task-card.component.ts
index 2ac9a1182..fc17ba066 100644
--- a/apps/shared-components/quest-task-card/quest-task-card.component.ts
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.ts
@@ -45,6 +45,7 @@ export class QuestTaskCardComponent implements OnInit {
     this.stepOne = true;
     this.stepTwo = false;
     this.stepThree = false;
+
     switch (task.quest_task_type.platform_name) {
       case EExternalUserAuth.DISCORD:
         this.getExternalUsers(EExternalUserAuth.DISCORD);
@@ -69,6 +70,9 @@ export class QuestTaskCardComponent implements OnInit {
       case EExternalUserAuth.DISCORD:
         this.externalUserAuthHandlerService.loginToDiscord(this.task.id);
         return;
+      case EExternalUserAuth.INSTAGRAM:
+        this.externalUserAuthHandlerService.loginToInstagram();
+        return;
     }
   }
 
diff --git a/libs/shared/services/src/lib/external-user-auth-handler.service.ts b/libs/shared/services/src/lib/external-user-auth-handler.service.ts
index 8ff9d0d75..6fbebad02 100644
--- a/libs/shared/services/src/lib/external-user-auth-handler.service.ts
+++ b/libs/shared/services/src/lib/external-user-auth-handler.service.ts
@@ -22,6 +22,12 @@ export class ExternalUserAuthHandlerService {
     window.location.href = url;
   }
 
+  loginToInstagram() {
+    const YOUR_INSTAGRAM_CLIENT_ID = '989280999691182';
+    const redirectUrl = 'https://www.commudle.com/';
+    const instagramLoginUrl = `https://api.instagram.com/oauth/authorize?client_id=${YOUR_INSTAGRAM_CLIENT_ID}&redirect_uri=${redirectUrl}&scope=user_profile,user_media&response_type=code`;
+    window.location.href = instagramLoginUrl;
+  }
   // Extract token from URL after Discord login
   getTokenFromUrl() {
     this.activatedRoute.queryParamMap.subscribe((params) => {

From 1ef3f1642b4f4d2de7af69c1156634a80a29dea4 Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Fri, 29 Nov 2024 16:32:30 +0530
Subject: [PATCH 21/30] feat: public side for quest

---
 .../public-quest-homepage.component.html      | 39 +++++++-
 .../public-quest-homepage.component.scss      | 89 +++++++++++++++----
 .../public-quest-homepage.component.ts        |  5 +-
 .../public-quests/public-quests.module.ts     |  3 +-
 libs/shared/models/src/lib/quest.model.ts     |  2 +
 5 files changed, 117 insertions(+), 21 deletions(-)

diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
index ecf525e79..fb2db6b7e 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
@@ -7,9 +7,18 @@
             <app-community-badge [community]="quest.community"></app-community-badge>
           </div>
           <h1>{{ quest.name }}</h1>
-          <div>
-            <div class="status"></div>
-            <div class="dates">
+          <div class="status-dates">
+            <div class="status">
+              <div class="active" *ngIf="quest.is_active">
+                <fa-icon [icon]="icons.faCircle"></fa-icon>
+                <span>Active</span>
+              </div>
+              <div class="inactive" *ngIf="!quest.is_active">
+                <fa-icon [icon]="icons.faCircle"></fa-icon>
+                <span>Inactive</span>
+              </div>
+            </div>
+            <div class="dates" *ngIf="quest.start_date && quest.end_date">
               <div class="start-date">
                 <span class="date">{{ quest.start_date | date : "d'th' MMM" }}</span>
                 <span> | </span>
@@ -24,13 +33,35 @@ <h1>{{ quest.name }}</h1>
             </div>
           </div>
 
+          <div class="divided-line-horizontal"></div>
           <div class="task-cards">
             <div *ngFor="let task of tasks">
               <commudle-quest-task-card [task]="task"></commudle-quest-task-card>
             </div>
           </div>
         </div>
-        <div class="right-column"></div>
+        <div class="right-column">
+          <div class="user-task-container">
+            <div class="heading task">
+              <fa-icon [icon]="icons.faListCheck"></fa-icon>
+              <span>Tasks</span>
+            </div>
+            <nb-card>
+              <nb-card-header>Total Task Completed</nb-card-header>
+              <nb-card-body> 0/{{ quest.tasks_count }} </nb-card-body>
+            </nb-card>
+          </div>
+          <div class="user-rewards-container">
+            <div class="heading rewards">
+              <fa-icon [icon]="icons.faGift"></fa-icon>
+              <span>Rewards</span>
+            </div>
+            <nb-card>
+              <nb-card-header>Reward Points Collected</nb-card-header>
+              <nb-card-body> 0/{{ quest.total_rewards_points }} </nb-card-body>
+            </nb-card>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss
index ce0b6a333..caadcd2a5 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss
@@ -1,23 +1,82 @@
-.community-badge {
-  @apply com-mt-4;
-}
+.main-column {
+  @apply com-border-0 com-border-r com-border-solid com-border-Bright-Gray;
 
-.dates {
-  @apply com-flex com-gap-2 com-items-center;
-  .start-date {
-    @apply com-border-2 com-border-solid com-border-Bright-Gray com-rounded-tl-2xl com-rounded-bl-2xl com-rounded-tr-lg com-rounded-br-lg com-w-max com-px-2 com-py-1;
+  .community-badge {
+    @apply com-mt-4;
   }
-  .end-date {
-    @apply com-border-2 com-border-solid com-border-Bright-Gray com-rounded-tl-lg com-rounded-bl-lg com-rounded-tr-2xl com-rounded-br-2xl com-w-max com-px-2 com-py-1;
+
+  .status-dates {
+    @apply com-flex com-gap-2 com-items-center;
+    .status {
+      @apply com-border-2 com-border-solid com-border-Bright-Gray com-rounded-2xl com-w-max com-px-2 com-py-1;
+      .active {
+        fa-icon {
+          @apply com-text-green-500;
+        }
+      }
+      .inactive {
+        fa-icon {
+          @apply com-text-red-500;
+        }
+      }
+      .active,
+      .inactive {
+        @apply com-flex com-gap-2;
+      }
+    }
+    .dates {
+      @apply com-flex com-gap-2 com-items-center;
+      .start-date {
+        @apply com-border-2 com-border-solid com-border-Bright-Gray com-rounded-tl-2xl com-rounded-bl-2xl com-rounded-tr-lg com-rounded-br-lg com-w-max com-px-2 com-py-1;
+      }
+      .end-date {
+        @apply com-border-2 com-border-solid com-border-Bright-Gray com-rounded-tl-lg com-rounded-bl-lg com-rounded-tr-2xl com-rounded-br-2xl com-w-max com-px-2 com-py-1;
+      }
+      .date {
+        @apply com-font-semibold;
+      }
+      .time {
+        @apply com-text-gray-500;
+      }
+    }
   }
-  .date {
-    @apply com-font-semibold;
+  .divided-line-horizontal {
+    @apply com-border com-border-solid com-border-Bright-Gray com-mt-4 com-mb-1;
   }
-  .time {
-    @apply com-text-gray-500;
+
+  .task-cards {
+    @apply com-grid com-grid-cols-2 com-mr-3;
   }
 }
 
-.task-cards {
-  @apply com-grid com-grid-cols-2;
+.right-column {
+  @apply com-ml-3 com-mt-4;
+  .user-task-container,
+  .user-rewards-container {
+    .heading {
+      @apply com-flex com-items-center com-gap-2;
+      span {
+        @apply com-font-semibold com-text-base;
+      }
+      &.task {
+        fa-icon {
+          @apply com-text-primary-400;
+        }
+      }
+      &.rewards {
+        fa-icon {
+          @apply com-text-red-500;
+        }
+      }
+    }
+    nb-card {
+      @apply com-mx-0;
+      nb-card-header {
+        @apply com-bg-gray-50 com-text-sm com-text-gray-500;
+      }
+      nb-card-body {
+        @apply com-text-base com-font-bold;
+      }
+    }
+  }
 }
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
index 26e9a5f3d..79a74da76 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { IQuest, ITask } from '@commudle/shared-models';
 import { TaskService } from '@commudle/shared-services';
 import { NbDialogService } from '@commudle/theme';
-import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRight, faCircle, faGift, faListCheck } from '@fortawesome/free-solid-svg-icons';
 import { QuestTaskCardComponent } from 'apps/shared-components/quest-task-card/quest-task-card.component';
 import moment from 'moment';
 
@@ -18,6 +18,9 @@ export class PublicQuestHomepageComponent implements OnInit {
   tasks: ITask[];
   icons = {
     faArrowRight,
+    faCircle,
+    faListCheck,
+    faGift,
   };
   @ViewChild(QuestTaskCardComponent) questTaskCardComponent: QuestTaskCardComponent;
   @ViewChild('loadingScreen') LoadingDialogBox: TemplateRef<any>;
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.module.ts b/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.module.ts
index fcdb86f04..d64e38cbd 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.module.ts
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.module.ts
@@ -4,9 +4,10 @@ import { PublicQuestHomepageComponent } from './components/public-quest-homepage
 import { PublicQuestsRoutes } from './public-quests.routing';
 import { SharedComponentsModule } from 'apps/shared-components/shared-components.module';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { NbCardModule } from '@commudle/theme';
 
 @NgModule({
-  imports: [CommonModule, PublicQuestsRoutes, SharedComponentsModule, FontAwesomeModule],
+  imports: [CommonModule, PublicQuestsRoutes, SharedComponentsModule, FontAwesomeModule, NbCardModule],
   declarations: [PublicQuestHomepageComponent],
 })
 export class PublicQuestsModule {}
diff --git a/libs/shared/models/src/lib/quest.model.ts b/libs/shared/models/src/lib/quest.model.ts
index 30b9cde7b..0849f49b7 100644
--- a/libs/shared/models/src/lib/quest.model.ts
+++ b/libs/shared/models/src/lib/quest.model.ts
@@ -12,6 +12,8 @@ export interface IQuest {
   tasks_count: number;
   participants_count: number;
   community: ICommunity;
+  is_active: boolean;
+  total_rewards_points: number;
 }
 
 export enum EQuestVisibility {

From 8f09c0b37dc7733cf649aef5ad43cc4a5d2a56d0 Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Sat, 30 Nov 2024 12:54:55 +0530
Subject: [PATCH 22/30] feat: instagram and telegram callback components

---
 .../components/discord/discord.component.ts   |  3 +-
 .../instagram/instagram.component.html        |  8 +++++
 .../instagram/instagram.component.scss        |  9 ++++++
 .../instagram/instagram.component.spec.ts     | 27 +++++++++++++++++
 .../instagram/instagram.component.ts          | 29 +++++++++++++++++++
 .../telegram/telegram.component.html          |  8 +++++
 .../telegram/telegram.component.scss          |  9 ++++++
 .../telegram/telegram.component.spec.ts       | 27 +++++++++++++++++
 .../components/telegram/telegram.component.ts | 29 +++++++++++++++++++
 .../user-oauth/user-oauth.module.ts           |  4 ++-
 .../user-oauth/user-oauth.routing.ts          | 10 +++++++
 .../src/assets/static-assets.ts               |  9 ++++++
 .../quest-task-card.component.ts              | 11 +++++++
 .../src/lib/external-user-auth.model.ts       |  3 ++
 .../lib/external-user-auth-handler.service.ts | 21 ++++++++++++--
 15 files changed, 202 insertions(+), 5 deletions(-)
 create mode 100644 apps/commudle-admin/src/app/feature-modules/user-oauth/components/instagram/instagram.component.html
 create mode 100644 apps/commudle-admin/src/app/feature-modules/user-oauth/components/instagram/instagram.component.scss
 create mode 100644 apps/commudle-admin/src/app/feature-modules/user-oauth/components/instagram/instagram.component.spec.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/user-oauth/components/instagram/instagram.component.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/user-oauth/components/telegram/telegram.component.html
 create mode 100644 apps/commudle-admin/src/app/feature-modules/user-oauth/components/telegram/telegram.component.scss
 create mode 100644 apps/commudle-admin/src/app/feature-modules/user-oauth/components/telegram/telegram.component.spec.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/user-oauth/components/telegram/telegram.component.ts

diff --git a/apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.ts b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.ts
index 39c3b75b5..976f9e363 100644
--- a/apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.ts
+++ b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/discord/discord.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { EExternalUserAuth } from '@commudle/shared-models';
 import { ExternalUserAuthHandlerService } from '@commudle/shared-services';
 import { staticAssets } from 'apps/commudle-admin/src/assets/static-assets';
 
@@ -22,7 +23,7 @@ export class DiscordComponent implements OnInit {
       const state = JSON.parse(decodeURIComponent(encodedState));
       const baseUrl = state.redirectTo;
       this.redirectTo = `${baseUrl}?task_id=${state.task_id}`;
-      this.externalUserAuthHandlerService.getTokenFromUrl();
+      this.externalUserAuthHandlerService.getTokenFromUrl(EExternalUserAuth.DISCORD);
       window.location.href = this.redirectTo;
     });
   }
diff --git a/apps/commudle-admin/src/app/feature-modules/user-oauth/components/instagram/instagram.component.html b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/instagram/instagram.component.html
new file mode 100644
index 000000000..981c0eb63
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/instagram/instagram.component.html
@@ -0,0 +1,8 @@
+<section>
+  <commudle-loading-spinner></commudle-loading-spinner>
+  <img [src]="staticAssets.instagram_logo" alt="Instagram Logo" title="Instagram Logo" />
+  <div>
+    Redirect To:
+    <a [href]="redirectTo">{{ redirectTo }}</a>
+  </div>
+</section>
diff --git a/apps/commudle-admin/src/app/feature-modules/user-oauth/components/instagram/instagram.component.scss b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/instagram/instagram.component.scss
new file mode 100644
index 000000000..9ebeb1b17
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/instagram/instagram.component.scss
@@ -0,0 +1,9 @@
+section {
+  @apply com-flex com-justify-center com-flex-col com-h-[80dvh] com-gap-14;
+  img {
+    @apply com-h-40;
+  }
+  div {
+    @apply com-text-center;
+  }
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/user-oauth/components/instagram/instagram.component.spec.ts b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/instagram/instagram.component.spec.ts
new file mode 100644
index 000000000..dc5af66ca
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/instagram/instagram.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { InstagramComponent } from './instagram.component';
+
+describe('InstagramComponent', () => {
+  let component: InstagramComponent;
+  let fixture: ComponentFixture<InstagramComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [InstagramComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InstagramComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/commudle-admin/src/app/feature-modules/user-oauth/components/instagram/instagram.component.ts b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/instagram/instagram.component.ts
new file mode 100644
index 000000000..9fa713124
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/instagram/instagram.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { EExternalUserAuth } from '@commudle/shared-models';
+import { ExternalUserAuthHandlerService } from '@commudle/shared-services';
+import { staticAssets } from 'apps/commudle-admin/src/assets/static-assets';
+
+@Component({
+  selector: 'commudle-instagram',
+  templateUrl: './instagram.component.html',
+  styleUrls: ['./instagram.component.scss'],
+})
+export class InstagramComponent implements OnInit {
+  redirectTo: string;
+  staticAssets = staticAssets;
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private externalUserAuthHandlerService: ExternalUserAuthHandlerService,
+  ) {}
+
+  ngOnInit() {
+    this.activatedRoute.queryParamMap.subscribe((params) => {
+      const encodedState = params.get('state');
+      const state = JSON.parse(decodeURIComponent(encodedState));
+      this.redirectTo = state.redirectTo;
+      this.externalUserAuthHandlerService.getTokenFromUrl(EExternalUserAuth.INSTAGRAM);
+      window.location.href = this.redirectTo;
+    });
+  }
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/user-oauth/components/telegram/telegram.component.html b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/telegram/telegram.component.html
new file mode 100644
index 000000000..4db73de8c
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/telegram/telegram.component.html
@@ -0,0 +1,8 @@
+<section>
+  <commudle-loading-spinner></commudle-loading-spinner>
+  <img [src]="staticAssets.telegram_logo" alt="Telegram Logo" title="Telegram Logo" />
+  <div>
+    Redirect To:
+    <a [href]="redirectTo">{{ redirectTo }}</a>
+  </div>
+</section>
diff --git a/apps/commudle-admin/src/app/feature-modules/user-oauth/components/telegram/telegram.component.scss b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/telegram/telegram.component.scss
new file mode 100644
index 000000000..9ebeb1b17
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/telegram/telegram.component.scss
@@ -0,0 +1,9 @@
+section {
+  @apply com-flex com-justify-center com-flex-col com-h-[80dvh] com-gap-14;
+  img {
+    @apply com-h-40;
+  }
+  div {
+    @apply com-text-center;
+  }
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/user-oauth/components/telegram/telegram.component.spec.ts b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/telegram/telegram.component.spec.ts
new file mode 100644
index 000000000..6d860fe62
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/telegram/telegram.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { TelegramComponent } from './telegram.component';
+
+describe('TelegramComponent', () => {
+  let component: TelegramComponent;
+  let fixture: ComponentFixture<TelegramComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TelegramComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TelegramComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/commudle-admin/src/app/feature-modules/user-oauth/components/telegram/telegram.component.ts b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/telegram/telegram.component.ts
new file mode 100644
index 000000000..276a5f6dc
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/user-oauth/components/telegram/telegram.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { EExternalUserAuth } from '@commudle/shared-models';
+import { ExternalUserAuthHandlerService } from '@commudle/shared-services';
+import { staticAssets } from 'apps/commudle-admin/src/assets/static-assets';
+
+@Component({
+  selector: 'commudle-telegram',
+  templateUrl: './telegram.component.html',
+  styleUrls: ['./telegram.component.scss'],
+})
+export class TelegramComponent implements OnInit {
+  redirectTo: string;
+  staticAssets = staticAssets;
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private externalUserAuthHandlerService: ExternalUserAuthHandlerService,
+  ) {}
+
+  ngOnInit() {
+    this.activatedRoute.queryParamMap.subscribe((params) => {
+      const encodedState = params.get('state');
+      const state = JSON.parse(decodeURIComponent(encodedState));
+      this.redirectTo = state.redirectTo;
+      this.externalUserAuthHandlerService.getTokenFromUrl(EExternalUserAuth.TELEGRAM);
+      window.location.href = this.redirectTo;
+    });
+  }
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/user-oauth/user-oauth.module.ts b/apps/commudle-admin/src/app/feature-modules/user-oauth/user-oauth.module.ts
index 0e115066d..8a2796c80 100644
--- a/apps/commudle-admin/src/app/feature-modules/user-oauth/user-oauth.module.ts
+++ b/apps/commudle-admin/src/app/feature-modules/user-oauth/user-oauth.module.ts
@@ -3,9 +3,11 @@ import { CommonModule } from '@angular/common';
 import { UserOauthRoutes } from './user-oauth.routing';
 import { DiscordComponent } from './components/discord/discord.component';
 import { SharedComponentsModule } from '@commudle/shared-components';
+import { InstagramComponent } from './components/instagram/instagram.component';
+import { TelegramComponent } from './components/telegram/telegram.component';
 
 @NgModule({
   imports: [CommonModule, UserOauthRoutes, SharedComponentsModule],
-  declarations: [DiscordComponent],
+  declarations: [DiscordComponent, TelegramComponent, InstagramComponent],
 })
 export class UserOauthModule {}
diff --git a/apps/commudle-admin/src/app/feature-modules/user-oauth/user-oauth.routing.ts b/apps/commudle-admin/src/app/feature-modules/user-oauth/user-oauth.routing.ts
index df9fe67ce..1e5fb2ade 100644
--- a/apps/commudle-admin/src/app/feature-modules/user-oauth/user-oauth.routing.ts
+++ b/apps/commudle-admin/src/app/feature-modules/user-oauth/user-oauth.routing.ts
@@ -1,11 +1,21 @@
 import { Routes, RouterModule } from '@angular/router';
 import { DiscordComponent } from './components/discord/discord.component';
+import { TelegramComponent } from './components/telegram/telegram.component';
+import { InstagramComponent } from './components/instagram/instagram.component';
 
 const routes: Routes = [
   {
     path: 'discord/callback',
     component: DiscordComponent,
   },
+  {
+    path: 'instagram/callback',
+    component: InstagramComponent,
+  },
+  {
+    path: 'telegram/callback',
+    component: TelegramComponent,
+  },
 ];
 
 export const UserOauthRoutes = RouterModule.forChild(routes);
diff --git a/apps/commudle-admin/src/assets/static-assets.ts b/apps/commudle-admin/src/assets/static-assets.ts
index 228e9e72c..b76347ac3 100644
--- a/apps/commudle-admin/src/assets/static-assets.ts
+++ b/apps/commudle-admin/src/assets/static-assets.ts
@@ -179,6 +179,15 @@ export const staticAssets = {
   call_for_speaker_empty_state:
     'https://json.commudle.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL0N1QWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--3d0e4b9c60c0f63c0272e41a6ea79608454cc379/CFP-Empty%20State.png',
 
+  // id: 161
+  instagram_logo:
+    'https://json.commudle.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeXcvQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--46e0fcd32ed6e38bf0439c81d04bf730fd392b7d/Instagram.svg',
+
+  // id: 162
   discord_logo:
     'https://json.commudle.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeTAvQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--d01625bde4293ef3b7d8de196a73f603114eed05/Discord.svg',
+
+  // id: 163
+  telegram_logo:
+    'https://json.commudle.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeTQvQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--1e096d1892f9cb80c35bc962b86956429681e00a/Telegram.svg',
 };
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.ts b/apps/shared-components/quest-task-card/quest-task-card.component.ts
index fc17ba066..8db969525 100644
--- a/apps/shared-components/quest-task-card/quest-task-card.component.ts
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.ts
@@ -51,6 +51,14 @@ export class QuestTaskCardComponent implements OnInit {
         this.getExternalUsers(EExternalUserAuth.DISCORD);
         this.dialogBoxService.open(this.discordDialogBox, { context: task });
         return;
+      case EExternalUserAuth.INSTAGRAM:
+        this.getExternalUsers(EExternalUserAuth.INSTAGRAM);
+        this.dialogBoxService.open(this.discordDialogBox, { context: task });
+        return;
+      case EExternalUserAuth.TELEGRAM:
+        this.getExternalUsers(EExternalUserAuth.TELEGRAM);
+        this.dialogBoxService.open(this.discordDialogBox, { context: task });
+        return;
     }
   }
 
@@ -73,6 +81,9 @@ export class QuestTaskCardComponent implements OnInit {
       case EExternalUserAuth.INSTAGRAM:
         this.externalUserAuthHandlerService.loginToInstagram();
         return;
+      case EExternalUserAuth.TELEGRAM:
+        this.externalUserAuthHandlerService.loginToTelegram();
+        return;
     }
   }
 
diff --git a/libs/shared/models/src/lib/external-user-auth.model.ts b/libs/shared/models/src/lib/external-user-auth.model.ts
index 1624ca3c5..f2d7b9025 100644
--- a/libs/shared/models/src/lib/external-user-auth.model.ts
+++ b/libs/shared/models/src/lib/external-user-auth.model.ts
@@ -13,4 +13,7 @@ export enum EExternalUserAuth {
   INSTAGRAM = 'instagram',
   FACEBOOK = 'facebook',
   LINKEDIN = 'linkedin',
+  TELEGRAM = 'telegram',
+  YOUTUBE = 'youtube',
+  GITHUB = 'github',
 }
diff --git a/libs/shared/services/src/lib/external-user-auth-handler.service.ts b/libs/shared/services/src/lib/external-user-auth-handler.service.ts
index 6fbebad02..0b1b0f34b 100644
--- a/libs/shared/services/src/lib/external-user-auth-handler.service.ts
+++ b/libs/shared/services/src/lib/external-user-auth-handler.service.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { ExternalUserAuthService } from './external-user-auth.service';
 import { environment } from '@commudle/shared-environments';
+import { EExternalUserAuth } from '@commudle/shared-models';
 
 @Injectable({
   providedIn: 'root',
@@ -25,17 +26,31 @@ export class ExternalUserAuthHandlerService {
   loginToInstagram() {
     const YOUR_INSTAGRAM_CLIENT_ID = '989280999691182';
     const redirectUrl = 'https://www.commudle.com/';
-    const instagramLoginUrl = `https://api.instagram.com/oauth/authorize?client_id=${YOUR_INSTAGRAM_CLIENT_ID}&redirect_uri=${redirectUrl}&scope=user_profile,user_media&response_type=code`;
+    const state = {
+      redirectTo: window.location.href,
+    };
+    const encodedState = encodeURIComponent(JSON.stringify(state));
+    const instagramLoginUrl = `https://api.instagram.com/oauth/authorize?client_id=${YOUR_INSTAGRAM_CLIENT_ID}&redirect_uri=${redirectUrl}&scope=user_profile,user_media&response_type=code&state=${encodedState}`;
     window.location.href = instagramLoginUrl;
   }
+
+  loginToTelegram() {
+    const YOUR_BOT_USERNAME = 'GroupixArshbot';
+    const state = {
+      redirectTo: window.location.href,
+    };
+    const encodedState = encodeURIComponent(JSON.stringify(state));
+    const redirectUrl = `https://telegram.me/${YOUR_BOT_USERNAME}?start=auth&state=${encodedState}`;
+    window.location.href = redirectUrl;
+  }
   // Extract token from URL after Discord login
-  getTokenFromUrl() {
+  getTokenFromUrl(platformName: EExternalUserAuth) {
     this.activatedRoute.queryParamMap.subscribe((params) => {
       const code = params.get('code'); // Retrieve the 'code' parameter
       if (code) {
         const external_user_auth = {
           token: code,
-          platform: 'discord',
+          platform: platformName,
         };
         this.externalUserAuthService.create(external_user_auth).subscribe();
       }

From 4bd72b150bb88ee0b60d69ba903d65256d226c44 Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Sat, 30 Nov 2024 20:11:19 +0530
Subject: [PATCH 23/30] feat: create quest user response

---
 .../public-quest-homepage.component.html      |  5 +-
 .../public-quest-homepage.component.ts        | 13 ++++-
 .../quest-task-card.component.ts              | 22 +++++++
 libs/shared/models/src/index.ts               |  1 +
 .../src/lib/quest-user-response.model.ts      |  3 +
 libs/shared/models/src/lib/task.model.ts      |  1 +
 libs/shared/services/src/index.ts             |  1 +
 .../services/src/lib/api-routes.constant.ts   | 11 ++++
 .../src/lib/quest-user-responses.service.ts   | 57 +++++++++++++++++++
 9 files changed, 111 insertions(+), 3 deletions(-)
 create mode 100644 libs/shared/models/src/lib/quest-user-response.model.ts
 create mode 100644 libs/shared/services/src/lib/quest-user-responses.service.ts

diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
index fb2db6b7e..02d433360 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
@@ -36,7 +36,10 @@ <h1>{{ quest.name }}</h1>
           <div class="divided-line-horizontal"></div>
           <div class="task-cards">
             <div *ngFor="let task of tasks">
-              <commudle-quest-task-card [task]="task"></commudle-quest-task-card>
+              <commudle-quest-task-card
+                [questUserResponse]="questUserResponse"
+                [task]="task"
+              ></commudle-quest-task-card>
             </div>
           </div>
         </div>
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
index 79a74da76..0305e5ee3 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { IQuest, ITask } from '@commudle/shared-models';
-import { TaskService } from '@commudle/shared-services';
+import { IQuest, IQuestUserResponse, ITask } from '@commudle/shared-models';
+import { QuestUserResponsesService, TaskService } from '@commudle/shared-services';
 import { NbDialogService } from '@commudle/theme';
 import { faArrowRight, faCircle, faGift, faListCheck } from '@fortawesome/free-solid-svg-icons';
 import { QuestTaskCardComponent } from 'apps/shared-components/quest-task-card/quest-task-card.component';
@@ -22,6 +22,7 @@ export class PublicQuestHomepageComponent implements OnInit {
     faListCheck,
     faGift,
   };
+  questUserResponse: IQuestUserResponse;
   @ViewChild(QuestTaskCardComponent) questTaskCardComponent: QuestTaskCardComponent;
   @ViewChild('loadingScreen') LoadingDialogBox: TemplateRef<any>;
 
@@ -29,11 +30,13 @@ export class PublicQuestHomepageComponent implements OnInit {
     private activatedRoute: ActivatedRoute,
     private taskService: TaskService,
     private dialogService: NbDialogService,
+    private questUserResponsesService: QuestUserResponsesService,
   ) {}
 
   ngOnInit() {
     this.activatedRoute.data.subscribe((data) => {
       this.quest = data.quest;
+      this.getCurrentUserResponse();
       this.getTask();
     });
   }
@@ -45,6 +48,12 @@ export class PublicQuestHomepageComponent implements OnInit {
     });
   }
 
+  getCurrentUserResponse() {
+    this.questUserResponsesService.getCurrentUserResponses(this.quest.id).subscribe((res) => {
+      this.questUserResponse = res;
+    });
+  }
+
   processTaskFromQueryParams() {
     this.activatedRoute.queryParamMap.subscribe((params) => {
       const taskId = Number(params.get('task_id'));
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.ts b/apps/shared-components/quest-task-card/quest-task-card.component.ts
index 8db969525..dd5f56d03 100644
--- a/apps/shared-components/quest-task-card/quest-task-card.component.ts
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.ts
@@ -5,12 +5,14 @@ import {
   ITask,
   ERewardPointsColors,
   ERewardPointsLogo,
+  IQuestUserResponse,
 } from '@commudle/shared-models';
 import {
   ExternalUserAuthHandlerService,
   ExternalUserAuthService,
   TaskService,
   ToastrService,
+  QuestUserResponsesService,
 } from '@commudle/shared-services';
 import { NbDialogService } from '@commudle/theme';
 
@@ -22,6 +24,8 @@ import { NbDialogService } from '@commudle/theme';
 export class QuestTaskCardComponent implements OnInit {
   @Input() task: ITask;
   @Input() adminPage: boolean = false;
+  @Input() questUserResponse: IQuestUserResponse;
+
   userAuthTokens: IExternalUserAuth[];
   selectedExternalUserAuthId: number;
   stepOne = true;
@@ -37,11 +41,17 @@ export class QuestTaskCardComponent implements OnInit {
     private externalUserAuthService: ExternalUserAuthService,
     private taskService: TaskService,
     private toasterService: ToastrService,
+    private questUserResponses: QuestUserResponsesService,
   ) {}
 
   ngOnInit() {}
 
   openTaskPopup(task) {
+    if (this.questUserResponse) {
+      this.create_quest_task_user_response();
+    } else {
+      this.createQuestUserResponse();
+    }
     this.stepOne = true;
     this.stepTwo = false;
     this.stepThree = false;
@@ -96,4 +106,16 @@ export class QuestTaskCardComponent implements OnInit {
       }
     });
   }
+
+  createQuestUserResponse() {
+    this.questUserResponses.create(this.task.quest_id).subscribe();
+  }
+
+  create_quest_task_user_response() {
+    this.questUserResponses
+      .create_quest_task_user_response(this.task.id, this.questUserResponse.id)
+      .subscribe((res) => {
+        console.log('🚀 ~ QuestTaskCardComponent ~ .subscribe ~ res:', res);
+      });
+  }
 }
diff --git a/libs/shared/models/src/index.ts b/libs/shared/models/src/index.ts
index e1d617de0..6f48b3f60 100644
--- a/libs/shared/models/src/index.ts
+++ b/libs/shared/models/src/index.ts
@@ -44,3 +44,4 @@ export * from './lib/external-user-auth.model';
 export * from './lib/quest.model';
 export * from './lib/task.model';
 export * from './lib/quest-task-type.model';
+export * from './lib/quest-user-response.model';
diff --git a/libs/shared/models/src/lib/quest-user-response.model.ts b/libs/shared/models/src/lib/quest-user-response.model.ts
new file mode 100644
index 000000000..5d748727a
--- /dev/null
+++ b/libs/shared/models/src/lib/quest-user-response.model.ts
@@ -0,0 +1,3 @@
+export interface IQuestUserResponse {
+  id: number;
+}
diff --git a/libs/shared/models/src/lib/task.model.ts b/libs/shared/models/src/lib/task.model.ts
index a9204da56..6bfe1a429 100644
--- a/libs/shared/models/src/lib/task.model.ts
+++ b/libs/shared/models/src/lib/task.model.ts
@@ -8,6 +8,7 @@ export interface ITask {
   other_rewards: string;
   url: string;
   quest_task_type: IQuestTaskType;
+  quest_id: number;
 }
 
 export const ERewardPointsColors = {
diff --git a/libs/shared/services/src/index.ts b/libs/shared/services/src/index.ts
index 1de502b85..bd7859e48 100644
--- a/libs/shared/services/src/index.ts
+++ b/libs/shared/services/src/index.ts
@@ -26,3 +26,4 @@ export * from './lib/external-user-auth-handler.service';
 export * from './lib/external-user-auth.service';
 export * from './lib/quest.service';
 export * from './lib/task.service';
+export * from './lib/quest-user-responses.service';
diff --git a/libs/shared/services/src/lib/api-routes.constant.ts b/libs/shared/services/src/lib/api-routes.constant.ts
index 8bafaf366..b7025513d 100644
--- a/libs/shared/services/src/lib/api-routes.constant.ts
+++ b/libs/shared/services/src/lib/api-routes.constant.ts
@@ -988,4 +988,15 @@ export const API_ROUTES = {
       DESTROY: 'api/v2/tasks/quest_task_type', //DELETE
     },
   },
+
+  QUEST_USER_RESPONSES: {
+    CREATE: 'api/v2/quest_user_responses', //POST
+    INDEX: 'api/v2/quest_user_responses', //GET
+    CURRENT_USER_RESPONSES: 'api/v2/quest_user_responses/current_user_responses', //GET
+    CREATE_QUEST_TASK_USER_RESPONSE: 'api/v2/quest_user_responses/create_quest_task_user_response', //POST
+    PUBLIC: {
+      INDEX: 'api/v2/quest_user_responses/public', //GET
+      SHOW: 'api/v2/quest_user_responses/public/show', //GET
+    },
+  },
 };
diff --git a/libs/shared/services/src/lib/quest-user-responses.service.ts b/libs/shared/services/src/lib/quest-user-responses.service.ts
new file mode 100644
index 000000000..5a4c60e67
--- /dev/null
+++ b/libs/shared/services/src/lib/quest-user-responses.service.ts
@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { API_ROUTES } from './api-routes.constant';
+import { BaseApiService } from './base-api.service';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { IQuestUserResponse } from '@commudle/shared-models';
+@Injectable({
+  providedIn: 'root',
+})
+export class QuestUserResponsesService {
+  constructor(private http: HttpClient, private baseApiService: BaseApiService) {}
+
+  create(questId: number | string): Observable<IQuestUserResponse> {
+    const params = new HttpParams().set('quest_id', questId);
+    return this.http.post<IQuestUserResponse>(
+      this.baseApiService.getRoute(API_ROUTES.QUEST_USER_RESPONSES.CREATE),
+      params,
+    );
+  }
+
+  index(questId: number | string): Observable<IQuestUserResponse[]> {
+    const params = new HttpParams().set('quest_id', questId);
+    return this.http.get<IQuestUserResponse[]>(this.baseApiService.getRoute(API_ROUTES.QUEST_USER_RESPONSES.INDEX), {
+      params,
+    });
+  }
+
+  getCurrentUserResponses(questId: number | string): Observable<IQuestUserResponse> {
+    const params = new HttpParams().set('quest_id', questId);
+    return this.http.get<IQuestUserResponse>(
+      this.baseApiService.getRoute(API_ROUTES.QUEST_USER_RESPONSES.CURRENT_USER_RESPONSES),
+      {
+        params,
+      },
+    );
+  }
+
+  create_quest_task_user_response(taskId: number, questUserResponseId: number) {
+    const params = new HttpParams().set('task_id', taskId).set('quest_user_response_id', questUserResponseId);
+    return this.http.post<IQuestUserResponse>(
+      this.baseApiService.getRoute(API_ROUTES.QUEST_USER_RESPONSES.CREATE_QUEST_TASK_USER_RESPONSE),
+      params,
+    );
+  }
+
+  // PUBLIC API
+  publicIndex(questId: number | string): Observable<IQuestUserResponse[]> {
+    const params = new HttpParams().set('quest_id', questId);
+    return this.http.get<IQuestUserResponse[]>(
+      this.baseApiService.getRoute(API_ROUTES.QUEST_USER_RESPONSES.PUBLIC.INDEX),
+      {
+        params,
+      },
+    );
+  }
+}

From b0a832bb96c54872d108ecff9d166471705305ab Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Mon, 2 Dec 2024 14:15:26 +0530
Subject: [PATCH 24/30] feat: add quest on public community page

---
 .../home-community.component.html             |  4 +++
 .../home-community.component.ts               |  3 +-
 .../public-community-quests.component.html    |  9 +++++
 .../public-community-quests.component.scss    |  3 ++
 .../public-community-quests.component.spec.ts | 27 +++++++++++++++
 .../public-community-quests.component.ts      | 33 +++++++++++++++++++
 .../public-community-routing.module.ts        |  5 +++
 .../public-community.module.ts                |  2 ++
 libs/shared/services/src/lib/quest.service.ts | 15 +++++++--
 9 files changed, 98 insertions(+), 3 deletions(-)
 create mode 100644 apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.html
 create mode 100644 apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.scss
 create mode 100644 apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.spec.ts
 create mode 100644 apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.ts

diff --git a/apps/commudle-admin/src/app/feature-modules/public-community/components/home-community/home-community.component.html b/apps/commudle-admin/src/app/feature-modules/public-community/components/home-community/home-community.component.html
index 52f17019b..fd0e0990e 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-community/components/home-community/home-community.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/public-community/components/home-community/home-community.component.html
@@ -232,6 +232,10 @@ <h1 class="com-text-Yankees-Blue">{{ community.name }}</h1>
                   />
                   <span class="title">Hackathons</span>
                 </a>
+                <a [routerLink]="['quests']" class="d-flex" routerLinkActive="active">
+                  <fa-icon [icon]="faShapes" class="com-text-2xl com-leading-none"></fa-icon>
+                  <span class="title">Quest</span>
+                </a>
                 <!-- <a [routerLink]="['resources']" routerLinkActive="active">
                   <nb-icon icon="award" status="info"></nb-icon>
                   <span>Sessions by Experts</span>
diff --git a/apps/commudle-admin/src/app/feature-modules/public-community/components/home-community/home-community.component.ts b/apps/commudle-admin/src/app/feature-modules/public-community/components/home-community/home-community.component.ts
index 5aff7d37e..72295055e 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-community/components/home-community/home-community.component.ts
+++ b/apps/commudle-admin/src/app/feature-modules/public-community/components/home-community/home-community.component.ts
@@ -12,7 +12,7 @@ import { NbDialogService, NbMenuService } from '@commudle/theme';
 import { GoogleTagManagerService } from 'apps/commudle-admin/src/app/services/google-tag-manager.service';
 import { ENotificationSenderTypes } from 'apps/shared-models/enums/notification_sender_types.enum';
 import { CustomPageService } from 'apps/commudle-admin/src/app/services/custom-page.service';
-import { faCaretDown, faMessage, faNewspaper } from '@fortawesome/free-solid-svg-icons';
+import { faCaretDown, faMessage, faNewspaper, faShapes } from '@fortawesome/free-solid-svg-icons';
 import { NewsletterService } from 'apps/commudle-admin/src/app/services/newsletter.service';
 import { DarkModeService } from 'apps/commudle-admin/src/app/services/dark-mode.service';
 import { EDbModels } from '@commudle/shared-models';
@@ -42,6 +42,7 @@ export class HomeCommunityComponent implements OnInit, OnDestroy {
   faCaretDown = faCaretDown;
   faMessage = faMessage;
   faNewspaper = faNewspaper;
+  faShapes = faShapes;
 
   items = [{ title: 'pages', slug: 'pages' }];
 
diff --git a/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.html b/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.html
new file mode 100644
index 000000000..d66d39cd5
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.html
@@ -0,0 +1,9 @@
+<nb-card>
+  <nb-card-body>
+    <nb-card [routerLink]="[quest.slug]" *ngFor="let quest of quests">
+      <nb-card-body>
+        {{ quest.name }}
+      </nb-card-body>
+    </nb-card>
+  </nb-card-body>
+</nb-card>
diff --git a/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.scss b/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.scss
new file mode 100644
index 000000000..c4fc8ebbf
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.scss
@@ -0,0 +1,3 @@
+nb-card {
+  @apply com-mx-0;
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.spec.ts b/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.spec.ts
new file mode 100644
index 000000000..903ba9d32
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { PublicCommunityQuestsComponent } from './public-community-quests.component';
+
+describe('PublicCommunityQuestsComponent', () => {
+  let component: PublicCommunityQuestsComponent;
+  let fixture: ComponentFixture<PublicCommunityQuestsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [PublicCommunityQuestsComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PublicCommunityQuestsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.ts b/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.ts
new file mode 100644
index 000000000..b6b8b2aa6
--- /dev/null
+++ b/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { EDbModels, ICommunity, IQuest } from '@commudle/shared-models';
+import { QuestService } from '@commudle/shared-services';
+
+@Component({
+  selector: 'commudle-public-community-quests',
+  templateUrl: './public-community-quests.component.html',
+  styleUrls: ['./public-community-quests.component.scss'],
+})
+export class PublicCommunityQuestsComponent implements OnInit {
+  community: ICommunity;
+  quests: IQuest[];
+  page = 1;
+  total = 10;
+  count = 10;
+  constructor(private questService: QuestService, private activatedRoute: ActivatedRoute) {}
+
+  ngOnInit() {
+    this.activatedRoute.parent.data.subscribe((data) => {
+      this.community = data.community;
+      this.getQuests();
+    });
+  }
+
+  getQuests() {
+    this.questService.publicIndex(EDbModels.KOMMUNITY, this.community.id, this.page, this.count).subscribe((data) => {
+      this.quests = data.values;
+      this.page = data.page;
+      this.total = data.total;
+    });
+  }
+}
diff --git a/apps/commudle-admin/src/app/feature-modules/public-community/public-community-routing.module.ts b/apps/commudle-admin/src/app/feature-modules/public-community/public-community-routing.module.ts
index 3218613d9..fbe6897bf 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-community/public-community-routing.module.ts
+++ b/apps/commudle-admin/src/app/feature-modules/public-community/public-community-routing.module.ts
@@ -11,6 +11,7 @@ import { CustomPageComponent } from './components/custom-page/custom-page.compon
 import { NewsletterComponent } from 'apps/commudle-admin/src/app/feature-modules/public-community/components/newsletters/newsletter/newsletter.component';
 import { NewslettersComponent } from 'apps/commudle-admin/src/app/feature-modules/public-community/components/newsletters/newsletters.component';
 import { PublicCommunityHackathonsComponent } from 'apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-hackathons/public-community-hackathons.component';
+import { PublicCommunityQuestsComponent } from 'apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component';
 
 const routes = [
   {
@@ -72,6 +73,10 @@ const routes = [
         path: 'hackathons',
         component: PublicCommunityHackathonsComponent,
       },
+      {
+        path: 'quests',
+        component: PublicCommunityQuestsComponent,
+      },
       {
         path: 'p/:page_slug',
         component: CustomPageComponent,
diff --git a/apps/commudle-admin/src/app/feature-modules/public-community/public-community.module.ts b/apps/commudle-admin/src/app/feature-modules/public-community/public-community.module.ts
index 46087d6e4..325edd6cb 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-community/public-community.module.ts
+++ b/apps/commudle-admin/src/app/feature-modules/public-community/public-community.module.ts
@@ -44,6 +44,7 @@ import { BackButtonComponent } from 'apps/shared-components/back-button/back-but
 import { PublicCommunityHackathonsComponent } from 'apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-hackathons/public-community-hackathons.component';
 import { EventHorizontalCardComponent } from 'apps/commudle-admin/src/app/app-shared-components/event-horizontal-card/event-horizontal-card.component';
 import { SharedComponentsModule as newSharedComponentModule } from '@commudle/shared-components';
+import { PublicCommunityQuestsComponent } from 'apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component';
 @NgModule({
   declarations: [
     HomeCommunityComponent,
@@ -59,6 +60,7 @@ import { SharedComponentsModule as newSharedComponentModule } from '@commudle/sh
     NewslettersComponent,
     NewsletterComponent,
     PublicCommunityHackathonsComponent,
+    PublicCommunityQuestsComponent,
   ],
   exports: [MembershipToggleComponent, SpeakerCardComponent],
   imports: [
diff --git a/libs/shared/services/src/lib/quest.service.ts b/libs/shared/services/src/lib/quest.service.ts
index e7f64a5ad..16f378f4e 100644
--- a/libs/shared/services/src/lib/quest.service.ts
+++ b/libs/shared/services/src/lib/quest.service.ts
@@ -55,8 +55,19 @@ export class QuestService {
   }
 
   // PUBLIC API
-  publicIndex(parentType: EDbModels, parentId: number | string): Observable<IPaginationCount<IQuest>> {
-    const params = new HttpParams().set('parent_id', parentId).set('parent_type', parentType);
+  publicIndex(
+    parentType: EDbModels,
+    parentId: number | string,
+    page = 1,
+    count = 10,
+  ): Observable<IPaginationCount<IQuest>> {
+    let params = new HttpParams().set('parent_id', parentId).set('parent_type', parentType);
+    if (page) {
+      params = params.set('page', page);
+    }
+    if (count) {
+      params = params.set('count', count);
+    }
     return this.http.get<IPaginationCount<IQuest>>(this.baseApiService.getRoute(API_ROUTES.QUESTS.PUBLIC.INDEX), {
       params,
     });

From 90c6b21851a02e53a39e0e07647b70b104d91347 Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Tue, 3 Dec 2024 11:28:12 +0530
Subject: [PATCH 25/30] feat: quest task popups

---
 .../public-quest-homepage.component.html      | 41 ++++++-----
 .../quest-task-card.component.html            | 65 ++++++++++++-----
 .../quest-task-card.component.scss            | 50 +++++++++++--
 .../quest-task-card.component.ts              | 70 +++++++++++++++----
 libs/shared/models/src/index.ts               |  1 +
 .../src/lib/quest-task-user-response.model.ts |  7 ++
 .../src/lib/quest-user-response.model.ts      |  5 ++
 .../services/src/lib/api-routes.constant.ts   |  1 +
 .../src/lib/quest-user-responses.service.ts   | 14 +++-
 9 files changed, 202 insertions(+), 52 deletions(-)
 create mode 100644 libs/shared/models/src/lib/quest-task-user-response.model.ts

diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
index 02d433360..5c9ffca16 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
@@ -39,30 +39,37 @@ <h1>{{ quest.name }}</h1>
               <commudle-quest-task-card
                 [questUserResponse]="questUserResponse"
                 [task]="task"
+                (updateUserResponse)="getCurrentUserResponse()"
               ></commudle-quest-task-card>
             </div>
           </div>
         </div>
         <div class="right-column">
-          <div class="user-task-container">
-            <div class="heading task">
-              <fa-icon [icon]="icons.faListCheck"></fa-icon>
-              <span>Tasks</span>
+          <div class="com-sticky com-top-20">
+            <div class="user-task-container">
+              <div class="heading task">
+                <fa-icon [icon]="icons.faListCheck"></fa-icon>
+                <span>Tasks</span>
+              </div>
+              <nb-card>
+                <nb-card-header>Total Task Completed</nb-card-header>
+                <nb-card-body *ngIf="questUserResponse">
+                  {{ questUserResponse.completed_task_count }}/{{ quest.tasks_count }}
+                </nb-card-body>
+              </nb-card>
             </div>
-            <nb-card>
-              <nb-card-header>Total Task Completed</nb-card-header>
-              <nb-card-body> 0/{{ quest.tasks_count }} </nb-card-body>
-            </nb-card>
-          </div>
-          <div class="user-rewards-container">
-            <div class="heading rewards">
-              <fa-icon [icon]="icons.faGift"></fa-icon>
-              <span>Rewards</span>
+            <div class="user-rewards-container">
+              <div class="heading rewards">
+                <fa-icon [icon]="icons.faGift"></fa-icon>
+                <span>Rewards</span>
+              </div>
+              <nb-card>
+                <nb-card-header>Reward Points Collected</nb-card-header>
+                <nb-card-body *ngIf="questUserResponse">
+                  {{ questUserResponse.reward_points_earned }}/{{ quest.total_rewards_points }}
+                </nb-card-body>
+              </nb-card>
             </div>
-            <nb-card>
-              <nb-card-header>Reward Points Collected</nb-card-header>
-              <nb-card-body> 0/{{ quest.total_rewards_points }} </nb-card-body>
-            </nb-card>
           </div>
         </div>
       </div>
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.html b/apps/shared-components/quest-task-card/quest-task-card.component.html
index 02dac3c9c..0e6420485 100644
--- a/apps/shared-components/quest-task-card/quest-task-card.component.html
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.html
@@ -1,27 +1,37 @@
-<nb-card class="task" (click)="openTaskPopup(task)" [ngClass]="{ 'admin-properties': adminPage }">
+<nb-card class="task" (click)="openTaskPopup(task)" [ngClass]="{ 'admin-properties': adminPage || taskCompleted() }">
   <nb-card-body>
     <div class="title-container">
       <img [src]="task.quest_task_type.logo_url" />
       <p class="title">{{ task.name }}</p>
     </div>
     <p class="description">{{ task.description }}</p>
-    <div class="rewards">
+    <div class="rewards" *ngIf="!taskCompleted(); else taskCompletedContainer">
       <img [src]="ERewardPointsLogo[task.reward_points]" [alt]="task.reward_points" [title]="task.reward_points" />
-      <span [class]="ERewardPointsColors[task.reward_points]">{{ task.reward_points }} Reward Points</span>
+      <span [class]="ERewardPointsColors[task.reward_points]"> {{ task.reward_points }} Reward Points </span>
     </div>
+    <ng-template #taskCompletedContainer>
+      <div class="task-completed">
+        <fa-icon [icon]="icons.faCircleCheck"></fa-icon>
+        <span>Completed</span>
+      </div>
+    </ng-template>
   </nb-card-body>
 </nb-card>
 
 <ng-template #discordDialog let-data let-ref="dialogRef">
   <nb-card class="discord-dialog">
     <nb-card-header>
-      <div>Discord</div>
+      <div>{{ data.name }}</div>
       <button ghost nbButton size="small" (click)="ref.close()">
         <nb-icon icon="close"></nb-icon>
       </button>
     </nb-card-header>
     <nb-card-body>
-      <div *ngIf="stepOne">
+      <div class="step-one" *ngIf="stepOne">
+        <p class="title">Connect your account</p>
+        <p class="sub-title">
+          Connect your {{ data.quest_task_type.platform_name | titlecase }} account to access the community server
+        </p>
         <button nbButton (click)="loginAccount()">
           <img [src]="data.quest_task_type.logo_url" [alt]="data.name" />
           &nbsp; &nbsp;
@@ -29,25 +39,48 @@
         </button>
       </div>
 
-      <div *ngIf="stepTwo">
+      <div class="step-two" *ngIf="stepTwo">
+        <div class="lock-icon">
+          <fa-icon [icon]="icons.faLock"></fa-icon>
+        </div>
+        <p class="title">Locked Task</p>
+        <p class="sub-title">Connect your {{ data.quest_task_type.platform_name | titlecase }} to unlock this task</p>
         <div class="select">
-          <select [(ngModel)]="selectedExternalUserAuthId">
+          <select (change)="selectUserAuthToken($event)">
             <option *ngFor="let userAuthToken of userAuthTokens" [ngValue]="userAuthToken.id">
               {{ userAuthToken.username }}
             </option>
           </select>
         </div>
-        <button nbButton (click)="stepTwo = false; stepThree = true">
-          <span>Use This Account</span>
-        </button>
-        <span (click)="loginAccount()">Connect with Account</span>
+        <button nbButton (click)="stepTwo = false; stepThree = true">Use This Account</button>
+        <br />
+        <button nbButton ghost (click)="loginAccount()">Select another account</button>
       </div>
 
-      <div *ngIf="stepThree">
-        <div>
-          <a [href]="task.url" target="_blank">Follow</a>
-        </div>
-        <button (click)="verifyDiscordServer()">Verify</button>
+      <div class="step-three" *ngIf="stepThree">
+        <nb-card>
+          <nb-card-body>
+            <p class="title">
+              {{ data.quest_task_type.platform_type | capitalizeAndRemoveUnderscore }} on
+              {{ data.quest_task_type.platform_name | titlecase }}
+            </p>
+            <div>
+              <a [href]="task.url" target="_blank">
+                <button nbButton>Open on {{ data.quest_task_type.platform_name | titlecase }}</button></a
+              >
+            </div>
+          </nb-card-body>
+        </nb-card>
+        <nb-card>
+          <nb-card-body>
+            <p class="title">Verify on Commudle</p>
+            <button nbButton status="primary" (click)="verifyDiscordServer()" [disabled]="isVerifying">
+              Use {{ selectedExternalUserAuth.username }}
+            </button>
+            <br />
+            <button nbButton ghost (click)="loginAccount()">Select another account</button>
+          </nb-card-body>
+        </nb-card>
       </div>
     </nb-card-body>
   </nb-card>
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.scss b/apps/shared-components/quest-task-card/quest-task-card.component.scss
index e9832b196..caee26458 100644
--- a/apps/shared-components/quest-task-card/quest-task-card.component.scss
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.scss
@@ -16,21 +16,63 @@
     @apply com-flex com-items-center com-gap-2 com-w-full com-border com-border-solid com-border-Bright-Gray com-rounded-lg com-bg-gray-50 com-text-fuchsia-600 com-py-1 com-justify-center;
   }
 
+  .task-completed {
+    @apply com-flex com-items-center com-justify-center com-gap-2 com-w-full com-border com-border-solid  com-border-green-600 com-bg-green-50 com-text-green-600 com-rounded-lg com-py-1;
+    span {
+      @apply com-text-sm com-font-bold;
+    }
+  }
+
   &.admin-properties {
     @apply com-cursor-text com-pointer-events-none hover:com-shadow-none;
   }
 }
 
 .discord-dialog {
+  @apply com-w-full md:com-w-[400px];
   nb-card-header,
   nb-card-footer {
     @apply com-flex com-justify-between com-items-center;
   }
 
-  .select {
-    @apply com-flex com-items-center com-gap-1 com-h-8 com-p-1 com-text-sm com-rounded-[4px] com-cursor-pointer com-bg-[#F6F9FC] hover:com-bg-[#eef2f7]/50  com-border com-border-solid com-border-[#E4E9F2]  com-w-full;
-    select {
-      @apply com-bg-[#F6F9FC] hover:com-bg-[#eef2f7]/50 com-cursor-pointer com-border-0 com-w-full;
+  .step-one {
+    @apply com-flex com-flex-col com-items-center;
+    .title {
+      @apply com-text-Yankees-Blue com-font-semibold com-text-base com-my-0;
+    }
+    .sub-title {
+      @apply com-text-sm com-text-gray-500 com-text-center com-mt-2 com-mb-5;
+    }
+  }
+
+  .step-two {
+    @apply com-flex com-flex-col com-items-center;
+    .lock-icon {
+      @apply com-h-12 com-w-12 com-border com-border-solid com-border-Bright-Gray com-rounded-lg com-flex com-justify-center com-items-center com-mb-2;
+      fa-icon {
+        @apply com-text-3xl;
+      }
+    }
+    .title {
+      @apply com-text-Yankees-Blue com-font-semibold com-text-base com-my-0;
+    }
+    .sub-title {
+      @apply com-text-sm com-text-gray-500 com-text-center com-mt-2;
+    }
+    .select {
+      @apply com-flex com-items-center com-gap-1 com-h-8 com-p-1 com-text-sm com-rounded-[4px] com-cursor-pointer com-bg-[#F6F9FC] hover:com-bg-[#eef2f7]/50  com-border com-border-solid com-border-[#E4E9F2]  com-w-full com-mb-5;
+      select {
+        @apply com-bg-[#F6F9FC] hover:com-bg-[#eef2f7]/50 com-cursor-pointer com-border-0 com-w-full;
+      }
+    }
+  }
+
+  .step-three {
+    nb-card {
+      @apply com-mx-0 com-mt-0;
+      .title {
+        @apply com-font-bold com-text-sm com-mb-3 com-mt-0;
+      }
     }
   }
 }
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.ts b/apps/shared-components/quest-task-card/quest-task-card.component.ts
index dd5f56d03..ebf03b821 100644
--- a/apps/shared-components/quest-task-card/quest-task-card.component.ts
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
 import {
   EExternalUserAuth,
   IExternalUserAuth,
@@ -6,6 +6,7 @@ import {
   ERewardPointsColors,
   ERewardPointsLogo,
   IQuestUserResponse,
+  IQuestTaskUserResponse,
 } from '@commudle/shared-models';
 import {
   ExternalUserAuthHandlerService,
@@ -15,6 +16,7 @@ import {
   QuestUserResponsesService,
 } from '@commudle/shared-services';
 import { NbDialogService } from '@commudle/theme';
+import { faCircleCheck, faLock } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'commudle-quest-task-card',
@@ -25,14 +27,21 @@ export class QuestTaskCardComponent implements OnInit {
   @Input() task: ITask;
   @Input() adminPage: boolean = false;
   @Input() questUserResponse: IQuestUserResponse;
+  @Output() updateUserResponse = new EventEmitter<boolean>();
 
   userAuthTokens: IExternalUserAuth[];
-  selectedExternalUserAuthId: number;
+  selectedExternalUserAuth: IExternalUserAuth;
   stepOne = true;
   stepTwo = false;
   stepThree = false;
   ERewardPointsColors = ERewardPointsColors;
   ERewardPointsLogo = ERewardPointsLogo;
+  icons = {
+    faLock,
+    faCircleCheck,
+  };
+
+  isVerifying = false;
   @ViewChild('discordDialog') discordDialogBox: TemplateRef<any>;
 
   constructor(
@@ -41,14 +50,19 @@ export class QuestTaskCardComponent implements OnInit {
     private externalUserAuthService: ExternalUserAuthService,
     private taskService: TaskService,
     private toasterService: ToastrService,
-    private questUserResponses: QuestUserResponsesService,
+    private questUserResponsesService: QuestUserResponsesService,
   ) {}
 
   ngOnInit() {}
 
   openTaskPopup(task) {
     if (this.questUserResponse) {
-      this.create_quest_task_user_response();
+      const taskResponseExist = this.questUserResponse.task_responses.find(
+        (userTaskResponse) => userTaskResponse.task_id === task.id,
+      );
+      if (!taskResponseExist) {
+        this.createQuestTaskUserResponse(this.questUserResponse.id);
+      }
     } else {
       this.createQuestUserResponse();
     }
@@ -78,11 +92,16 @@ export class QuestTaskCardComponent implements OnInit {
       if (this.userAuthTokens.length > 0) {
         this.stepOne = false;
         this.stepTwo = true;
-        this.selectedExternalUserAuthId = this.userAuthTokens[0].id;
+        this.selectedExternalUserAuth = this.userAuthTokens[0];
       }
     });
   }
 
+  selectUserAuthToken(event) {
+    const selected = this.userAuthTokens.find((token) => token.id === event.target.value);
+    this.selectedExternalUserAuth = selected;
+  }
+
   loginAccount() {
     switch (this.task.quest_task_type.platform_name) {
       case EExternalUserAuth.DISCORD:
@@ -98,24 +117,51 @@ export class QuestTaskCardComponent implements OnInit {
   }
 
   verifyDiscordServer() {
-    this.taskService.verifyDiscord(this.task.id, this.selectedExternalUserAuthId).subscribe((res) => {
+    this.isVerifying = true;
+    this.taskService.verifyDiscord(this.task.id, this.selectedExternalUserAuth.id).subscribe((res) => {
       if (res) {
-        this.toasterService.successDialog('Verified');
+        setTimeout(() => {
+          this.updateUserResponse.emit(true);
+          const index = this.questUserResponse.task_responses.findIndex(
+            (userTaskResponse) => userTaskResponse.task_id === this.task.id,
+          );
+          this.questUserResponsesService
+            .questTaskUserResponseMarkedCompleted(this.questUserResponse.task_responses[index].id)
+            .subscribe((data) => {
+              this.questUserResponse.task_responses[index] = data;
+            });
+          this.isVerifying = false;
+        }, 1000);
       } else {
+        this.isVerifying = false;
         this.toasterService.warningDialog('Not Verified');
       }
     });
   }
 
   createQuestUserResponse() {
-    this.questUserResponses.create(this.task.quest_id).subscribe();
+    this.questUserResponsesService.create(this.task.quest_id).subscribe((data) => {
+      this.questUserResponse = data;
+      this.createQuestTaskUserResponse(data.id);
+    });
   }
 
-  create_quest_task_user_response() {
-    this.questUserResponses
-      .create_quest_task_user_response(this.task.id, this.questUserResponse.id)
+  createQuestTaskUserResponse(questUserResponseId) {
+    this.questUserResponsesService
+      .create_quest_task_user_response(this.task.id, questUserResponseId)
       .subscribe((res) => {
-        console.log('🚀 ~ QuestTaskCardComponent ~ .subscribe ~ res:', res);
+        this.questUserResponse.task_responses.unshift(res);
       });
   }
+
+  taskCompleted(): boolean {
+    if (!this.questUserResponse || !this.questUserResponse.task_responses) {
+      return false;
+    }
+
+    return this.questUserResponse.task_responses.some(
+      (taskResponse: { completed: boolean; task_id: number }) =>
+        taskResponse.completed === true && taskResponse.task_id === this.task.id,
+    );
+  }
 }
diff --git a/libs/shared/models/src/index.ts b/libs/shared/models/src/index.ts
index 6f48b3f60..cc9ce7ce7 100644
--- a/libs/shared/models/src/index.ts
+++ b/libs/shared/models/src/index.ts
@@ -45,3 +45,4 @@ export * from './lib/quest.model';
 export * from './lib/task.model';
 export * from './lib/quest-task-type.model';
 export * from './lib/quest-user-response.model';
+export * from './lib/quest-task-user-response.model';
diff --git a/libs/shared/models/src/lib/quest-task-user-response.model.ts b/libs/shared/models/src/lib/quest-task-user-response.model.ts
new file mode 100644
index 000000000..2ccf61130
--- /dev/null
+++ b/libs/shared/models/src/lib/quest-task-user-response.model.ts
@@ -0,0 +1,7 @@
+export interface IQuestTaskUserResponse {
+  id: number;
+  completed: boolean;
+  task_id: number;
+  quest_user_response_id: number;
+  user_id: number;
+}
diff --git a/libs/shared/models/src/lib/quest-user-response.model.ts b/libs/shared/models/src/lib/quest-user-response.model.ts
index 5d748727a..15aadccef 100644
--- a/libs/shared/models/src/lib/quest-user-response.model.ts
+++ b/libs/shared/models/src/lib/quest-user-response.model.ts
@@ -1,3 +1,8 @@
+import { IQuestTaskUserResponse } from './quest-task-user-response.model';
+
 export interface IQuestUserResponse {
   id: number;
+  completed_task_count: number;
+  reward_points_earned: number;
+  task_responses: IQuestTaskUserResponse[];
 }
diff --git a/libs/shared/services/src/lib/api-routes.constant.ts b/libs/shared/services/src/lib/api-routes.constant.ts
index b7025513d..54ed77312 100644
--- a/libs/shared/services/src/lib/api-routes.constant.ts
+++ b/libs/shared/services/src/lib/api-routes.constant.ts
@@ -994,6 +994,7 @@ export const API_ROUTES = {
     INDEX: 'api/v2/quest_user_responses', //GET
     CURRENT_USER_RESPONSES: 'api/v2/quest_user_responses/current_user_responses', //GET
     CREATE_QUEST_TASK_USER_RESPONSE: 'api/v2/quest_user_responses/create_quest_task_user_response', //POST
+    QUEST_TASK_USER_RESPONSE_MARKED_COMPLETED: 'api/v2/quest_user_responses/quest_task_user_response_marked_completed', //PUT
     PUBLIC: {
       INDEX: 'api/v2/quest_user_responses/public', //GET
       SHOW: 'api/v2/quest_user_responses/public/show', //GET
diff --git a/libs/shared/services/src/lib/quest-user-responses.service.ts b/libs/shared/services/src/lib/quest-user-responses.service.ts
index 5a4c60e67..6f6f0a119 100644
--- a/libs/shared/services/src/lib/quest-user-responses.service.ts
+++ b/libs/shared/services/src/lib/quest-user-responses.service.ts
@@ -4,7 +4,7 @@ import { Observable } from 'rxjs';
 import { API_ROUTES } from './api-routes.constant';
 import { BaseApiService } from './base-api.service';
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { IQuestUserResponse } from '@commudle/shared-models';
+import { IQuestTaskUserResponse, IQuestUserResponse } from '@commudle/shared-models';
 @Injectable({
   providedIn: 'root',
 })
@@ -36,14 +36,22 @@ export class QuestUserResponsesService {
     );
   }
 
-  create_quest_task_user_response(taskId: number, questUserResponseId: number) {
+  create_quest_task_user_response(taskId: number, questUserResponseId: number): Observable<IQuestTaskUserResponse> {
     const params = new HttpParams().set('task_id', taskId).set('quest_user_response_id', questUserResponseId);
-    return this.http.post<IQuestUserResponse>(
+    return this.http.post<IQuestTaskUserResponse>(
       this.baseApiService.getRoute(API_ROUTES.QUEST_USER_RESPONSES.CREATE_QUEST_TASK_USER_RESPONSE),
       params,
     );
   }
 
+  questTaskUserResponseMarkedCompleted(taskUserResponseId: number): Observable<IQuestTaskUserResponse> {
+    const params = new HttpParams().set('task_user_response_id', taskUserResponseId);
+    return this.http.put<IQuestTaskUserResponse>(
+      this.baseApiService.getRoute(API_ROUTES.QUEST_USER_RESPONSES.QUEST_TASK_USER_RESPONSE_MARKED_COMPLETED),
+      params,
+    );
+  }
+
   // PUBLIC API
   publicIndex(questId: number | string): Observable<IQuestUserResponse[]> {
     const params = new HttpParams().set('quest_id', questId);

From 336b893126a8acfc8d203e2b19fc7542ec7fbe06 Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Tue, 3 Dec 2024 18:41:47 +0530
Subject: [PATCH 26/30] feat: user Participants card

---
 .../public-quest-homepage.component.html      | 78 +++++++++++++++++--
 .../public-quest-homepage.component.scss      | 40 +++++++++-
 .../public-quest-homepage.component.ts        | 24 +++++-
 .../public-quests/public-quests.module.ts     | 14 +++-
 .../quest-task-card.component.html            | 10 ++-
 .../quest-task-card.component.ts              | 14 ++--
 .../src/lib/quest-user-response.model.ts      |  3 +
 .../src/lib/quest-user-responses.service.ts   |  8 +-
 8 files changed, 167 insertions(+), 24 deletions(-)

diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
index 5c9ffca16..e5059d578 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
@@ -37,7 +37,7 @@ <h1>{{ quest.name }}</h1>
           <div class="task-cards">
             <div *ngFor="let task of tasks">
               <commudle-quest-task-card
-                [questUserResponse]="questUserResponse"
+                [questUserResponse]="currentUserQuestResponse"
                 [task]="task"
                 (updateUserResponse)="getCurrentUserResponse()"
               ></commudle-quest-task-card>
@@ -53,8 +53,8 @@ <h1>{{ quest.name }}</h1>
               </div>
               <nb-card>
                 <nb-card-header>Total Task Completed</nb-card-header>
-                <nb-card-body *ngIf="questUserResponse">
-                  {{ questUserResponse.completed_task_count }}/{{ quest.tasks_count }}
+                <nb-card-body *ngIf="currentUserQuestResponse">
+                  {{ currentUserQuestResponse.completed_task_count }}/{{ quest.tasks_count }}
                 </nb-card-body>
               </nb-card>
             </div>
@@ -65,11 +65,34 @@ <h1>{{ quest.name }}</h1>
               </div>
               <nb-card>
                 <nb-card-header>Reward Points Collected</nb-card-header>
-                <nb-card-body *ngIf="questUserResponse">
-                  {{ questUserResponse.reward_points_earned }}/{{ quest.total_rewards_points }}
+                <nb-card-body *ngIf="currentUserQuestResponse">
+                  {{ currentUserQuestResponse.reward_points_earned }}/{{ quest.total_rewards_points }}
                 </nb-card-body>
               </nb-card>
             </div>
+            <div class="user-participants">
+              <div class="heading participants">
+                <fa-icon [icon]="icons.faUsers"></fa-icon>
+                <span>Participants</span>
+              </div>
+              <nb-card>
+                <nb-card-header>
+                  <span> Participants </span>
+                  <span>Points</span>
+                </nb-card-header>
+                <nb-card-body *ngIf="questUserResponses">
+                  <div *ngFor="let questUserResponse of questUserResponses" class="user">
+                    <app-user-profile-card-medium [user]="questUserResponse.user"></app-user-profile-card-medium>
+                    <span>{{ questUserResponse.reward_points_earned }}</span>
+                  </div>
+                </nb-card-body>
+                <nb-card-footer *ngIf="total > count">
+                  <button ghost nbButton fullWidth (click)="openQuestUserResponses(questUserResponseDialogBox)">
+                    View More
+                  </button>
+                </nb-card-footer>
+              </nb-card>
+            </div>
           </div>
         </div>
       </div>
@@ -80,3 +103,48 @@ <h1>{{ quest.name }}</h1>
 <ng-template #loadingScreen>
   <app-loading-spinner></app-loading-spinner>
 </ng-template>
+
+<ng-template #questUserResponseDialogBox let-data let-ref="dialogRef">
+  <nb-card class="quest-user-responses-dialog">
+    <nb-card-header>
+      <div>
+        <fa-icon [icon]="icons.faUsers"></fa-icon>
+        Total Participants
+      </div>
+      <button ghost nbButton size="small" (click)="ref.close()">
+        <nb-icon icon="close"></nb-icon>
+      </button>
+    </nb-card-header>
+    <nb-card-body>
+      <table>
+        <tr>
+          <th>Name</th>
+          <th>Tasks</th>
+          <th>Time</th>
+          <th>Reward Points</th>
+        </tr>
+        <tr *ngFor="let questUserResponse of questUserResponses">
+          <td><app-user-profile-card-medium [user]="questUserResponse.user"></app-user-profile-card-medium></td>
+          <td>{{ questUserResponse.completed_task_count }}/{{ tasks.length }}</td>
+          <td>
+            <span *ngIf="questUserResponse.last_task_time">
+              {{ moment(questUserResponse.last_task_time).format('h:mm:ss a - dddd, MMM, YYYY') }}</span
+            >
+          </td>
+          <td>{{ questUserResponse.reward_points_earned }}/{{ quest.tasks_count }}</td>
+        </tr>
+      </table>
+    </nb-card-body>
+    <nb-card-footer>
+      <app-pagination
+        (goTo)="page = $event; getUserResponses()"
+        (next)="page = $event; getUserResponses()"
+        (previous)="page = $event; getUserResponses()"
+        *ngIf="total > 0"
+        [count]="count"
+        [current]="page"
+        [total]="total"
+      ></app-pagination>
+    </nb-card-footer>
+  </nb-card>
+</ng-template>
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss
index caadcd2a5..a4cc1f9ed 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss
@@ -1,3 +1,6 @@
+.container {
+  @apply com-pb-20;
+}
 .main-column {
   @apply com-border-0 com-border-r com-border-solid com-border-Bright-Gray;
 
@@ -52,7 +55,8 @@
 .right-column {
   @apply com-ml-3 com-mt-4;
   .user-task-container,
-  .user-rewards-container {
+  .user-rewards-container,
+  .user-participants {
     .heading {
       @apply com-flex com-items-center com-gap-2;
       span {
@@ -68,6 +72,11 @@
           @apply com-text-red-500;
         }
       }
+      &.participants {
+        fa-icon {
+          @apply com-text-green-500;
+        }
+      }
     }
     nb-card {
       @apply com-mx-0;
@@ -79,4 +88,33 @@
       }
     }
   }
+
+  .user-participants {
+    nb-card-header {
+      @apply com-flex com-justify-between;
+    }
+    nb-card-body {
+      .user {
+        @apply com-flex com-justify-between com-items-center com-my-2;
+      }
+    }
+    nb-card-footer {
+      @apply com-p-0 com-m-0;
+    }
+  }
+}
+
+.quest-user-responses-dialog {
+  @apply com-w-full md:com-w-[40dvw] com-h-full md:com-max-h-[90dvh];
+  nb-card-header {
+    @apply com-flex com-justify-between com-items-center;
+  }
+  table {
+    @apply com-w-full;
+
+    td,
+    th {
+      @apply com-p-2 com-text-left;
+    }
+  }
 }
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
index 0305e5ee3..592b81d41 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { IQuest, IQuestUserResponse, ITask } from '@commudle/shared-models';
 import { QuestUserResponsesService, TaskService } from '@commudle/shared-services';
 import { NbDialogService } from '@commudle/theme';
-import { faArrowRight, faCircle, faGift, faListCheck } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRight, faCircle, faGift, faListCheck, faUsers } from '@fortawesome/free-solid-svg-icons';
 import { QuestTaskCardComponent } from 'apps/shared-components/quest-task-card/quest-task-card.component';
 import moment from 'moment';
 
@@ -21,8 +21,13 @@ export class PublicQuestHomepageComponent implements OnInit {
     faCircle,
     faListCheck,
     faGift,
+    faUsers,
   };
-  questUserResponse: IQuestUserResponse;
+  currentUserQuestResponse: IQuestUserResponse;
+  questUserResponses: IQuestUserResponse[];
+  total: number;
+  page = 1;
+  count = 10;
   @ViewChild(QuestTaskCardComponent) questTaskCardComponent: QuestTaskCardComponent;
   @ViewChild('loadingScreen') LoadingDialogBox: TemplateRef<any>;
 
@@ -38,6 +43,7 @@ export class PublicQuestHomepageComponent implements OnInit {
       this.quest = data.quest;
       this.getCurrentUserResponse();
       this.getTask();
+      this.getUserResponses();
     });
   }
 
@@ -50,7 +56,7 @@ export class PublicQuestHomepageComponent implements OnInit {
 
   getCurrentUserResponse() {
     this.questUserResponsesService.getCurrentUserResponses(this.quest.id).subscribe((res) => {
-      this.questUserResponse = res;
+      this.currentUserQuestResponse = res;
     });
   }
 
@@ -73,4 +79,16 @@ export class PublicQuestHomepageComponent implements OnInit {
       }
     });
   }
+
+  getUserResponses() {
+    this.questUserResponsesService.publicIndex(this.quest.id, this.page, this.count).subscribe((data) => {
+      this.questUserResponses = data.values;
+      this.total = data.total;
+      this.page = data.page;
+    });
+  }
+
+  openQuestUserResponses(templateRef) {
+    this.dialogService.open(templateRef);
+  }
 }
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.module.ts b/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.module.ts
index d64e38cbd..12f1a6501 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.module.ts
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/public-quests.module.ts
@@ -4,10 +4,20 @@ import { PublicQuestHomepageComponent } from './components/public-quest-homepage
 import { PublicQuestsRoutes } from './public-quests.routing';
 import { SharedComponentsModule } from 'apps/shared-components/shared-components.module';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { NbCardModule } from '@commudle/theme';
+import { NbButtonModule, NbCardModule, NbIconModule } from '@commudle/theme';
+import { MiniUserProfileModule } from 'apps/shared-modules/mini-user-profile/mini-user-profile.module';
 
 @NgModule({
-  imports: [CommonModule, PublicQuestsRoutes, SharedComponentsModule, FontAwesomeModule, NbCardModule],
+  imports: [
+    CommonModule,
+    PublicQuestsRoutes,
+    SharedComponentsModule,
+    FontAwesomeModule,
+    NbCardModule,
+    MiniUserProfileModule,
+    NbIconModule,
+    NbButtonModule,
+  ],
   declarations: [PublicQuestHomepageComponent],
 })
 export class PublicQuestsModule {}
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.html b/apps/shared-components/quest-task-card/quest-task-card.component.html
index 0e6420485..011844c4a 100644
--- a/apps/shared-components/quest-task-card/quest-task-card.component.html
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.html
@@ -74,11 +74,15 @@
         <nb-card>
           <nb-card-body>
             <p class="title">Verify on Commudle</p>
-            <button nbButton status="primary" (click)="verifyDiscordServer()" [disabled]="isVerifying">
+            <button
+              nbButton
+              status="primary"
+              (click)="verifyDiscordServer()"
+              [disabled]="isVerifying"
+              [nbSpinner]="isVerifying"
+            >
               Use {{ selectedExternalUserAuth.username }}
             </button>
-            <br />
-            <button nbButton ghost (click)="loginAccount()">Select another account</button>
           </nb-card-body>
         </nb-card>
       </div>
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.ts b/apps/shared-components/quest-task-card/quest-task-card.component.ts
index ebf03b821..80bb5d0e9 100644
--- a/apps/shared-components/quest-task-card/quest-task-card.component.ts
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.ts
@@ -15,7 +15,7 @@ import {
   ToastrService,
   QuestUserResponsesService,
 } from '@commudle/shared-services';
-import { NbDialogService } from '@commudle/theme';
+import { NbDialogRef, NbDialogService } from '@commudle/theme';
 import { faCircleCheck, faLock } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
@@ -40,7 +40,7 @@ export class QuestTaskCardComponent implements OnInit {
     faLock,
     faCircleCheck,
   };
-
+  dialogRef: NbDialogRef<any>;
   isVerifying = false;
   @ViewChild('discordDialog') discordDialogBox: TemplateRef<any>;
 
@@ -73,15 +73,15 @@ export class QuestTaskCardComponent implements OnInit {
     switch (task.quest_task_type.platform_name) {
       case EExternalUserAuth.DISCORD:
         this.getExternalUsers(EExternalUserAuth.DISCORD);
-        this.dialogBoxService.open(this.discordDialogBox, { context: task });
+        this.dialogRef = this.dialogBoxService.open(this.discordDialogBox, { context: task });
         return;
       case EExternalUserAuth.INSTAGRAM:
         this.getExternalUsers(EExternalUserAuth.INSTAGRAM);
-        this.dialogBoxService.open(this.discordDialogBox, { context: task });
+        this.dialogRef = this.dialogBoxService.open(this.discordDialogBox, { context: task });
         return;
       case EExternalUserAuth.TELEGRAM:
         this.getExternalUsers(EExternalUserAuth.TELEGRAM);
-        this.dialogBoxService.open(this.discordDialogBox, { context: task });
+        this.dialogRef = this.dialogBoxService.open(this.discordDialogBox, { context: task });
         return;
     }
   }
@@ -121,7 +121,6 @@ export class QuestTaskCardComponent implements OnInit {
     this.taskService.verifyDiscord(this.task.id, this.selectedExternalUserAuth.id).subscribe((res) => {
       if (res) {
         setTimeout(() => {
-          this.updateUserResponse.emit(true);
           const index = this.questUserResponse.task_responses.findIndex(
             (userTaskResponse) => userTaskResponse.task_id === this.task.id,
           );
@@ -129,7 +128,10 @@ export class QuestTaskCardComponent implements OnInit {
             .questTaskUserResponseMarkedCompleted(this.questUserResponse.task_responses[index].id)
             .subscribe((data) => {
               this.questUserResponse.task_responses[index] = data;
+              this.updateUserResponse.emit(true);
             });
+          this.toasterService.successDialog('Verified!, You have completed this task');
+          this.dialogRef.close();
           this.isVerifying = false;
         }, 1000);
       } else {
diff --git a/libs/shared/models/src/lib/quest-user-response.model.ts b/libs/shared/models/src/lib/quest-user-response.model.ts
index 15aadccef..3d1104fe6 100644
--- a/libs/shared/models/src/lib/quest-user-response.model.ts
+++ b/libs/shared/models/src/lib/quest-user-response.model.ts
@@ -1,3 +1,4 @@
+import { IUser } from './user.model';
 import { IQuestTaskUserResponse } from './quest-task-user-response.model';
 
 export interface IQuestUserResponse {
@@ -5,4 +6,6 @@ export interface IQuestUserResponse {
   completed_task_count: number;
   reward_points_earned: number;
   task_responses: IQuestTaskUserResponse[];
+  user: IUser;
+  last_task_time: Date;
 }
diff --git a/libs/shared/services/src/lib/quest-user-responses.service.ts b/libs/shared/services/src/lib/quest-user-responses.service.ts
index 6f6f0a119..c817443c5 100644
--- a/libs/shared/services/src/lib/quest-user-responses.service.ts
+++ b/libs/shared/services/src/lib/quest-user-responses.service.ts
@@ -4,7 +4,7 @@ import { Observable } from 'rxjs';
 import { API_ROUTES } from './api-routes.constant';
 import { BaseApiService } from './base-api.service';
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { IQuestTaskUserResponse, IQuestUserResponse } from '@commudle/shared-models';
+import { IPaginationCount, IQuestTaskUserResponse, IQuestUserResponse } from '@commudle/shared-models';
 @Injectable({
   providedIn: 'root',
 })
@@ -53,9 +53,9 @@ export class QuestUserResponsesService {
   }
 
   // PUBLIC API
-  publicIndex(questId: number | string): Observable<IQuestUserResponse[]> {
-    const params = new HttpParams().set('quest_id', questId);
-    return this.http.get<IQuestUserResponse[]>(
+  publicIndex(questId: number | string, page = 1, count = 10): Observable<IPaginationCount<IQuestUserResponse>> {
+    const params = new HttpParams().set('quest_id', questId).set('page', page).set('count', count);
+    return this.http.get<IPaginationCount<IQuestUserResponse>>(
       this.baseApiService.getRoute(API_ROUTES.QUEST_USER_RESPONSES.PUBLIC.INDEX),
       {
         params,

From e93c3f73e0e253c6b5bcf86ef64e23ca48d8a22c Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Tue, 3 Dec 2024 21:54:14 +0530
Subject: [PATCH 27/30] refactor: task card

---
 .../public-quest-homepage.component.html                     | 2 +-
 .../quest-task-card/quest-task-card.component.html           | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
index e5059d578..749676904 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
@@ -131,7 +131,7 @@ <h1>{{ quest.name }}</h1>
               {{ moment(questUserResponse.last_task_time).format('h:mm:ss a - dddd, MMM, YYYY') }}</span
             >
           </td>
-          <td>{{ questUserResponse.reward_points_earned }}/{{ quest.tasks_count }}</td>
+          <td>{{ questUserResponse.reward_points_earned }}</td>
         </tr>
       </table>
     </nb-card-body>
diff --git a/apps/shared-components/quest-task-card/quest-task-card.component.html b/apps/shared-components/quest-task-card/quest-task-card.component.html
index 011844c4a..d9304ea3e 100644
--- a/apps/shared-components/quest-task-card/quest-task-card.component.html
+++ b/apps/shared-components/quest-task-card/quest-task-card.component.html
@@ -40,11 +40,6 @@
       </div>
 
       <div class="step-two" *ngIf="stepTwo">
-        <div class="lock-icon">
-          <fa-icon [icon]="icons.faLock"></fa-icon>
-        </div>
-        <p class="title">Locked Task</p>
-        <p class="sub-title">Connect your {{ data.quest_task_type.platform_name | titlecase }} to unlock this task</p>
         <div class="select">
           <select (change)="selectUserAuthToken($event)">
             <option *ngFor="let userAuthToken of userAuthTokens" [ngValue]="userAuthToken.id">

From c9fd46465cc55c8ae334a604c32e51af1fbd5e0c Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Wed, 4 Dec 2024 12:25:19 +0530
Subject: [PATCH 28/30] feat: quest card for public side

---
 .../public-community-quests.component.html    |  8 ++--
 .../public-community-quests.component.scss    |  3 ++
 .../public-quest-homepage.component.html      | 41 ++++++++++++-------
 .../public-quest-homepage.component.scss      |  8 +++-
 .../public-quest-homepage.component.ts        | 15 +++++--
 .../src/assets/static-assets.ts               |  8 ++++
 .../quest-card/quest-card.component.html      | 16 ++++++++
 .../quest-card/quest-card.component.scss      | 23 +++++++++++
 .../quest-card/quest-card.component.spec.ts   | 27 ++++++++++++
 .../quest-card/quest-card.component.ts        | 17 ++++++++
 .../shared-components.module.ts               |  5 ++-
 11 files changed, 147 insertions(+), 24 deletions(-)
 create mode 100644 apps/shared-components/quest-card/quest-card.component.html
 create mode 100644 apps/shared-components/quest-card/quest-card.component.scss
 create mode 100644 apps/shared-components/quest-card/quest-card.component.spec.ts
 create mode 100644 apps/shared-components/quest-card/quest-card.component.ts

diff --git a/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.html b/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.html
index d66d39cd5..9f5976647 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.html
@@ -1,9 +1,7 @@
 <nb-card>
   <nb-card-body>
-    <nb-card [routerLink]="[quest.slug]" *ngFor="let quest of quests">
-      <nb-card-body>
-        {{ quest.name }}
-      </nb-card-body>
-    </nb-card>
+    <div *ngFor="let quest of quests">
+      <commudle-quest-card [quest]="quest"></commudle-quest-card>
+    </div>
   </nb-card-body>
 </nb-card>
diff --git a/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.scss b/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.scss
index c4fc8ebbf..bcce71fb4 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.scss
+++ b/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.scss
@@ -1,3 +1,6 @@
 nb-card {
   @apply com-mx-0;
+  nb-card-body {
+    @apply com-grid com-grid-cols-3 com-gap-4;
+  }
 }
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
index 749676904..55980f5e9 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.html
@@ -20,15 +20,15 @@ <h1>{{ quest.name }}</h1>
             </div>
             <div class="dates" *ngIf="quest.start_date && quest.end_date">
               <div class="start-date">
-                <span class="date">{{ quest.start_date | date : "d'th' MMM" }}</span>
+                <span class="date">{{ moment(quest.start_date).format('Do MMM YY') }}</span>
                 <span> | </span>
-                <span class="time">{{ quest.start_date | date : 'hh:mm a' }}</span>
+                <span class="time">{{ moment(quest.start_date).format('h:mm a') }}</span>
               </div>
               <fa-icon [icon]="icons.faArrowRight"></fa-icon>
               <div class="end-date">
-                <span class="date">{{ quest.end_date | date : "d'th' MMM" }}</span>
+                <span class="date">{{ moment(quest.end_date).format('Do MMM YY') }}</span>
                 <span> | </span>
-                <span class="time">{{ quest.end_date | date : 'hh:mm a' }}</span>
+                <span class="time">{{ moment(quest.end_date).format('h:mm a') }}</span>
               </div>
             </div>
           </div>
@@ -43,6 +43,10 @@ <h1>{{ quest.name }}</h1>
               ></commudle-quest-task-card>
             </div>
           </div>
+          <div class="description-container">
+            <p class="description-heading">Description</p>
+            <div [innerHTML]="quest.description"></div>
+          </div>
         </div>
         <div class="right-column">
           <div class="com-sticky com-top-20">
@@ -53,8 +57,11 @@ <h1>{{ quest.name }}</h1>
               </div>
               <nb-card>
                 <nb-card-header>Total Task Completed</nb-card-header>
-                <nb-card-body *ngIf="currentUserQuestResponse">
-                  {{ currentUserQuestResponse.completed_task_count }}/{{ quest.tasks_count }}
+                <nb-card-body>
+                  <div *ngIf="currentUserQuestResponse">
+                    {{ currentUserQuestResponse.completed_task_count }}/{{ quest.tasks_count }}
+                  </div>
+                  <div *ngIf="!currentUserQuestResponse">No Record Found Yet!</div>
                 </nb-card-body>
               </nb-card>
             </div>
@@ -65,8 +72,11 @@ <h1>{{ quest.name }}</h1>
               </div>
               <nb-card>
                 <nb-card-header>Reward Points Collected</nb-card-header>
-                <nb-card-body *ngIf="currentUserQuestResponse">
-                  {{ currentUserQuestResponse.reward_points_earned }}/{{ quest.total_rewards_points }}
+                <nb-card-body>
+                  <div *ngIf="currentUserQuestResponse">
+                    {{ currentUserQuestResponse.reward_points_earned }}/{{ quest.total_rewards_points }}
+                  </div>
+                  <div *ngIf="!currentUserQuestResponse">No Record Found Yet!</div>
                 </nb-card-body>
               </nb-card>
             </div>
@@ -81,10 +91,13 @@ <h1>{{ quest.name }}</h1>
                   <span>Points</span>
                 </nb-card-header>
                 <nb-card-body *ngIf="questUserResponses">
-                  <div *ngFor="let questUserResponse of questUserResponses" class="user">
-                    <app-user-profile-card-medium [user]="questUserResponse.user"></app-user-profile-card-medium>
-                    <span>{{ questUserResponse.reward_points_earned }}</span>
+                  <div *ngIf="questUserResponses">
+                    <div *ngFor="let questUserResponse of questUserResponses" class="user">
+                      <app-user-profile-card-medium [user]="questUserResponse.user"></app-user-profile-card-medium>
+                      <span>{{ questUserResponse.reward_points_earned }}</span>
+                    </div>
                   </div>
+                  <div *ngIf="questUserResponses.length === 0">No Participants Available</div>
                 </nb-card-body>
                 <nb-card-footer *ngIf="total > count">
                   <button ghost nbButton fullWidth (click)="openQuestUserResponses(questUserResponseDialogBox)">
@@ -123,15 +136,15 @@ <h1>{{ quest.name }}</h1>
           <th>Time</th>
           <th>Reward Points</th>
         </tr>
-        <tr *ngFor="let questUserResponse of questUserResponses">
+        <tr *ngFor="let questUserResponse of questUserResponsesData">
           <td><app-user-profile-card-medium [user]="questUserResponse.user"></app-user-profile-card-medium></td>
           <td>{{ questUserResponse.completed_task_count }}/{{ tasks.length }}</td>
           <td>
             <span *ngIf="questUserResponse.last_task_time">
-              {{ moment(questUserResponse.last_task_time).format('h:mm:ss a - dddd, MMM, YYYY') }}</span
+              {{ moment(questUserResponse.last_task_time).format('h:mm:ss a - Do, MMM YY') }}</span
             >
           </td>
-          <td>{{ questUserResponse.reward_points_earned }}</td>
+          <td>{{ questUserResponse.reward_points_earned }}/{{ quest.total_rewards_points }}</td>
         </tr>
       </table>
     </nb-card-body>
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss
index a4cc1f9ed..6e5a4dffa 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.scss
@@ -50,6 +50,12 @@
   .task-cards {
     @apply com-grid com-grid-cols-2 com-mr-3;
   }
+  .description-container {
+    @apply com-mx-2;
+    .description-heading {
+      @apply com-text-xl com-font-semibold;
+    }
+  }
 }
 
 .right-column {
@@ -105,7 +111,7 @@
 }
 
 .quest-user-responses-dialog {
-  @apply com-w-full md:com-w-[40dvw] com-h-full md:com-max-h-[90dvh];
+  @apply com-w-full md:com-w-[60dvw] com-h-full md:com-max-h-[90dvh];
   nb-card-header {
     @apply com-flex com-justify-between com-items-center;
   }
diff --git a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
index 592b81d41..f2bfc7a74 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
+++ b/apps/commudle-admin/src/app/feature-modules/public-quests/components/public-quest-homepage/public-quest-homepage.component.ts
@@ -1,9 +1,10 @@
-import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { IQuest, IQuestUserResponse, ITask } from '@commudle/shared-models';
 import { QuestUserResponsesService, TaskService } from '@commudle/shared-services';
 import { NbDialogService } from '@commudle/theme';
 import { faArrowRight, faCircle, faGift, faListCheck, faUsers } from '@fortawesome/free-solid-svg-icons';
+import { FooterService } from 'apps/commudle-admin/src/app/services/footer.service';
 import { QuestTaskCardComponent } from 'apps/shared-components/quest-task-card/quest-task-card.component';
 import moment from 'moment';
 
@@ -12,7 +13,7 @@ import moment from 'moment';
   templateUrl: './public-quest-homepage.component.html',
   styleUrls: ['./public-quest-homepage.component.scss'],
 })
-export class PublicQuestHomepageComponent implements OnInit {
+export class PublicQuestHomepageComponent implements OnInit, OnDestroy {
   quest: IQuest;
   moment = moment;
   tasks: ITask[];
@@ -25,6 +26,7 @@ export class PublicQuestHomepageComponent implements OnInit {
   };
   currentUserQuestResponse: IQuestUserResponse;
   questUserResponses: IQuestUserResponse[];
+  questUserResponsesData: IQuestUserResponse[];
   total: number;
   page = 1;
   count = 10;
@@ -36,9 +38,11 @@ export class PublicQuestHomepageComponent implements OnInit {
     private taskService: TaskService,
     private dialogService: NbDialogService,
     private questUserResponsesService: QuestUserResponsesService,
+    private footerService: FooterService,
   ) {}
 
   ngOnInit() {
+    this.footerService.changeFooterStatus(true);
     this.activatedRoute.data.subscribe((data) => {
       this.quest = data.quest;
       this.getCurrentUserResponse();
@@ -47,6 +51,10 @@ export class PublicQuestHomepageComponent implements OnInit {
     });
   }
 
+  ngOnDestroy(): void {
+    this.footerService.changeFooterStatus(false);
+  }
+
   getTask() {
     this.taskService.pIndex(this.quest.id).subscribe((data) => {
       this.tasks = data;
@@ -82,7 +90,8 @@ export class PublicQuestHomepageComponent implements OnInit {
 
   getUserResponses() {
     this.questUserResponsesService.publicIndex(this.quest.id, this.page, this.count).subscribe((data) => {
-      this.questUserResponses = data.values;
+      if (!this.questUserResponses) this.questUserResponses = data.values;
+      this.questUserResponsesData = data.values;
       this.total = data.total;
       this.page = data.page;
     });
diff --git a/apps/commudle-admin/src/assets/static-assets.ts b/apps/commudle-admin/src/assets/static-assets.ts
index b76347ac3..0a4a3aa48 100644
--- a/apps/commudle-admin/src/assets/static-assets.ts
+++ b/apps/commudle-admin/src/assets/static-assets.ts
@@ -190,4 +190,12 @@ export const staticAssets = {
   // id: 163
   telegram_logo:
     'https://json.commudle.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeTQvQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--1e096d1892f9cb80c35bc962b86956429681e00a/Telegram.svg',
+
+  // id: 169
+  quest_empty_state:
+    'https://json.commudle.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBM3RuQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--df86d3126a9f218dec017a1934acfd49a1e4dc56/Group%201.png',
+
+  // id: 170
+  quest_task_rewards:
+    'https://json.commudle.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMjluQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--2297c1f6dafa2e70379940b391f20fbae9c982ba/RANK%20BADGES.svg',
 };
diff --git a/apps/shared-components/quest-card/quest-card.component.html b/apps/shared-components/quest-card/quest-card.component.html
new file mode 100644
index 000000000..6325c0125
--- /dev/null
+++ b/apps/shared-components/quest-card/quest-card.component.html
@@ -0,0 +1,16 @@
+<a [routerLink]="[quest.slug]">
+  <nb-card>
+    <nb-card-header>
+      <img [src]="staticAssets.quest_empty_state" [alt]="quest.name" />
+    </nb-card-header>
+    <nb-card-body>
+      <p class="title">{{ quest.name }}</p>
+      <div *ngIf="quest.total_rewards_points > 0" class="reward-points">
+        <img [src]="staticAssets.quest_task_rewards" [alt]="quest.total_rewards_points" />{{
+          quest.total_rewards_points
+        }}
+        Reward Points
+      </div>
+    </nb-card-body>
+  </nb-card>
+</a>
diff --git a/apps/shared-components/quest-card/quest-card.component.scss b/apps/shared-components/quest-card/quest-card.component.scss
new file mode 100644
index 000000000..541bf4ace
--- /dev/null
+++ b/apps/shared-components/quest-card/quest-card.component.scss
@@ -0,0 +1,23 @@
+a {
+  @apply com-no-underline;
+  nb-card {
+    @apply hover:com-shadow-md;
+    nb-card-header {
+      @apply com-p-0 com-overflow-hidden com-h-full com-border-0;
+      img {
+        @apply com-w-full;
+      }
+    }
+
+    nb-card-body {
+      @apply com-min-h-[134px];
+      .title {
+        @apply com-font-medium com-text-lg com-line-clamp-2 com-my-0 com-h-14;
+      }
+
+      .reward-points {
+        @apply com-flex com-gap-2 com-items-center com-border com-border-solid com-border-Bright-Gray com-rounded-3xl com-text-orange-700 com-py-1 com-px-3 com-w-max com-mt-4;
+      }
+    }
+  }
+}
diff --git a/apps/shared-components/quest-card/quest-card.component.spec.ts b/apps/shared-components/quest-card/quest-card.component.spec.ts
new file mode 100644
index 000000000..b9416c9c4
--- /dev/null
+++ b/apps/shared-components/quest-card/quest-card.component.spec.ts
@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { QuestCardComponent } from './quest-card.component';
+
+describe('QuestCardComponent', () => {
+  let component: QuestCardComponent;
+  let fixture: ComponentFixture<QuestCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestCardComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QuestCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/shared-components/quest-card/quest-card.component.ts b/apps/shared-components/quest-card/quest-card.component.ts
new file mode 100644
index 000000000..1a7654c9c
--- /dev/null
+++ b/apps/shared-components/quest-card/quest-card.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { IQuest } from '@commudle/shared-models';
+import { staticAssets } from 'apps/commudle-admin/src/assets/static-assets';
+
+@Component({
+  selector: 'commudle-quest-card',
+  templateUrl: './quest-card.component.html',
+  styleUrls: ['./quest-card.component.scss'],
+})
+export class QuestCardComponent implements OnInit {
+  @Input() quest: IQuest;
+  staticAssets = staticAssets;
+
+  constructor() {}
+
+  ngOnInit() {}
+}
diff --git a/apps/shared-components/shared-components.module.ts b/apps/shared-components/shared-components.module.ts
index 17f7ffd09..b06231fba 100644
--- a/apps/shared-components/shared-components.module.ts
+++ b/apps/shared-components/shared-components.module.ts
@@ -93,7 +93,8 @@ import { UserDetailsCheckboxFormComponent } from './user-details-checkbox-form/u
 import { UserDetailsFormComponent } from './user-details-form/user-details-form.component';
 import { NewsletterCardComponent } from './newsletter-card/newsletter-card.component';
 import { QuestFormComponent } from './quest-form/quest-form.component';
-import { QuestTaskCardComponent } from 'apps/shared-components/quest-task-card/quest-task-card.component';
+import { QuestTaskCardComponent } from './quest-task-card/quest-task-card.component';
+import { QuestCardComponent } from './quest-card/quest-card.component';
 @NgModule({
   declarations: [
     WorkInProgressComponent,
@@ -149,6 +150,7 @@ import { QuestTaskCardComponent } from 'apps/shared-components/quest-task-card/q
     NewsletterCardComponent,
     QuestFormComponent,
     QuestTaskCardComponent,
+    QuestCardComponent,
   ],
   imports: [
     CommonModule,
@@ -243,6 +245,7 @@ import { QuestTaskCardComponent } from 'apps/shared-components/quest-task-card/q
     NewsletterCardComponent,
     QuestFormComponent,
     QuestTaskCardComponent,
+    QuestCardComponent,
   ],
   providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }],
 })

From 1efa31fddb7d671b55e35045655026c8ba86b528 Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Wed, 4 Dec 2024 12:44:13 +0530
Subject: [PATCH 29/30] feat: add loader while fetching data for quest

---
 .../public-community-quests.component.html            | 11 +++++++++--
 .../public-community-quests.component.scss            |  4 +++-
 .../public-community-quests.component.ts              |  2 ++
 .../quest-card/quest-card.component.html              |  4 ++--
 .../quest-card/quest-card.component.scss              |  2 +-
 5 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.html b/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.html
index 9f5976647..b3e982af3 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.html
+++ b/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.html
@@ -1,7 +1,14 @@
 <nb-card>
   <nb-card-body>
-    <div *ngFor="let quest of quests">
-      <commudle-quest-card [quest]="quest"></commudle-quest-card>
+    <div *ngIf="isLoading; else questCards">
+      <commudle-loading-spinner></commudle-loading-spinner>
     </div>
+    <ng-template #questCards>
+      <div class="quest-cards">
+        <div *ngFor="let quest of quests">
+          <commudle-quest-card [quest]="quest"></commudle-quest-card>
+        </div>
+      </div>
+    </ng-template>
   </nb-card-body>
 </nb-card>
diff --git a/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.scss b/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.scss
index bcce71fb4..d667c2cd7 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.scss
+++ b/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.scss
@@ -1,6 +1,8 @@
 nb-card {
   @apply com-mx-0;
   nb-card-body {
-    @apply com-grid com-grid-cols-3 com-gap-4;
+    .quest-cards {
+      @apply com-grid com-grid-cols-3 com-gap-4;
+    }
   }
 }
diff --git a/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.ts b/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.ts
index b6b8b2aa6..496f89f2d 100644
--- a/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.ts
+++ b/apps/commudle-admin/src/app/feature-modules/public-community/components/public-community-quests/public-community-quests.component.ts
@@ -14,6 +14,7 @@ export class PublicCommunityQuestsComponent implements OnInit {
   page = 1;
   total = 10;
   count = 10;
+  isLoading = true;
   constructor(private questService: QuestService, private activatedRoute: ActivatedRoute) {}
 
   ngOnInit() {
@@ -25,6 +26,7 @@ export class PublicCommunityQuestsComponent implements OnInit {
 
   getQuests() {
     this.questService.publicIndex(EDbModels.KOMMUNITY, this.community.id, this.page, this.count).subscribe((data) => {
+      this.isLoading = false;
       this.quests = data.values;
       this.page = data.page;
       this.total = data.total;
diff --git a/apps/shared-components/quest-card/quest-card.component.html b/apps/shared-components/quest-card/quest-card.component.html
index 6325c0125..ea1c673c6 100644
--- a/apps/shared-components/quest-card/quest-card.component.html
+++ b/apps/shared-components/quest-card/quest-card.component.html
@@ -1,8 +1,8 @@
 <a [routerLink]="[quest.slug]">
   <nb-card>
-    <nb-card-header>
+    <!-- <nb-card-header>
       <img [src]="staticAssets.quest_empty_state" [alt]="quest.name" />
-    </nb-card-header>
+    </nb-card-header> -->
     <nb-card-body>
       <p class="title">{{ quest.name }}</p>
       <div *ngIf="quest.total_rewards_points > 0" class="reward-points">
diff --git a/apps/shared-components/quest-card/quest-card.component.scss b/apps/shared-components/quest-card/quest-card.component.scss
index 541bf4ace..535d1833f 100644
--- a/apps/shared-components/quest-card/quest-card.component.scss
+++ b/apps/shared-components/quest-card/quest-card.component.scss
@@ -1,7 +1,7 @@
 a {
   @apply com-no-underline;
   nb-card {
-    @apply hover:com-shadow-md;
+    @apply hover:com-shadow-md com-m-0;
     nb-card-header {
       @apply com-p-0 com-overflow-hidden com-h-full com-border-0;
       img {

From 41a2bfde21729bc3c01c2ed6159fd449e54198cc Mon Sep 17 00:00:00 2001
From: Arshdeep Singh <arsh199820@gmail.com>
Date: Wed, 4 Dec 2024 17:23:27 +0530
Subject: [PATCH 30/30] refactor: update instagram client_id

---
 .../services/src/lib/external-user-auth-handler.service.ts    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/shared/services/src/lib/external-user-auth-handler.service.ts b/libs/shared/services/src/lib/external-user-auth-handler.service.ts
index 0b1b0f34b..ac685fab8 100644
--- a/libs/shared/services/src/lib/external-user-auth-handler.service.ts
+++ b/libs/shared/services/src/lib/external-user-auth-handler.service.ts
@@ -24,8 +24,8 @@ export class ExternalUserAuthHandlerService {
   }
 
   loginToInstagram() {
-    const YOUR_INSTAGRAM_CLIENT_ID = '989280999691182';
-    const redirectUrl = 'https://www.commudle.com/';
+    const YOUR_INSTAGRAM_CLIENT_ID = '1090108432225078';
+    const redirectUrl = environment.app_url + '/auth/users/instagram/callback';
     const state = {
       redirectTo: window.location.href,
     };