@flower-city-online/itinerary-lib 0.0.31 → 0.0.32

package/src/lib/itinerary-app/modules/itineraries/itineraries.module.ts

@@ -0,0 +1,232 @@
+import { CommonModule, NgOptimizedImage } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { GoogleMap, GoogleMapsModule } from '@angular/google-maps';
+import { MatIcon } from '@angular/material/icon'; 
+import {
+  ButtonsModule,
+  DashedCheckboxModule,
+  DirectiveModule,
+  FooterSharedComponent,
+  FormFieldModule,
+  GridFiltersModule,
+  GridModule,
+  ImageDeckComponent,
+  InfoCardPlaceholderModule,
+  InputFieldModule,
+  InputFieldSelectModule,
+  LibMapModule,
+  LibModalModule,
+  LibPercentageBarModule,
+  LibTabMenuModule,
+  LibToastrModule,
+  LibToastrStackModule,
+  NotificationsModule,
+  ProgressBarModule,
+  RangeSelectorModule,
+  SearchBarModule,
+  SectionSeparatorComponent,
+  SelectableModule,
+  TextBoxComponent,
+  ToggleModule,
+  UserMenuComponent
+} from '@naniteninja/ionic-lib'; 
+import { DeleteItinerariesComponent } from './components/delete-itineraries/delete-itineraries.component';
+import { FilterMenuComponent } from './components/filter-menu/filter-menu.component';
+import { CommentFilterMenuComponent } from './components/comment-filter-menu/comment-filter-menu.component';
+import { ReportItineraryModalComponent } from './components/report-itinerary-modal/report-itinerary-modal.component';
+import { ItinerariesRoutingModule } from './itineraries-routing.module';
+import { ItinerariesComponent } from './itineraries.component';
+import { AdvancedFiltersComponent } from './pages/advanced-filters/advanced-filters.component';
+import { BranchedItinerariesComponent } from './pages/branched-itineraries/branched-itineraries.component';
+import { CreateItineraryModalItemComponent } from './pages/builder/components/create-itinerary-modal-item/create-itinerary-modal-item.component';
+import { CreateItineraryModalComponent } from './pages/builder/components/create-itinerary-modal/create-itinerary-modal.component';
+import { CreateItineraryComponent } from './pages/builder/pages/create-itinerary/create-itinerary.component';
+import { CommentRepliesComponent } from './pages/comment-replies/comment-replies.component';
+import { CommentSingleComponent } from './pages/comment-replies/components/comment-single/comment-single.component';
+import { CommentComparisonComponent } from './pages/comments/comment-comparison/comment-comparison.component';
+import { CommentSearchComponent } from './pages/comments/comment-search/comment-search.component';
+import { CommentsPageComponent } from './pages/comments/comments-page.component';
+import { HandleUpdateCommentRequestComponent } from './pages/comments/handle-update-comment-request/handle-update-comment-request.component';
+import { ExploreComponent } from './pages/explore/explore.component';
+import { FavoritesComponent } from './pages/favorites/favorites.component'; 
+import { DetailsComponent } from './pages/itinerary-detail/components/details/details.component';
+import { MapComponent } from './pages/itinerary-detail/components/map/map.component';
+import { SummaryComponent } from './pages/itinerary-detail/components/summary/summary.component';
+import { ItineraryDetailComponent } from './pages/itinerary-detail/itinerary-detail.component';
+import { ItineraryAuthorHistoryComponent } from './pages/itinerary-author-history/itinerary-author-history.component';
+import { ItineraryUpvoteUsersComponent } from './pages/itinerary-upvote-users/itinerary-upvote-users.component';
+import { ItineraryUsersComponent } from './pages/itinerary-users/itinerary-users.component';
+import { ItineraryWatchingUsersComponent } from './pages/itinerary-watching-users/itinerary-watching-users.component';
+import { ExistingFriendsComponent } from './pages/itinerary-friends/existing-friends/existing-friends.component';
+import { FriendRequestsComponent } from './pages/itinerary-friends/friend-requests/friend-requests.component';
+import { ItineraryFriendsComponent } from './pages/itinerary-friends/itinerary-friends.component';
+import { ListFriendUsersComponent } from './pages/itinerary-friends/list-friend-users/list-friend-users.component';
+import { SendFriendRequestComponent } from './pages/itinerary-friends/send-friend-request/send-friend-request.component';
+import { AllPeopleComponent } from './pages/itinerary-members/all-people/all-people.component';
+import { ExistingMembersComponent } from './pages/itinerary-members/existing-members/existing-members.component';
+import { ItineraryMembersComponent } from './pages/itinerary-members/itinerary-members.component';
+import { UserList } from './pages/itinerary-members/user-list/user-list.component';
+import { CreateItineraryDestinationComponent } from './pages/builder/pages/create-itinerary-destination/create-itinerary-destination.component';
+import { CreateItineraryHeaderComponent } from './pages/builder/pages/create-itinerary-header/create-itinerary-header.component';
+import { CreateItineraryMemberDetailsComponent } from './pages/builder/pages/create-itinerary-member-details/create-itinerary-member-details.component';
+import { CreateItineraryStartLocationComponent } from './pages/builder/pages/create-itinerary-start-location/create-itinerary-start-location.component';
+import { CreateItineraryUserSearchComponent } from './pages/builder/pages/create-itinerary-user-search/create-itinerary-user-search.component';
+import { CreatedItineraryDetailComponent } from './pages/builder/pages/created-itinerary-preview/created-itinerary-detail/created-itinerary-detail.component';
+import { CreatedItineraryMapComponent } from './pages/builder/pages/created-itinerary-preview/created-itinerary-map/created-itinerary-map.component';
+import { CreatedItineraryPreviewComponent } from './pages/builder/pages/created-itinerary-preview/created-itinerary-preview.component';
+import { CreatedItineraryComponent } from './pages/builder/pages/created-itinerary/created-itinerary.component';
+import { ItineraryAddPlaceComponent } from './pages/builder/pages/itinerary-add-place/itinerary-add-place.component';
+import { ItineraryPlaceBasicInfoComponent } from './pages/builder/pages/itinerary-add-place/itinerary-place-basic-info/itinerary-place-basic-info.component';
+import { ItineraryPlaceDateTimeComponent } from './pages/builder/pages/itinerary-add-place/itinerary-place-date-time/itinerary-place-date-time.component';
+import { ItineraryPlaceMembersComponent } from './pages/builder/pages/itinerary-add-place/itinerary-place-members/itinerary-place-members.component';
+import { LocationPickerComponent } from './pages/builder/pages/location-picker/location-picker.component';
+import { SelectItineraryEventComponent } from './pages/builder/pages/select-itinerary-event/select-itinerary-event.component';
+import { SuggestedEventsLocationComponent } from './pages/builder/pages/suggested-events-location/suggested-events-location.component';
+import { SuggestedEventsRouteRadiusComponent } from './pages/builder/pages/suggested-events-route-radius/suggested-events-route-radius.component';
+import { SuggestedEventsRouteTypeComponent } from './pages/builder/pages/suggested-events-route-type/suggested-events-route-type.component';
+import { ItinerarySentInvitesComponent } from './pages/itinerary-members/itinerary-sent-invites/itinerary-sent-invites.component';
+import { SendInviteComponent } from './pages/itinerary-members/send-invite/send-invite.component';
+import { NotificationsComponent } from './pages/notifications/notifications.component';
+import { StoryComponent } from './pages/stories/story.component';
+import { environment } from '../../../../environments/environment';
+import { SendToClientComponent } from './components/send-to-client/send-to-client.component';
+import { SharePopupComponent } from './components/share-popup/share-popup.component';
+import { CreateItineraryDrawModeComponent } from './pages/builder/pages/create-itinerary-draw-mode/create-itinerary-draw-mode.component';
+import { CreateItineraryDrawPreviewComponent } from './pages/builder/pages/create-itinerary-draw-preview/create-itinerary-draw-preview.component';
+import { CreateItineraryNoVisualFilterComponent } from './pages/builder/pages/create-itinerary-no-visual-filter/create-itinerary-no-visual-filter.component';
+import { CreateItineraryNoVisualPreviewComponent } from './pages/builder/pages/create-itinerary-no-visual-preview/create-itinerary-no-visual-preview.component';
+import { AppHeaderDesktopComponent } from './components/app-header-desktop/app-header-desktop.component';
+import { AppSidebarDesktopComponent } from './components/app-sidebar-desktop/app-sidebar-desktop.component';
+import { NoVisualMapFiltersComponent } from './components/no-visual-map-filters/no-visual-map-filters.component';
+import { ReportMediaModalComponent } from './components/report-media-modal/report-media-modal.component';
+import { BuilderComponent } from './pages/builder/builder.component';
+import { IonicModule } from '@ionic/angular';
+import { SharedModule } from '../../shared/shared.module';
+import { TranslateModule } from '@ngx-translate/core';
+
+@NgModule({
+  declarations: [
+    ItinerariesComponent,
+    FilterMenuComponent,
+    CommentFilterMenuComponent,
+    ExploreComponent,
+    BuilderComponent,
+    FavoritesComponent,
+    ReportItineraryModalComponent,
+    ReportMediaModalComponent,
+    CreateItineraryModalComponent,
+    CreateItineraryModalItemComponent,
+    DeleteItinerariesComponent,
+    NoVisualMapFiltersComponent,
+    SendToClientComponent,
+    BranchedItinerariesComponent,
+    ItineraryDetailComponent,
+    MapComponent,
+    SummaryComponent,
+    CommentSearchComponent,
+    DetailsComponent,
+    SendInviteComponent,
+    StoryComponent,
+    ItinerarySentInvitesComponent,
+    CommentsPageComponent,
+    NotificationsComponent,
+    HandleUpdateCommentRequestComponent,
+    ItineraryMembersComponent,
+    UserList,
+    ExistingMembersComponent,
+    AllPeopleComponent,
+    FriendRequestsComponent,
+    SendFriendRequestComponent,
+    ItineraryFriendsComponent,
+    ExistingFriendsComponent,
+    ListFriendUsersComponent,
+    CommentComparisonComponent,
+    FriendRequestsComponent,
+    CommentRepliesComponent,
+    CommentSingleComponent,
+    ItineraryUsersComponent,
+    ItineraryWatchingUsersComponent,
+    ItineraryUpvoteUsersComponent,
+    ItineraryAuthorHistoryComponent,
+    AdvancedFiltersComponent,
+    CreateItineraryComponent,
+    CreateItineraryStartLocationComponent,
+    CreateItineraryDestinationComponent,
+    SelectItineraryEventComponent,
+    ItineraryAddPlaceComponent,
+    ItineraryPlaceBasicInfoComponent,
+    ItineraryPlaceDateTimeComponent,
+    ItineraryPlaceMembersComponent,
+    CreateItineraryUserSearchComponent,
+    CreateItineraryMemberDetailsComponent,
+    LocationPickerComponent,
+    SuggestedEventsLocationComponent,
+    SuggestedEventsRouteTypeComponent,
+    SuggestedEventsRouteRadiusComponent,
+    CreatedItineraryComponent,
+    CreatedItineraryPreviewComponent,
+    CreatedItineraryDetailComponent,
+    CreatedItineraryMapComponent,
+    CreateItineraryHeaderComponent,
+    SharePopupComponent,
+    CreateItineraryDrawModeComponent,
+    CreateItineraryDrawPreviewComponent,
+    CreateItineraryNoVisualFilterComponent,
+    CreateItineraryNoVisualPreviewComponent,
+    AppHeaderDesktopComponent,
+    AppSidebarDesktopComponent,
+    NoVisualMapFiltersComponent
+  ],
+  exports: [FilterMenuComponent, CommentFilterMenuComponent, DeleteItinerariesComponent, NoVisualMapFiltersComponent, SendToClientComponent],
+  imports: [
+    CommonModule,
+    RouterModule,
+    IonicModule,
+    ItinerariesRoutingModule,
+    SelectableModule,
+    ReactiveFormsModule,
+    InfoCardPlaceholderModule,
+    LibTabMenuModule,
+    ButtonsModule,
+    ToggleModule,
+    NgOptimizedImage,
+    SharedModule,
+    LibModalModule,
+    FormFieldModule,
+    DirectiveModule,
+    FormsModule,
+    TextBoxComponent,
+    LibPercentageBarModule,
+    DashedCheckboxModule,
+    TranslateModule,
+    SearchBarModule,
+    NotificationsModule,
+    LibToastrModule,
+    GoogleMapsModule,
+    InputFieldSelectModule,
+    GridModule,
+    SectionSeparatorComponent,
+    GridFiltersModule,
+    MatIcon,
+    DirectiveModule,
+    ImageDeckComponent,
+    LibToastrStackModule,
+    ProgressBarModule,
+    FooterSharedComponent,
+    RangeSelectorModule,
+    InputFieldModule,
+    UserMenuComponent,
+    LibMapModule.forRoot({
+      identityPoolId: environment.identityPoolId,
+      mapName: environment.mapName,
+      region: environment.region,
+      placeIndex: environment.placeIndex,
+      routeCalculatorName: environment.routeCalculatorName,
+    } as any)
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  providers: [GoogleMap],
+})
+export class ItinerariesModule { }

package/src/lib/itinerary-app/modules/itineraries/pages/advanced-filters/advanced-filters.component.css

@@ -0,0 +1,22 @@
+.bg-shadow {
+  text-shadow: 2px 2px 10px red;
+}
+
+.lib-icon {
+  height: 13px !important;
+}
+
+.subtitle {
+  font-weight: 500;
+  font-size: 13.13px;
+  line-height: 160%;
+  color: white;
+}
+
+lib-input-field-select ::ng-deep path {
+  color: #fe3c72;
+}
+
+button span.shadow {
+  text-shadow: var(--lib-primary-button-text-shadow);
+}

package/src/lib/itinerary-app/modules/itineraries/pages/advanced-filters/advanced-filters.component.html

@@ -0,0 +1,70 @@
+<div class="px-4">
+  <app-header heading="Advanced Filters" (firstButton)="back()"></app-header>
+</div>
+<div class="px-5 mt-4 mb-[5rem]">
+  <form [formGroup]="form" (ngSubmit)="submitForm()">
+    <p class="normal-text-md normal-text-gray mb-[26px]">Create and apply custom advance filters or select popular preset advance filters.</p>
+    <h5 class="subtitle mb-[12px]">Filters</h5>
+    <div class="flex items-center mb-2">
+      <lib-input-field type="text" label="Filter Name" style="width: calc(100% - 80px) ;" formControlName="filterName">
+      </lib-input-field>
+      <button class="flex row items-center gap-1 mt-2 ms-1 cursor-pointer font-purple text-nowrap" type="submit">
+          <img [ngSrc]="ICONS['plus']" height="14" width="15" alt="lib-icon" />
+        <span class="shadow normal-text-md">
+          Add filter
+        </span>
+      </button>
+    </div>
+    <div class="flex gap-2">
+      <div class="w-[50%]">
+        <lib-input-field-select lib-input-field-select-component formControlName="filterField" optionLabel="name"
+          optionValue="value" label="Field" [options]="fields">
+        </lib-input-field-select>
+      </div>
+      <div class="w-[50%]">
+        <lib-input-field-select lib-input-field-select-component formControlName="filterCondition"
+          [options]="conditions" optionLabel="name" optionValue="value" label="Condition">
+        </lib-input-field-select>
+      </div>
+    </div>
+  </form>
+   <div class="divider mt-4">
+   </div>
+  <div class="mt-[20px]">
+    <div *ngFor="let filter of defaultFilterList" class="flex row justify-between items-center mb-[32px]">
+      <div class="flex row gap-[30px]">
+        <img [src]="ICONS['grid']" alt="lib-icon">
+        <p class="normal-text-md " [class]="selectedFilterId !== filter.projectGridFilterId ? 'text-white' : 'normal-text-gray'">{{ filter.name }}</p>
+      </div>
+      <div class="flex row gap-[14px]">
+        <p class="normal-text-sm">Default</p>
+        <img *ngIf="selectedFilterId !== filter.projectGridFilterId " [src]="ICONS['eyePink']" alt="lib-icon" width="15.59" height="9.85" (click)="setFilter(filter)">
+        <img *ngIf="selectedFilterId === filter.projectGridFilterId " [src]="ICONS['eyePinkClose']" alt="lib-icon" width="15.59" height="9.85" (click)="setFilter(filter)">
+      </div>
+    </div>
+
+    <div *ngFor="let userFilter of userFilterList" class="flex row justify-between mb-[32px] items-center">
+      <div class="flex row gap-[30px]">
+        <img [src]="ICONS['grid']" alt="lib-icon">
+        <p class="text-nowrap normal-text-md" [ngStyle]="{ 'max-width': filterWidth + 'px' }" [class]="selectedFilterId !== userFilter.projectGridFilterId ? 'text-white' : 'normal-text-gray'">
+          <span class="truncate inline-block align-bottom" style="max-width: 4rem;">
+            {{ userFilter.name }}
+          </span>
+           |
+          {{ userFilter.sort?.field }}, {{ userFilter.sort?.direction == "Ascending" ? "Sort A-Z" : "Sort Z-A" }}</p>
+        <!-- <p class="text-white" [ngStyle]="{ 'max-width': filterWidth + 'px' }">{{ userFilter.name }} </p> -->
+      </div>
+      <div class="flex row gap-3">
+        <img [src]="ICONS['deletePink']" class="lib-icon" width="9.41" height="12.29"  (click)="removeFilter(userFilter)">
+        <img [src]="ICONS['editPink']" class="lib-icon" width="12.31" height="12.31">
+        <img *ngIf="selectedFilterId !== userFilter.projectGridFilterId " [src]="ICONS['eyePink']" alt="lib-icon" width="15.59" height="9.85" (click)="setFilter(userFilter)">
+        <img *ngIf="selectedFilterId === userFilter.projectGridFilterId " [src]="ICONS['eyePinkClose']" alt="lib-icon" width="15.59" height="9.85" (click)="setFilter(userFilter)">
+      </div>
+    </div>
+  </div>
+</div>
+<div class="fixed w-[90%] bottom-[1rem] left-[5%]">
+  <div class="w-100 center">
+    <lib-primary-btn>{{"ITINERARY.APPLY" | translate }}</lib-primary-btn>
+  </div>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/advanced-filters/advanced-filters.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdvancedFiltersComponent } from './advanced-filters.component';
+
+describe('AdvancedFiltersComponent', () => {
+  let component: AdvancedFiltersComponent;
+  let fixture: ComponentFixture<AdvancedFiltersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AdvancedFiltersComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(AdvancedFiltersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/itinerary-app/modules/itineraries/pages/advanced-filters/advanced-filters.component.ts

@@ -0,0 +1,155 @@
+import { Component, OnInit } from '@angular/core';
+import { FilterDataRequest, SelectOption } from '@naniteninja/ionic-lib';
+import { ICONS } from '../../../../_constants/constants';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { Iicon } from '../../../../_interface/icon';
+import { Location } from '@angular/common';
+
+@Component({
+    selector: 'app-advanced-filters',
+    templateUrl: './advanced-filters.component.html',
+    styleUrl: './advanced-filters.component.css',
+    standalone: false
+})
+export class AdvancedFiltersComponent implements OnInit {
+  form: FormGroup;
+  filterWidth: number | undefined;
+
+  constructor(private fb: FormBuilder, private location: Location) {
+    this.form = this.fb.group({
+      filterField: [null],
+      filterCondition: [this.conditions[0]?.value || null],
+      filterName: [""],
+    });
+  }
+
+  fields = [
+    { name: 'Name', value: '1' },
+    { name: 'Title', value: '2' },
+    { name: 'Upvote', value: '3' }
+  ];
+  conditions = [
+    { name: 'Sort A-Z', value: '1' },
+    { name: 'Sort Z-A', value: '2' }
+  ];
+
+  ICONS: Iicon = ICONS;
+
+  filtersss: SelectOption<number>[] = [
+    {
+      label: 'Hello',
+      value: 2,
+      selected: true,
+    },
+  ];
+  defaultFilterList: FilterDataRequest[] = [
+    { name: 'Best', projectGridFilterId: 'default1', userFilters: [] },
+    { name: "Hot", userFilters: [], projectGridFilterId: "default2" },
+    { name: "Top", userFilters: [], projectGridFilterId: "default3" },
+    { name: "New", userFilters: [], projectGridFilterId: "default4" },
+  ];
+  userFilterList: FilterDataRequest[] = [
+    {
+      name: 'Filter by Name Ascending',
+      projectGridFilterId: '123',
+      collectionName: 'Employees',
+      userFilters: [
+        {
+          publicFieldName: 'Name',
+          operatorType: 'Contains',
+          values: ['John'],
+        },
+      ],
+      sort: {
+        field: 'Name',
+        direction: 'Ascending',
+      },
+      order: 1,
+    },
+    {
+      name: 'Filter by Department and Salary Descending',
+      projectGridFilterId: '456',
+      collectionName: 'Employees',
+      userFilters: [
+        {
+          publicFieldName: 'Department',
+          operatorType: 'Equals',
+          values: ['IT'],
+        },
+        {
+          publicFieldName: 'Salary',
+          operatorType: 'GreaterThan',
+          values: [50000],
+        },
+      ],
+      sort: {
+        field: 'Title',
+        direction: 'Descending',
+      },
+      order: 2,
+    },
+  ];
+
+  selectedFilterId: string = '';
+
+  search(_e: string): void {
+
+  }
+
+  getNameFromValue(value: string, array: { name: string; value: string }[]): string {
+    return array.find(item => item.value === value)?.name || '';
+  }
+  getValueFromName(name: string, array: { name: string; value: string }[]): string {
+    return array.find(item => item.name === name)?.value || '';
+  }
+
+  generateRandomString(length: number = 16): string {
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
+    for (let i = 0; i < length; i++) {
+      result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+  }
+
+  submitForm() {
+    if (!this.form?.value?.filterName) return;
+    const newUserFilter: FilterDataRequest = {
+      name: this.form?.value?.filterName ?? '',
+      projectGridFilterId: this.generateRandomString(),
+      collectionName: 'Employees',
+      userFilters: [
+        {
+          publicFieldName: 'Name',
+          operatorType: 'Contains',
+          values: ['John'],
+        },
+      ],
+      sort: {
+        field: this.getNameFromValue(this.form?.value?.filterField ?? '', this.fields),
+        direction: this.form?.value?.filterCondition == '1' ? 'Ascending' : 'Descending',
+      },
+      order: this.userFilterList.length,
+    };
+    this.userFilterList.push(newUserFilter);
+  }
+  setFilter(userFilter: FilterDataRequest): void {
+    this.form = this.fb.group({
+      filterField: [this.getValueFromName(userFilter.sort?.field ?? "", this.fields)],
+      filterCondition: [userFilter.sort?.direction == "Ascending" ? '1' : "2"],
+      filterName: [userFilter.name],
+    });
+    this.selectedFilterId = userFilter.projectGridFilterId ?? "";
+  }
+  removeFilter(userFilter: FilterDataRequest): void {
+    this.userFilterList = this.userFilterList.filter(
+      filter => filter.projectGridFilterId !== userFilter.projectGridFilterId
+    );
+  }
+  ngOnInit(): void {
+    this.filterWidth = window.screen.width - 130;
+  }
+  back() {
+    this.location.back();
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/branched-itineraries/branched-itineraries.component.html

@@ -0,0 +1,30 @@
+<div class="ps-5 pe-5">
+  <app-header
+    (firstButton)="back()"
+    [heading]="'BRANCHED.FORKED_ITINERARIES' | translate"
+  ></app-header>
+
+  <lib-secondary-btn >
+    <div class="flex items-center justify-center">
+      <img class="branchIcon me-1" [src]="ICONS['branchPink']" alt="icon" />
+      <span class="me-1">
+        {{ "BRANCHED.FORK_THE_ITINERARY" | translate }}
+      </span>
+    </div>
+  </lib-secondary-btn>
+
+  <app-filter-menu [ngStyle]="{ margin: '0px !important' }"></app-filter-menu>
+  <ng-container *ngFor="let t of temps">
+    <app-cutom-card
+      [libMenuItem]="libMenuItem"
+      [isDraft]="false"
+      [itineraryStarted]="true"
+      (TitleClicked)="navToDetail()"
+      (forkClicked)="navToBranchItinerary(t)"
+      (messageClicked)="navToComment()"
+      (userProfileClicked)="navToMoreDetail()"
+      (imageClicked)="navToStories()"
+      (eyeClicked)="navToWatching()"
+    ></app-cutom-card>
+  </ng-container>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/branched-itineraries/branched-itineraries.component.scss

@@ -0,0 +1,16 @@
+.builder-content {
+  width: 100%;
+}
+
+.second-comp {
+  margin-top: 10px !important;
+}
+
+.create-itinires-com {
+  width: 100%;
+}
+
+.branchIcon {
+  height: 50px !important;
+  width: 50px !important;
+}

package/src/lib/itinerary-app/modules/itineraries/pages/branched-itineraries/branched-itineraries.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BranchedItinerariesComponent } from './branched-itineraries.component';
+
+describe('BranchedItinerariesComponent', () => {
+  let component: BranchedItinerariesComponent;
+  let fixture: ComponentFixture<BranchedItinerariesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BranchedItinerariesComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BranchedItinerariesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});