Merge branch 'feat-show-scope' into develop

frontend/src/lib/components/table/TableCellScope.svelte

@@ -0,0 +1,31 @@
+<!--
+	TableCellScope component
+
+	A reusable table cell component that displays the scope of an item based on its companyID.
+	Used to distinguish between shared (global) items and company-specific items in tables.
+
+	Usage:
+	```svelte
+	<TableCellScope companyID={item.companyID} />
+	```
+
+	When to use:
+	- In company view mode to show which items are shared vs company-specific
+	- Only display when contextCompanyID is set (use conditional rendering)
+	- Place as the last data column before TableCellEmpty and TableCellAction
+
+	Examples:
+	- companyID = null → displays "Shared"
+	- companyID = "123" → displays "Company"
+-->
+<script>
+	import TableCell from './TableCell.svelte';
+
+	/**
+	 * The company ID of the item. If null/undefined, item is considered shared/global.
+	 * @type {string | null | undefined}
+	 */
+	export let companyID;
+</script>
+
+<TableCell value={companyID ? 'Company' : 'Shared'} />

frontend/src/routes/api-sender/+page.svelte

@@ -18,6 +18,7 @@
 	import FormGrid from '$lib/components/FormGrid.svelte';
 	import Modal from '$lib/components/Modal.svelte';
 	import TextareaField from '$lib/components/TextareaField.svelte';
+	import TableCellScope from '$lib/components/table/TableCellScope.svelte';
 	import BigButton from '$lib/components/BigButton.svelte';
 	import FormColumn from '$lib/components/FormColumn.svelte';
 	import FormColumns from '$lib/components/FormColumns.svelte';
@@ -310,10 +311,13 @@
 	<Headline>API Senders</Headline>
 	<BigButton on:click={openCreateModal}>New API sender</BigButton>
 	<Table
-		columns={[{ column: 'Name', size: 'large' }]}
-		sortable={['name']}
+		columns={[
+			{ column: 'Name', size: 'large' },
+			...(contextCompanyID ? [{ column: 'Scope', size: 'small' }] : [])
+		]}
+		sortable={['Name', ...(contextCompanyID ? ['scope'] : [])]}
 		hasData={!!apiSenders.length}
-		plural="API senders"
+		plural="api senders"
 		pagination={tableURLParams}
 		isGhost={isTableLoading}
 	>
@@ -331,7 +335,9 @@
 						{apiSender.name}
 					</button>
 				</TableCell>
-
+				{#if contextCompanyID}
+					<TableCellScope companyID={apiSender.companyID} />
+				{/if}
 				<TableCellEmpty />
 				<TableCellAction>
 					<TableDropDownEllipsis>

frontend/src/routes/attachment/+page.svelte

@@ -18,6 +18,7 @@
 	import TableUpdateButton from '$lib/components/table/TableUpdateButton.svelte';
 	import BigButton from '$lib/components/BigButton.svelte';
 	import FormColumns from '$lib/components/FormColumns.svelte';
+	import TableCellScope from '$lib/components/table/TableCellScope.svelte';
 	import FormColumn from '$lib/components/FormColumn.svelte';
 	import FormFooter from '$lib/components/FormFooter.svelte';
 	import Table from '$lib/components/table/Table.svelte';
@@ -244,9 +245,16 @@
 			'Name',
 			'Description',
 			'Filename',
-			{ column: 'Embedded Content', alignText: 'center' }
+			{ column: 'Embedded Content', alignText: 'center' },
+			...(contextCompanyID ? [{ column: 'Scope', size: 'small' }] : [])
+		]}
+		sortable={[
+			'Name',
+			'Description',
+			'Filename',
+			'Embedded Content',
+			...(contextCompanyID ? ['scope'] : [])
 		]}
-		sortable={['Name', 'Description', 'Filename', 'Embedded Content']}
 		hasData={!!attachments.length}
 		plural="attachments"
 		pagination={tableURLParams}
@@ -296,6 +304,9 @@
 					{/if}
 				</TableCell>
 				<TableCellCheck value={attachment.embeddedContent} />
+				{#if contextCompanyID}
+					<TableCellScope companyID={attachment.companyID} />
+				{/if}
 				<TableCellEmpty />
 				<TableCellAction>
 					<TableDropDownEllipsis>

frontend/src/routes/campaign-template/+page.svelte

@@ -23,6 +23,7 @@
 	import TableCellEmpty from '$lib/components/table/TableCellEmpty.svelte';
 	import BigButton from '$lib/components/BigButton.svelte';
 	import FormFooter from '$lib/components/FormFooter.svelte';
+	import TableCellScope from '$lib/components/table/TableCellScope.svelte';
 	import Table from '$lib/components/table/Table.svelte';
 	import HeadTitle from '$lib/components/HeadTitle.svelte';
 	import { getModalText } from '$lib/utils/common';
@@ -544,7 +545,8 @@
 			{ column: 'Landing Page', size: 'small' },
 			{ column: 'After Landing Page', size: 'small' },
 			{ column: 'After landing page redirect URL', size: 'small' },
-			{ column: 'Is complete', size: 'small', alignText: 'center' }
+			{ column: 'Is complete', size: 'small', alignText: 'center' },
+			...(contextCompanyID ? [{ column: 'Scope', size: 'small' }] : [])
 		]}
 		sortable={[
 			'Name',
@@ -556,7 +558,8 @@
 			'Landing Page',
 			'After Landing Page',
 			'After landing page redirect URL',
-			'Is complete'
+			'Is complete',
+			...(contextCompanyID ? ['scope'] : [])
 		]}
 		hasData={!!templates.length}
 		plural="templates"
@@ -659,7 +662,10 @@
 						</a>
 					{/if}
 				</TableCell>
-				<TableCellCheck value={template.isUsable} />
+				<TableCellCheck value={template.isComplete} />
+				{#if contextCompanyID}
+					<TableCellScope companyID={template.companyID} />
+				{/if}
 				<TableCellEmpty />
 				<TableCellAction>
 					<TableDropDownEllipsis>

frontend/src/routes/domain/+page.svelte

@@ -22,6 +22,7 @@
 	import FormGrid from '$lib/components/FormGrid.svelte';
 	import Modal from '$lib/components/Modal.svelte';
 	import TableCellCheck from '$lib/components/table/TableCellCheck.svelte';
+	import TableCellScope from '$lib/components/table/TableCellScope.svelte';
 	import BigButton from '$lib/components/BigButton.svelte';
 	import FormColumns from '$lib/components/FormColumns.svelte';
 	import FormColumn from '$lib/components/FormColumn.svelte';
@@ -623,9 +624,16 @@
 			{ column: 'Managed TLS', size: 'small', alignText: 'center' },
 			{ column: 'Custom Certificates', size: 'small', alignText: 'center' },
 			{ column: 'Type', size: 'small', alignText: 'center' },
-			{ column: 'Target Domain', size: 'small' }
+			{ column: 'Target Domain', size: 'small' },
+			...(contextCompanyID ? [{ column: 'Scope', size: 'small' }] : [])
+		]}
+		sortable={[
+			'Name',
+			'Hosting website',
+			'Redirects',
+			'Type',
+			...(contextCompanyID ? ['scope'] : [])
 		]}
-		sortable={['Name', 'Hosting website', 'Redirects', 'Type']}
 		hasData={!!domains.length}
 		plural="domains"
 		pagination={tableURLParams}
@@ -662,6 +670,9 @@
 					</div>
 				</TableCell>
 				<TableCell>{domain.type === 'proxy' ? domain.proxyTargetDomain : ''}</TableCell>
+				{#if contextCompanyID}
+					<TableCellScope companyID={domain.companyID} />
+				{/if}
 				<TableCellEmpty />
 				<TableCellAction>
 					<TableDropDownEllipsis>

frontend/src/routes/email/+page.svelte

@@ -17,6 +17,7 @@
 	import { AppStateService } from '$lib/service/appState';
 	import TableCellEmpty from '$lib/components/table/TableCellEmpty.svelte';
 	import TableCellAction from '$lib/components/table/TableCellAction.svelte';
+	import TableCellScope from '$lib/components/table/TableCellScope.svelte';
 	import CheckboxField from '$lib/components/CheckboxField.svelte';
 	import Modal from '$lib/components/Modal.svelte';
 	import FormGrid from '$lib/components/FormGrid.svelte';
@@ -381,9 +382,10 @@
 			{ column: 'Name', size: 'large' },
 			{ column: 'From', size: 'medium' },
 			{ column: 'Subject', size: 'medium' },
-			{ column: 'Tracking Pixel', size: 'small', alignText: 'center' }
+			{ column: 'Tracking Pixel', size: 'small', alignText: 'center' },
+			...(contextCompanyID ? [{ column: 'Scope', size: 'small' }] : [])
 		]}
-		sortable={['Name', 'From', 'Subject', 'Tracking Pixel']}
+		sortable={['Name', 'From', 'Subject', 'Tracking Pixel', ...(contextCompanyID ? ['scope'] : [])]}
 		hasData={!!emails.length}
 		plural="emails"
 		pagination={tableURLParams}
@@ -406,6 +408,9 @@
 				<TableCell value={email.mailHeaderFrom} />
 				<TableCell value={email.mailHeaderSubject} />
 				<TableCellCheck value={email.addTrackingPixel} />
+				{#if contextCompanyID}
+					<TableCellScope companyID={email.companyID} />
+				{/if}
 				<TableCellEmpty />
 				<TableCellAction>
 					<TableDropDownEllipsis>

frontend/src/routes/page/+page.svelte

@@ -29,6 +29,7 @@
 	import TableCopyButton from '$lib/components/table/TableCopyButton.svelte';
 	import { showIsLoading, hideIsLoading } from '$lib/store/loading.js';
 	import TableDropDownEllipsis from '$lib/components/table/TableDropDownEllipsis.svelte';
+	import TableCellScope from '$lib/components/table/TableCellScope.svelte';
 	import DeleteAlert from '$lib/components/modal/DeleteAlert.svelte';
 	import Editor from '$lib/components/editor/Editor.svelte';
 	import { fetchAllRows } from '$lib/utils/api-utils';
@@ -322,8 +323,11 @@
 	</div>
 	<BigButton on:click={openCreateModal}>New Page</BigButton>
 	<Table
-		columns={[{ column: 'Name', size: 'large' }]}
-		sortable={['Name']}
+		columns={[
+			{ column: 'Name', size: 'large' },
+			...(contextCompanyID ? [{ column: 'Scope', size: 'small' }] : [])
+		]}
+		sortable={['Name', ...(contextCompanyID ? ['scope'] : [])]}
 		hasData={!!pages.length}
 		plural="pages"
 		pagination={tableURLParams}
@@ -343,7 +347,9 @@
 						{page.name}
 					</button>
 				</TableCell>
-
+				{#if contextCompanyID}
+					<TableCellScope companyID={page.companyID} />
+				{/if}
 				<TableCellEmpty />
 				<TableCellAction>
 					<TableDropDownEllipsis>

frontend/src/routes/recipient/+page.svelte

@@ -28,6 +28,7 @@
 	import Table from '$lib/components/table/Table.svelte';
 	import HeadTitle from '$lib/components/HeadTitle.svelte';
 	import FileField from '$lib/components/FileField.svelte';
+	import TableCellScope from '$lib/components/table/TableCellScope.svelte';
 	import { getModalText } from '$lib/utils/common';
 	import TableCopyButton from '$lib/components/table/TableCopyButton.svelte';
 	import { showIsLoading, hideIsLoading } from '$lib/store/loading.js';
@@ -386,7 +387,8 @@
 			{ column: 'Department', size: 'small' },
 			{ column: 'City', size: 'small' },
 			{ column: 'Country', size: 'small' },
-			{ column: 'Misc', size: 'small' }
+			{ column: 'Misc', size: 'small' },
+			...(contextCompanyID ? [{ column: 'Scope', size: 'small' }] : [])
 		]}
 		sortable={[
 			'first name',
@@ -399,7 +401,8 @@
 			'department',
 			'city',
 			'country',
-			'misc'
+			'misc',
+			...(contextCompanyID ? ['scope'] : [])
 		]}
 		hasData={!!recipients.length}
 		plural="recipients"
@@ -444,6 +447,9 @@
 				<TableCell value={recipient.city} />
 				<TableCell value={recipient.country} />
 				<TableCell value={recipient.misc} />
+				{#if contextCompanyID}
+					<TableCellScope companyID={recipient.companyID} />
+				{/if}
 				<TableCellEmpty />
 				<TableCellAction>
 					<TableDropDownEllipsis>