Frontend/src/app/business/
├── entities/entities.generated.ts         # TypeScript DTOs
├── services/api/api.service.generated.ts  # Typed API methods
├── components/base-details.generated.ts   # Entity form components
├── services/validators/validators.generated.ts
└── enums/enums.generated.ts

BaseFormComponent<TMainUIForm, TSaveBody>  (Spiderly library)
        ↓
{Entity}BaseDetailsComponent          (generated)
        ↓
{Entity}DetailsComponent              (your code)

1. onSave(rerouteToParentSlugAfterSave)
2.   → Build saveBody from form raw values
3.   → onBeforeSave(saveBody)        ← mutate saveBody here
4.   → baseFormService.isControlValid()
5.   → saveObservableMethod(saveBody)  (HTTP PUT)
6.   → onAfterSaveRequest()
7.   → Success toast + reroute
8.   → onAfterSave()

export class ProductDetailsComponent
  extends BaseFormComponent<ProductMainUIForm, ProductSaveBody>
  implements OnInit
{
  override mainUIFormClass = ProductMainUIForm;
  override saveBodyClass = ProductSaveBody;
  override onBeforeSave = (saveBody?: ProductSaveBody) => {
    saveBody.productDTO.stock =
      saveBody.orderedProductVariantsSaveBodyDTO.reduce(
        (sum, v) => sum + (v.productVariantDTO.stock ?? 0),
        0,
      );
  };
  override onAfterSave = () => {
    this.refreshRelatedData();
  };
  override rerouteToSavedObject = (rerouteId: number | string) => {
    this.router.navigateByUrl(`/custom-path/${rerouteId}`);
  };
}

SpiderlyFormControl<T> extends FormControl<T>
  label: string              // Untranslated name
  labelForDisplay: string    // Translated label
  required: boolean
  type: string               // 'number', 'Date', 'Namebook[]'
  validator: SpiderlyValidatorFn | null
SpiderlyFormGroup<T> extends FormGroup
  controls: SpiderlyControlsOfType<T>
  targetClass: SchemaAwareConstructor<T>
  getControl(formControlName): SpiderlyFormControl
SpiderlyFormArray<T> extends FormArray
  formGroupInitialValues: Partial<T>
  targetClass: SchemaAwareConstructor<T>
  getCrudMenuForOrderedData(): MenuItem[]  // Remove, AddAbove, AddBelow
  addNewFormGroup(index)
  getFormGroups(): SpiderlyFormGroup<T>[]

<user-base-details
  [parentFormGroup]="parentFormGroup"
  [showIsDisabledForUser]="isAdmin"          <!-- show a field only when a condition holds -->
  [showEmailForUser]="false"                 <!-- hide a field outright -->
  [showTimeOnBirthDateForUser]="true"        <!-- calendar control: also render the time picker -->
  (onSave)="onSave()"
></user-base-details>

<spiderly-data-table
  [cols]="cols"
  [getPaginatedListObservableMethod]="getPaginatedProductListMethod"
  [additionalFilterIdLong]="categoryId"
  [navigateOnRowClick]="true"
  [rowNavigationPath]="'/product-list'"
>
</spiderly-data-table>

<spiderly-data-table [cols]="cols" [items]="localItems" [hasLazyLoad]="false">
</spiderly-data-table>

cols: Column<ProductDTO>[] = [
  new Column({ field: 'title', name: 'Title', filterType: 'text' }),
  new Column({ field: 'price', name: 'Price', filterType: 'numeric', showMatchModes: true, decimalPlaces: 2 }),
  new Column({ field: 'createdAt', name: 'Created', filterType: 'date', showTime: true }),
  new Column({ field: 'isActive', name: 'Active', filterType: 'boolean' }),
  new Column({ field: 'categoryDisplayName', name: 'Category', filterType: 'multiselect',
    dropdownOrMultiselectValues: this.categoryOptions }),
  new Column({
    actions: [
      new Action({ field: 'Details', icon: 'pi pi-pencil', onClick: (id) => this.editProduct(id) }),
      new Action({ field: 'Delete' }),
      new Action({ field: 'custom', name: 'Clone', icon: 'pi pi-copy', onClick: (id) => this.clone(id) }),
    ]
  }),
];

@Injectable({ providedIn: "root" })
export class ConfigService extends ConfigServiceBase {
  override logoPath = "assets/images/my-logo.png";
  override companyName = "My Company";
  override primaryColor = "#3B82F6";
  override defaultPageSize = 25;
  override loginSlug = "sign-in";
  override showGoogleAuth = true;
}

export class AuthService extends AuthServiceBase {
  override onAfterLoginExternal = () => {
    this.analyticsService.trackLogin("google");
  };
  override onAfterLogout = () => {
    this.cacheService.clear();
  };
  override onAfterRefreshToken = () => {
    this.syncPermissions();
  };
}

export class LayoutService extends LayoutServiceBase {
  override initTopBarData(): Observable<InitTopBarData> {
    return this.apiService.getTopBarData().pipe(
      map(data => new InitTopBarData({ ... }))
    );
  }
}

layoutConfig: AppConfig = {
  inputStyle: "outlined", // 'outlined' | 'filled'
  colorScheme: "light", // 'light' | 'dark'
  menuMode: "static", // 'static' | 'overlay'
  scale: 14, // Font scale
  ripple: false,
  theme: "lara-light-indigo",
  color: "var(--p-primary-color)",
};

interface SpiderlyMenuItem extends PrimeNG.MenuItem {
  hasPermission?: (permissionCodes: string[]) => boolean;
  showPartnerDialog?: boolean;
}

// In layout.component.ts:
menu: SpiderlyMenuItem[] = [
  {
    label: this.translocoService.translate('Dashboard'),
    icon: 'pi pi-fw pi-home',
    routerLink: ['/dashboard'],
  },
  {
    label: this.translocoService.translate('Products'),
    icon: 'pi pi-fw pi-box',
    items: [
      { label: 'All Products', routerLink: ['/product-list'] },
      { label: 'Categories', routerLink: ['/category-list'] },
    ],
  },
];

<!-- Side menu (default) -->
<spiderly-layout [menu]="menu" [isSideMenuLayout]="true">
  <router-outlet></router-outlet>
</spiderly-layout>
 
<!-- Top menu -->
<spiderly-layout [menu]="menu" [isSideMenuLayout]="false">
  <router-outlet></router-outlet>
</spiderly-layout>

@Injectable({ providedIn: "root" })
export class MyValidatorService extends ValidatorAbstractService {
  setValidator(
    control: SpiderlyFormControl,
    className: string,
  ): SpiderlyValidatorFn {
    if (className === "Product" && control.label === "sku") {
      const validator: SpiderlyValidatorFn = (): ValidationErrors | null => {
        const value = control.value as string;
        if (value && !value.match(/^[A-Z0-9]{6,12}$/))
          return { _: this.translocoService.translate("InvalidSKU") };
        return null;
      };
      control.validator = validator;
    }
    return control.validator;
  }
  setFormArrayValidator(formArray: SpiderlyFormArray, className: string): void {
    if (className === "OrderItems") {
      this.isFormArrayEmpty(formArray);
    }
  }
}