eewing
09487bbede
- Integrated svelte-sonner for toast notifications in the layout. - Implemented server-side search for employees with pagination in the API. - Updated employee loading logic to support search queries and loading more results. - Enhanced employee detail view with navigation and improved UI interactions. - Adjusted cookie handling in hooks for PocketBase authentication.
HRM
Svelte 5 + shadcn-svelte + PocketBase, using Bun.
Stack
- Svelte 5 (SvelteKit) with TypeScript
- Tailwind CSS v4 via
@tailwindcss/vite - shadcn-svelte (new-york style, slate base)
- PocketBase — client and server connector for
https://pocketbase.ccllc.pro
Develop
bun install
bun run dev
Open http://localhost:5173. Use bun run dev -- --open to open automatically.
Build
bun run build
bun run preview # preview production build
PocketBase
- Client: use the shared client in
$lib/pocketbase(e.g.import { pb } from '$lib/pocketbase') for browser-side API calls and auth. - Server: use
event.locals.pbinloadfunctions, form actions, and API routes. Auth is restored from thepb_authcookie and refreshed insrc/hooks.server.ts.
To change the PocketBase URL or auth collection, edit:
src/lib/pocketbase.ts— client base URLsrc/hooks.server.ts— server base URL andusersauth collection name if different
shadcn-svelte
Add components with:
bunx shadcn-svelte@latest add <component>
Example: bunx shadcn-svelte@latest add card input label
Config: components.json. Global styles and theme: src/routes/app.css.
Project layout
src/lib/components/ui/— shadcn-svelte componentssrc/lib/pocketbase.ts— PocketBase client (browser)src/lib/utils.ts—cn()and shared typessrc/hooks.server.ts— PocketBase per-request instance and cookie auth