mountain-ui 1.0.178 → 1.0.179

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "mountain-ui",
 	"private": false,
-	"version": "1.0.178",
+	"version": "1.0.179",
 	"description": "A comprehensive UI component library for ERP systems with field types, entities, and registry management built with Svelte",
 	"type": "module",
 	"module": "index.js",

package/src/lib/registry/EntryTabTypesRegistry/EntryTabTypes/Email/Button.svelte

@@ -0,0 +1,21 @@
+<script>
+	import { projectRegistry } from "$lib/registry/projectRegistry/registry.svelte";
+	import { Tabs } from "hamzus-ui";
+
+    let {
+        startUrl,
+        label,
+        slug,
+    } = $props()
+</script>
+
+<Tabs.Trigger
+    value="{startUrl}/{slug}"
+    href="{startUrl}/{slug}"
+>
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path opacity="0.4" d="M17 20.5H7C4 20.5 2 19 2 15.5V8.5C2 5 4 3.5 7 3.5H17C20 3.5 22 5 22 8.5V15.5C22 19 20 20.5 17 20.5Z" fill="#292D32"/>
+    <path d="M12.0008 12.87C11.1608 12.87 10.3108 12.61 9.66076 12.08L6.53075 9.57997C6.21075 9.31997 6.15076 8.84997 6.41076 8.52997C6.67076 8.20997 7.14076 8.14997 7.46076 8.40997L10.5908 10.91C11.3508 11.52 12.6407 11.52 13.4007 10.91L16.5308 8.40997C16.8508 8.14997 17.3308 8.19997 17.5808 8.52997C17.8408 8.84997 17.7908 9.32997 17.4608 9.57997L14.3308 12.08C13.6908 12.61 12.8408 12.87 12.0008 12.87Z" fill="#292D32"/>
+    </svg>
+    <h5>{label}</h5>
+</Tabs.Trigger>

package/src/lib/registry/EntryTabTypesRegistry/EntryTabTypes/Email/Page.svelte

@@ -0,0 +1,192 @@
+<script>
+	import {
+		Button,
+		config,
+		Dialog,
+		DropdownMenu,
+		Form,
+		getCookie,
+		IconButton,
+		Input
+	} from 'hamzus-ui';
+	import { page } from '$app/stores';
+	import EmailViewer from '../../routes/[lang]/[project_slug]/[origin]/layout/EmailViewer.svelte';
+	import { onMount } from 'svelte';
+	import { afterNavigate } from '$app/navigation';
+	import { getEmails } from '@utils/Emails/emails';
+	import Emails from '@utils/Integration/EmailSmtpImap/components/Emails.svelte';
+
+	let { entity_slug, entry_id, entry_tab_slug } = $props();
+
+	let actions = null;
+
+	let targetActions = null;
+
+	let forceClose = false;
+
+	let emails = $state([]);
+
+	let isOpen = $derived(targetActions !== null);
+
+	$effect(() => {
+		if (isOpen) {
+			emails = [''];
+		}
+	});
+
+	onMount(getData);
+
+	afterNavigate(getData);
+
+	async function getData() {
+		actions = null;
+
+		actions = await getEmails();
+	}
+</script>
+
+<Dialog bind:isOpen>
+	<div style="display:flex;row-gap:var(--pad-m);flex-direction:column;">
+		<h3>Envoyer l'email</h3>
+		{#each emails as email, index}
+			<Input name="email[]" value={email} onChange={(val)=>{emails[index] = val;emails = [...emails]}} placeholder="exemple{index + 1}@exemple.com">
+				<div slot="endContent" class="btn">
+					{#if index > 0}
+						<IconButton
+							variant="destructive"
+							onClick={() => {
+								emails.splice(index, 1);
+								emails = [...emails];
+							}}
+							><svg
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									d="M20.9997 6.72998C20.9797 6.72998 20.9497 6.72998 20.9197 6.72998C15.6297 6.19998 10.3497 5.99998 5.11967 6.52998L3.07967 6.72998C2.65967 6.76998 2.28967 6.46998 2.24967 6.04998C2.20967 5.62998 2.50967 5.26998 2.91967 5.22998L4.95967 5.02998C10.2797 4.48998 15.6697 4.69998 21.0697 5.22998C21.4797 5.26998 21.7797 5.63998 21.7397 6.04998C21.7097 6.43998 21.3797 6.72998 20.9997 6.72998Z"
+									fill="#292D32"
+								/>
+								<path
+									d="M8.50074 5.72C8.46074 5.72 8.42074 5.72 8.37074 5.71C7.97074 5.64 7.69074 5.25 7.76074 4.85L7.98074 3.54C8.14074 2.58 8.36074 1.25 10.6907 1.25H13.3107C15.6507 1.25 15.8707 2.63 16.0207 3.55L16.2407 4.85C16.3107 5.26 16.0307 5.65 15.6307 5.71C15.2207 5.78 14.8307 5.5 14.7707 5.1L14.5507 3.8C14.4107 2.93 14.3807 2.76 13.3207 2.76H10.7007C9.64074 2.76 9.62074 2.9 9.47074 3.79L9.24074 5.09C9.18074 5.46 8.86074 5.72 8.50074 5.72Z"
+									fill="#292D32"
+								/>
+								<path
+									d="M15.2104 22.7501H8.79039C5.30039 22.7501 5.16039 20.8201 5.05039 19.2601L4.40039 9.19007C4.37039 8.78007 4.69039 8.42008 5.10039 8.39008C5.52039 8.37008 5.87039 8.68008 5.90039 9.09008L6.55039 19.1601C6.66039 20.6801 6.70039 21.2501 8.79039 21.2501H15.2104C17.3104 21.2501 17.3504 20.6801 17.4504 19.1601L18.1004 9.09008C18.1304 8.68008 18.4904 8.37008 18.9004 8.39008C19.3104 8.42008 19.6304 8.77007 19.6004 9.19007L18.9504 19.2601C18.8404 20.8201 18.7004 22.7501 15.2104 22.7501Z"
+									fill="#292D32"
+								/>
+								<path
+									d="M13.6601 17.25H10.3301C9.92008 17.25 9.58008 16.91 9.58008 16.5C9.58008 16.09 9.92008 15.75 10.3301 15.75H13.6601C14.0701 15.75 14.4101 16.09 14.4101 16.5C14.4101 16.91 14.0701 17.25 13.6601 17.25Z"
+									fill="#292D32"
+								/>
+								<path
+									d="M14.5 13.25H9.5C9.09 13.25 8.75 12.91 8.75 12.5C8.75 12.09 9.09 11.75 9.5 11.75H14.5C14.91 11.75 15.25 12.09 15.25 12.5C15.25 12.91 14.91 13.25 14.5 13.25Z"
+									fill="#292D32"
+								/>
+							</svg>
+						</IconButton>
+					{/if}
+				</div>
+			</Input>
+		{/each}
+		<div class="add">
+			<IconButton
+				variant="ghost"
+				onClick={() => {
+					emails.push('');
+					emails = [...emails];
+				}}
+			>
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M18 12.75H6C5.59 12.75 5.25 12.41 5.25 12C5.25 11.59 5.59 11.25 6 11.25H18C18.41 11.25 18.75 11.59 18.75 12C18.75 12.41 18.41 12.75 18 12.75Z"
+						fill="#292D32"
+					/>
+					<path
+						d="M12 18.75C11.59 18.75 11.25 18.41 11.25 18V6C11.25 5.59 11.59 5.25 12 5.25C12.41 5.25 12.75 5.59 12.75 6V18C12.75 18.41 12.41 18.75 12 18.75Z"
+						fill="#292D32"
+					/>
+				</svg>
+			</IconButton>
+		</div>
+		<Button
+			onClick={() => {
+				targetActions.actionFunction(
+					$page.params.interface_slug.split('-')[1],
+					$page.params.id,
+					emails
+				);
+			}}>envoyer</Button
+		>
+	</div>
+</Dialog>
+<div class="container">
+	<div class="title">
+		<h3>Email</h3>
+		{#if actions}
+			<DropdownMenu.Root direction="bottom" bind:forceClose>
+				<DropdownMenu.Trigger slot="trigger">
+					<IconButton
+						><svg
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M14.2209 21.6301C13.0409 21.6301 11.3709 20.8001 10.0509 16.8301L9.33086 14.6701L7.17086 13.9501C3.21086 12.6301 2.38086 10.9601 2.38086 9.78007C2.38086 8.61007 3.21086 6.93007 7.17086 5.60007L15.6609 2.77007C17.7809 2.06007 19.5509 2.27007 20.6409 3.35007C21.7309 4.43007 21.9409 6.21007 21.2309 8.33007L18.4009 16.8201C17.0709 20.8001 15.4009 21.6301 14.2209 21.6301ZM7.64086 7.03007C4.86086 7.96007 3.87086 9.06007 3.87086 9.78007C3.87086 10.5001 4.86086 11.6001 7.64086 12.5201L10.1609 13.3601C10.3809 13.4301 10.5609 13.6101 10.6309 13.8301L11.4709 16.3501C12.3909 19.1301 13.5009 20.1201 14.2209 20.1201C14.9409 20.1201 16.0409 19.1301 16.9709 16.3501L19.8009 7.86007C20.3109 6.32007 20.2209 5.06007 19.5709 4.41007C18.9209 3.76007 17.6609 3.68007 16.1309 4.19007L7.64086 7.03007Z"
+								fill="#292D32"
+							/>
+							<path
+								d="M10.1108 14.4C9.92078 14.4 9.73078 14.33 9.58078 14.18C9.29078 13.89 9.29078 13.41 9.58078 13.12L13.1608 9.53C13.4508 9.24 13.9308 9.24 14.2208 9.53C14.5108 9.82 14.5108 10.3 14.2208 10.59L10.6408 14.18C10.5008 14.33 10.3008 14.4 10.1108 14.4Z"
+								fill="#292D32"
+							/>
+						</svg>
+					</IconButton>
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content slot="content" width="250px">
+					<Emails
+						{actions}
+						onClick={(action) => {
+							targetActions = action;
+							forceClose = true;
+						}}
+					></Emails>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		{/if}
+	</div>
+	<EmailViewer entryId={$page.params.id} emailLinkId={$page.params.interface_slug.split('-')[1]}
+	></EmailViewer>
+</div>
+
+<style>
+	.container {
+		display: flex;
+		flex-direction: column;
+		height: calc(100vh - 99px);
+		width: 100%;
+		padding: var(--pad-m);
+	}
+	.title {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--pad-m);
+	}
+	.add {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: right;
+	}
+</style>

package/src/lib/registry/EntryTabTypesRegistry/EntryTabTypes/Email/index.js

@@ -0,0 +1,38 @@
+import { createEntryTab } from '$lib/registry/EntryTabsRegistry/createEntryTab';
+import { sendRequest } from 'hamzus-ui';
+
+import Button from './Button.svelte'
+import Page from './Page.svelte'
+import { createEntryTabType } from '../../createEntryTabType';
+
+export default createEntryTabType({
+    name: "Onglet d'email",
+    type: "email",
+    onLoad: async (entitySlug) => {
+        // recuperer les liens pdfs de la structure a partir de son slug
+        const request = await sendRequest({
+            path: '/get-all-email-links-from-slug',
+            data: {
+                entitySlug: entitySlug
+            }
+        })
+
+        if (request.statusType === "error") return []
+
+        let tabs = []
+
+        for (const link of request.data) {
+            tabs.push(createEntryTab({
+                label: link.name,
+                slug: "email-" + link.id,
+                type:"email",
+            }))
+        }
+
+        return tabs
+    },
+    components: {
+        button: Button,
+        page: Page,
+    },
+});

package/src/lib/registry/EntryTabTypesRegistry/EntryTabTypes/Link/Button.svelte

@@ -0,0 +1,22 @@
+<script>
+	import { projectRegistry } from "$lib/registry/projectRegistry/registry.svelte";
+	import { Tabs } from "hamzus-ui";
+
+    let {
+        startUrl,
+        label,
+        slug,
+    } = $props()
+</script>
+
+<Tabs.Trigger
+    value="{startUrl}/{slug}"
+    href="{startUrl}/{slug}"
+>
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.4" d="M16.1898 2H7.81978C4.17978 2 2.00977 4.17 2.00977 7.81V16.18C2.00977 19.82 4.17978 21.99 7.81978 21.99H16.1898C19.8298 21.99 21.9998 19.82 21.9998 16.18V7.81C21.9998 4.17 19.8298 2 16.1898 2Z" fill="#292D32"/>
+<path d="M8.1796 16.7701C8.1596 16.7701 8.12961 16.7701 8.10961 16.7701C7.13961 16.6801 6.22961 16.2301 5.54961 15.5101C3.94961 13.8301 3.94961 11.1001 5.54961 9.4201L7.73961 7.12009C8.51961 6.30009 9.56961 5.84009 10.6896 5.84009C11.8096 5.84009 12.8596 6.29009 13.6396 7.12009C15.2396 8.80009 15.2396 11.5301 13.6396 13.2101L12.5496 14.3601C12.2596 14.6601 11.7896 14.6701 11.4896 14.3901C11.1896 14.1001 11.1796 13.6301 11.4596 13.3301L12.5496 12.1801C13.6096 11.0701 13.6096 9.2601 12.5496 8.1601C11.5596 7.1201 9.81961 7.1201 8.81961 8.1601L6.62961 10.4601C5.56961 11.5701 5.56961 13.3801 6.62961 14.4801C7.05961 14.9401 7.63961 15.2201 8.24961 15.2801C8.65961 15.3201 8.9596 15.6901 8.9196 16.1001C8.8896 16.4801 8.5596 16.7701 8.1796 16.7701Z" fill="#292D32"/>
+<path d="M13.3102 18.1601C12.1902 18.1601 11.1402 17.7101 10.3602 16.8801C8.76016 15.2001 8.76016 12.4701 10.3602 10.7902L11.4502 9.64016C11.7402 9.34016 12.2102 9.33013 12.5102 9.61013C12.8102 9.90013 12.8201 10.3702 12.5401 10.6702L11.4502 11.8201C10.3902 12.9301 10.3902 14.7401 11.4502 15.8401C12.4402 16.8801 14.1801 16.8901 15.1801 15.8401L17.3702 13.5402C18.4302 12.4302 18.4302 10.6201 17.3702 9.52013C16.9402 9.06013 16.3602 8.78014 15.7502 8.72014C15.3402 8.68014 15.0402 8.31014 15.0802 7.90014C15.1202 7.49014 15.4801 7.18015 15.9001 7.23015C16.8701 7.33015 17.7802 7.77013 18.4602 8.49013C20.0602 10.1701 20.0602 12.9001 18.4602 14.5801L16.2702 16.8801C15.4802 17.7101 14.4302 18.1601 13.3102 18.1601Z" fill="#292D32"/>
+</svg>
+    <h5>{label}</h5>
+</Tabs.Trigger>

package/src/lib/registry/EntryTabTypesRegistry/EntryTabTypes/Link/Page.svelte

@@ -0,0 +1,57 @@
+<script>
+	import { page } from '$app/stores';
+	import { RotativeLoader, sendRequest } from 'hamzus-ui';
+	import { onMount } from 'svelte';
+	import StructureTableContainer from '@utils/viewConfigurator/StructureTable/StructureTableContainer.svelte';
+	import { structures } from '../../routes/[lang]/[project_slug]/[origin]/structure';
+	import { structure } from '../../routes/[lang]/[project_slug]/[origin]/[structure_slug]/structure';
+
+	let targetEntity = null;
+
+    let wheres = {}
+
+	onMount(getData);
+
+	async function getData() {
+		targetEntity = null;
+        
+		for (const entity of $structures) {
+            if (entity.slug === $page.params.interface_slug) {
+                
+                // parourir ses champs pour etablir le filtre
+                for (const field of entity.fields) {
+                    if (field.type === "link") {
+                        if (field.props.linkId == $structure.id) {
+                            wheres[field.normalized_name] = $page.params.id
+                        }
+                        
+                    }
+                }
+
+                targetEntity = entity;
+                return;
+            }
+        }
+
+        
+	}
+</script>
+
+{#if targetEntity !== null}
+	<StructureTableContainer invisibleWheres={wheres} slug={$page.params.interface_slug} structureId={targetEntity.id} columns={targetEntity.fields}
+	></StructureTableContainer>
+{:else}
+	<div class="loader">
+		<RotativeLoader></RotativeLoader>
+	</div>
+{/if}
+
+<style>
+	.loader {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 60px var(--pad-m);
+	}
+</style>

package/src/lib/registry/EntryTabTypesRegistry/EntryTabTypes/Link/index.js

@@ -0,0 +1,60 @@
+import { createEntryTab } from '$lib/registry/EntryTabsRegistry/createEntryTab';
+import { sendRequest } from 'hamzus-ui';
+
+import Button from './Button.svelte'
+import Page from './Page.svelte'
+import { createEntryTabType } from '../../createEntryTabType';
+import { entityRegistry } from '$lib/registry/entityRegistry/registry.svelte';
+import { get } from 'svelte/store';
+
+export default createEntryTabType({
+    name: "Onglet de liens",
+    type: "link",
+    onLoad: async (entitySlug) => {
+        const structures = get(entityRegistry.getAll())
+
+        let structureId = null
+
+        for (const structure of structures) {
+            if (structure.slug !== entitySlug) continue
+
+            structureId = structure.id
+            break
+        }
+
+        let tabs = []
+
+        // parcourir toute les colonnes des autres structure et verifié si il y a un type link
+        for (const structure of structures) {
+
+            if (structure.id === structureId) continue;
+
+            const structureName = structure.plural_name
+            const structureSlug = structure.slug
+
+            for (const column of structure.fields) {
+
+                if (column.type !== "link") continue;
+                if (column.props.linkId != structureId) continue
+
+                // récuperer le nom de la tabs
+                for (const structure of structures) {
+
+                    if (structure.id !== column.props.linkId) continue;
+
+                    tabs.push(createEntryTab({
+                        label: structureName,
+                        slug: structureSlug,
+                        type: "link",
+                    }))
+                }
+            }
+        }
+
+        return tabs
+    },
+    components: {
+        button: Button,
+        page: Page,
+    },
+});

package/src/lib/registry/EntryTabTypesRegistry/EntryTabTypes/Pdf/Button.svelte

@@ -0,0 +1,23 @@
+<script>
+	import { projectRegistry } from "$lib/registry/projectRegistry/registry.svelte";
+	import { Tabs } from "hamzus-ui";
+
+    let {
+        startUrl,
+        label,
+        slug,
+    } = $props()
+</script>
+
+<Tabs.Trigger
+    value="{startUrl}/{slug}"
+    href="{startUrl}/{slug}"
+>
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.4" d="M20.5 10.19H17.61C15.24 10.19 13.31 8.26 13.31 5.89V3C13.31 2.45 12.86 2 12.31 2H8.07C4.99 2 2.5 4 2.5 7.57V16.43C2.5 20 4.99 22 8.07 22H15.93C19.01 22 21.5 20 21.5 16.43V11.19C21.5 10.64 21.05 10.19 20.5 10.19Z" fill="#292D32"/>
+<path d="M15.7997 2.20999C15.3897 1.79999 14.6797 2.07999 14.6797 2.64999V6.13999C14.6797 7.59999 15.9197 8.80999 17.4297 8.80999C18.3797 8.81999 19.6997 8.81999 20.8297 8.81999C21.3997 8.81999 21.6997 8.14999 21.2997 7.74999C19.8597 6.29999 17.2797 3.68999 15.7997 2.20999Z" fill="#292D32"/>
+<path d="M13.5 13.75H7.5C7.09 13.75 6.75 13.41 6.75 13C6.75 12.59 7.09 12.25 7.5 12.25H13.5C13.91 12.25 14.25 12.59 14.25 13C14.25 13.41 13.91 13.75 13.5 13.75Z" fill="#292D32"/>
+<path d="M11.5 17.75H7.5C7.09 17.75 6.75 17.41 6.75 17C6.75 16.59 7.09 16.25 7.5 16.25H11.5C11.91 16.25 12.25 16.59 12.25 17C12.25 17.41 11.91 17.75 11.5 17.75Z" fill="#292D32"/>
+</svg>
+    <h5>{label}</h5>
+</Tabs.Trigger>

package/src/lib/registry/EntryTabTypesRegistry/EntryTabTypes/Pdf/Page.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { config, getCookie } from "hamzus-ui";
+    import PdfViewer from "../../routes/[lang]/[project_slug]/[origin]/layout/PdfViewer.svelte";
+	import { page } from "$app/stores";
+    
+    let {
+        entity_slug,
+        entry_id,
+        entry_tab_slug,
+    } = $props()
+
+</script>
+
+<PdfViewer url="{config.url}/view-pdf-link?__project_normalized_name={$page.params.project_slug}&entitySlug={entity_slug}&entryId={entry_id}&pdfLinkId={entry_tab_slug.split("-")[1]}"></PdfViewer>

package/src/lib/registry/EntryTabTypesRegistry/EntryTabTypes/Pdf/index.js

@@ -0,0 +1,38 @@
+import { createEntryTab } from '$lib/registry/EntryTabsRegistry/createEntryTab';
+import { sendRequest } from 'hamzus-ui';
+
+import Button from './Button.svelte'
+import Page from './Page.svelte'
+import { createEntryTabType } from '../../createEntryTabType';
+
+export default createEntryTabType({
+    name: "Onglet de pdf",
+    type: "pdf",
+    onLoad: async (entitySlug) => {
+        // recuperer les liens pdfs de la structure a partir de son slug
+        const request = await sendRequest({
+            path: '/get-all-pdf-links-from-entity-slug',
+            data: {
+                entitySlug: entitySlug
+            }
+        })
+
+        if (request.statusType === "error") return []
+
+        let tabs = []
+
+        for (const link of request.data) {
+            tabs.push(createEntryTab({
+                label: link.name,
+                slug: "pdf-" + link.id,
+                type:"pdf",
+            }))
+        }
+
+        return tabs
+    },
+    components: {
+        button: Button,
+        page: Page,
+    },
+});

package/src/lib/registry/EntryTabTypesRegistry/components/EntryTabTypeButton.svelte

@@ -0,0 +1,12 @@
+<script>
+	import { entryTabTypeRegistry } from "../registry.svelte";
+
+    let {
+        type,
+        ...props
+    } = $props()
+
+    const entryTabType = $derived(entryTabTypeRegistry.get(type))
+</script>
+
+<svelte:component this={entryTabType.components.button} {...props}></svelte:component>

package/src/lib/registry/EntryTabTypesRegistry/createEntryTabType.js

@@ -0,0 +1,17 @@
+export function createEntryTabType(config = {}) {
+	const entryTabType = {
+		type:"",
+		name:"",
+		onLoad:(entitySlug)=>{},
+        components : {
+            button:null,
+            page:null,
+        }
+	};
+
+	Object.assign(entryTabType, config);
+
+	// entryTabType.get = () => "test";
+
+	return entryTabType;
+}

package/src/lib/registry/EntryTabTypesRegistry/registerDefaultEntryTabTypes.js

@@ -0,0 +1,17 @@
+import { entryTabTypeRegistry } from './registry.svelte';
+import Email from './EntryTabTypes/Email';
+import Pdf from './EntryTabTypes/Pdf';
+import Link from './EntryTabTypes/Link';
+
+
+let isLoaded = false
+
+export function registerDefaultEntryTabTypes() {
+    if (isLoaded) return
+    
+	entryTabTypeRegistry.register(Pdf)
+	entryTabTypeRegistry.register(Email)
+	entryTabTypeRegistry.register(Link)
+    
+    isLoaded = true
+}

package/src/lib/registry/EntryTabTypesRegistry/registry.svelte.js

@@ -0,0 +1,44 @@
+import { writable, derived, get } from 'svelte/store';
+
+function createEntryTabTypesRegistry() {
+	const store = writable({});
+
+	const all = derived(store, ($entryTabTypes) => Object.values($entryTabTypes));
+
+	return {
+		subscribe: store.subscribe,
+
+		register(entryTabType) {
+			store.update((entryTabTypes) => ({
+				...entryTabTypes,
+				[entryTabType.type]: entryTabType
+			}));
+		},
+
+		unregister(type) {
+			store.update((entryTabTypes) => {
+				const copy = { ...entryTabTypes };
+
+				delete copy[type];
+
+				return copy;
+			});
+		},
+
+		get(type) {
+			return get(store)[type];
+		},
+
+		select(type) {
+			return derived(store, ($entryTabTypes) => $entryTabTypes[type]);
+		},
+
+		
+
+		getAll() {
+			return all;
+		}
+	};
+}
+
+export const entryTabTypeRegistry = createEntryTabTypesRegistry();

package/src/lib/registry/EntryTabsRegistry/components/ViewEntriesTypeButton.svelte

@@ -0,0 +1,28 @@
+<script>
+	import { Button } from 'hamzus-ui';
+	import { viewEntriesTypeRegistry } from '../registry.svelte';
+	import ViewEntriesTypeIcon from './ViewEntriesTypeIcon.svelte';
+
+	let { type, variant = 'ghost', ...props } = $props();
+
+	const viewType = viewEntriesTypeRegistry.get(type);
+</script>
+
+{#if viewType}
+	<Button {...props} {variant} style="padding:var(--pad-s) var(--pad-l) var(--pad-s) var(--pad-m);width:100%;">
+        <div class="ico">
+            <ViewEntriesTypeIcon {type}></ViewEntriesTypeIcon>
+        </div>
+		<h5>{viewType.name}</h5>
+	</Button>
+{/if}
+
+<style>
+    .ico {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 16px;
+		height: 16px;
+	}
+</style>

package/src/lib/registry/EntryTabsRegistry/components/ViewEntriesTypeComponent.svelte

@@ -0,0 +1,30 @@
+<script>
+	import { Button, RotativeLoader } from 'hamzus-ui';
+	import { viewEntriesTypeRegistry } from '../registry.svelte';
+
+	let { type, ...props } = $props();
+
+	const viewType = $derived(viewEntriesTypeRegistry.get(type));
+
+    const ViewTypeComponent = $derived(viewType?.components?.component ?? null)
+    
+</script>
+
+{#if viewType}
+	<ViewTypeComponent {...props}><slot name="actions" slot="actions"/></ViewTypeComponent>
+{:else}
+<div class="loader">
+    <RotativeLoader></RotativeLoader>
+</div>
+{/if}
+
+<style>
+
+    .loader {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 60px var(--pad-m);
+    }
+</style>
+

package/src/lib/registry/EntryTabsRegistry/components/ViewEntriesTypeDropdown.svelte

@@ -0,0 +1,32 @@
+<script>
+	import { Button, DropdownMenu } from 'hamzus-ui';
+	import { viewEntriesTypeRegistry } from '../registry.svelte';
+	import ViewTypeButton from './ViewEntriesTypeButton.svelte';
+
+	let { onChange = (type) => {}, type = null } = $props();
+
+	const viewTypes = viewEntriesTypeRegistry.getAll();
+</script>
+
+<DropdownMenu.Root direction="bottom">
+	<DropdownMenu.Trigger slot="trigger">
+		{#if type !== null}
+			<ViewTypeButton variant="secondary" {type}></ViewTypeButton>
+		{:else}
+			<Button variant="secondary" style="width:100%">
+				<h5>selectionner un type de vue</h5>
+			</Button>
+		{/if}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content slot="content" width="250px">
+		{#each $viewTypes as viewType}
+			<ViewTypeButton
+				variant={viewType.type === type ? 'secondary' : 'ghost'}
+				onClick={() => {
+					onChange(viewType.type);
+				}}
+				type={viewType.type}
+			></ViewTypeButton>
+		{/each}
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

package/src/lib/registry/EntryTabsRegistry/components/ViewEntriesTypeIcon.svelte

@@ -0,0 +1,9 @@
+<script>
+	import { viewEntriesTypeRegistry } from "../registry.svelte";
+
+	let { type } = $props();
+
+	const viewType = viewEntriesTypeRegistry.get(type);
+</script>
+
+<svelte:component this={viewType.components.icon}></svelte:component>

package/src/lib/registry/EntryTabsRegistry/createEntryTab.js

@@ -0,0 +1,13 @@
+export function createEntryTab(config = {}) {
+	const entryTab = {
+		label:"",
+		slug:"",
+		type:""
+	};
+
+	Object.assign(entryTab, config);
+
+	// entryTab.get = () => "test";
+
+	return entryTab;
+}

package/src/lib/registry/EntryTabsRegistry/registerDefaultEntryTabs.js

@@ -0,0 +1,13 @@
+import { entryTabRegistry } from './registry.svelte';
+import Email from './entryTabs/Email';
+
+
+let isLoaded = false
+
+export function registerDefaultEntryTabs() {
+    if (isLoaded) return
+    
+	entryTabRegistry.register(Email)
+    
+    isLoaded = true
+}

package/src/lib/registry/EntryTabsRegistry/registry.svelte.js

@@ -0,0 +1,49 @@
+import { writable, derived, get } from 'svelte/store';
+
+function createEntryTabsRegistry() {
+	const store = writable({});
+
+	const all = derived(store, ($entryTabs) => Object.values($entryTabs));
+
+	return {
+		subscribe: store.subscribe,
+
+		register(entryTab) {
+			store.update((entryTabs) => ({
+				...entryTabs,
+				[entryTab.slug]: entryTab
+			}));
+		},
+
+		unregister(slug) {
+			store.update((entryTabs) => {
+				const copy = { ...entryTabs };
+
+				delete copy[slug];
+
+				return copy;
+			});
+		},
+		unregisterAll() {
+			store.update((entryTabs) => {
+				return {};
+			});
+		},
+
+		get(slug) {
+			return get(store)[slug];
+		},
+
+		select(slug) {
+			return derived(store, ($entryTabs) => $entryTabs[slug]);
+		},
+
+		
+
+		getAll() {
+			return all;
+		}
+	};
+}
+
+export const entryTabRegistry = createEntryTabsRegistry();

package/src/lib/registry/navigationRegistry/components/Navbar.svelte

@@ -144,6 +144,7 @@
 						<NavbarBtn href="{$targetProjectHref}/{entity.slug}" text={entity.plural_name}
 						></NavbarBtn>
 					{/each}
+                    <slot/>
 				</div>
 			</div>
 		{/if}

package/src/lib/registry/projectRegistry/createProject.js

@@ -7,6 +7,7 @@ import { navigationRegistry } from "../navigationRegistry/registry.svelte";
 import { registerNavigation } from "../navigationRegistry/registerNavigation";
 import { registerWidgetTypes } from "../widgetTypeRegistry/registerWidgetTypes";
 import { get } from "svelte/store";
+import { registerDefaultEntryTabTypes } from "../EntryTabTypesRegistry/registerDefaultEntryTabTypes";
 
 export function createProject(config = {}) {
     const project = {
@@ -102,6 +103,7 @@ export function createProject(config = {}) {
         registerDefaultFieldTypes();
         registerDefaultViewEntriesTypes();
         registerWidgetTypes()
+        registerDefaultEntryTabTypes()
         // charger les constant
 
         // charger les entité

package/src/routes/exemple/[project_normalized_name]/[entity_slug]/[entry_id]/+page.svelte

@@ -7,11 +7,18 @@
 	import { entryActionRegistry } from '$lib/registry/entryActionRegistry/registry.svelte';
 	import { registerDefaultEntryActionTypes } from '$lib/registry/entryActionTypeRegistry/registerDefaultEntryActionTypes';
 	import { entryActionTypeRegistry } from '$lib/registry/entryActionTypeRegistry/registry.svelte';
+	import { entryTabRegistry } from '$lib/registry/EntryTabsRegistry/registry.svelte';
+	import EntryTabTypeButton from '$lib/registry/EntryTabTypesRegistry/components/EntryTabTypeButton.svelte';
+	import { entryTabTypeRegistry } from '$lib/registry/EntryTabTypesRegistry/registry.svelte';
+	import { projectRegistry } from '$lib/registry/projectRegistry/registry.svelte';
 	import { Button, sendRequest } from 'hamzus-ui';
 	import { onMount } from 'svelte';
 
 	const entity = $derived(entityRegistry.getFromSlug($page.params.entity_slug));
 
+    const entryTabTypes = $derived(entryTabTypeRegistry.getAll())
+    const entryTabs = $derived(entryTabRegistry.getAll())
+
 	let ctx = $state(null);
 
 	let flatCtx = $state(null);
@@ -51,12 +58,29 @@
 				})
 			);
 		}
+
+        // vider le registry des tabs
+        entryTabRegistry.unregisterAll()
+
+        for (const tabType of $entryTabTypes) {
+            let newTabs = await tabType.onLoad(entity.slug)
+            for (const newTab of newTabs) {
+                entryTabRegistry.register(newTab)
+            }
+        }
+
+        console.log($entryTabs);
         
 	});
 
 </script>
 
 {#if entity}
+    <div class="tabs">
+        {#each $entryTabs as entryTab}
+            <EntryTabTypeButton startUrl="{projectRegistry.getTargetProjectHref()}/{$page.params.entity_slug}" {...entryTab}></EntryTabTypeButton>
+        {/each}
+    </div>
 	<div class="page">
 		<EntryPage bind:ctx entityId={entity.id} entryId={$page.params.entry_id}>
 			<div>
@@ -69,6 +93,13 @@
 {/if}
 
 <style>
+    .tabs {
+        display: flex;
+        align-items: center;
+        column-gap: var(--pad-m);
+        width: 100%;
+        padding: var(--pad-s);
+    }
 	.page {
 		display: flex;
 		flex-direction: column;