@rkosafo/cai.components 0.0.66 → 0.0.67

package/dist/index.d.ts

@@ -27,7 +27,9 @@ export * from './ui/box/index.js';
 export * from './ui/breadcrumb/index.js';
 export * from './layout/ComponentCanvas/index.js';
 export * from './ui/toast/index.js';
+export * from './ui/tooltip/index.js';
 export * from './layout/Chat/index.js';
+export * from './layout/mailing/index.js';
 export * from './forms/input/index.js';
 export * from './forms/label/index.js';
 export * from './forms/datepicker/index.js';

package/dist/index.js

@@ -28,7 +28,9 @@ export * from './ui/box/index.js';
 export * from './ui/breadcrumb/index.js';
 export * from './layout/ComponentCanvas/index.js';
 export * from './ui/toast/index.js';
+export * from './ui/tooltip/index.js';
 export * from './layout/Chat/index.js';
+export * from './layout/mailing/index.js';
 export * from './forms/input/index.js';
 export * from './forms/label/index.js';
 export * from './forms/datepicker/index.js';

package/dist/keycloak/keycloakService.d.ts

@@ -9,6 +9,10 @@ export declare function createAuthStore(): {
     userIsFound: boolean;
 };
 export type AuthStoreType = ReturnType<typeof createAuthStore>;
+export interface AuthenticatedData {
+    keycloakUser: AuthUserInfo;
+    queryUser: AuthUserInfo | any;
+}
 export declare class KeycloakService {
     private keycloak;
     private initialized;
@@ -18,7 +22,7 @@ export declare class KeycloakService {
     private onLogout?;
     private onError?;
     constructor(store: AuthStoreType, fetchUserInfo: FetchAuthUserInfoFn, callbacks?: {
-        onAuthenticated?: (userInfo: AuthUserInfo) => void;
+        onAuthenticated?: (val: AuthenticatedData) => void;
         onLogout?: () => void;
         onError?: (error: string) => void;
     });

package/dist/keycloak/keycloakService.js

@@ -97,7 +97,7 @@ export class KeycloakService {
                 status: extras?.status || ''
             };
             this.store.userInfo = userInfo;
-            this.onAuthenticated?.(userInfo);
+            this.onAuthenticated?.({ keycloakUser: userInfo, queryUser: meRet.data });
         }
         catch (error) {
             const errorMessage = error instanceof Error ? error.message : 'Failed to set token details';

package/dist/layout/mailing/MailPaginator.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import IconifyIcon from '../../ui/icons/IconifyIcon.svelte';
+	import type { MailPaginatorProps } from './types.js';
+
+	let {
+		hasNextPage = false,
+		hasPreviousPage = false,
+		currentPage = 0,
+		pageSize = 0,
+		totalCount = 0,
+		onNextClick,
+		onPreviousClick
+	}: MailPaginatorProps = $props();
+</script>
+
+<div class="flex items-center space-x-4 px-2">
+	<span class="text-sm text-gray-500">{currentPage}-{pageSize} of {totalCount}</span>
+	<div class="flex items-center space-x-2">
+		<button
+			disabled={!hasPreviousPage}
+			onclick={onPreviousClick}
+			class="rounded-lg bg-gray-200 p-1.5 text-gray-700 hover:bg-gray-300 disabled:bg-gray-200 disabled:text-gray-400"
+			title="Older"
+		>
+			<IconifyIcon icon="material-symbols:arrow-back" class="flex h-5 w-5 justify-center" />
+		</button>
+		<button
+			disabled={!hasNextPage}
+			onclick={onNextClick}
+			class="rounded-lg bg-gray-200 p-1.5 text-gray-700 transition duration-150 hover:bg-gray-300 disabled:bg-gray-200 disabled:text-gray-400"
+			title="Newer"
+		>
+			<IconifyIcon icon="material-symbols:arrow-forward" class="flex h-5 w-5 justify-center" />
+		</button>
+	</div>
+</div>

package/dist/layout/mailing/MailPaginator.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MailPaginatorProps } from './types.js';
+declare const MailPaginator: import("svelte").Component<MailPaginatorProps, {}, "">;
+type MailPaginator = ReturnType<typeof MailPaginator>;
+export default MailPaginator;

package/dist/layout/mailing/MailSidebar.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import IconifyIcon from '../../ui/icons/IconifyIcon.svelte';
+	import { Tooltip } from '../../ui/tooltip/index.js';
+	import type { MailSidebar } from './types.js';
+
+	let { setActiveMenu, menus = [], onClick }: MailSidebar = $props();
+</script>
+
+<div class="h-full w-full">
+	<ul class="flex h-full w-full flex-col gap-2 pt-4 pb-8">
+		{#each menus as menu, i}
+			{@const active = setActiveMenu?.(menu)}
+			<li class="grid w-full place-content-center">
+				<a
+					onclick={() => onClick?.(menu)}
+					href={menu.path}
+					class:text-primary-500={active}
+					class:bg-primary-100={active}
+					class:bg-opacity-10={active}
+					class:hover:bg-primary-100={!active}
+					class:hover:bg-opacity-10={!active}
+					class:text-gray-500={!active}
+					class:hover:text-gray-700={!active}
+					class="relative grid cursor-pointer place-content-center rounded px-3 py-3 transition-colors"
+				>
+					<IconifyIcon icon={menu.icon} style="font-size: 18px;" />
+					<div class="absolute -top-1 right-0">
+						<span
+							class:hidden={!Boolean(menu.count > 0)}
+							class="rounded-lg bg-sky-500 px-1.5 py-0.5 text-xs font-bold text-gray-100"
+							>{menu.count}</span
+						>
+					</div>
+				</a>
+				<Tooltip placement="right">{menu.title}</Tooltip>
+			</li>
+		{/each}
+	</ul>
+</div>

package/dist/layout/mailing/MailSidebar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MailSidebar } from './types.js';
+declare const MailSidebar: any;
+type MailSidebar = ReturnType<typeof MailSidebar>;
+export default MailSidebar;

package/dist/layout/mailing/MailToolBar.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import IconifyIcon from '../../ui/icons/IconifyIcon.svelte';
+	import { scale, slide } from 'svelte/transition';
+	import type { MailToolBarProps } from './index.js';
+	import { Input } from '../../forms/input/index.js';
+	import MailPaginator from './MailPaginator.svelte';
+	import { Tooltip } from '../../ui/tooltip/index.js';
+
+	let {
+		onBackClick,
+		onRefreshClick,
+		onComposeClick,
+		selectedMails = [],
+		showComposeButton = true,
+		showBackButton = true,
+		pageInfo = {
+			currentPage: 0,
+			pageSize: 0,
+			totalCount: 0,
+			hasNextPage: false,
+			hasPreviousPage: false
+		},
+		showPagination = true,
+		showSearch = true,
+		customFilterComponent,
+		onsearchChange,
+		onNextPageClick,
+		onPrevPageClick,
+		showArchiveButton = true,
+		onArchiveClick,
+		showDeleteButton = true,
+		onDeleteClick,
+		showMarkReadButton = true,
+		onToggleMarkReadClick,
+		isReadActive = false,
+		showFavoriteButton = true,
+		onToggleFavoriteClick,
+		showMarkAsSpamButton = true,
+		onMarkAsSpamClick,
+		isFavoriteActive = true
+	}: MailToolBarProps = $props();
+
+	let openFilter = $state(false);
+</script>
+
+<div class="flex h-full w-full items-center justify-between">
+	<div class="flex items-center">
+		<div class="flex items-center">
+			<div class:hidden={!showBackButton} class="ml-3 flex items-center">
+				<button
+					onclick={onBackClick}
+					class="grid h-8 w-8 place-content-center rounded-full border border-gray-300 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+				>
+					<IconifyIcon icon="ic:round-arrow-back-ios-new" class="flex h-5 w-5 justify-center" />
+				</button>
+				<Tooltip placement="bottom">Back</Tooltip>
+			</div>
+			<div class="ml-3 flex items-center">
+				<button
+					onclick={onRefreshClick}
+					class="rounded-lg border border-gray-300 px-2 py-1 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+				>
+					<IconifyIcon icon="mdi:refresh" class="flex h-5 w-5 justify-center" />
+				</button>
+				<Tooltip placement="bottom">Refresh</Tooltip>
+			</div>
+			<span class:hidden={selectedMails.length === 0} in:scale class="mx-3 h-6 w-[.5px] bg-gray-300"
+			></span>
+			<div class="flex items-center space-x-2" class:hidden={selectedMails.length === 0} in:scale>
+				<button
+					onclick={() => onArchiveClick?.()}
+					class:hidden={!showArchiveButton}
+					class="rounded-lg border border-gray-300 px-2 py-1 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+				>
+					<IconifyIcon icon="mdi:archive-arrow-down-outline" class="flex h-5 w-5 justify-center" />
+				</button>
+				<Tooltip placement="bottom">Archive</Tooltip>
+
+				<button
+					class:hidden={!showMarkAsSpamButton}
+					onclick={() => onMarkAsSpamClick?.()}
+					class="rounded-lg border border-gray-300 px-2 py-1 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+				>
+					<IconifyIcon icon="solar:danger-triangle-outline" class="flex h-5 w-5 justify-center" />
+				</button>
+				<Tooltip placement="bottom">Mark As Spam</Tooltip>
+
+				<button
+					class:hidden={!showDeleteButton}
+					onclick={() => onDeleteClick?.()}
+					class="rounded-lg border border-gray-300 px-2 py-1 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+				>
+					<IconifyIcon icon="mdi:delete-outline" class="flex h-5 w-5 justify-center" />
+				</button>
+				<Tooltip placement="bottom">Delete</Tooltip>
+			</div>
+			<span class:hidden={selectedMails.length === 0} in:scale class="mx-3 h-6 w-[.5px] bg-gray-300"
+			></span>
+			<div class:hidden={selectedMails.length === 0} in:scale class="flex items-center space-x-2">
+				<button
+					class:hidden={!showMarkReadButton}
+					onclick={() => onToggleMarkReadClick?.(isReadActive ? 'unread' : 'read')}
+					class="rounded-lg border border-gray-300 px-2 py-1 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+				>
+					<IconifyIcon
+						icon={isReadActive ? 'mdi:email-outline' : 'mdi:email-open-outline'}
+						class="flex h-5 w-5 justify-center"
+					/>
+				</button>
+				<Tooltip placement="bottom">{isReadActive ? 'Mark As Unread' : 'Mark As Read'}</Tooltip>
+
+				<button
+					class:hidden={!showFavoriteButton}
+					onclick={() => onToggleFavoriteClick?.(isFavoriteActive ? 'unfavorite' : 'favorite')}
+					class="rounded-lg border border-gray-300 px-2 py-1 text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+				>
+					<IconifyIcon
+						icon={isFavoriteActive ? 'mdi:star' : 'mdi:star-outline'}
+						class="flex h-5 w-5 justify-center"
+					/>
+				</button>
+				<Tooltip placement="bottom">{isFavoriteActive ? 'Unfavorite' : 'Favorite'}</Tooltip>
+			</div>
+			<span class:hidden={!showSearch} class="mx-3 h-6 w-[.5px] bg-gray-300"></span>
+			<div
+				class:hidden={!showSearch}
+				class="flex items-center justify-center rounded-lg border border-gray-300 px-2 py-1 text-sm text-gray-700 shadow transition duration-100"
+			>
+				<IconifyIcon icon="iconamoon:search-thin" style="font-size: 16px;" />
+				<Input
+					type="search"
+					class="h-5 w-44 border-none text-xs outline-none placeholder:text-xs focus:ring-0"
+					placeholder="Search..."
+					oninput={(e) => onsearchChange?.((e.target as HTMLInputElement).value)}
+				/>
+			</div>
+			<div class:hidden={!customFilterComponent} class="relative pl-2">
+				<button
+					onclick={() => (openFilter = !openFilter)}
+					class="flex items-center justify-center gap-2 rounded-lg border border-gray-300 px-2 py-1 text-sm text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+				>
+					<IconifyIcon icon="mage:filter" />
+					<span>Filters</span>
+				</button>
+				{#if openFilter}
+					<div transition:slide class="absolute z-20 mt-2 w-80 rounded-md bg-white shadow">
+						{@render customFilterComponent?.()}
+					</div>
+				{/if}
+			</div>
+			<span class:hidden={!showComposeButton} class="mx-3 h-6 w-[.5px] bg-gray-300"></span>
+			<div class:hidden={!showComposeButton} class="flex h-8 items-center">
+				<button
+					onclick={() => onComposeClick?.()}
+					class="flex items-center justify-center space-x-2 rounded bg-blue-600 px-6 py-1.5 text-gray-100 transition duration-150 hover:bg-blue-700"
+				>
+					<IconifyIcon icon="ic:round-add" style="font-size: 16px;" />
+					<span class="text-sm">Compose</span>
+				</button>
+			</div>
+		</div>
+	</div>
+	<div class:hidden={!showPagination}>
+		<MailPaginator
+			currentPage={pageInfo.currentPage}
+			totalCount={pageInfo.totalCount}
+			pageSize={pageInfo.pageSize}
+			hasNextPage={pageInfo.hasNextPage}
+			hasPreviousPage={pageInfo.hasPreviousPage}
+			onNextClick={() => onNextPageClick?.()}
+			onPreviousClick={() => onPrevPageClick?.()}
+		/>
+	</div>
+</div>

package/dist/layout/mailing/MailToolBar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MailToolBarProps } from './index.js';
+declare const MailToolBar: import("svelte").Component<MailToolBarProps, {}, "">;
+type MailToolBar = ReturnType<typeof MailToolBar>;
+export default MailToolBar;

package/dist/layout/mailing/MailingHeader.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import type { MailingHeaderProps } from './types.js';
+
+	let { data, replyType = $bindable(undefined) }: MailingHeaderProps = $props();
+</script>

package/dist/layout/mailing/MailingHeader.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MailingHeaderProps } from './types.js';
+declare const MailingHeader: import("svelte").Component<MailingHeaderProps, {}, "replyType">;
+type MailingHeader = ReturnType<typeof MailingHeader>;
+export default MailingHeader;

package/dist/layout/mailing/MailingMessageCard.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { Checkbox } from '../../forms/checkbox/index.js';
+	import IconifyIcon from '../../ui/icons/IconifyIcon.svelte';
+	import dayjs from 'dayjs';
+	import { type MailingMessageCardProps } from './index.js';
+
+	let {
+		id = 0,
+		sender = '',
+		subject = '',
+		date,
+		message = '',
+		isStared = false,
+		isImportant = false,
+		isRead = false,
+		isChecked = false,
+		onItemChecked,
+		toggelImportant,
+		toggleFavorited,
+		onItemSelected
+	}: MailingMessageCardProps = $props();
+
+	function handleClik(e: any) {
+		if (e.target.tagName !== 'INPUT' && e.target.localName !== 'iconify-icon') onItemSelected?.(id);
+	}
+
+	function formatDate(date: Date | string): string {
+		const messageDate = dayjs(date);
+		const today = dayjs();
+
+		if (messageDate.isSame(today, 'day')) {
+			return messageDate.format('HH:mm');
+		} else if (messageDate.isSame(today.subtract(1, 'day'), 'day')) {
+			return 'Yesterday';
+		} else if (messageDate.isSame(today, 'year')) {
+			return messageDate.format('MMM DD');
+		} else {
+			return messageDate.format('DD/MM/YYYY');
+		}
+	}
+</script>
+
+<div
+	class:bg-blue-100={isChecked}
+	class:hover:bg-gray-200={!isChecked}
+	class:bg-white={!isRead && !isChecked}
+	class:shadow={!isRead && !isChecked}
+	class:border={!isRead && !isChecked}
+	class="flex items-center border-y px-2"
+	role="button"
+	tabindex="0"
+	onkeydown={handleClik}
+	onclick={handleClik}
+>
+	<Checkbox
+		checked={isChecked}
+		class="cursor-pointer border-2 border-gray-400 transition-colors hover:ring-4 hover:ring-gray-400 focus:ring-0"
+		onchange={(e) => {
+			const target = e.target;
+			onItemChecked?.({ checked: target.checked, id });
+		}}
+	/>
+	<div class="my-1 flex w-full cursor-pointer items-center justify-between p-1">
+		<div class="flex items-center">
+			<div class="mr-4 flex items-center gap-1 space-x-1">
+				<button
+					onclick={(e) => {
+						toggleFavorited?.(id);
+					}}
+					aria-label="Not starred"
+				>
+					<IconifyIcon
+						style="font-size: 24px"
+						icon={isStared ? 'mdi:star' : 'mdi:star-outline'}
+						class="flex justify-center transition-colors {isStared
+							? 'text-yellow-500 hover:text-yellow-600'
+							: 'text-gray-500 hover:text-gray-900'}"
+					/>
+				</button>
+				<button
+					onclick={(e) => {
+						toggelImportant?.(id);
+					}}
+					aria-label="Click to mark this email as important"
+				>
+					<IconifyIcon
+						style="font-size: 18px"
+						icon={isImportant ? 'ic:outline-bookmark' : 'solar:bookmark-broken'}
+						class="flex justify-center transition-colors {isImportant
+							? 'text-yellow-500 hover:text-yellow-600'
+							: 'text-gray-500 hover:text-gray-900'}"
+					/>
+				</button>
+			</div>
+			<span class="w-56 truncate pr-2" class:font-bold={!isRead}>{sender}</span>
+			<span class="w-64 truncate" class:font-bold={!isRead}>{subject}</span>
+			<span class="mx-1">-</span>
+			<span class="w-96 truncate text-sm text-gray-600">{message}</span>
+		</div>
+		<div class="flex w-32 items-center justify-end">
+			<span class="text-sm" class:font-bold={!isRead} class:text-gray-500={isRead}>
+				{formatDate(date)}
+			</span>
+		</div>
+	</div>
+</div>

package/dist/layout/mailing/MailingMessageCard.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type MailingMessageCardProps } from './index.js';
+declare const MailingMessageCard: import("svelte").Component<MailingMessageCardProps, {}, "">;
+type MailingMessageCard = ReturnType<typeof MailingMessageCard>;
+export default MailingMessageCard;

package/dist/layout/mailing/MailingMessageViewer.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { PageLoader } from '../../ui/pageLoader/index.js';
+	import { slide } from 'svelte/transition';
+	import type { MailingHeaderData, MailingMessageViewerProps, MailingReplyType } from './index.js';
+	import MailingHeader from './MailingHeader.svelte';
+	import { onMount } from 'svelte';
+	import toast from 'svelte-french-toast';
+
+	let { readMessage, recordId, updatePageInfo }: MailingMessageViewerProps = $props();
+
+	let busy = $state(true);
+	let header = $state<MailingHeaderData>({} as MailingHeaderData);
+	let inputType = $state<MailingReplyType | undefined>(undefined);
+
+	onMount(async () => {
+		try {
+			const ret = await readMessage(recordId);
+			if (!ret?.success) {
+				toast.error(ret?.message);
+				return;
+			}
+			updatePageInfo?.({
+				currentPage: 1,
+				pageSize: 1,
+				totalCount: 1,
+				hasNextPage: false,
+				hasPreviousPage: false
+			});
+
+			console.log({ ret });
+		} catch (error: any) {
+			toast.error(error?.message || error);
+		} finally {
+			busy = false;
+		}
+	});
+</script>
+
+<div class="h-full w-full">
+	{#if busy}
+		<PageLoader size={50} />
+	{:else}
+		<div class="flex h-full w-full flex-col gap-2" in:slide>
+			<div class="h-28 px-4 pt-4">
+				<MailingHeader bind:replyType={inputType} data={header} />
+			</div>
+			<!-- <div class="fex-grow h-full w-full rounded bg-gray-100">
+				<div class="flex h-[71vh] w-full flex-col gap-4">
+					<div
+						class="scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch h-full flex-grow overflow-y-auto p-2"
+					>
+						<ContentSection {content} />
+					</div>
+					<div class="h-modal p-4 pt-2" class:hidden={!Boolean(inputType)}>
+						<div class=" rounded-md bg-white p-4">
+							<Reply {inputType} />
+						</div>
+					</div>
+				</div>
+			</div> -->
+		</div>
+	{/if}
+</div>

package/dist/layout/mailing/MailingMessageViewer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MailingMessageViewerProps } from './index.js';
+declare const MailingMessageViewer: import("svelte").Component<MailingMessageViewerProps, {}, "">;
+type MailingMessageViewer = ReturnType<typeof MailingMessageViewer>;
+export default MailingMessageViewer;