feat: explorer part 2

README.md

@@ -169,3 +169,4 @@ Fork this repository and ensure you're working on the `main` branch:
 - Add Dune dashboard
 - Add a Development workflow
 - Update context7 when doc will be deployed
+- Check theGraph Images with design Team

src/components/CardGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="my-8 grid grid-cols-1 gap-6 md:grid-cols-2">
+  <div class="my-4 grid grid-cols-1 gap-4 md:grid-cols-2">
     <slot />
   </div>
 </template>

src/components/FeatureCard.vue

@@ -1,25 +1,37 @@
 <template>
   <a
     :href="linkUrl"
-    class="block h-full text-inherit no-underline! visited:no-underline! hover:no-underline! active:no-underline!"
+    class="block h-full min-h-40 text-inherit no-underline! visited:no-underline! hover:no-underline! active:no-underline!"
   >
     <div
-      class="bg-soft-bg border-border flex h-full cursor-pointer flex-col rounded-lg border p-6 transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:shadow-md"
+      class="bg-soft-bg border-border flex h-full cursor-pointer flex-col rounded-lg border p-3 transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:shadow-md"
     >
-      <div class="text-3xl">{{ icon }}</div>
-      <h3 class="text-text1 m-0 mb-2">{{ title }}</h3>
-      <p class="text-text2 m-0 flex-grow leading-relaxed">{{ description }}</p>
+      <div class="flex items-center gap-2">
+        <Icon :icon="icon" class="text-xl" :class="iconColor" />
+        <h3 class="text-text1 !mt-0 !mb-0 text-base font-semibold">
+          {{ title }}
+        </h3>
+      </div>
+      <p class="text-text2 !mt-2 flex-grow text-sm leading-relaxed">
+        {{ description }}
+      </p>
     </div>
   </a>
 </template>
 
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
 interface Props {
   icon: string;
   title: string;
   description: string;
   linkUrl: string;
+  iconColor?: string;
 }
 
-defineProps<Props>();
+withDefaults(defineProps<Props>(), {
+  iconColor: 'text-blue-500',
+  linkUrl: '',
+});
 </script>

src/components/ImageViewer.vue

@@ -19,6 +19,7 @@
     </a>
     <p v-if="caption" class="mt-4 font-medium">
       <Button
+        as="a"
         :href="linkUrl"
         target="_blank"
         rel="noreferrer"

src/components/ProjectCard.vue

@@ -5,9 +5,15 @@
     <!-- Icon -->
     <div class="flex items-start gap-2">
       <div
-        class="border-border bg-bg flex h-14 w-14 items-center justify-center rounded-xl border"
+        class="border-border bg-bg flex size-10 flex-none items-center justify-center overflow-hidden rounded-xl border p-2"
       >
-        <Icon :icon="icon" height="24" />
+        <img
+          v-if="iconImage"
+          :src="iconImage"
+          :alt="title"
+          class="size-8 object-contain"
+        />
+        <Icon v-else :icon="icon" height="24" />
       </div>
       <div>
         <h3 class="mt-0! mb-1! text-lg font-semibold">{{ title }}</h3>
@@ -78,7 +84,8 @@ import Button from './ui/Button.vue';
 interface Props {
   title: string;
   description: string;
-  icon: string;
+  icon?: string;
+  iconImage?: string;
   status: 'available' | 'coming-soon' | 'interactive';
   statusLabel: string;
   buttonLabel: string;
@@ -91,7 +98,10 @@ interface Props {
   githubLabel?: string;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  icon: '',
+  iconImage: '',
+});
 
 const statusIcon = computed(() => {
   switch (props.status) {

src/overview/tooling-and-explorers/blockchain-explorer.md

@@ -15,7 +15,7 @@ publicly auditable.
 
 <div class="grid grid-cols-1 gap-8 my-8">
   <UseCaseCard
-    title="🔷 Arbitrum Mainnet"
+    title="🔷 Arbitrum One"
     description="Production network for mainnet operations with verified smart contracts and comprehensive transaction tracking."
     image-url="/assets/tooling-&-explorers/blockchain-explorer/arbitrum-explorer.png"
     image-alt="Arbitrum Explorer"
@@ -26,7 +26,7 @@ publicly auditable.
   />
 
   <UseCaseCard
-    title="⚡ Bellecour Network"
+    title="⚡ Bellecour"
     description="iExec's dedicated sidechain for optimized performance with native integration and enhanced protocol analytics."
     image-url="/assets/tooling-&-explorers/blockchain-explorer/bellecour-explorer.png"
     image-alt="Bellecour Explorer"

src/overview/tooling-and-explorers/builder-dashboard.md

@@ -0,0 +1,165 @@
+---
+title: Builder Dashboard
+description:
+  Monitor iExec applications with the powerful Builder Dashboard. Manage your
+  iApps and your manage vouchers
+---
+
+# 🏗️ Builder Dashboard
+
+The **Builder Dashboard** is your comprehensive development hub for iExec
+protocol. Monitor voucher usage, track your remaining compute capacity for TEE
+iApp runs, and view execution history—all in one place. This powerful interface
+streamlines your development workflow and provides deep insights on your
+confidential iApps deployed on the protocol.
+
+<ImageViewer
+  image-url-dark="/assets/tooling-&-explorers/builder-dashboard/builder-dashboard.png"
+  image-alt="Builder Dashboard Overview"
+  link-url="https://builder.iex.ec/"
+  caption="🔗 Access the Builder Dashboard"
+/>
+
+## 🎯 Key Features
+
+<CardGrid>
+  <FeatureCard
+    icon="mdi:chart-line"
+    title="Voucher consumption & Task History"
+    description="View complete task execution history with status, pricing, deals, and comprehensive voucher consumption tracking"
+    icon-color="text-blue-500"
+  />
+
+  <FeatureCard
+    icon="mdi:apps"
+    title="Confidential iApp Monitoring"
+    description="Monitor deployed iApps, track execution statistics, unique users"
+    icon-color="text-green-500"
+  />
+</CardGrid>
+
+## 📊 Voucher Consumption & Task History {#voucher-history}
+
+The first screen of the Builder Dashboard provides comprehensive voucher
+monitoring with detailed task execution history and real-time balance tracking.
+
+<ImageViewer
+  image-url-dark="/assets/tooling-&-explorers/builder-dashboard/build-voucher-view.png"
+  image-alt="Voucher Consumption Dashboard"
+  link-url="https://builder.iex.ec/vouchers"
+  caption="🔗 Access Voucher Dashboard"
+/>
+
+### Current Voucher Balance & Management
+
+<div class="bg-gradient-to-r from-green-400/10 to-green-400/5 rounded-[6px] p-6 border-l-4 border-green-700 my-6">
+  <h4 class="!mt-0 !mb-2">💰 Voucher Balance Overview</h4>
+  <ul class="!mb-0">
+    <li><strong>Current Balance</strong>: View your remaining voucher credits and compute capacity</li>
+    <li><strong>Claim New Vouchers</strong>: Request additional vouchers directly from the dashboard</li>
+    <li><strong>Expiration Alerts</strong>: Get notified before vouchers expire</li>
+  </ul>
+</div>
+
+### Task Execution History
+
+<CardGrid>
+  <FeatureCard
+    icon="mdi:history"
+    title="Complete Task History"
+    description="Chronological list of all executed tasks with detailed execution information"
+    icon-color="text-blue-500"
+  />
+
+  <FeatureCard
+    icon="mdi:chart-line"
+    title="Task Status Tracking"
+    description="Real-time status updates: Pending, Running, Completed, Failed"
+    icon-color="text-green-500"
+  />
+
+  <FeatureCard
+    icon="mdi:currency-usd"
+    title="Pricing & Cost Analysis"
+    description="Detailed cost breakdown per task and cumulative spending analytics"
+    icon-color="text-orange-500"
+  />
+
+  <FeatureCard
+    icon="mdi:handshake"
+    title="Deal Association"
+    description="View which deal each task belongs to and track deal performance"
+    icon-color="text-purple-500"
+  />
+</CardGrid>
+
+## 📱 Confidential iApp Management {#iapp-management}
+
+The second screen provides comprehensive management and analytics for your
+deployed confidential iApps with detailed statistics and user insights.
+
+<ImageViewer
+  image-url-dark="/assets/tooling-&-explorers/builder-dashboard/my-iapps-view.png"
+  image-alt="My Confidential iApps Dashboard"
+  link-url="https://builder.iex.ec/iapps"
+  caption="🔗 Manage Your iApps"
+/>
+
+### My Confidential iApps Overview
+
+<div class="bg-gradient-to-r from-blue-400/10 to-blue-400/5 rounded-[6px] p-6 border-l-4 border-blue-700 my-6">
+  <h4 class="!mt-0 !mb-2">📱 iApp Portfolio Metrics</h4>
+  <ul class="!mb-0">
+    <li><strong>Deployed Applications</strong>: Complete list of all your confidential iApps currently deployed</li>
+    <li><strong>Execution Statistics</strong>: See exactly how many times each iApp has been executed</li>
+    <li><strong>Unique Users</strong>: Track total unique users who have run each application</li>
+    <li><strong>Revenue Insights</strong>: Track earnings and profitability per application</li>
+  </ul>
+</div>
+
+### Application Statistics Dashboard
+
+<CardGrid>
+  <FeatureCard
+    icon="mdi:apps"
+    title="Deployed iApps"
+    description="View all your confidential applications with deployment status, versions, and metadata"
+    icon-color="text-blue-500"
+  />
+
+  <FeatureCard
+    icon="mdi:counter"
+    title="Execution Count"
+    description="Track how many times each iApp has been executed since deployment"
+    icon-color="text-green-500"
+  />
+
+  <FeatureCard
+    icon="mdi:account-group"
+    title="Unique Users"
+    description="Monitor total unique users who have interacted with each application"
+    icon-color="text-orange-500"
+  />
+
+  <FeatureCard
+    icon="mdi:trending-up"
+    title="Usage Trends"
+    description="Analyze usage patterns, peak times, and growth trends for each iApp"
+    icon-color="text-purple-500"
+  />
+</CardGrid>
+
+::: tip 💡 Dev Tip
+
+Use the **Builder Dashboard** to monitor your iExec applications and optimize
+your development workflow. The comprehensive analytics help you make data-driven
+decisions for better application performance.
+
+:::
+
+<script setup>
+import { Icon } from '@iconify/vue';
+import ImageViewer from '../../components/ImageViewer.vue';
+import FeatureCard from '../../components/FeatureCard.vue';
+import CardGrid from '../../components/CardGrid.vue';
+</script>

src/overview/tooling-and-explorers/iexec-explorer.md

@@ -22,34 +22,40 @@ explore apps and protectedData—all in one powerful dashboard.
 
 <CardGrid>
   <FeatureCard
-    icon="💼"
+    icon="mdi:briefcase"
     title="Deals & Tasks"
     description="Monitor deal orchestration and task execution with their asset relationships (app + dataset + workerpool) from initialization to result download, including pricing"
     link-url="#deals-tasks"
+    icon-color="text-blue-500"
   />
 
   <FeatureCard
-    icon="📱"
+    icon="mdi:apps"
     title="iApps Listing"
     description="Explore the catalog of trusted execution environment (TEE) applications, including their use cases and ownership details"
     link-url="#iapps-listing"
+    icon-color="text-green-500"
   />
 
   <FeatureCard
-    icon="🗄️"
+    icon="mdi:database"
     title="Protected Data Listing"
     description="Discover encrypted datasets with their asset types, including usage and ownership details"
     link-url="#protected-data-listing"
+    icon-color="text-orange-500"
   />
 
 <FeatureCard
-    icon="⚡"
+    icon="mdi:lightning-bolt"
     title="Workerpools"
     description="Explore the decentralized computing infrastructure, including usage and ownership details"
     link-url="#workerpools"
-  /> </CardGrid>
+    icon-color="text-purple-500"
+  />
+
+</CardGrid>
 
-<div class="bg-gradient-to-r from-purple-400/10 to-purple-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
+<div class="bg-gradient-to-r from-purple-400/10 to-purple-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 my-6">
   <h4 class="!mt-0 !mb-2">🏗️ Understanding iExec Architecture</h4>
   <p class="!mb-2"><strong>Deals</strong> are the fundamental orchestration unit - each deal coordinates a set of different stakeholders that share resources and execution parameters to execute a confidential computation task.</p>
   <p class="!mb-0">Each <strong>Deal</strong> brings together:</p>