@alliance-droid/status-feedback-system 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@alliance-droid/status-feedback-system",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"type": "module",
 	"description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
 	"svelte": "./dist/index.js",
@@ -9,14 +9,6 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
-		},
-		"./server": {
-			"types": "./dist/server/index.d.ts",
-			"default": "./dist/server/index.js"
-		},
-		"./admin": {
-			"types": "./dist/components/admin/index.d.ts",
-			"svelte": "./dist/components/admin/index.js"
 		}
 	},
 	"files": [
@@ -37,9 +29,7 @@
 		"svelte": "^5.0.0"
 	},
 	"dependencies": {
-		"@alliance-droid/svelte-component-library": "^0.1.27",
-		"mssql": "^11.0.0",
-		"nanoid": "^5.0.0"
+		"@alliance-droid/svelte-component-library": "^0.1.27"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^7.0.0",
@@ -47,7 +37,6 @@
 		"@sveltejs/package": "^2.3.0",
 		"@sveltejs/vite-plugin-svelte": "^6.0.0",
 		"@tailwindcss/vite": "^4.1.0",
-		"@types/mssql": "^9.1.0",
 		"publint": "^0.3.0",
 		"svelte": "^5.48.0",
 		"svelte-check": "^4.3.0",

package/dist/components/admin/AdminDashboard.svelte

@@ -1,274 +0,0 @@
-<script lang="ts">
-	import type { Project, System, Incident, Feedback, FeedbackStatus, SystemStatus, IncidentStatus, IncidentSeverity } from '../../types.js';
-	import ProjectList from './ProjectList.svelte';
-	import ProjectForm from './ProjectForm.svelte';
-	import ApiKeyManager from './ApiKeyManager.svelte';
-	import SystemManager from './SystemManager.svelte';
-	import StatusControl from './StatusControl.svelte';
-	import IncidentManager from './IncidentManager.svelte';
-	import IncidentForm from './IncidentForm.svelte';
-	import FeedbackList from './FeedbackList.svelte';
-
-	interface Props {
-		projects: Project[];
-		apiEndpoint: string;
-		onRefresh?: () => Promise<void>;
-	}
-
-	let { projects, apiEndpoint, onRefresh }: Props = $props();
-
-	type Tab = 'overview' | 'systems' | 'incidents' | 'feedback';
-
-	let selectedProject = $state<Project | null>(null);
-	let activeTab = $state<Tab>('overview');
-	let showProjectForm = $state(false);
-	let showIncidentForm = $state(false);
-
-	// Data for selected project
-	let systems = $state<System[]>([]);
-	let incidents = $state<Incident[]>([]);
-	let feedbackItems = $state<Feedback[]>([]);
-	let feedbackTotal = $state(0);
-	let feedbackPage = $state(1);
-	let feedbackFilterStatus = $state<FeedbackStatus | ''>('');
-	let loading = $state(false);
-
-	const tabs: { id: Tab; label: string; icon: string }[] = [
-		{ id: 'overview', label: 'Overview', icon: 'fa-gauge' },
-		{ id: 'systems', label: 'Systems', icon: 'fa-server' },
-		{ id: 'incidents', label: 'Incidents', icon: 'fa-triangle-exclamation' },
-		{ id: 'feedback', label: 'Feedback', icon: 'fa-comment' },
-	];
-
-	// ── API Helpers ──
-
-	async function apiCall(path: string, options: RequestInit = {}) {
-		if (!selectedProject) throw new Error('No project selected');
-		const res = await fetch(`${apiEndpoint}/${path}`, {
-			...options,
-			headers: {
-				'Content-Type': 'application/json',
-				'x-api-key': selectedProject.apiKey,
-				...options.headers,
-			},
-		});
-		const data = await res.json();
-		if (!data.success) throw new Error(data.error || 'API error');
-		return data.data;
-	}
-
-	async function loadProjectData() {
-		if (!selectedProject) return;
-		loading = true;
-		try {
-			systems = await apiCall('systems');
-			incidents = await apiCall('incidents?limit=50&includeResolved=true');
-			await loadFeedback();
-		} catch (err) {
-			console.error('Failed to load project data:', err);
-		} finally {
-			loading = false;
-		}
-	}
-
-	async function loadFeedback() {
-		const params = new URLSearchParams({
-			limit: '20',
-			offset: String((feedbackPage - 1) * 20),
-		});
-		if (feedbackFilterStatus) params.set('status', feedbackFilterStatus);
-		const result = await apiCall(`feedback?${params}`);
-		feedbackItems = result.items;
-		feedbackTotal = result.total;
-	}
-
-	function selectProject(project: Project) {
-		selectedProject = project;
-		activeTab = 'overview';
-		loadProjectData();
-	}
-
-	// ── Handlers ──
-
-	async function handleCreateProject(data: { name: string; description: string; allowedOrigins: string[] }) {
-		// This needs the consuming app to provide a server action
-		// For now, emit to onRefresh
-		showProjectForm = false;
-		await onRefresh?.();
-	}
-
-	async function handleAddSystem(data: { name: string; description: string }) {
-		// Systems are managed via the API route handlers
-		await apiCall('systems', {
-			method: 'POST',
-			body: JSON.stringify(data),
-		}).catch(() => {
-			// Fallback: reload from server
-		});
-		await loadProjectData();
-	}
-
-	async function handleUpdateStatus(systemId: string, status: SystemStatus) {
-		await apiCall(`systems/${systemId}/status`, {
-			method: 'PATCH',
-			body: JSON.stringify({ status }),
-		});
-		systems = systems.map((s) => (s.id === systemId ? { ...s, status } : s));
-	}
-
-	async function handleDeleteSystem(systemId: string) {
-		await apiCall(`systems/${systemId}`, { method: 'DELETE' }).catch(() => {});
-		await loadProjectData();
-	}
-
-	async function handleCreateIncident(data: { title: string; severity: IncidentSeverity; affectedSystems: string[]; message: string }) {
-		await apiCall('incidents', {
-			method: 'POST',
-			body: JSON.stringify(data),
-		}).catch(() => {});
-		showIncidentForm = false;
-		await loadProjectData();
-	}
-
-	async function handleAddIncidentUpdate(incidentId: string, data: { status: IncidentStatus; message: string }) {
-		await apiCall(`incidents/${incidentId}/updates`, {
-			method: 'POST',
-			body: JSON.stringify(data),
-		}).catch(() => {});
-		await loadProjectData();
-	}
-
-	async function handleDeleteIncident(incidentId: string) {
-		await apiCall(`incidents/${incidentId}`, { method: 'DELETE' }).catch(() => {});
-		await loadProjectData();
-	}
-
-	async function handleFeedbackStatusChange(feedbackId: string, status: FeedbackStatus) {
-		await apiCall(`feedback/${feedbackId}/status`, {
-			method: 'PATCH',
-			body: JSON.stringify({ status }),
-		});
-		feedbackItems = feedbackItems.map((f) => (f.id === feedbackId ? { ...f, status } : f));
-	}
-
-	async function handleDeleteFeedback(feedbackId: string) {
-		if (!confirm('Delete this feedback?')) return;
-		await apiCall(`feedback/${feedbackId}`, { method: 'DELETE' }).catch(() => {});
-		await loadFeedback();
-	}
-</script>
-
-<div class="flex min-h-screen">
-	<!-- Sidebar -->
-	<div class="w-64 border-r border-border bg-background p-4">
-		<ProjectList
-			{projects}
-			selectedId={selectedProject?.id}
-			onSelect={selectProject}
-			onCreate={() => (showProjectForm = true)}
-		/>
-	</div>
-
-	<!-- Main Content -->
-	<div class="flex-1 p-6">
-		{#if showProjectForm}
-			<div class="mx-auto max-w-lg">
-				<ProjectForm
-					onSave={handleCreateProject}
-					onCancel={() => (showProjectForm = false)}
-				/>
-			</div>
-		{:else if !selectedProject}
-			<div class="flex h-full items-center justify-center">
-				<div class="text-center">
-					<i class="fa-solid fa-arrow-left mb-2 text-2xl text-foreground-tertiary"></i>
-					<p class="text-foreground-secondary">Select a project to manage</p>
-				</div>
-			</div>
-		{:else}
-			<!-- Project Header -->
-			<div class="mb-6">
-				<h2 class="text-xl font-semibold text-foreground">{selectedProject.name}</h2>
-				{#if selectedProject.description}
-					<p class="mt-1 text-sm text-foreground-tertiary">{selectedProject.description}</p>
-				{/if}
-			</div>
-
-			<!-- API Key -->
-			<div class="mb-6">
-				<ApiKeyManager apiKey={selectedProject.apiKey} />
-			</div>
-
-			<!-- Tabs -->
-			<div class="mb-6 flex gap-1 border-b border-border">
-				{#each tabs as tab}
-					<button
-						onclick={() => (activeTab = tab.id)}
-						class="border-b-2 px-4 py-2 text-sm font-semibold transition-colors {activeTab === tab.id
-							? 'border-primary text-primary'
-							: 'border-transparent text-foreground-tertiary hover:text-foreground-secondary'}"
-					>
-						<i class="fa-solid {tab.icon} mr-1.5"></i>
-						{tab.label}
-					</button>
-				{/each}
-			</div>
-
-			{#if loading}
-				<div class="flex items-center justify-center py-12">
-					<i class="fa-solid fa-spinner fa-spin text-xl text-foreground-tertiary"></i>
-				</div>
-			{:else if activeTab === 'overview'}
-				<div class="space-y-6">
-					<StatusControl {systems} onUpdateStatus={handleUpdateStatus} />
-					<IncidentManager
-						incidents={incidents.filter((i) => i.status !== 'resolved').slice(0, 5)}
-						onAddUpdate={handleAddIncidentUpdate}
-						onDelete={handleDeleteIncident}
-						onCreate={() => (showIncidentForm = true)}
-					/>
-				</div>
-			{:else if activeTab === 'systems'}
-				<SystemManager
-					{systems}
-					onAdd={handleAddSystem}
-					onUpdateStatus={handleUpdateStatus}
-					onDelete={handleDeleteSystem}
-				/>
-			{:else if activeTab === 'incidents'}
-				{#if showIncidentForm}
-					<IncidentForm
-						{systems}
-						onSave={handleCreateIncident}
-						onCancel={() => (showIncidentForm = false)}
-					/>
-				{:else}
-					<IncidentManager
-						{incidents}
-						onAddUpdate={handleAddIncidentUpdate}
-						onDelete={handleDeleteIncident}
-						onCreate={() => (showIncidentForm = true)}
-					/>
-				{/if}
-			{:else if activeTab === 'feedback'}
-				<FeedbackList
-					items={feedbackItems}
-					total={feedbackTotal}
-					page={feedbackPage}
-					onStatusChange={handleFeedbackStatusChange}
-					onDelete={handleDeleteFeedback}
-					filterStatus={feedbackFilterStatus || undefined}
-					onFilterStatus={(s) => {
-						feedbackFilterStatus = s;
-						feedbackPage = 1;
-						loadFeedback();
-					}}
-					onPageChange={(p) => {
-						feedbackPage = p;
-						loadFeedback();
-					}}
-				/>
-			{/if}
-		{/if}
-	</div>
-</div>

package/dist/components/admin/AdminDashboard.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { Project } from '../../types.js';
-interface Props {
-    projects: Project[];
-    apiEndpoint: string;
-    onRefresh?: () => Promise<void>;
-}
-declare const AdminDashboard: import("svelte").Component<Props, {}, "">;
-type AdminDashboard = ReturnType<typeof AdminDashboard>;
-export default AdminDashboard;

package/dist/components/admin/ApiKeyManager.svelte

@@ -1,68 +0,0 @@
-<script lang="ts">
-	interface Props {
-		apiKey: string;
-		onRegenerate?: () => Promise<void>;
-	}
-
-	let { apiKey, onRegenerate }: Props = $props();
-
-	let revealed = $state(false);
-	let copied = $state(false);
-	let regenerating = $state(false);
-
-	let maskedKey = $derived(
-		revealed ? apiKey : apiKey.slice(0, 6) + '•'.repeat(Math.max(0, apiKey.length - 10)) + apiKey.slice(-4)
-	);
-
-	async function copyKey() {
-		await navigator.clipboard.writeText(apiKey);
-		copied = true;
-		setTimeout(() => (copied = false), 2000);
-	}
-
-	async function handleRegenerate() {
-		if (!confirm('Regenerate API key? The old key will stop working immediately.')) return;
-		regenerating = true;
-		try {
-			await onRegenerate?.();
-		} finally {
-			regenerating = false;
-		}
-	}
-</script>
-
-<div class="rounded-lg border border-border bg-surface p-4">
-	<div class="mb-2 flex items-center gap-2">
-		<i class="fa-solid fa-key text-sm text-foreground-tertiary"></i>
-		<span class="text-sm font-semibold text-foreground">API Key</span>
-	</div>
-	<div class="flex items-center gap-2">
-		<code class="flex-1 rounded bg-background px-3 py-2 text-xs text-foreground-secondary">
-			{maskedKey}
-		</code>
-		<button
-			onclick={() => (revealed = !revealed)}
-			class="rounded-md border border-border px-2.5 py-2 text-xs text-foreground-secondary transition-colors hover:bg-surface-hover"
-			aria-label={revealed ? 'Hide API key' : 'Reveal API key'}
-		>
-			<i class="fa-solid {revealed ? 'fa-eye-slash' : 'fa-eye'}"></i>
-		</button>
-		<button
-			onclick={copyKey}
-			class="rounded-md border border-border px-2.5 py-2 text-xs text-foreground-secondary transition-colors hover:bg-surface-hover"
-			aria-label="Copy API key"
-		>
-			<i class="fa-solid {copied ? 'fa-check' : 'fa-copy'}"></i>
-		</button>
-		{#if onRegenerate}
-			<button
-				onclick={handleRegenerate}
-				disabled={regenerating}
-				class="rounded-md border border-border px-2.5 py-2 text-xs text-red-500 transition-colors hover:bg-red-500/10 disabled:opacity-50"
-				aria-label="Regenerate API key"
-			>
-				<i class="fa-solid {regenerating ? 'fa-spinner fa-spin' : 'fa-rotate'}"></i>
-			</button>
-		{/if}
-	</div>
-</div>

package/dist/components/admin/ApiKeyManager.svelte.d.ts

@@ -1,7 +0,0 @@
-interface Props {
-    apiKey: string;
-    onRegenerate?: () => Promise<void>;
-}
-declare const ApiKeyManager: import("svelte").Component<Props, {}, "">;
-type ApiKeyManager = ReturnType<typeof ApiKeyManager>;
-export default ApiKeyManager;

package/dist/components/admin/FeedbackList.svelte

@@ -1,160 +0,0 @@
-<script lang="ts">
-	import type { Feedback, FeedbackStatus } from '../../types.js';
-
-	interface Props {
-		items: Feedback[];
-		total: number;
-		page?: number;
-		pageSize?: number;
-		onStatusChange?: (feedbackId: string, status: FeedbackStatus) => Promise<void>;
-		onDelete?: (feedbackId: string) => Promise<void>;
-		onPageChange?: (page: number) => void;
-		filterCategory?: string;
-		filterStatus?: FeedbackStatus;
-		onFilterCategory?: (category: string) => void;
-		onFilterStatus?: (status: FeedbackStatus | '') => void;
-	}
-
-	let {
-		items,
-		total,
-		page = 1,
-		pageSize = 20,
-		onStatusChange,
-		onDelete,
-		onPageChange,
-		filterCategory,
-		filterStatus,
-		onFilterCategory,
-		onFilterStatus,
-	}: Props = $props();
-
-	let totalPages = $derived(Math.ceil(total / pageSize));
-
-	const statusOptions: FeedbackStatus[] = ['new', 'reviewed', 'resolved', 'archived'];
-	const statusColors: Record<FeedbackStatus, string> = {
-		new: 'text-blue-500 bg-blue-500/10',
-		reviewed: 'text-yellow-500 bg-yellow-500/10',
-		resolved: 'text-green-500 bg-green-500/10',
-		archived: 'text-foreground-tertiary bg-surface-hover',
-	};
-
-	function formatDate(timestamp: number): string {
-		return new Date(timestamp).toLocaleString();
-	}
-
-	function truncate(text: string, max: number): string {
-		return text.length > max ? text.slice(0, max) + '…' : text;
-	}
-</script>
-
-<div class="space-y-4">
-	<div class="flex items-center justify-between">
-		<h3 class="text-base font-semibold text-foreground">
-			<i class="fa-solid fa-comment mr-1.5 text-foreground-tertiary"></i>
-			Feedback
-			<span class="ml-1 text-sm text-foreground-tertiary">({total})</span>
-		</h3>
-	</div>
-
-	<!-- Filters -->
-	<div class="flex flex-wrap gap-2">
-		<button
-			onclick={() => onFilterStatus?.('')}
-			class="rounded-md px-2.5 py-1 text-xs transition-colors {!filterStatus
-				? 'bg-primary text-primary-foreground'
-				: 'border border-border text-foreground-secondary hover:bg-surface-hover'}"
-		>
-			All
-		</button>
-		{#each statusOptions as s}
-			<button
-				onclick={() => onFilterStatus?.(s)}
-				class="rounded-md px-2.5 py-1 text-xs capitalize transition-colors {filterStatus === s
-					? 'bg-primary text-primary-foreground'
-					: 'border border-border text-foreground-secondary hover:bg-surface-hover'}"
-			>
-				{s}
-			</button>
-		{/each}
-	</div>
-
-	<!-- Items -->
-	{#if items.length === 0}
-		<div class="rounded-lg border border-border bg-surface p-6 text-center">
-			<p class="text-sm text-foreground-secondary">No feedback found</p>
-		</div>
-	{:else}
-		<div class="space-y-2">
-			{#each items as fb}
-				<div class="rounded-lg border border-border bg-surface p-3">
-					<div class="flex items-start justify-between gap-2">
-						<div class="flex-1">
-							<div class="flex items-center gap-2 mb-1">
-								{#if fb.category}
-									<span class="rounded bg-surface-hover px-1.5 py-0.5 text-xs text-foreground-secondary">
-										{fb.category}
-									</span>
-								{/if}
-								<span class="rounded px-1.5 py-0.5 text-xs capitalize {statusColors[fb.status]}">
-									{fb.status}
-								</span>
-								<span class="text-xs text-foreground-tertiary">{formatDate(fb.createdAt)}</span>
-							</div>
-							<p class="text-sm text-foreground">{truncate(fb.message, 200)}</p>
-							{#if fb.email}
-								<p class="mt-1 text-xs text-foreground-tertiary">
-									<i class="fa-solid fa-envelope mr-1"></i>
-									{fb.email}
-								</p>
-							{/if}
-						</div>
-						<div class="flex items-center gap-1">
-							<select
-								value={fb.status}
-								onchange={(e) => onStatusChange?.(fb.id, (e.target as HTMLSelectElement).value as FeedbackStatus)}
-								class="rounded border border-border bg-background px-2 py-1 text-xs text-foreground"
-							>
-								{#each statusOptions as s}
-									<option value={s}>{s}</option>
-								{/each}
-							</select>
-							<button
-								onclick={() => onDelete?.(fb.id)}
-								class="rounded p-1 text-xs text-foreground-tertiary transition-colors hover:text-red-500"
-								aria-label="Delete feedback"
-							>
-								<i class="fa-solid fa-trash"></i>
-							</button>
-						</div>
-					</div>
-				</div>
-			{/each}
-		</div>
-	{/if}
-
-	<!-- Pagination -->
-	{#if totalPages > 1}
-		<div class="flex items-center justify-center gap-2">
-			<button
-				onclick={() => onPageChange?.(page - 1)}
-				disabled={page <= 1}
-				class="rounded-md border border-border px-3 py-1.5 text-xs text-foreground-secondary disabled:opacity-50"
-				aria-label="Previous page"
-			>
-				<i class="fa-solid fa-chevron-left"></i>
-			</button>
-			<span class="text-xs text-foreground-tertiary">
-				Page {page} of {totalPages}
-			</span>
-			<button
-				onclick={() => onPageChange?.(page + 1)}
-				disabled={page >= totalPages}
-				class="rounded-md border border-border px-3 py-1.5 text-xs text-foreground-secondary disabled:opacity-50"
-				aria-label="Next page"
-			>
-				<i class="fa-solid fa-chevron-right"></i>
-			</button>
-		</div>
-	{/if}
-</div>

package/dist/components/admin/FeedbackList.svelte.d.ts

@@ -1,17 +0,0 @@
-import type { Feedback, FeedbackStatus } from '../../types.js';
-interface Props {
-    items: Feedback[];
-    total: number;
-    page?: number;
-    pageSize?: number;
-    onStatusChange?: (feedbackId: string, status: FeedbackStatus) => Promise<void>;
-    onDelete?: (feedbackId: string) => Promise<void>;
-    onPageChange?: (page: number) => void;
-    filterCategory?: string;
-    filterStatus?: FeedbackStatus;
-    onFilterCategory?: (category: string) => void;
-    onFilterStatus?: (status: FeedbackStatus | '') => void;
-}
-declare const FeedbackList: import("svelte").Component<Props, {}, "">;
-type FeedbackList = ReturnType<typeof FeedbackList>;
-export default FeedbackList;