@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/base/event-calendar/eventModal.schema.ts

@@ -0,0 +1,32 @@
+import { z } from 'zod';
+import { toTypedSchema } from '@vee-validate/zod';
+
+export const eventModalSchema = toTypedSchema(
+	z.object({
+		id: z.string().optional(),
+		title: z.string().optional(),
+		description: z.string().optional(),
+		startDate: z.coerce.date(),
+		endDate: z.coerce.date(),
+		startTime: z.string(),
+		endTime: z.string(),
+		allDay: z.boolean(),
+		color: z.string(),
+		location: z.string().optional(),
+		status: z.string(),
+		timezone: z.string(),
+		isRecurring: z.boolean(),
+		recurringEndType: z.string(),
+		recurringId: z.string().optional(),
+		recurringPattern: z.object({
+			type: z.string(),
+			interval: z.coerce.number().int().positive(),
+			daysOfWeek: z.array(z.number()).optional(),
+			count: z.coerce.number().int().positive().optional(),
+			endDate: z.coerce.date().optional(),
+			endsNever: z.boolean().optional(),
+			dayOfMonth: z.number().optional(),
+			monthOfYear: z.number().optional(),
+		}),
+	})
+);

package/src/runtime/components/base/event-calendar/types.ts

@@ -0,0 +1,96 @@
+/**
+ * @description Event Calendar component — contains the CalendarEvent interface and all related types for managing and displaying calendar events.
+ * @author      Amirul Apex
+ * @created     Jan 2026
+ * @project     Dynect
+ */
+
+export interface CalendarEvent {
+	id: string | undefined;
+	title: string | undefined;
+	description: string | undefined;
+	startDate: Date;
+	endDate: Date;
+	startTime: string | undefined;
+	endTime: string | undefined;
+	allDay: boolean | undefined;
+	color: EventColor | undefined;
+	location: string | undefined;
+	status: EventStatus | undefined;
+	timezone: string | undefined;
+	// Recurring event support
+	isRecurring: boolean | undefined;
+	recurringPattern: RecurringPattern | undefined;
+	recurringId: string | undefined; // Links recurring instances
+}
+
+export type EventStatus = 'confirmed' | 'cancelled' | 'tentative' | 'past';
+
+export interface RecurringPattern {
+	type: 'daily' | 'weekly' | 'monthly' | 'yearly';
+	interval: number; // Every N days/weeks/months/years
+	endDate?: Date;
+	count?: number; // Number of occurrences
+	endsNever?: boolean; // For events that never end
+	daysOfWeek?: number[]; // For weekly: 0=Sunday, 1=Monday, etc.
+	dayOfMonth?: number; // For monthly
+	monthOfYear?: number; // For yearly
+}
+
+export type ViewMode = 'month' | 'week' | 'day' | 'agenda';
+
+// For passing pre-calculated day data to MonthView
+export interface MonthViewDay {
+	date: Date;
+	isCurrentMonth: boolean;
+	isToday: boolean;
+	events: CalendarEvent[]; // Events specific to this day in month view
+}
+
+// For WeekView and DayView structure
+export interface TimeSlot {
+	time: Date;
+	label: string;
+	dateTimeStr: string; // For data attributes, e.g., clicking to add
+}
+
+export interface DayColumnData {
+	date: Date;
+	dateKey: string; // 'yyyy-MM-dd'
+	dayLabel?: string | string[]; // For WeekView, e.g., 'Mon 01'
+	isToday: boolean;
+	allDayEvents: CalendarEvent[];
+	timeSlots?: TimeSlot[]; // Optional since it's generated by view components
+	// Timed events will be processed with style by the view component
+	timedEventsRaw: CalendarEvent[];
+}
+
+export type EventColor = 'sky' | 'amber' | 'violet' | 'rose' | 'emerald' | 'orange';
+
+// Location Display Types
+export interface LocationDisplayProps {
+	location?: string;
+	showIcon?: boolean;
+	showTooltip?: boolean;
+	compact?: boolean;
+	iconSize?: number;
+}
+
+export interface LocationData {
+	address: string;
+	coordinates?: { lat: number; lng: number };
+	placeId?: string; // For future Google Places integration
+}
+
+// External Calendar Integration Types
+export interface ExternalEventSource {
+	provider: 'google' | 'outlook' | 'local';
+	externalId?: string;
+	calendarId?: string;
+	lastSyncTime?: Date;
+}
+
+export interface CalendarEventWithSource extends CalendarEvent {
+	source?: ExternalEventSource;
+	isReadOnly?: boolean; // For external events that can't be modified locally
+}

package/src/runtime/components/base/org-chart/index.vue

@@ -0,0 +1,359 @@
+<script setup lang="ts">
+import { OrgChart } from './main';
+import { SVG_ICONS, createIconSVG } from './svg-icons';
+import type { OrgChartNodeData, OrgChartNode } from './types';
+
+// ---------------------------------------------------------------------------
+// Props & Emits
+// ---------------------------------------------------------------------------
+const props = withDefaults(
+	defineProps<{
+		data: OrgChartNodeData[];
+		compact?: boolean;
+		nodeWidth?: number;
+		nodeHeight?: number;
+		pagingStep?: number;
+		visibleNodes?: number;
+		enablePaging?: boolean;
+		enableFiltering?: boolean;
+		loading?: boolean;
+	}>(),
+	{
+		compact: false,
+		nodeWidth: 280,
+		nodeHeight: 150,
+		pagingStep: 5,
+		visibleNodes: 3,
+		enablePaging: false,
+		enableFiltering: false,
+		loading: false,
+	}
+);
+
+const emit = defineEmits<{
+	nodeClick: [node: OrgChartNode<OrgChartNodeData>];
+}>();
+
+defineSlots<{
+	node(props: { data: OrgChartNodeData; node: OrgChartNode<OrgChartNodeData>; width: number; height: number }): any;
+}>();
+
+// ---------------------------------------------------------------------------
+// State
+// ---------------------------------------------------------------------------
+const chartRef = ref<HTMLDivElement | null>(null);
+const chart = shallowRef<OrgChart<OrgChartNodeData> | null>(null);
+const filterSearch = ref('');
+const slots = useSlots();
+const currentLayout = ref<'top' | 'right' | 'bottom' | 'left'>('top');
+const isCompact = ref(props.compact);
+
+function setLayout(dir: 'top' | 'right' | 'bottom' | 'left') {
+	currentLayout.value = dir;
+	chart.value?.layout(dir).render().fit();
+}
+
+function setCompact(val: boolean) {
+	isCompact.value = val;
+	chart.value?.compact(val).render();
+}
+
+function filterChart() {
+	const value = filterSearch.value;
+	chart.value?.clearHighlighting();
+	const data = chart.value?.data();
+	data.forEach((d: OrgChartNodeData) => (d._expanded = false));
+	data.forEach((d: OrgChartNodeData) => {
+		if (value !== '' && d.name.toLowerCase().includes(value.toLowerCase())) {
+			d._highlighted = true;
+			d._expanded = true;
+		}
+	});
+	chart.value?.data(props.data).render().fit();
+}
+
+function defaultNodeContent(d: OrgChartNode<OrgChartNodeData>) {
+	return h('div', { class: 'rounded-lg border border-gray-200 bg-white', style: { width: `${d.width}px`, height: `${d.height}px` } }, [
+		h('div', { class: 'mr-2 mt-1 flex justify-end text-xs text-gray-400' }, `#${d.data.id ?? ''}`),
+		h('div', { class: '-mt-11 ml-4 h-12 w-12 rounded-full border border-gray-200 bg-white' }),
+		h('div', { class: '-mt-11' }, [
+			h('img', {
+				src: d.data.image ?? 'https://i.pravatar.cc/150',
+				class: 'ml-5 h-10 w-10 rounded-full object-cover',
+				onerror: "this.src='https://i.pravatar.cc/150?img=68'",
+			}),
+		]),
+		h('div', { class: 'ml-5 mt-2.5 text-sm font-semibold text-gray-900' }, d.data.name ?? 'N/A'),
+		h('div', { class: 'ml-5 mt-1 text-xs text-gray-500' }, d.data.position ?? 'N/A'),
+	]);
+}
+
+function buildNodeContent(d: OrgChartNode<OrgChartNodeData>) {
+	if (slots.node) {
+		return h('div', slots.node({ data: d.data, node: d, width: d.width, height: d.height }));
+	}
+	return defaultNodeContent(d);
+}
+
+const svgIconChildren = (children: any) => {
+	switch (currentLayout.value) {
+		case 'top':
+			return children ? SVG_ICONS.chevronUp : SVG_ICONS.chevronDown;
+		case 'right':
+			return children ? SVG_ICONS.chevronRight : SVG_ICONS.chevronLeft;
+		case 'bottom':
+			return children ? SVG_ICONS.chevronDown : SVG_ICONS.chevronUp;
+		case 'left':
+			return children ? SVG_ICONS.chevronLeft : SVG_ICONS.chevronRight;
+	}
+};
+
+function buildButtonContent({ node }: { node: OrgChartNode<OrgChartNodeData>; state: any }): string {
+	return `
+    <div class="m-auto flex items-center justify-center gap-2 rounded border border-gray-200 bg-white p-1 text-xs">
+		${node.children ? createIconSVG(svgIconChildren(true), node.data._directSubordinates ?? 0) : createIconSVG(svgIconChildren(false), node.data._directSubordinates ?? 0)}
+	</div>
+  `;
+}
+
+// ---------------------------------------------------------------------------
+// Chart initialisation
+// ---------------------------------------------------------------------------
+function initChart() {
+	if (!chartRef.value) return;
+	if (props.enablePaging) {
+		chart.value = new OrgChart<OrgChartNodeData>()
+			.container(chartRef.value)
+			.data(props.data)
+			.compact(props.compact)
+			.nodeWidth(() => props.nodeWidth)
+			.nodeHeight(() => props.nodeHeight)
+			.childrenMargin(() => 100)
+			.compactMarginBetween(() => 35)
+			.compactMarginPair(() => 30)
+			.neighbourMargin(() => 50)
+			.siblingsMargin(() => 20)
+			.nodeContent(buildNodeContent)
+			.buttonContent(buildButtonContent)
+			.onNodeClick((d: OrgChartNode<OrgChartNodeData>) => {
+				emit('nodeClick', d as OrgChartNode<OrgChartNodeData>);
+				return d;
+			})
+			.pagingStep((d: OrgChartNode<OrgChartNodeData>) => props.pagingStep)
+			.minPagingVisibleNodes((d: OrgChartNode<OrgChartNodeData>) => props.visibleNodes)
+			.pagingButton((d: OrgChartNodeData, i: number, arr: OrgChartNode<OrgChartNodeData>[], state: any) => {
+				const step = state.pagingStep(d.parent);
+				const currentIndex = d.parent.data._pagingStep;
+				const diff = d.parent.data._directSubordinatesPaging - currentIndex;
+				const min = Math.min(diff, step);
+				return `
+						<div class="mt-12">
+							<div class="flex w-44 items-center rounded-full bg-slate-200 px-4 py-1">
+								<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+									<path d="M5.59 7.41L10.18 12L5.59 16.59L7 18L13 12L7 6L5.59 7.41ZM16 6H18V18H16V6Z" fill="#716E7B" stroke="#716E7B"/>
+								</svg>
+								<div class="text-xs leading-loose text-gray-500">Show next ${min} nodes</div>
+							</div>
+						</div>
+						`;
+			})
+			.render();
+	} else {
+		chart.value = new OrgChart<OrgChartNodeData>()
+			.container(chartRef.value)
+			.data(props.data)
+			.compact(props.compact)
+			.nodeWidth(() => props.nodeWidth)
+			.nodeHeight(() => props.nodeHeight)
+			.childrenMargin(() => 100)
+			.compactMarginBetween(() => 35)
+			.compactMarginPair(() => 30)
+			.neighbourMargin(() => 50)
+			.siblingsMargin(() => 20)
+			.nodeContent(buildNodeContent)
+			.buttonContent(buildButtonContent)
+			.onNodeClick((d: OrgChartNode<OrgChartNodeData>) => {
+				emit('nodeClick', d as OrgChartNode<OrgChartNodeData>);
+				return d;
+			})
+			.render();
+	}
+}
+
+onMounted(initChart);
+
+onBeforeUnmount(() => {
+	chart.value?.clear();
+	chart.value = null;
+});
+
+// ---------------------------------------------------------------------------
+// Watchers
+// ---------------------------------------------------------------------------
+watch(
+	() => props.data,
+	(newData) => chart.value?.data(newData).render(),
+	{ deep: true }
+);
+
+watch(
+	() => props.compact,
+	(val) => chart.value?.compact(val).render()
+);
+
+// ---------------------------------------------------------------------------
+// Exposed methods
+// ---------------------------------------------------------------------------
+defineExpose({
+	expandAll: () => {
+		chart.value?.expandAll();
+		chart.value?.fit();
+	},
+	collapseAll: () => {
+		chart.value?.collapseAll();
+		chart.value?.fit();
+	},
+	fit: () => chart.value?.fit(),
+	exportSvg: () => chart.value?.exportSvg(),
+	exportImg: (opts?: Parameters<OrgChart['exportImg']>[0]) => chart.value?.exportImg(opts),
+	setCompact: (val: boolean) => chart.value?.compact(val).render(),
+	setExpanded: (id: string | number, flag?: boolean) => chart.value?.setExpanded(id, flag),
+	setCentered: (id: string | number) => chart.value?.setCentered(id),
+	setHighlighted: (id: string | number) => chart.value?.setHighlighted(id),
+	clearHighlighting: () => chart.value?.clearHighlighting(),
+	addNode: (node: OrgChartNodeData) => chart.value?.addNode(node),
+	removeNode: (id: string | number) => chart.value?.removeNode(id),
+	chartInstance: chart,
+});
+</script>
+
+<template>
+	<div class="flex h-screen w-full flex-col bg-slate-50">
+		<!-- Toolbar -->
+		<TooltipProvider>
+			<div class="shrink-0 border-b border-gray-200 bg-white px-5 py-3">
+				<p class="text-base font-medium text-gray-800">Organization Chart</p>
+
+				<div class="mt-2 flex items-center gap-4">
+					<!-- Search -->
+					<div class="w-full max-w-xs transition-all duration-300 ease-in-out focus-within:max-w-full">
+						<DynectInput v-model="filterSearch" size="sm" placeholder="Search employee..." @update:model-value="filterChart">
+							<template #leading>
+								<Icon name="lucide:search" />
+							</template>
+						</DynectInput>
+					</div>
+					<div class="ml-auto flex shrink-0 items-center gap-2">
+						<!-- Tree actions -->
+						<div class="flex items-center gap-1 divide-x divide-gray-200">
+							<Tooltip
+								v-for="btn in [
+									{
+										icon: 'lucide:unfold-vertical',
+										title: 'Expand All',
+										desc: 'Expand all nodes',
+										action: () => {
+											chart?.expandAll();
+											chart?.fit();
+										},
+									},
+									{
+										icon: 'lucide:fold-vertical',
+										title: 'Collapse All',
+										desc: 'Collapse all nodes',
+										action: () => {
+											chart?.collapseAll();
+											chart?.fit();
+										},
+									},
+									{ icon: 'lucide:scan', title: 'Fit to Screen', desc: 'Fit chart to viewport', action: () => chart?.fit() },
+								]"
+								:key="btn.title"
+							>
+								<TooltipTrigger as-child>
+									<DynectButton :icon-only="true" color="tertiary" size="sm" @click="btn.action()">
+										<Icon :name="btn.icon" class="h-4 w-4" />
+									</DynectButton>
+								</TooltipTrigger>
+								<TooltipContent side="bottom">
+									<p class="font-semibold">{{ btn.title }}</p>
+									<p class="text-xs opacity-75">{{ btn.desc }}</p>
+								</TooltipContent>
+							</Tooltip>
+						</div>
+
+						<!-- Compact toggle -->
+						<div class="flex items-center gap-1 divide-x divide-gray-200">
+							<Tooltip
+								v-for="btn in [
+									{ icon: 'lucide:columns-2', title: 'Column View', desc: 'Group siblings into compact columns', value: true },
+									{ icon: 'lucide:git-branch', title: 'Tree View', desc: 'Classic one-node-per-row tree', value: false },
+								]"
+								:key="btn.title"
+							>
+								<TooltipTrigger as-child>
+									<DynectButton :icon-only="true" size="sm" :color="isCompact === btn.value ? 'brand' : 'tertiary'" @click="setCompact(btn.value)">
+										<Icon :name="btn.icon" class="h-4 w-4" />
+									</DynectButton>
+								</TooltipTrigger>
+								<TooltipContent side="bottom">
+									<p class="font-semibold">{{ btn.title }}</p>
+									<p class="text-xs opacity-75">{{ btn.desc }}</p>
+								</TooltipContent>
+							</Tooltip>
+						</div>
+
+						<!-- Layout direction -->
+						<div class="flex items-center gap-1 divide-x divide-gray-200">
+							<Tooltip
+								v-for="btn in [
+									{ icon: 'lucide:arrow-up-to-line', title: 'Top', desc: 'Root at top, branches downward', value: 'top' as const },
+									{ icon: 'lucide:arrow-right-to-line', title: 'Right', desc: 'Root at left, branches rightward', value: 'right' as const },
+									{ icon: 'lucide:arrow-down-to-line', title: 'Bottom', desc: 'Root at bottom, branches upward', value: 'bottom' as const },
+									{ icon: 'lucide:arrow-left-to-line', title: 'Left', desc: 'Root at right, branches leftward', value: 'left' as const },
+								]"
+								:key="btn.title"
+							>
+								<TooltipTrigger as-child>
+									<DynectButton :icon-only="true" size="sm" :color="currentLayout === btn.value ? 'brand' : 'tertiary'" @click="setLayout(btn.value)">
+										<Icon :name="btn.icon" class="h-4 w-4" />
+									</DynectButton>
+								</TooltipTrigger>
+								<TooltipContent side="bottom">
+									<p class="font-semibold">{{ btn.title }}</p>
+									<p class="text-xs opacity-75">{{ btn.desc }}</p>
+								</TooltipContent>
+							</Tooltip>
+						</div>
+
+						<!-- Zoom -->
+						<div class="flex items-center gap-1 divide-x divide-gray-200">
+							<Tooltip
+								v-for="btn in [
+									{ icon: 'lucide:zoom-in', title: 'Zoom In', desc: 'Zoom into chart', action: () => chart?.zoomIn() },
+									{ icon: 'lucide:zoom-out', title: 'Zoom Out', desc: 'Zoom out of chart', action: () => chart?.zoomOut() },
+								]"
+								:key="btn.title"
+							>
+								<TooltipTrigger as-child>
+									<DynectButton :icon-only="true" size="sm" color="tertiary" @click="btn.action()">
+										<Icon :name="btn.icon" class="h-4 w-4" />
+									</DynectButton>
+								</TooltipTrigger>
+								<TooltipContent side="bottom">
+									<p class="font-semibold">{{ btn.title }}</p>
+									<p class="text-xs opacity-75">{{ btn.desc }}</p>
+								</TooltipContent>
+							</Tooltip>
+						</div>
+					</div>
+				</div>
+			</div>
+		</TooltipProvider>
+		<div v-if="!loading" ref="chartRef" class="flex-1 overflow-hidden" />
+		<div v-else class="flex h-full w-full flex-col items-center justify-center gap-2">
+			<Icon name="lucide:loader-circle" class="size-8 animate-spin" />
+			<p class="ml-2">Loading organization chart, please wait…</p>
+		</div>
+	</div>
+</template>