From 0c5257af0133015b3c7b543f1d153395b97e5978 Mon Sep 17 00:00:00 2001
From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com>
Date: Wed, 25 Feb 2026 17:44:54 +0300
Subject: [PATCH] Add screenshots to modular CRM tutorial parts

Replace TODO screenshot placeholders with actual image links in modular CRM tutorial parts 02, 03, 05 and 06. This adds screenshots for the Angular Catalog and Ordering pages/components to help verify the UI integration and product/order listings.
---
 docs/en/tutorials/modular-crm/part-02.md | 2 +-
 docs/en/tutorials/modular-crm/part-03.md | 4 ++--
 docs/en/tutorials/modular-crm/part-05.md | 4 ++--
 docs/en/tutorials/modular-crm/part-06.md | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/en/tutorials/modular-crm/part-02.md b/docs/en/tutorials/modular-crm/part-02.md
index 28cadbec11..76c23d5e2e 100644
--- a/docs/en/tutorials/modular-crm/part-02.md
+++ b/docs/en/tutorials/modular-crm/part-02.md
@@ -82,7 +82,7 @@ yarn start
 
 After the Angular app starts, open the URL shown in the terminal (typically `http://localhost:4200`), sign in, and navigate to the *Catalog* page from the main menu to verify the `ModularCrm.Catalog` module UI is integrated.
 
-> TODO: Add Angular Catalog page screenshot.
+![abp-studio-solution-runner-initial-catalog-page](images/abp-studio-solution-runner-initial-catalog-page.png)
 
 {{end}}
 
diff --git a/docs/en/tutorials/modular-crm/part-03.md b/docs/en/tutorials/modular-crm/part-03.md
index 3d14b28cdf..43457a9cca 100644
--- a/docs/en/tutorials/modular-crm/part-03.md
+++ b/docs/en/tutorials/modular-crm/part-03.md
@@ -537,7 +537,7 @@ Now, open the `projects/catalog/src/lib/components/catalog.component.html` file
 
 In a module-based Angular UI, the route and menu are configured in the module's config project. Ensure `projects/catalog/config/src/providers/route.provider.ts` includes the `/catalog` route, and `projects/catalog/src/lib/catalog.routes.ts` lazy-loads `CatalogComponent`.
 
-> TODO: Add Angular Catalog component screenshot.
+![vscode-catalog-cshtml](images/vscode-catalog-cshtml.png)
 
 Finally, start the Angular app from the root `angular` folder and navigate to the *Catalog* page to see the products list:
 
@@ -545,7 +545,7 @@ Finally, start the Angular app from the root `angular` folder and navigate to th
 yarn start
 ```
 
-> TODO: Add Angular Catalog page screenshot.
+![abp-studio-browser-list-of-products](images/abp-studio-browser-list-of-products.png)
 
 {{end}}
 
diff --git a/docs/en/tutorials/modular-crm/part-05.md b/docs/en/tutorials/modular-crm/part-05.md
index ae7ab3c996..ffce44fda2 100644
--- a/docs/en/tutorials/modular-crm/part-05.md
+++ b/docs/en/tutorials/modular-crm/part-05.md
@@ -559,7 +559,7 @@ Then open `projects/ordering/src/lib/components/ordering.component.html` and upd
 </abp-card>
 ```
 
-> TODO: Add Angular Ordering component screenshot.
+![visual-studio-ordering-contracts](images/visual-studio-ordering-contracts-v2.png)
 
 ### Editing the Menu Item
 
@@ -575,7 +575,7 @@ yarn start
 
 Navigate to the *Ordering* page and verify that the orders are listed. At this stage, showing `productId` is expected.
 
-> TODO: Add Angular Ordering page screenshot.
+![abp-studio-browser-orders-menu-item](images/abp-studio-browser-orders-menu-item-v2.png)
 
 {{end}}
 
diff --git a/docs/en/tutorials/modular-crm/part-06.md b/docs/en/tutorials/modular-crm/part-06.md
index 28f667f3b0..40647a9ec8 100644
--- a/docs/en/tutorials/modular-crm/part-06.md
+++ b/docs/en/tutorials/modular-crm/part-06.md
@@ -300,7 +300,7 @@ If your generated Angular proxy files are not up to date, run `abp generate-prox
 
 Then run the Angular app (`yarn start` in the `angular` folder), navigate to the *Ordering* page, and verify product names are shown instead of product IDs.
 
-> TODO: Add Angular Ordering page screenshot with product names.
+![abp-studio-browser-list-of-orders-with-product-name](images/abp-studio-browser-list-of-orders-with-product-name.png)
 
 {{end}}